Critical Hit Juice

About this style

Game feel, often called juice, is the craft of making actions feel powerful through feedback layered on top of the mechanics: hit-stop, where the action freezes for a few frames on impact, screen shake, squash and stretch, sparks and numbers that pop. Fighting and action games have used hit-stop since the arcade era, and Steve Swink's book Game Feel and the talk "Juice it or lose it" by Martin Jonasson and Petri Purho helped name the craft for a wider audience. Floating damage numbers and combo counters, common in action and role-playing games, report every hit in big, bouncy type. Indie and mobile studios now treat this layer as a core part of design.

Make a 10-second game-feel showcase: a stylized fighter lands a combo on a training dummy with hit-stop, popping damage numbers, a climbing combo meter, sparks and gentle screen shake, ending on a charged CRITICAL.

<inputs>
If I don't give you something, use the default and don't ask.
- HUD label: "TRAINING · DUMMY 01"
- Hits (move, damage): jab 48 · jab 52 · hook 126 · uppercut 188 · spin kick 342 · charged punch 1,284. Total 2,040 over 6 hits.
- Combo chips: "GREAT!" at 5 hits; the final word "CRITICAL!"
- Summary: "COMBO 6 · 2,040 DMG"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright, flat, cel-shaded game screen built to show game feel: two chunky characters with heavy ink lines and three-tone shading on a graphic pistachio arena, where every hit is sold by timing (anticipation, a freeze on contact, a snap of follow-through) and by layered feedback (sparks, squash, shake, numbers, meter). It should feel crunchy and joyful, never violent.
- Palette: arena pistachio #B9E07A with slowly turning rays #A6D162 and a soft disk #C8EA92 behind the action; mat #8DBF4E with a lighter ring #A3CF62 and a grape edge line; contact shadows grape #3A1C5A at 25%; the fighter's gi grape #5A2A82 (shadow #3E1A5E, highlight #7C4AA8) with cream trim #FFF4DE, coral gloves and headband #FF6B5B (shadow #D94A44), skin #F2B58C with shadow #D58E6A; the dummy oatmeal canvas #E8D3A8 (shadow #CDB384) with patches #D9A35F, rope bands #8A5A33, straw #F2CF6A, a spring and base in #3B3550; sparks cream #FFF4DE with butter cores #FFD84A; damage numbers cream with grape outlines; CRITICAL coral #FF4F5E with a butter band; ink #24122F. Grape against pistachio is the clash that makes everything pop; coral and butter are the hits.
- Stage: the mat's front edge at y 880; the fighter at the left (feet around x 520–700), the dummy at the right on its base at x 1260. Rays turn behind them at 2°/s; during the charge and the critical, grape speed lines (2–6px, 20%) radiate from the point of impact.
- The fighter (original), drawn in Canvas 2D from a 2D skeleton of named joints, each part a closed Bézier shape around its bone with three cel tones (base, a shadow cut by a hard terminator away from a key light at the upper left, a hard highlight) and an ink outline 5–8px that swells at joints: about 560px tall in guard, four and a half heads tall; a round head with a short spiky fringe, determined angular brows, eyes as ink shapes with one cream glint each, a small mouth; a coral headband whose two long tails stream behind; a grape gi top with cream trim and rolled sleeves, a cream sash with two tails, baggy grape trousers gathered at the ankle, cloth-wrapped feet; oversized coral gloves with a cream cuff. The headband tails and sash tails are spring chains precomputed once at load at a fixed 1/240 s step from the body's motion, so they whip on every strike and swing through every freeze.
- The dummy (original): a canvas sack body 300px tall with stitched patches, two rope bands and straw tufts poking out at the neck, a round stuffed head with two button eyes and a stitched smile, mounted on a thick coil spring (eight drawn coils that compress and bend) on a weighted disk base. It reacts like a spring: each hit squashes it along the hit (up to scaleX 1.15, scaleY 0.9 for 0.06 s) and bends it about its base by an angle that follows a damped spring (closed form, damping ratio 0.25, natural frequency 3 Hz), so it wobbles back and forth and settles.
- Moves, keyed poses with snappy holds and 2–3 frame anticipations: guard (bouncing on the toes at 2 Hz, 8px); jab (lead glove extends, 0.08 s out, 0.12 s back); a second jab; hook (a turn of the hips, the rear glove sweeping round in a curved smear shape); uppercut (a dip, then a rising glove with a vertical smear, heels lifting); spin kick (a full 360° turn with the rear leg extended at the end, the gi flaring); charge (step back, low crouch, rear glove drawn back at the hip); dash (0.1 s, two grape afterimages at 40% and 20%); the charged punch with a long straight smear; follow-through; a victory pose (glove raised, a small hop). Smears are drawn as stretched, tapered copies of the moving glove or foot along its path on the frames of fastest motion.
- Hit-stop, the core of the style: at each contact the characters and the dummy freeze on the impact pose for 0.05, 0.05, 0.08, 0.10, 0.12 and 0.30 s, while sparks, shake and numbers keep playing; the action resumes with the dummy's reaction already under way. Model it as a game clock g(t) that pauses during each freeze; every pose, spring and chain reads g.
- Sparks, per hit: a flat star burst at the contact point (8 alternating long and short spikes, cream with a butter core, sized by the hit: 90px for a jab to 260px for the kick) that scales 0.6 to 1.2 in 0.12 s and fades; an impact ring that expands and thins; 10–24 cream and butter streaks on closed-form ballistic paths with drag; on the kick, a puff of straw. The critical: a 16-spike burst 640px across, two rings, 80 streaks, four patches and straw tufts flung out to fall and settle on the mat, and a dust ring rolling along the mat.
- Screen shake, gentle: each hit offsets the whole stage along the hit direction plus smooth seeded noise, 3, 3, 6, 8 and 10px for the combo and 18px for the critical, decaying to zero over 0.25 s (0.5 s for the critical), rotation at most 0.6°. Never more than one shake per hit.
- The impact frame, once: at the critical's contact, for 0.1 s the arena turns flat grape #3A1C5A and both characters render as flat cream silhouettes with coral outlines, then everything returns. It is the only such frame in the piece, and the dummy's hit tint elsewhere is a cream overlay of at most 40% for 0.05 s.
- Damage numbers: in Lilita One 400 at 56, 56, 72, 84 and 104px (220px for the critical), cream with a 6px grape outline and a 4px butter offset shadow (the critical in butter with an 8px coral outline inside a 4px grape outer edge); each pops from scale 0 to 1.3 to 1.0 in 0.18 s, rises 80px on a slight arc away from the fighter, holds 0.6 s and fades over 0.3 s. The critical's number stays.
- Combo meter, top right at x 1440–1800, y 120–320: the count in Lilita One 400, 160px, cream with a grape outline, "HITS" beside it in Bai Jamjuree 700, 32px; each increment bounces the numeral (scale 1.25 to 1.0 on a damped spring) and tilts it ±4°, alternating; a 300 × 14 timer bar beneath drains between hits and refills on each; the GREAT! chip (butter on grape, Bai Jamjuree 700, 26px) slaps on at 5 hits. Top left at (120, 110): "TRAINING · DUMMY 01" in Bai Jamjuree 700, 22px, tracked 0.1em, grape, over "DMG" and a total that rolls up with each hit to 2,040, in Lilita One 48px.
- The charge: motes (120 butter and cream dots) spiral in onto the drawn-back glove along closed-form paths, glow rings pulse round it twice a second, a charge bar under the fighter fills to MAX, a 2px rumble runs, and the view zooms 1.0 to 1.06 toward the space between the two.
- CRITICAL!: nine glyphs in Titan One 400, 180px, set on a gentle upward arc centered at (960, 230), coral with a butter band across their upper third, a 10px grape outline and a 10px hard grape drop shadow; each slams in from scale 2.0 and +20° rotation to 1.0 in 0.1 s, 50 ms apart, with a small squash on landing, and the whole word breathes ±1.5% at 1 Hz until 8.6 s, then rests. The critical's 1,284 sits beneath it at (960, 420).
- Premium: timing that sells every hit (anticipation, a freeze, a snap), a dummy that wobbles like a real spring, sparks and numbers sized by damage, a combo meter with bounce, shake that is felt but never nauseating, and one earned impact frame. Cheap: characters sliding across, constant-speed tweens, white flashes on every hit, numbers that just fade in, a screen that never stops shaking.
- Banned: blood, injury or a human opponent, real games, characters, logos or fonts, white or full-screen flashes (only the one grape impact frame), more than one shake per hit, gradients on the characters, 3D rendering, photo textures, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the arena: the fighter bounces in guard, the dummy sways, headband tails float, the rays turn; the HUD and an empty combo meter rise in.
- 0.8–1.4s: jab (contact 0.90 s, 48) and jab (1.20 s, 52): small freezes, sparks, the dummy squashing and swaying, the meter bouncing to 1 and 2.
- 1.4–2.6s: hook (1.60 s, 126) with a curved smear and a 6px shake; uppercut (2.20 s, 188), the dummy bending far back and boinging, the meter at 4.
- 2.6–3.4s: the spin kick (contact 2.95 s, 342): the gi flares, the biggest combo spark, straw puffs, the meter reaches 5 and GREAT! slaps on.
- 3.4–5.1s: the charge: the fighter steps back and crouches, motes spiral into the glove, rings pulse, the charge bar fills to MAX at 5.0 s, speed lines and the slow zoom build.
- 5.1–5.5s: the dash and the charged punch: contact at 5.20 s, the 0.30 s freeze with the single grape impact frame (5.20–5.30 s), the giant burst and the 18px shake; 1,284 pops; the meter jumps to 6.
- 5.5–6.0s: release: the dummy flies back on its spring with patches and straw flung out; CRITICAL! slams in letter by letter (5.45–5.90 s). The 6.0 s frame is complete: CRITICAL! and 1,284 over the scene, the fighter in follow-through, the dummy whipping upright and clearly readable, the meter at 6.
- 6.0–7.6s: the dummy spins one and a half turns on its post (drawn by squashing its width with the cosine of its spin) while its wobble decays; straw and patches drift down onto the mat; the total rolls to 2,040; the summary chip "COMBO 6 · 2,040 DMG" slides up at the bottom center (6.6 s).
- 7.6–8.6s: the fighter hops into the victory pose, tails fluttering; the dummy settles with a last small boing; the zoom eases back to 1.0.
- 8.6–10.0s: hold: CRITICAL! rests, only the rays turn and the headband tails sway.
For other lengths, add or remove combo hits at about 0.4 s spacing; keep each freeze, the charge at about 1.7 s, the single impact frame and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Keep two clocks: the stage clock t for sparks, shake, numbers and UI, and the game clock g(t) (t minus the freeze time elapsed) for poses, the dummy's spring and the chains. Joint angles are keyed against g with closed-form easing; the dummy's bend is the closed-form damped response to the hit impulses; the spring chains are precomputed at load and read back by g; every spark, streak, mote, straw tuft and patch is a seeded closed-form path. Cache the arena's static layers once at load; redraw the characters, effects and type every frame.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the fighter reads at a glance as a stylized martial artist (headband, gi, sash, gloves) and the dummy as a stuffed training dummy on a coil spring, every contact freezes for its listed time while sparks and numbers keep moving, damage numbers read 48, 52, 126, 188, 342 and 1,284 and the total reaches exactly 2,040, the meter counts 1 to 6, each shake decays and none overlap, the grape impact frame appears exactly once and nothing else flashes, smears stay readable, the 6.0 s frame shows CRITICAL! complete, and nothing important sits within 60px of an edge. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

8-Bit Pixel Art Scene

Made by us

An 8-bit attract screen: a dusk forest scrolls in parallax layers as a tiny lantern-carrying hero walks, hops a log and…

Manga Action Panel

Made by us

A black-and-white manga page read right to left: rooftops, narrowed eyes, a silhouetted courier leaping through focus l…

Comic Book Page

Made by us

A five-panel comic page made the old way: blue pencil roughs, weighted black inks, flat process color with Ben-Day dots…

Rubber Hose Cartoon

Made by us

A black-and-white 1930s cartoon: Tippy, an original teakettle with rubber-hose limbs, white gloves and pie-cut eyes, da…