r3f-animation
r3f-animation simplifies working with motion and keyframe sequences in React Three Fiber scenes. It provides utilities to drive animations through the render loop and load pre-built animation clips from GLTF models, letting you focus on creative timing rather than low-level graphics code.
r3f-animation simplifies 3D object animation by letting you drive motion through the render loop using useFrame. You can animate properties like position, rotation, and scale frame-by-frame, or load pre-built animation clips from GLTF models and play them back directly. This approach lets you focus on creative timing rather than low-level graphics code.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-26
r3f-animation simplifies 3D object animation by letting you drive motion through the render loop using useFrame. You can animate properties like position, rotation, and scale frame-by-frame, or load pre-built animation clips from GLTF models and play them back directly. This approach lets you focus on creative timing rather than low-level graphics code.
Use it when
- r3f-animation's useFrame hook runs a callback every frame, making it ideal for smooth animations.
- r3f-animation loads animation clips embedded in GLTF models and provides utilities to play, pause, and blend them.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
zebbern/claude-code-guide/r3f-animation · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you animate 3D objects in React Three Fiber?
r3f-animation simplifies 3D object animation by letting you drive motion through the render loop using useFrame. You can animate properties like position, rotation, and scale frame-by-frame, or load pre-built animation clips from GLTF models and play them back directly. This approach lets you focus on creative timing rather than low-level graphics code.
What is the useFrame animation tutorial for r3f?
r3f-animation's useFrame hook runs a callback every frame, making it ideal for smooth animations. Within useFrame, you can update object properties incrementally, apply spring physics for natural motion, or trigger keyframe sequences. The hook integrates seamlessly with React Three Fiber's render loop, ensuring animations stay synchronized with your scene.
How does r3f-animation handle GLTF model animation playback?
r3f-animation loads animation clips embedded in GLTF models and provides utilities to play, pause, and blend them. You can crossfade between animations for smooth transitions, control playback speed, and manipulate individual bones for skeletal animation effects. This eliminates manual clip management and lets you focus on sequencing and blending logic.
Can r3f-animation create spring physics and keyframe-based motion?
Yes. r3f-animation supports spring physics for natural, oscillating motion and keyframe-based animation for precise timing. You can implement smooth damping with lerp patterns, create procedural animations with sine-wave oscillations, and blend multiple motion effects. These techniques work together to produce polished, responsive animations.
How do you blend and control skeletal animations with r3f-animation?
r3f-animation provides bone manipulation tools to blend skeletal animations and attach objects to specific bones. You can crossfade between animation states, adjust bone transforms, and synchronize weapon or accessory follow-animations to character rigs. State management patterns with Zustand help organize complex animation logic.
What optimization strategies does r3f-animation offer for animation performance?
r3f-animation optimizes performance through state management patterns that reduce unnecessary re-renders and frame updates. By batching animation logic and using efficient lerp calculations, you avoid bottlenecks in complex scenes. The library is MIT-licensed and designed to scale from simple rotating cubes to character rigs with multiple blended animations.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
React Three Fiber Animation
Quick Start
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function RotatingBox() {
const meshRef = useRef()
useFrame((state, delta) => {
meshRef.current.rotation.x += delta
meshRef.current.rotation.y += delta * 0.5
})
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<RotatingBox />
</Canvas>
)
}
useFrame Hook
The core animation hook in R3F. Runs every frame.
Basic Usage
```tsx import { useFrame } from '@react-three/fiber' import { useRef } from 'react'
function AnimatedMesh() { const meshRef = useRef()
useFrame((state, delta) => { // state contains: clock, camera, scene, gl, mouse, etc. // delta is time since last frame in seconds
(truncated - see the full file via the links below)
File tree — 1 file
skills/r3f-animation/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Animate 3D objects and models using useFrame and GLTF animations”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
R3f Interaction equips developers with a streamlined approach to adding user input handling to React Three Fiber projects. Handle clicks, drags, and touch gestures across your 3D canvas with minimal setup, enabling rich interactive experiences that respond naturally to user actions.
Master the essentials of React Three Fiber by configuring your first Canvas component and establishing a foundational 3D environment. This skill walks you through the core setup patterns and scene architecture needed to begin rendering interactive 3D graphics in React.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
Motion React lets you build fluid animations and interactive effects in React applications using declarative components and hooks. Animate on gestures (drag, hover, tap), scroll events, and layout changes with spring physics, keyframes, and exit animations via AnimatePresence.
Motion Design Patterns teaches you how to build polished React animations with Motion, covering springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals, and page transitions. Each pattern includes tuned spring configs and anti-patterns to avoid janky motion.
threejs-builder empowers developers to construct full-featured 3D web experiences using Three.js, React Three Fiber, or WebGPU. The skill handles scene setup, geometry creation, material application, and rendering pipelines, letting you focus on application logic rather than boilerplate. Perfect for interactive visualizations, games, and immersive web projects.
More skills Threejs Animation (AGPL-3.0) · R3f Shaders (unlicensed) · R3f Postprocessing (unlicensed) · r3f-router (MIT)