threejs-animation skill (CloudAI-X): current three.js animation code from your agent

Gives your agent up-to-date three.js animation know-how, so the code it writes matches the release you install.

Installs: 22.3K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-animation gives your agent a reference for animation in three.js release r186: keyframe clips, the animation mixer and actions, skeletal animation, morph targets, blending and crossfading clips, procedural motion, and WebGPU with TSL. It triggers when you animate objects, play glTF animations, pose bones or mix clips.

Its Common Mistakes section lists 12 outdated patterns with the fix, such as replacing Clock with Timer and requestAnimationFrame with setAnimationLoop. The skill bundles no scripts. It is one of 13 three.js skills in the same repo.

Good for

Developers animating objects and glTF models with three.js
Creative coders using morph targets, bones and clip blending
Teams whose agent keeps writing deprecated three.js code

Install threejs-animation

Claude Code

Copy this prompt.

Install the threejs-animation skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-animation

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Keyframe, skeletal and morph-target animation, procedural motion and clip blending, on WebGL or with WebGPU and TSL. Use when animating objects, playing glTF animations, posing bones, driving morph targets, or mixing and crossfading clips.

Sections in SKILL.md

Quick Start
How the System Fits Together
AnimationClip and Keyframe Tracks
Interpolation
AnimationMixer
AnimationAction
Fades and Crossfades
Playing glTF Animations
Skeletal Animation
Morph Targets
Blending Clips by Weight
Additive Animation
Clip Utilities
Procedural Motion
Performance
WebGPU and TSL

Key facts

Author: CloudAI-X (threejs-skills)
Repository: cloudai-x/threejs-skills (skills/threejs-animation)
Installs on skills.sh: 22,297 as of 2026-11-02
GitHub stars: 3,903 for the whole cloudai-x/threejs-skills repo, 2026-11-02
License: MIT (as detected by GitHub)
Last commit to the repo: 2026-10-19
What is inside: 1 file (SKILL.md only), one of 13 three.js skills in the repo

What it includes

A complete scene with a Timer-driven animation loop
Renderer, scene, camera and a box that spins and bobs using Timer and setAnimationLoop.
Read · Quick Start
AnimationClip, AnimationMixer and AnimationAction explained
A clip holds keyframe tracks, a mixer plays clips on a root object, and an action controls playback.
Try: “Fade this model from idle to walk over 0.5 seconds using AnimationMixer.”
Read · Clips, mixers and actions
Number, vector, quaternion, color and boolean tracks
Track naming rules and linear, smooth, discrete and bezier interpolation.
Read · Keyframe tracks and interpolation
Load a model and play its clips
How to load glTF clips and drive them with a mixer.
Read · Playing glTF animations
Bones, skinned meshes and morph target influences
Posing bones, cloning skinned models safely and driving morph targets.
Read · Skeletal and morph animation
Crossfades, weights, clip utilities and code-driven motion
Weighted blending of clips, utilities for clips, and motion computed in code.
Read · Blending, utilities and procedural motion
The same animation ideas under WebGPURenderer
Shows the TSL way to animate positions and time.
Read · WebGPU and TSL
12 outdated or wrong patterns with the r186 fix
Each entry shows the wrong code, the fix and the reason.
Read · Common Mistakes

From the official docs

Questions

What does the threejs-animation skill do?

It gives your agent a reference for three.js animation code. The agent uses it to write clips, mixers, skeletal and morph animation, blending and TSL motion that match three.js r186.

Which three.js version does it target?

r186 (three@0.186). The SKILL.md says examples use WebGLRenderer, and its WebGPU and TSL section uses WebGPURenderer. The README says the skills were checked against the published three@0.186.1 package.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. The README is written for Claude Code and documents npx skills add cloudai-x/threejs-skills and manual copies into ~/.claude/skills/ or .claude/skills/. It does not name other clients.

Do I need the other three.js skills?

No. Its See Also section lists threejs-fundamentals, threejs-loaders and threejs-shaders as related skills, but this skill stands on its own. Install them if you also want help with scenes, loading models or shaders.

Does it need an API key?

None is mentioned in the SKILL.md or README. The skill is one markdown file with no scripts.

Is it safe to install?

It is a markdown reference with no bundled scripts and no listed shell commands. The risk is the code your agent writes with it, so test animations in a browser and review the diff.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-animation

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

threejs-animation SKILL.md · github.com
threejs-skills README · github.com