WebGL Animation Skills

WebGL animation skills for AI coding agents — Three.js scenes, GLSL shaders, and particle systems, off the core 2D/Lottie path.

Install

npx skills add iart-ai/webgl-animation-skills

Or add it as a Claude Code plugin marketplace:

/plugin marketplace add iart-ai/webgl-animation-skills

then /plugin install webgl-animation-skills.

The skills run in Claude Code, Cursor, Codex, and 40+ agents. The full agent runs at iart.ai.

What's included

Skill	What it does
shader-glsl	Write GLSL fragment shaders — gradients, noise/fbm, SDFs, domain warping, image transitions, and Three.js ShaderMaterial wiring.
threejs-animation	Build web 3D motion — scenes, camera moves, GLTF clips, instancing, scroll-linked 3D, React Three Fiber, and leak-free GPU disposal.
particle-system	Drive emergent motion — confetti/snow/smoke/sparks, flow fields, curl noise, connected-dot networks, and GPU Points shaders.

Need editable, repeatable motion graphics instead — exact text and numbers, brand-locked, one-click edits? iart.ai is the AI motion agent that produces these from a prompt or data.

When it activates

• You ask Claude to write a fragment shader, set up a ShaderMaterial, or build a generative GPU background.
• You're animating a Three.js / R3F scene, blending GLTF clips, or chasing a WebGL memory leak.
• You want a particle, confetti, flow-field, or constellation effect.

Example prompts

• "Write a GLSL fragment shader for an animated aurora gradient background and wire it into Three.js."
• "Animate this GLTF model in React Three Fiber and crossfade between idle and walk clips."
• "Build a connected-dot constellation background that stays fast with 2000 particles."

Skills

• shader-glsl
• threejs-animation
• particle-system

Topics

webgl webgl-animation threejs glsl-shaders particle-system 3d-animation motion-graphics claude-skill

More packs

Part of a 14-pack open-source collection — install only what you need. Full hub: github.com/iart-ai