Sparkle Click

Written for the variant you picked above: Gold

Build a wrapper that turns clicks into sparkle bursts while leaving the normal cursor alone. Props: children, shine (one of three palettes), 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 to it by a ResizeObserver at DPR ≤ 2, in host-local coordinates corrected for a scaled host. pointerdown (main button, any pointer type) starts a hold; while held past 120ms a ring arc grows round the press point and fills over 650ms. pointerup releases a burst with a power from 1 (a click) to 2.2 (fully held). A click with detail 0 — Enter or Space on a button or link — bursts from the middle of that element. The animation loop runs only while something is moving. Particles (pure functions): seeded randomness; a spray of n velocities spread evenly round a direction with jitter; and one step — exponential drag, gravity and age. The burst: 9 × power + 2 four-pointed sparkles (each four quadratic curves bowed in to the centre) thrown out evenly in every direction at 170–340px/s × power, slowing quickly under heavy drag (4.6/s), so they spread 35–75px with a little gravity, spinning, living 0.5–0.85s; each pops up and shrinks away along a sine curve and twinkles fast. A few tiny dots go with them, and a thin ring expands and fades from the click in 320ms. Bright palettes draw additively with an 8px glow; the ink palette draws plainly. Reduced motion replaces the burst with one soft ring that fades in 600ms. Selected variant — Gold (gold): Gold sparkles (#ffd56b, #ffe9a8, #ffb63d, #fff6da) glowing additively on a midnight #0d1226 page. 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 burst of sparkles; hold before releasing for a bigger one. Keyboard activation of a button or link sparkles from its centre. Motion: Sparkles fly and wink out over 0.5–0.85s; the charge ring fills over 650ms. 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 burst too; a long press charges a bigger one. 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 burst of sparkles; hold before releasing for a bigger one. Keyboard activation of a button or link sparkles from its centre.

Motion

Sparkles fly and wink out over 0.5–0.85s; the charge ring fills over 650ms. 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 burst too; a long press charges a bigger one.