⚔ Combat Juice — SUPER cut-ins, overkill shake & cinematic polish

Brainstorm mockup · no app code touched — every system below is a suggestion with exact numbers, demoed live. Serve the repo root (python app/serve.py 3000) — file:// + stale cache lies. All effects are synthesized DOM/WebAudio, zero assets, same philosophy as the shipped woody kit. Sound is on for the demos — buttons are the gestures.

1 · SUPER (sure-kill cut-in)2 · Overkill shake ladder3 · Element-reactive hits4 · AEGIS Reforge5 · Check & mate drama6 · Siege clang7 · Idle life8 · Dimension ladder (the three.js decision)

1 · SUPER — the Sure-Kill Seal

Your mobile-game instinct, gated hard: a full-screen character cut-in fires only on committed sure kills. Because combat is deterministic, the client knows the kill before the animation — dmg = max(1, round(ATK × elemMult) − DEF), SUPER iff dmg ≥ hp.

Trigger rules (proposed)

Case (real roster math)dmgvs hpSUPER?
Queen 13⚔ vs Pawn 2❤/2🛡112FIRES
Queen 13⚔ vs Tower 8❤/3🛡108FIRES
Queen 13⚔ vs Legendary Tower 9❤/6🛡79no — bounce
Same tower, fire attacker ×1.5 → round(19.5)=20−6149FIRES — element planning flips it on
King attacks anything (9999⚔ classical pillar)always — Throne Duel finisher
AEGIS victim (e.g. god retinue queens)dies, aura respawnsfires — body death is a kill; the respawn gets its own §4 ceremony

Frequency guard: SUPER only exists on lethal strikes, so it never interrupts quiet chess — most moves still play the shipped glide. Hover before committing shows the anticipation layer (red ☠ reticle = sure kill, gray = bounce), so the cut-in is a payoff, not a surprise tax.

Live demo — click a marked target

attacker element
cut-in speed
direction

The queen on d4 is yours (brass frame). Three targets marked: the pawn and tower are sure kills today; the legendary tower only becomes one when you switch the element to Fire. Hover a target to feel the reticle layer, click to commit.

Direction specs

DirLookMotion (×1)Exit → impactSting (synth)
A · Divine DecreeVertical obsidian banner wipes in from the left, gold edge; glyph emblem on a rotated diamond right; speed-line fan behindbanner clip-wipe 180ms in · hold 300ms · glyph scale 1.15→1.0 with 1-frame judder at 120mswhite flash 70ms → cut to board exactly on impact framenoise riser 250ms → brass-weight thump 130→55Hz + shimmer ring
B · Manga SplashParchment panel rotated −7°, halftone dots, ink burst, huge italic stamp — comic-book killpanel slides up 140ms · stamp slams scale 2.2→1.0 at 160ms with 2-frame hold · halftone scrollsink splash wipe 90ms → impactriser → tighter crack burst (5200Hz transient) + low body
C · Ascension
three.js-grade · approximated here in CSS 3D
Dark stage, rotating god-rays, emblem glyph on a 3D plane with parallax drift, chromatic-aberration titleplane descends translateY −60px→0 with rotateY drift 260ms · rays rotate 360°/1.4s · text chroma split settlesray burst + flash 100ms → impactriser → deepest thump (45Hz sub) + choir-ish stacked fifths shimmer

Timing budget (why this doesn't slow chess down)

80msimpact freeze (hit-stop tease)
560–700mscut-in (dir-dependent)
~340msbump → shatter → settle
≈1.0–1.1stotal ×1 · ≈0.6–0.7s fast mode

Wiring (for the build): trigger computed where targetsFor/playableMove already evaluate resolveHit; sequence splices into animateMove (ui.js ~610) exactly where FX.bump starts today; state still mutates after animation in finishMove — the shipped pattern untouched. A reduce-motion / fast mode toggle ships with it (also honored for spectating).

pick the direction PICKED 2026-09-13: A — Divine Decree. REMOVED 2026-09-14 after live play — user: too much flashing; kills play the standard kit. Kept as history.

2 · Overkill shake — quantified ladder

The satisfying-shake ask, made mechanical. Define the overkill ratio r = dmg ÷ hp and pay out five tiers. The shake is a damped sine on the whole stage (camera feel, not glyph jitter): x(t) = A·e^(−t/τ)·sin(2πf·t + φ) with τ = 90ms, f = 20Hz, fresh random phase per axis per hit (never machine-gunned — same rule as the sound kit). Rotation rides along at 0.35× amplitude.

attacker ATK 20
defender

Try ATK 20 on the Knight (r = 18/5 = 3.6 → SAVAGE), then slide to 40 (r = 8 → ANNIHILATION), then drop to 8 (r = 1.6 → BRUTAL). Neighboring pieces jostle on SAVAGE+.

The ladder (exact values)

Tierr = dmg/hphit-stopshardsboard shaketiltzoomextras
T0 · BOUNCE< 1 (survivor)glyph ±4px / 260ms (current)slash + damage pop (current)
T1 · CLEAN CUT1 – 1.490ms122px / 120msdust ring, 8 motes
T2 · BRUTAL1.5 – 2.9960ms165px / 220ms0.6°ember ring at impact
T3 · SAVAGE3 – 5.99100ms249px / 320ms1.2°1.02shockwave ring 1.4× square · 1 tile crack · neighbors jostle 3px
T4 · ANNIHILATION≥ 6140ms3414px / 420ms + 6px dip2.0°1.03white→element flash 90ms · 5 radial cracks · neighbors 5px · 45Hz sub-thump

Hit-stop = the whole board holds one frozen frame at contact before the payout — the fighting-game trick that makes the release feel heavy. T4's dip drops the stage 6px on Y so the camera "feels weight". SUPER cut-ins stack on top (§1 plays, then the tier pays out).

pick the ladder PICKED 2026-09-13: adopt as printed.

3 · Element-reactive hits

Every hit (bounce and kill) bursts in the attacker's element, so the wheel becomes visible at board distance without touching the locked badge UI. Neutral/none keep today's white slash.

ElementBurst (exact)Decal
🔥 fire12 embers (2.5–4px, orange→red, up-drift, 380ms)scorch mark fading 2s
💧 water10 droplets arcing down 320ms + splash ring 300msnone (wet sheen 600ms)
🌿 grass8 leaf shards spiraling out 420msnone
✨ light8 gold motes rising 400ms + 1 ray flash 120msnone
🌑 dark6 smoke puffs expanding/fading 500msnone
⚪ neutralcurrent crossed slash bars (kept as-is)none

PICKED 2026-09-13, with one refinement: the floating damage number also tints to the attacker's element (fire red, water blue, grass green, light gold, dark purple; neutral keeps the classic red) — try the buttons, the −9 follows now. Wiring: one elemBurst(div, elem) helper in fx.js, called from animateMove right where FX.slash fires today. Particle counts are small enough to stay DOM-cheap (≤12 spans); on the three.js board (§8 D) these become GPU particles.

4 · AEGIS — “The Reforge”

Today a respawn is a text line. Proposal: the kill plays normally, then time reverses for the shards — 12 gold fragments fly inward, flash, and the body reforges on its origin square. The most-owned aura in the game should look like the chase it is.

BeatTiming
1 · kill resolves (existing shatter)~340ms
2 · 12 gold shards spawn on a 1.5× ring, converge inward260ms, ease-in
3 · white-gold flash60ms
4 · body pops scale 0.6→1.0 + ankh ring expands 1.5× + light pillar220ms
5 · halo fades800ms

Sealed-by-check stays the anti-ceremony: gray puff + the existing “✦ AEGIS shattered” line — the contrast teaches the rule. Trigger stays exactly as shipped (origin empty / not attacker path / not check-illegal); this is presentation only. Sfx: descending shimmer → knock → bright ring.

5 · Check & mate drama

Check is the scariest moment in chess and today it's silent. Two additions, both quantified.

Beat — DELIVER CHECKTiming
king tile rim pulses red2 × 400ms
screen-edge vignette (25% red) in/out900ms
heartbeat — two 55Hz thumpsat 0 / 260ms
king glyph ember glow1.2s decay
Beat — FINAL-BLOW SLOW-MOTiming
reserved for the capture that delivers checkmate (and Throne Duel's last hit)
capture plays at 0.35× time, zoom 1.04 toward the victim, slight desaturation700ms real
snap back to 1× → existing Triumph Stage dialog opens

The demo board has a king on e2 (center). Slow-mo runs a full SAVAGE capture at 0.35× so you can read every shard.

6 · Siege clang — armored bounces

Sieges are a core conquest outcome (they even hold stalemates at bay) but today the bounce is a soft slide. Proposal: the attacker still fails — but the defender blocks: spark, chips, braced stance, metallic clang.

BeatTiming
attacker slides to 80% and strikes150ms
2 white spark crosses + 4 shield chips fly off the defender280ms
defender braces — pushed 2px away, springs back240ms
attacker recoil-arcs home (slight hop, not a slide)200ms

Sfx swaps the soft knock for a high-Q metallic clang (3.2kHz bandpass ring + knock body). Applies to failed attacks only; check-holds-cancelled attacks stay silent-and-illegal as shipped.

7 · Idle life — the board breathes (spectator polish)

For the one watching: a board that never fully sleeps. Everything here is ≤2px, phase-staggered so pieces never move in lockstep, and none of it touches hit-testing, plates, or the constant-height rule.

SystemSpec
breathingtranslateY −1..0px sine, 1.5s alternate, random phase per piece; shadow syncs scaleX 1→0.9
camera driftstage translate ±3px, 8s ease-in-out loop — the “alive stream” feel
glide trails3 afterimage ghosts spawned 40ms apart along the path, opacity 0.25→0, 180ms life
landing dust6 motes (quiet move) / 10 (attack impact), 300ms

A “reduce motion” master switch (OS-aware) kills breathing + drift together; trails/dust stay because they're event-driven, not ambient.

8 · The dimension ladder — how far into three.js?

You said “probably three.js” — here's the honest cost/benefit ladder. The board is 32 meshes at most (trivial for WebGL), but the DOM board is also what every shipped screen already hangs off. The research file's Hearthstone split applies: 3D for the battlefield's juice, DOM for everything else.

RungWhat you getCost / riskVerdict
A · DOM + CSS polish
everything in §1–§7 as demoed
SUPER cut-ins, full shake ladder, element bursts, reforge, slow-mo, idle lifezero deps · mobile-safe · ~2–3 sessionsship first — every pick above works on this rung
B · CSS 3D tiltboard perspective + parallax layers; attacks tilt the table ~6° toward the actionsmall add-on · no WebGL · demo belowcheap wow, stacks with A
C · three.js FX overlaytransparent ortho canvas over the DOM board: GPU particles (hundreds), real god-rays, shockwave shaders, shake synced with the DOM stageone dep ~150KB gz · falls back to A on WebGL fail · medium scopethe “stunning” backbone — adopt when §3/§4 particles feel too small
D · full three.js boardGLB pieces (existing render_pieces.py pipeline), lighting/shadows, true kill-cam camera orbits for SUPER, depth-of-field finishersboard render + interaction rewrite · old-phone testing · phase-3 per asset-research.mdthe endgame — the SUPER direction C cut-in is its natural home

B demo — drag the tilt slider

tilt

Pieces sit at translateZ(22px), the banner decor at 46px — rotation exposes the parallax. In the app the tilt would bias toward the mover's side on attacks and settle back at 0° within 600ms.

pick the backbone PICKED 2026-09-13: D — full three.js board (phased). Build spec: design/combat-juice.md.