∞ forever components

Particles & Physics

Confetti Cannon

Colored rectangles fire from bottom corners in auto-cycling bursts, tumbling with gravity and flip animation. Click anywhere to trigger a cursor burst.

canvasmedium complexityintense motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Celebration moments, success screens, gamification rewards, party or event landing pages.

When not to

Productivity or focused reading contexts — constant auto-firing is highly distracting. Remove the auto-fire interval for production click-only use.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the palette to pastels by replacing pal with ['#ffb3c6','#ffd6a5','#caffbf','#A19A87','#f8d8b4','#ffcf9f'], and increase gravity from 0.13 to 0.18 for faster fall. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • color palette (pal array)
  • gravity constant (0.13)
  • particle count per burst (18 + random*10)
  • auto-fire interval (55 + random*30 ticks)
  • particle size (w/h ranges)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange stop/play guard
  • reduced-motion branch (single static fire + step)
  • DPR-aware canvas sizing
  • bits.length<100 cap to bound particle count
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Auto-fires from corners continuously — remove the t>next block for click-only production use
  • Particle cap (100) can cause burst suppression under heavy click-spam
  • No aria role on canvas — click interaction is invisible to assistive tech

confettiparticlescanvasphysicscelebrationburstclick

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.
  • Firework BurstColorful glowing sparks burst radially, fall under gravity, and fade against a dark sky. Auto-launches bursts; click anywhere to add more.
  • 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.