Zen Rake

Written for the variant you picked above: Sand

Build a pill button that sits like a stone in a raked gravel garden. Props: children, sand (light sand or dark ash), onClick, type and motion. Geometry (pure functions): the pill outline walked by distance with its outward normal, the distance nearest a point and the shortest way round; a groove — the outline pushed out by d px, sampled 200 times with each point keeping its outline distance; a bend that pushes a point away from a centre by amount·exp(−(dist/radius)²), the way gravel lines part round a stone; and whether an outline distance has been raked yet when the rake has spread a fraction of the way round both ways from the entry point. A canvas 64px round the button sits behind it (DPR ≤ 2, pointer-events none). Six grooves at 11, 19, 27, 35, 43 and 51px out. Each is drawn as a dark 2.4px trough offset (0.7, 0.9) and a light 1.3px ridge offset (−0.6, −0.7), skipping points not yet raked, so it reads as a groove pressed into gravel. While hovered the rake spreads round in under a second; the lines bend 5px away from a point 14px outside the edge nearest the pointer, over 26px. A press sets a pebble 30px out from the nearest edge point (a radial-gradient stone with a soft shadow, growing in) and every groove swerves 9px round it over 20px; up to three pebbles. On leave the grooves fade over about a second and the pebbles go with them. The loop only runs while something is changing. Keyboard focus rakes from the top centre; touch rakes on press for 2.6s. Reduced motion draws the finished grooves at once. The button is a stone: a 56px pill with a radial grey gradient lit from the upper left, inner highlights and shadows and a short cast shadow, and a label with a slight emboss. The demo ground is gravel — a base colour with two fine dot scatters. Selected variant — Sand (sand): Warm sand gravel #e7dbc1 with brown troughs and cream ridges round a dark granite stone (#8b867d to #3d3a35) with a light 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 rake the gravel round it; move to part the lines; press to place a pebble. Keyboard focus rakes it too. Motion: Grooves spread round in about 0.9s and fade over about 1.1s on leave; pebbles grow in over 0.2s. Reduced motion shows the finished pattern. Accessibility: A real button with its text label; the canvas is decorative, hidden and pointer-transparent. The label keeps strong contrast on the stone. Responsive behavior: Leave about 64px of room round the button for the garden. Touch: A press rakes the garden and places a pebble for a couple of seconds. 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 rake the gravel round it; move to part the lines; press to place a pebble. Keyboard focus rakes it too.

Motion

Grooves spread round in about 0.9s and fade over about 1.1s on leave; pebbles grow in over 0.2s. Reduced motion shows the finished pattern.

Accessibility

A real button with its text label; the canvas is decorative, hidden and pointer-transparent. The label keeps strong contrast on the stone.

Responsive

Leave about 64px of room round the button for the garden.

On touch

A press rakes the garden and places a pebble for a couple of seconds.