FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Canvas and WebGL particle effects v1.0.0
Use this resource to create an animated particle effect for a web page
New
- 550 downloads
- 186 likes
- 243 saves
$4.99
Lifetime access to this resource, with its updates.
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install particle-effects-canvas-webglWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a particle effect (confetti, snow, sparks, constellation, swirl) in 2D canvas or in Three.js for thousands of points. It delivers a single HTML file that opens in the browser, with a fixed seed and a freeze-frame option to check the result. You get a smooth effect that respects the reduced-motion preference.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Uses
- A recent browser
- Three.js via CDN (GPU effects)
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: forces, flow fields, emission, spatial grid, GPU points
- references/particle-recipes.md: full confetti, snow, smoke and constellation systems
- A three-moment check method with screenshots
Good fit for
- An animated connected-dot background for a home page
- A confetti burst after a purchase or sign-up
- Snow or smoke as ambience on a campaign page
Not for
- A motion-design video exported as MP4
- A complex physics engine for a game
Tags
- particles
- canvas
- webgl
- animation
- confetti
About
You say
"Build a canvas constellation background for my home page, with blue dots that react to the mouse."
Skill published by iart-ai under the MIT license.
Show moreShow less
Prerequisites
- You bring
- A description of the effect and colors and The page or project to embed it in
- Dependencies
- A recent browser and Three.js via CDN (GPU effects)
How to use it
- Describe the effect, colors and target page
- The agent produces one HTML file with a fixed seed
- Open it and ask for density or speed adjustments
Content preview
Files
- LICENSE1 KB
- NOTICE-PALATEKIT.md0.4 KB
- references/particle-recipes.md11.1 KB
- SKILL.md11.6 KB
Origin and licence
Modified by PalateKit
- Author
- iart-ai
- Source
- github.com/iart-ai/webgl-animation-skills/tree/50697d659fbf70152f48f9f8aadf1efe78bbdde1/skills/particle-system
- Licence
- MIT
Notice
Version modifiée de « particle-system » (iart-ai, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Do I need to install anything?
No, the effect fits in one HTML file; Three.js is loaded from a CDN only for GPU particles.
Does the effect bother motion-sensitive people?
The skill asks to honor prefers-reduced-motion by reducing or freezing particles.