Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsThree.js Motion Orchestration
Play, blend, and optimize Three.js animations — GLB clips, skeletal rigs, morphs, and procedural motion — without the usual mixer pitfalls.
Free
Three.js Motion Orchestration
Example session with this skill installed
My character.glb has Idle, Walk, and Run clips loaded in scene.js, but the model just sits frozen at frame zero and the console throws nothing. Later I also want a subtle breathing layer over the walk and a camera that damp-follows the character. Can you diagnose the mixer setup, get the clips actually playing, wire a speed-based blend where walk and run crossfade instead of snapping, add the additive breathe layer, and make sure I'm not paying for animation updates on characters that are off screen? Please patch the existing files, don't rewrite my scene.
- Read your context and instructions
- Compiled the three js motion
Summary
Diagnosed the frozen character in scene.js: the mixer was created but never updated in the render loop, and clip lookup used array indexes that didn't match the export order. Rebuilt playback around a named action registry, a weight-based idle/walk/run blend with crossfades, an additive Breathe layer, and off-screen pausing.
| Metric | Before | After |
|---|---|---|
| mixer.update(dt) calls per frame | 0 (frozen) | 1 shared root mixer |
| Idle to Walk transition | hard pop | 0.35s crossFadeTo |
| Clip lookup | animations[1], [2] guesswork | findByName + Map registry |
| Breathing | none | AdditiveAnimationBlendMode layer |
| Off-screen rigs | still animating | paused via visibility gate |
| Avg frame time (6 characters) | 14.8 ms | 11.1 ms |
const registry = Object.fromEntries(clips.map(c => [c.name, mixer.clipAction(c)]));
function blend(speed) {
const w = THREE.MathUtils.clamp(speed / 5, 0, 1);
registry.Idle.setEffectiveWeight(1 - w);
registry.Walk.setEffectiveWeight(w);
}
Next steps
- Extract a clean 24-frame walk cycle with AnimationUtils.subclip and call optimize() once at load
- Set clampWhenFinished on one-shot clips so they don't snap back to rest
- Move facial morph weights into a small expression controller instead of scattering them per-system
Connects securely to your tools. The creator never sees your data.
About this skill
Broken animation loops, jittery transitions, and silent keyframe failures stall most Three.js projects. This skill provides the precise logic for managing the Three.js animation system, covering everything from basic GLB clip playback to complex additive blending and procedural spring motion.
What it does
- Clip management Plays, pauses, and syncs
THREE.AnimationClipdata using the mixer. - State blending Handles smooth crossfades between locomotion states like idle, walk, and run.
- Skeletal control Drives bone hierarchies directly or attaches props to specific rig points.
- Morph targets Animates mesh deformations and facial expressions using weight dictionaries.
- Procedural motion Implements spring physics, critical damping, and mathematical oscillators.
- Asset optimization Trims and compresses dense keyframe data to reduce memory overhead.
How it works
- Initialize Create a
THREE.AnimationMixertargeting your root object or GLTF scene. - Configure Define
THREE.AnimationActionparameters for looping, time scales, and weights. - Execute Update the mixer within your main requestAnimationFrame loop using delta time.
- Extend Layer additive clips or procedural bone rotations on top of existing authored animations.
Frameworks & tools
Built for Three.js. Compatible with GLTFLoader, skeleton rigs, and morph target systems.
Why this beats prompting it yourself
Standard LLMs often forget to update the mixer, mangle quaternion arrays, or fail to handle the hierarchy mismatches common in GLTF imports. This skill enforces correct track paths and provides boilerplate for the tricky math behind springs and dampers.
Use cases
- Character controllers Building state machines for third-person player movement.
- UI transitions Creating spring-based 3D button interactions and hover effects.
- Facial animation Syncing lip-sync morphs or eye-blinks with procedural noise.
- Data visualization Animating graph nodes or complex mechanical assemblies.
Known limitations
Does not include a full physics engine integration like Cannon.js or Rapier. Requires a basic understanding of the Three.js render loop.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 5 days ago
- Free to download with an account