Particles & Physics
Firework Burst
Colorful glowing sparks burst radially, fall under gravity, and fade against a dark sky. Auto-launches bursts; click anywhere to add more.
canvasmedium complexityintense motionclick
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Dark-theme hero backgrounds, celebration screens, loading states that benefit from festive ambient motion.
When not to
Light backgrounds (sky hardcoded near-black). Contexts where motion competes with readable content or users may have motion sensitivity.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change the hue palette to warm golds only by setting hues=[40,45,50,55,60], increase particle count per burst by changing n=28+(Math.random()*16|0) to n=50+(Math.random()*20|0).
Safe to edit
- hue palette (hues array)
- particle count per burst (n=28 base)
- gravity strength (vy+=0.035)
- fade speed (p.life-=0.014)
- auto-launch interval (30+random*40)
Keep intact
- visibilitychange pause/play guard
- DPR-aware canvas sizing
- particle cap check (parts.length<110)
- reduced-motion guard (reduce flag)
Known limitations
- Reduced-motion path fires a single static burst then stops — no ongoing animation, which may look broken rather than calm
- Background color hardcoded in CSS (#06060f) — must edit to change from near-black
- No IIFE wrapper — global vars could collide on pages with other scripts
More Particles & Physics components
- Gravity Dot RainMulticolored dots fall under gravity with motion trails, bounce off the floor, and scatter away from the cursor on a dark navy canvas.
- Confetti CannonColored rectangles fire from bottom corners in auto-cycling bursts, tumbling with gravity and flip animation. Click anywhere to trigger a cursor burst.
- Bouncing Balls7–14 glossy pastel balls bounce off walls and collide with elastic physics; cursor repels balls within a 70px radius.
- Spring ChainA 16-node spring chain whips and follows the cursor in a lime-to-gold gradient; drifts in a figure-eight pattern when idle.
- Cloth Wave GridAn 11x11 wireframe grid ripples like cloth via sine/cosine waves in cyan-to-violet hues; mesh nodes bulge away from the cursor on hover.
- Metaball Fluid7 hot-pink blobs drift and merge via a high-contrast canvas threshold; cursor adds an attracting blob that pulls them toward the pointer.