FreeWeb
SVG icons, illustrations and logos
- 371371 downloads
- 167167 likes
- 205205 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Procedural animation effects with p5.js and Canvas v1.0.0
Use this resource to create procedural animation effects with p5.js or Canvas
New
- 519 downloads
- 185 likes
- 108 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install canvas-procedural-effectsWith 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 writes a p5.js or Canvas animation loop whose state depends on time, for effects such as rain, leaves, squash and stretch, or a walk cycle. It also points out cases where another technique is better. You get a deterministic, reusable effect.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeSkills
Simulated user walkthroughs and latent demand
- 400400 downloads
- 155155 likes
- 180180 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
UI motion: hover, transitions, gestures
- 600600 downloads
- 208208 likes
- 109109 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Design tokens: colour, spacing and dark mode
- 314314 downloads
- 142142 likes
- 243243 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Frontend engineering review
- 537537 downloads
- 112112 likes
- 145145 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
UI and API mock prototypes
- 426426 downloads
- 171171 likes
- 233233 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Design context extraction from Figma
- 412412 downloads
- 240240 likes
- 178178 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Mockup-faithful HTML and CSS generation
- 512512 downloads
- 215215 likes
- 183183 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: setup and draw pattern, recommended and discouraged uses
- SKILL.md: guidance for deterministic previews and environmental effects
Good fit for
- You want to add rain or leaves to a scene
- You need a walk cycle without drawing every pose
Not for
Tags
- p5.js
- canvas
- particles
- animation
About
You say
“Add light rain and falling leaves behind the character, in p5.js.”
Skill published by calesthio under the MIT license, delivered in its original version.
Show moreShow less
How to use it
- Install the skill in your agent's skills folder
- Ask your agent to create procedural animation effects with p5.js or Canvas
- Review and adjust the result
Content preview
Files
- LICENSE33.7 KB
- NOTICE-PALATEKIT.md0.5 KB
- SKILL.md1.3 KB
Origin and licence
Listed unmodified
- Author
- calesthio
- Source
- github.com/calesthio/openmontage/tree/53e34e653d5c459a89f6f46053773c10c5e0fc1f/.agents/skills/canvas-procedural-animation
- Licence
- MIT
Notice
« canvas-procedural-animation » (calesthio, MIT) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.
User reviews
–
No ratings yet
Loading reviews…