Confetti — component for particles & physics (html)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

One burst of confetti squares and dots flung up from the centre, tumbling, flipping and fading as it falls

Prompt that renders it frame-exact

Use the tsParticles Confetti preset (https://particles.js.org/demos/recipes/confetti, MIT, options in github.com/tsparticles/presets/blob/main/presets/confetti/src/options.ts) as a transparent overlay over the footage on a celebration beat (a launch, a milestone number, a "we did it" line). Load @tsparticles/engine and @tsparticles/preset-confetti (or its CDN bundle tsparticles.preset.confetti.bundle.min.js), call loadConfettiPreset(tsParticles), then tsParticles.load({ id, options: { preset: "confetti", fullScreen: { enable: false } } }) into a full-frame div layered above the video. Create the container on the beat frame so the burst lands on it. tsParticles ticks on requestAnimationFrame and derives each step from the frame timestamp, so make it deterministic: seed Math.random before loading, swap requestAnimationFrame for a queue you flush once per video frame with the timestamp frame × 1000 / fps (keep fpsLimit at or above the video fps), and render frames in order from the moment it starts (it is a running simulation, so replay from that point after a backwards seek). Override the colors with brand hex values, raise emitters.startCount (50 by default) for a bigger burst, and move emitters.position (percent of the frame) to fire from behind a logo or a number.

Used in

More particles & physics