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

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

tiktok-video-skills (TikTok / Reels / Shorts) · text-message-video-skills (Text-message stories) · youtube-video-skills (Podcasters & YouTubers) · ecommerce-video-skills (E-commerce sellers) · ad-video-skills (Brand advertisers) · data-animation-skills (Analysts & PMs) · explainer-video-skills (Educators) · map-animation-skills (Vox-style maps) · web-animation-skills (Frontend devs) · motion-design-skills (Motion designers) · kinetic-typography-skills (Kinetic type / text) · freelance-motion-skills (Freelancers & studios) · manim-skills (Math / educational)

Install any of them:

npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/text-message-video-skills
npx skills add iart-ai/youtube-video-skills
npx skills add iart-ai/ecommerce-video-skills
npx skills add iart-ai/ad-video-skills
npx skills add iart-ai/data-animation-skills
npx skills add iart-ai/explainer-video-skills
npx skills add iart-ai/map-animation-skills
npx skills add iart-ai/web-animation-skills
npx skills add iart-ai/motion-design-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/freelance-motion-skills
npx skills add iart-ai/manim-skills

License

MIT

---

Built by iart.ai — the AI motion agent: describe it in a prompt — or point it at a CSV or brand kit — and get editable, on-brand motion graphics with exact text and numbers, one-click edits, and batch export.