Petal Click

Written for the variant you picked above: Sakura

Build a wrapper that turns clicks into falling petals while leaving the normal cursor alone. Props: children, season (blossom or leaves), global (listen on the whole window with a fixed full-screen canvas), motion, className and style. The layer (a small module): a canvas over the host with pointer-events none, sized by a ResizeObserver at DPR ≤ 2, in host-local coordinates corrected for a scaled host. pointerdown on the main button starts a hold; past 120ms a ring arc grows round the press point and fills over 650ms; pointerup releases with a power from 1 to 2.2. A click with detail 0 (keyboard activation) releases from the middle of that element. The loop runs only while something moves. Particles (pure functions): seeded randomness, a spray of velocities spread evenly across an arc with jitter, and one step with exponential drag, gravity and a sideways sway. The flurry: 8 × power + 2 petals popped upwards across a 200° arc at 110–230 × √power px/s. Strong drag (1.9/s) and light gravity (95px/s²) make them settle to a slow fall of about 50px/s, swaying 34px/s side to side and rocking (their spin follows a cosine of their phase). Each turns over as it falls — scaled horizontally by the cosine of a phase, showing its pale back when turned away. Cherry petals are a notched teardrop (two bezier curves meeting at a small notch) with a pale heart near the base; leaves are a pointed oval with a thin dark vein. They live 1.8–2.7s, fading in quickly and out over the last quarter. Reduced motion replaces the flurry with one soft ring that fades in 600ms. Selected variant — Sakura (sakura): Cherry blossom petals in soft pinks (#f9a8c0, #f48fb0, #ec7aa0, #fbb6ca), 7–10.5px, with pale backs and hearts, on a blush #fdf4f6 page with a serif headline. 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: Click anywhere for a few petals; hold before releasing for a bigger flurry. Keyboard activation releases them from the element's centre. Motion: Petals pop out, then sway down at about 50px/s for 1.8–2.7s. Reduced motion shows a single fading ring. Accessibility: The native cursor and every control are untouched; the canvas is aria-hidden and ignores the pointer. Keyboard clicks get the effect too. Responsive behavior: The canvas follows the host's size; with global it covers the window. Touch: Taps release petals too; a long press charges a bigger flurry. 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

Click anywhere for a few petals; hold before releasing for a bigger flurry. Keyboard activation releases them from the element's centre.

Motion

Petals pop out, then sway down at about 50px/s for 1.8–2.7s. Reduced motion shows a single fading ring.

Accessibility

The native cursor and every control are untouched; the canvas is aria-hidden and ignores the pointer. Keyboard clicks get the effect too.

Responsive

The canvas follows the host's size; with global it covers the window.

On touch

Taps release petals too; a long press charges a bigger flurry.