import InfoBox from '../components/InfoBox.astro';

A collision had three separate clarity problems. The impact itself was quiet, the recap arrived late enough to feel detached from it, and AI Duel could say that “the snake” hit a wall without saying whose snake it meant. The goal was not more decoration. It was to make the crash and the verdict read as one event in Daily, AI Duel, and PvP.

## Design the whole beat

The visual question went through a throwaway prototype before the production code started. The board is still a DOM grid, but a temporary canvas layer could handle a small physics simulation without changing how the board itself renders. The chosen burst sprays particles backwards from the last valid head position, keeps the existing collision ripple underneath, and freezes into a static marker when reduced motion is requested. One detail made the design cheaper than it first appeared: the effect did not need the exact invalid destination cell, only the snake's position and heading immediately before the crash.

<InfoBox title="The pacing decision" variant="note">
  Normal motion waits for whichever lasts longer, the particle burst or the existing
  snake-length-dependent ripple. Reduced motion gets a short fixed pause instead of waiting
  through an animation that is not playing.
</InfoBox>

That duration then became an input to a separate planning discussion about the recap. AI Duel and PvP had been adding a long breathing pause after the ripple, while Daily showed its recap immediately. Neither extreme matched the intended rhythm. The new selector uses one rule across all three modes, and the review caught a real integration bug before merge: the old ripple token could unmount the canvas before the particle simulation had completed. The shared timing had to govern the effect's lifetime as well as the dialog.

## Say who crashed

The text problem was deliberately kept out of the visual-design work. It had no open design question and already had a proven shape in PvP, so the follow-up ported that actor-aware selector to AI Duel and covered the full player/opponent by wall/self/opponent matrix with eight tests. “The snake hit the wall” now becomes “You hit the wall” or “The opponent hit the wall”, depending on who took the final turn.

The result is one collision beat with three coordinated parts: the board shows where the action ended, the pause lasts long enough to register it without losing the connection, and the recap names what happened. The effect is more elaborate than the old ripple, but each mode now reaches it through the same small trigger and timing decisions instead of carrying its own version of the sequence.