Paw Trail

Written for the variant you picked above: Pup

Build a pill button that an animal walks around. Props: children, animal (one of three walkers, each with its own print and gait), ink (print colour), tone {face, label}, onClick and type. Geometry (pure functions): the outline of a w × h rounded rectangle with radius h/2, walked clockwise from the start of the top edge — its length, the point at distance s with its clockwise tangent and outward normal (straight edges and quarter-circle corners), and the distance nearest to any point. Walking: on pointerenter, find the outline distance nearest to where the pointer came in, and walk in the direction the pointer was moving along the edge there (the sign of the tangent · the pointer's movementX/Y). Each walker has a gait — a step interval, a stride, how far outside the edge its line runs, how far apart its feet are, and whether it alternates feet or lands both at once. Every step, advance by the stride and place a print on the line just outside the edge, offset to the walker's left or right by half the foot spread, rotated so it points along the direction of travel. Keep walking laps while hovered; stop on leave. Each print is an inline SVG in currentColor in an overlay behind the button that extends 34px beyond it, with pointer-events none. It stamps in over 240ms — from 1.45× and blurred to 0.9× and back to 1 — with a thin ring of dust expanding and fading beside it, holds, then fades out over 700ms after 1.5s and is removed. All of it uses the Web Animations API on elements appended imperatively, so React doesn't re-render per step. The button: a 52px pill in the face colour with the label colour, a small print icon that turns 24° on hover, a 1px lift on hover and a small press. Pressing stamps a big print (46px, soft-light blend, 32% opacity) on the face where you pressed, which fades over 1.1s. Keyboard focus starts a walk from the top centre; blur stops it. On touch, a press starts a walk for 2.2s. Reduced motion: a still ring of prints fades in on hover, with no walking and no stamps. Selected variant — Pup (pup): A dog: a heart-shaped pad and four oval toes with small claws, 15px; a step every 170ms, 21px stride, a line 15px outside the edge, feet 6px either side, alternating. Ground #f3ead9, prints #6b4a2f, button #2e2219 with #fbf3e6 text. 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 start a walk from where you came in; press for a big stamp. Keyboard focus starts a walk too. Motion: A step every 150–260ms; each print stamps in over 240ms with a dust ring and fades out after 1.5s. Reduced motion shows a still ring of prints instead. Accessibility: A real button with its text label; the prints are decorative and live in an aria-hidden overlay with pointer-events none. The focus ring sits outside the prints. Responsive behavior: The button keeps its size; leave about 34px of room around it for the trail. Touch: A press starts a short walk and stamps the face. 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 start a walk from where you came in; press for a big stamp. Keyboard focus starts a walk too.

Motion

A step every 150–260ms; each print stamps in over 240ms with a dust ring and fades out after 1.5s. Reduced motion shows a still ring of prints instead.

Accessibility

A real button with its text label; the prints are decorative and live in an aria-hidden overlay with pointer-events none. The focus ring sits outside the prints.

Responsive

The button keeps its size; leave about 34px of room around it for the trail.

On touch

A press starts a short walk and stamps the face.