No.233 · Cursors· New

Firework Click

The ordinary arrow, untouched — every click launches a tiny firework: a shell climbs from the click on a fading trail, bursts into a ring of sparks that arc and fall with trails of their own, and crackles out. Hold before letting go and it climbs higher and bursts bigger, with a second ring inside.

The prompt

Written for the variant you picked above: Night

Build a wrapper that turns clicks into tiny fireworks while leaving the normal cursor alone. Props: children, sky (one of two 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 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) launches from the middle of that element. The loop runs only while something moves. Particles (pure functions): seeded randomness, a spray of velocities spread evenly round a circle with jitter, and one step with exponential drag, gravity and age. The launch: a small ring puffs at the click and a shell rises at 330 × √power px/s against gravity (520px/s², light drag), keeping a 10-point trail. Near its apex (rising slower than 50px/s, or after 0.5–0.76s) it bursts: a ring of 28 × power sparks at 160–240 × √power px/s plus a tighter inner ring in a second colour (14 sparks when held, 9 otherwise) and a flash ring. Sparks fall under light gravity (150px/s²) and drag, each drawing a 7-point fading trail, and in the last 40% of their life they crackle — flickering at random — and fade. Each shell takes the next pair of colours in the palette. On a dark sky everything draws additively with a 6px glow; on a light sky it draws plainly in deeper colours. Reduced motion replaces the firework with one soft ring that fades in 600ms. Selected variant — Night (night): A night sky gradient (#060914 to #121a33) with glowing additive shells in gold, rose, sky blue, violet and mint, each with a pale second colour. 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 to launch a firework from that point; hold before releasing for a higher, bigger one. Keyboard activation launches from the element's centre. Motion: The shell climbs for about half a second; sparks fall and crackle out over 0.9–1.25s. 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. Leave room above where people click for the climb. Touch: Taps launch 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 to launch a firework from that point; hold before releasing for a higher, bigger one. Keyboard activation launches from the element's centre.
Motion: The shell climbs for about half a second; sparks fall and crackle out over 0.9–1.25s. 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. Leave room above where people click for the climb.
On touch: Taps launch too; a long press charges a bigger one.

Dependencies: React; Tailwind CSS for the usage example
Fonts: Hanken Grotesk. Load these font families in your project to match the preview; the copied styles include fallback fonts.
Example styling: The component needs only its own stylesheet. example.tsx and usage.tsx stage it with Tailwind utility classes, so run them in a Tailwind project or restyle the wrapper.
Files: FireworkClick.tsx
burst.ts
layer.ts
firework-click.css
example.tsx
DemoBoundary.tsx
Responds to: CursorClickCanvasKeyboard
Variants: Night, Daylight
Feedback: Something off in Firework Click? Report it on GitHub (opens in a new tab).
How to use: Copy each file into your project (e.g. components/firework-click/), keep all files together, and adapt usage.tsx. Imports have been rewritten for this folder. Demo callbacks simulate behavior; connect your own services before using authentication or sending data.