threejs-animation
Creates 3D animations using the Three.js library. It allows animating objects, mixing movements, and bringing 3D models to life in web projects.
What it does
This tool helps create 3D animations using the Three.js library. It allows you to animate objects, characters (with skeletons), and even facial expressions, as well as blend different animations.
When to use it
- ✓When you want objects in a 3D scene to move.
- ✓When using 3D models that already come with animations (like GLTF files).
- ✓To create movements that are not predefined but generated by code.
Example of what to ask your AI
“Create an animation for a spinning, color-changing cube in Three.js.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool uses a system called 'keyframe animation' where you define the states of an object at different points in time. It can also handle more complex character animations and blend multiple animations for smooth motion.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill threejs-animationOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/threejs-animation/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Three.js Animation
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- You need to animate objects, rigs, morph targets, or imported GLTF animations in Three.js.
- The task involves mixers, clips, keyframes, procedural motion, or animation blending.
- You are building motion behavior in a Three.js scene rather than just static rendering.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
FAQ
What are 'keyframes'?
They are like important 'snapshots' in an animation. You define how something should look at a 'keyframe' (e.g., position and color), and the tool calculates the movements between them.
What is 'skeletal animation'?
It's a technique used to animate characters or complex objects. The object has an internal 'skeleton', and animating the skeleton moves the object's parts.
Can I use animations from other programs?
Yes, especially if they are in the GLTF format, which is commonly used for 3D models with animations.
Details
Original description by the author
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4370
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC