🎯

threejs-animation

🎯Skill

from cloudai-x/threejs-skills

What it does

Provides Three.js animation API references, patterns, and best practices for creating 3D animations and interactive experiences.

Overview

threejs-animation is a skill that provides comprehensive Three.js animation API references, patterns, and code examples for AI coding agents. It covers keyframe animation, skeletal animation, morph targets, animation mixing, and procedural motion — giving AI assistants the knowledge to help create and control 3D animations correctly.

Key Features

Complete animation system reference — Covers AnimationClip, AnimationMixer, and AnimationAction with working code examples for the full Three.js animation pipeline
KeyframeTrack types — Detailed examples for NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, ColorKeyframeTrack, BooleanKeyframeTrack, and StringKeyframeTrack
Interpolation modes — Reference for InterpolateLinear, InterpolateSmooth (cubic spline), and InterpolateDiscrete step functions
Procedural animation patterns — Quick-start examples for clock-based procedural animation with delta time and elapsed time patterns

Who is this for?

Developers working on Three.js projects who want AI coding assistants to generate correct animation code. Useful for anyone building 3D web experiences — from simple object rotations to complex skeletal animations loaded from GLTF files.

📦

Same repository

cloudai-x/threejs-skills(10 items)

threejs-animation

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add cloudai-x/threejs-skills --skill threejs-animation

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add cloudai-x/threejs-skills --skill threejs-animation

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/threejs-animation/SKILL.md

SKILL.md

2,481Installs

1,181

Last UpdatedJan 19, 2026

View on GitHub Back to Skills

More from this repository9

🎯

threejs-fundamentals🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-shaders🎯Skill

Provides Three.js shader development patterns including custom WebGL shaders, GLSL code examples, and advanced rendering effects

🎯

threejs-geometry🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-interaction🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-materials🎯Skill

Provides Three.js material system patterns including PBR materials, textures, normal maps, environment mapping, and advanced rendering techniques

🎯

threejs-postprocessing🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-loaders🎯Skill

Provides Three.js asset loading patterns for 3D models, textures, and animations using GLTF, OBJ, FBX, and other format loaders

🎯

threejs-lighting🎯Skill

Provides Three.js lighting patterns including light types, shadows, intensity controls, and techniques for realistic 3D scene illumination

🎯

threejs-textures🎯Skill

Provides Three.js texture patterns including texture loading, UV mapping, mipmaps, filtering, and texture animation techniques