# R3f Animation

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes.

- Repository: https://github.com/zebbern/claude-code-guide (4691 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add zebbern/claude-code-guide --skill r3f-animation -g -a claude-code -y`
Codex: `npx skills add zebbern/claude-code-guide --skill r3f-animation -g -a codex -y`
Cursor: `npx skills add zebbern/claude-code-guide --skill r3f-animation -g -a cursor -y`
Gemini CLI: `npx skills add zebbern/claude-code-guide --skill r3f-animation -g -a gemini-cli -y`

## Description

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Three Fiber Animation

## Quick Start

```tsx
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

    meshRef.current.rotation.y += delta
  })

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}
```

### State Object

```tsx
useFrame((state, delta, xrFrame) => {
  const {
    clock,           // THREE.Clock
    camera,          // Current camera
    scene,           // Scene
    gl,              // WebGLRenderer
    mouse,           // Normalized mouse position (-1 to 1)
    pointer,         // Same as mouse
    viewport,        // Viewport dimensions
    size,            // Canvas size
    raycaster,       // Raycaster
    get,             // Get current state
    set,             // Set state
    invalidate,      // Request re-render (when frameloop="demand")
  } = state

  // Time-based animation
  const t = clock.getElapsedTime()
  meshRef.current.position.y = Math.sin(t) * 2
})
```

### Render Priority

```tsx
// Lower numbers run first. Default is 0.
// Use negative for pre-render, positive for post-render

The rest: https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/r3f-animation/SKILL.md