Game juice pass

Game juice pass

Juice is feedback: the game answering every player action with motion, light, and sound. Done well it turns a correct game into a fun one. Done badly it is noise. This kit adds it in a fixed order, to the moments that matter, with every effect tunable and switchable.

The snippets in references/juice-snippets.js are plain canvas JavaScript with no dependencies. Read that file before editing the game, and copy only what is needed.

Inputs

1. The game files, usually game/index.html or src/. Ask if there are several candidates.
2. The feel they want in a word or two: punchy, floaty, cozy, chaotic. Default: punchy but readable.
3. Sound: on or off by default? Default: on, with a mute key (M) and a tap target.

Steps

1. Read the game and list its key moments in a table: the player action or event, where it happens in code, and current feedback (usually none). Typical moments: start, jump or move, pickup, hit, near miss, combo, death, new best.
2. Pick at most 6 moments and show the plan before editing: moment, effects, strength. Biggest feedback goes to the rarest, most important events (death, new best). Frequent events (every step) get the smallest.

3. Add effects in this order, checking the game still runs after each:

   1. Easing on anything that moves on its own (menus, popups, camera).
   2. Squash and stretch on the player for jump and land.
   3. Particles on pickup and hit.
   4. Score popups on points.
   5. Screen shake on big impacts only (trauma model, not random each frame).
   6. Hit stop of 0.03 to 0.08 seconds on the hardest hits.
   7. Flash on damage.
   8. Sound: one blip per key moment, created after the first user input.
4. Put every number in a JUICE config object next to the game's existing config, with a comment per value. Add JUICE.enabled and respect prefers-reduced-motion by scaling shake and flashes down.
5. Keep the simulation honest: effects must not change hitboxes, scoring, or timing, except hit stop, which pauses the update step while drawing continues. Use dt for every effect.
6. Report with the table below and suggest the user plays 2 minutes with JUICE.enabled true and then false to feel the difference.

Output

| Moment | Before | Added | Tune with |
| ------ | ------ | ----- | --------- |
| Pickup | score +1 | particles, popup "+1", blip | JUICE.pickupParticles |
| Hit | game over | shake 0.6, hit stop 0.06 s, flash, low blip | JUICE.shake, JUICE.hitStop |
| Land | nothing | squash 0.25 | JUICE.squash |

Toggle: JUICE.enabled. Reduced motion: shake max 3 px, no flashes. Mute: M key.

Guardrails

• Never add external libraries, image files, or audio files. Everything stays in code so a single-file game stays one file.
• Change feel, not rules. If a fix needs a gameplay change (hitbox, speed), propose it separately.
• No flashing faster than 3 times per second, and keep full-screen flashes below 0.4 opacity, to stay safe for photosensitive players.
• Audio starts only after a user gesture and always has a mute.
• Edit only the game files listed in Inputs. Show the plan from step 2 and wait for a yes before editing.

Game juice pass

Makes a game that works feel good to play. Claude finds the key moments in your game (pickup, hit, jump, death, new best) and adds screen shake, hit stop, particles, squash and stretch, easing, score popups, flashes, and tiny sound effects, each behind one tunable JUICE config.

Who it is for: anyone with a playable HTML5 canvas game (from a jam, a tutorial, or the browser-game-starter kit) that feels flat.

Example

You say:

My dodge game works but feels dead. Add some juice.

Claude shows a plan first, then edits the game and reports:

There is one JUICE.enabled switch to compare before and after, a mute key, and reduced-motion support.

What it can access

• Reads and edits your game files in game/, src/, or index.html.
• Ships references/juice-snippets.js, plain canvas JavaScript with no dependencies.
• No scripts to run, no network, no env vars. Works in Claude Code, Codex, and Cursor.

Setup

None.