skill CX Codex

r3f-animation — Claude Code skill: animating Three Fiber objects

Q: How do I install r3f-animation in Claude Code?

Run `npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code`, then add the path `~/.claude/skills/r3f-animation/SKILL.md` to your Claude Code config.

Q: What does r3f-animation do?

It provides patterns for animating 3D objects via `useFrame` with damping, playing GLTF clips, and coordinating with physics engines. Includes examples and performance optimization guidance.

Skill for smooth animation of 3D objects in React Three Fiber using useFrame, damping, and GLTF clips. Useful for procedural motion, state transitions, and on-demand animation control.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code

Open on GitHub

What r3f-animation does

The skill provides ready-made patterns for animating 3D scenes: damping that returns to rest, synchronization with Rapier physics, playback of authored GLTF clips via Drei. An example with useFrame and MathUtils.damp shows how to smoothly interpolate object position between target values, driven by React state (active, open) independent of frame rate.

The skill clarifies key decisions: when to use useFrame for continuous transforms, when to reach for Drei useAnimations for baked clips, when to hand control to Rapier for physics-driven motion. It covers performance pitfalls: proper use of delta time in velocity integration, vector and quaternion reuse, explicit pause for expensive animation, and respect for reduced-motion preferences.

Requires Fiber 9, Drei, and React 19 or compatible versions. If your project already has a spring library or animation system, the skill suggests checking peer dependencies before adding new tools and avoiding a state manager solely for mesh animation.

What it helps with

Smoothly move an object between two states without jumps or overshooting
Play back stored GLTF animations for multiple instances of the same model
Synchronize mesh movement with the Rapier physics engine instead of fighting the simulation
Optimize animation: avoid vector allocation every frame, handle varying refresh rates correctly
Stop expensive animations when an object is hidden or the window loses focus

Example prompts for the agent

Add damping animation so the object transitions smoothly along the X axis when state changes
Set up GLTF clip playback for two model instances running different actions independently
Help sync animation motion with Rapier physics instead of directly changing position

How to install r3f-animation

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/r3f-animation/

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-animation -a codex

2Manually: put the files in place

.agents/skills/r3f-animation/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-animation -a cursor

2Manually: put the files in place

.cursor/skills/r3f-animation/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install EnzeD/r3f-skills r3f-animation

2Manually: put the files in place

.github/skills/r3f-animation/SKILL.md

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-animation -a gemini-cli

2Platform CLI

gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-animation

Manually: put the files in place

.devin/skills/r3f-animation/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-animation -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about r3f-animation

How do I install r3f-animation in Claude Code?

Run npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code, then add the path ~/.claude/skills/r3f-animation/SKILL.md to your Claude Code config.

What does r3f-animation do?

It provides patterns for animating 3D objects via useFrame with damping, playing GLTF clips, and coordinating with physics engines. Includes examples and performance optimization guidance.

What versions of Three Fiber does it require?

Examples target Fiber 9 and React 19. Check your installed versions first; the skill may work with compatible versions but without guarantees for older releases.

Similar skills

Everything for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set9

r3f-interaction Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. Helps avoid input conflicts between 3D scene controls and interactive meshes. CX Codex +1 3,300installs r3f-fundamentals Skill that teaches the agent to build React Three Fiber scenes: Canvas, typed JSX, render-loop hooks, and resource ownership. For scene architecture, not detailed materials. CX Codex +1 2,100installs r3f-materials Guides the agent in configuring PBR and transparency in React Three Fiber. Prevents texture color space mistakes and unnecessary GPU overhead. CX Codex +1 1,900installs r3f-geometry Guides an agent through geometry, custom buffers, points, lines, and instancing in React Three Fiber. Useful when shaping objects or reducing draw calls. CX Codex +1 1,900installs r3f-postprocessing A skill that walks the agent through postprocessing in React Three Fiber: glow on chosen meshes, depth of field, SSAO. Useful when the render looks off and you cannot pin down why. CX Codex +1 1,900installs r3f-loaders Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI. CX Codex +1 1,800installs r3f-physics Guides an AI coding agent through adding Rapier physics to React Three Fiber. Use it for collision-based movement, sensors, forces, and joints. CX Codex +1 1,800installs r3f-textures Guidance for configuring textures in React Three Fiber, from color spaces and UV channels to video and render targets. Useful when an image looks wrong or texture memory needs attention. CX Codex +1 1,700installs