Domino Run

Written for the variant you picked above: Ivory

Build a pill button that dominoes are stood round and knocked down. Props: children, set (one of three tile styles), onClick and type. Geometry (pure functions): the pill outline walked by distance with its tangent and outward normal, and the distance nearest a point. A ring of tiles every 11px round the outline from the entry point, in the direction the pointer was travelling along the edge, each standing 3px outside it with its face turned outward (rotated so local up is the outward normal, so local +x runs along the outline). The lean of a fallen tile resting on the next is asin(spacing / height) — about 47° for 11px spacing and 15px tiles — and the last lies flat at 90°. The chain's timing speeds up: the first gap is 70ms and each one is 3.5% shorter, down to 26ms. Each tile is an 8 × 15px rounded rect with a hairline edge, a thicker darker side underneath, a soft shadow, a line across the middle and one to three pips in each half drawn with radial gradients. Tiles sit in an overlay 30px beyond the button behind it, pointer-events none. On pointerenter they're set up one by one, 16ms apart, rising from 0.6× with a small overshoot. On leave, or on press, they fall: each rotates about its bottom corner on the side it falls towards to the lean angle (190ms, ease-in like gravity) on its chain delay, and its shadow tightens; the ring clears 1.4s after the last tile lands. Keyboard focus sets them up from the top centre and blur knocks them down; on touch a press sets them up and knocks them down a second later. Reduced motion shows them up and down without animation. The button: a 54px pill in a deep colour with a light label, a 1px lift on hover. Selected variant — Ivory (ivory): Classic ivory tiles (#fbf6ea, side #cdbf9f) with black pips on green baize, a dark green #0f2419 button with a cream label. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button to set up the dominoes; leave or press to knock them down. Keyboard focus sets them up and blur knocks them over. Motion: Tiles stand up 16ms apart; the fall starts with 70ms gaps that shrink 3.5% each tile, 190ms per tile. Reduced motion skips the movement. Accessibility: A real button with its text label; the dominoes are decorative, hidden and pointer-transparent. Responsive behavior: Leave about 30px of room round the button for the ring. Touch: A press sets the dominoes up and topples them a second later. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button to set up the dominoes; leave or press to knock them down. Keyboard focus sets them up and blur knocks them over.

Motion

Tiles stand up 16ms apart; the fall starts with 70ms gaps that shrink 3.5% each tile, 190ms per tile. Reduced motion skips the movement.

Accessibility

A real button with its text label; the dominoes are decorative, hidden and pointer-transparent.

Responsive

Leave about 30px of room round the button for the ring.

On touch

A press sets the dominoes up and topples them a second later.