WebGL Animation Skills

Create Three.js animation, GLSL effects, and particle systems.

This three-Skill iart.ai package focuses on browser-based 3D motion and GPU visual effects. It keeps scene animation, shader work, and particle design together.

Use cases

  • Animate a Three.js scene
  • Develop GLSL shader effects
  • Build and troubleshoot particle motion

How to use

Provide the scene, target effect, and browser or GPU constraints. Use the matching Three.js or shader workflow and test rendering performance on the target device.

Skills

  • particle-system

    This skill should be used when the user asks to "build a particle system", "make confetti/snow/smoke/sparks", "create a connected-dot/constellation network background", "add a flow-field or curl-noise particle effect", "render thousands of GPU particles with Three.js Points", or "animate emitters with forces". Covers per-particle integration, forces, flow fields, burst/continuous emission, spatial-grid connected dots, and GPU points + shaders.

    iart-ai/webgl-animation-skills

  • shader-glsl

    This skill should be used when the user asks to "write a fragment shader", "make a GLSL gradient/noise/plasma background", "create an image transition (dissolve, displacement, glitch)", "add distortion or chromatic aberration", "build an SDF shape shader", "wire up a Three.js ShaderMaterial with uniforms", or "do GPU post-processing". Covers GLSL fragment shaders, noise/fbm, SDFs, domain warping, transitions, and Three.js integration.

    iart-ai/webgl-animation-skills

  • threejs-animation

    This skill should be used when the user asks to "build a 3D hero section or WebGL background", "animate a Three.js scene", "play or crossfade GLTF animation clips", "move/lerp the camera or link it to scroll", "render thousands of objects with InstancedMesh", "set up React Three Fiber (R3F) motion", "add bloom/DOF post-processing", or "keep a Three.js/R3F animation smooth and leak-free (dispose geometries/materials/textures, free GPU memory on unmount)". Covers scenes, render loops, camera moves, GLTF AnimationMixer, instancing, scroll-linked 3D, R3F, and animation performance/disposal.

    iart-ai/webgl-animation-skills