Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Confetti Burst

A cannon fires hundreds of tumbling paper confetti in the party colours: they fly, flutter and drift down. One-shot, seeded and exact.

Effect, V1 Effects2D90 lines of codev1.0.0

In Toys, games & parties

Next: Glazed GalaxySurprise me

Confetti Burst preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

420
1
21

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 2.4 MB)
Info

What it is

A celebration: a cannon at the bottom of the frame fires hundreds of pieces of paper confetti. Each piece is a small rectangle, ribbon or disc with its own colour, speed and spin; it flies on an arc with air drag, tumbles in 3D (it thins to a line when edge-on and darkens on its underside) and flutters down. Choose the number of pieces, the colours (party, gold, pastel or mono), the launch (one cannon, two corner cannons or a shower from above), the power, the seed and the backdrop colour.

Reuse it in your own idea

  • Win moment: Party cannon.
  • Premium launch: Gold, two cannons.
  • Soft greeting: Pastel shower.

Which part is reusable

src/confetti-burst.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Pieces do not collide or pile up on the ground; they leave the frame.
  • The 3D tumble is simulated by squashing flat shapes, not true 3D.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/confetti-burst.js
Exports
  • createConfettiBurst({ pieces?, palette?, at?, mode?, power?, seed? }) => { draw(ctx, info, width, height), revealDuration }
  • PALETTES: { party, gold, pastel, mono }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. The reusable source has no dependencies.
How it fits a scene

Coordinates: Positions are fractions of the canvas; the cannon is at the bottom centre (or the corners), the shower starts above the top edge; sizes scale with the smaller side.

Lighting: None; undersides are drawn darker.

Timing: Pure function of time since the burst and a seeded number per piece; revealDuration says when the last piece has gone.

Output
1080×1080, 30 fps, 6 s · procedural (computed from the frame number) · not a loop — Not a loop: the burst fires at 0.6 s and the pieces fall out of frame.
Tested
Rendered 180 frames on 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical.
Performance
Up to 900 small shapes per frame; about 2 ms on an integrated GPU. The frame is not cleared; call it after your backdrop.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- confetti-burst/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:bcd7c26c0267f6c4…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen

Ball Clock

3D object3DSeamless loop16 seconds

Coin Stack

3D object3DSeamless loop12 seconds