tessl/npm-react-spring--three

React Three Fiber support for react-spring animations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@react-spring/three

Name: tessl/npm-react-spring--three
Author: tessl

@react-spring/three provides seamless integration between react-spring's spring-physics animation system and React Three Fiber (R3F) for 3D scenes. It enables developers to animate Three.js objects, materials, and properties using react-spring's declarative API with spring physics.

Package Information

Package Name: @react-spring/three
Package Type: npm
Language: TypeScript
Installation: npm install @react-spring/three @react-three/fiber three
Peer Dependencies:
- @react-three/fiber >= 6.0
- three >= 0.126
- react ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

Core Imports

import { animated, useSpring, useSpringValue } from "@react-spring/three";

For shorter syntax:

import { a, useSpring } from "@react-spring/three";

Basic Usage

import { animated, useSpring } from "@react-spring/three";
import { Canvas } from "@react-three/fiber";

function AnimatedCube() {
  const springs = useSpring({
    scale: [1, 1, 1],
    rotation: [0, Math.PI, 0],
    from: { scale: [0, 0, 0], rotation: [0, 0, 0] },
  });

  return (
    <animated.mesh {...springs}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </animated.mesh>
  );
}

function App() {
  return (
    <Canvas>
      <AnimatedCube />
    </Canvas>
  );
}

Architecture

@react-spring/three is built around several key components:

Animated Components: Three.js primitives wrapped with spring animation capabilities (animated.mesh, animated.material, etc.)
React Spring Core: Full re-export of all react-spring hooks and components for animations
Three.js Integration: Automatic mapping of all Three.js classes to animated components
R3F Integration: Seamless integration with React Three Fiber's render loop and prop application system

Capabilities

Animated Three.js Components

Animated versions of all Three.js objects and components for use with react-spring animations. Automatically generated from Three.js class names.

const animated: WithAnimated;
const a: WithAnimated; // Short alias

type WithAnimated = {
  <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>;
} & AnimatedPrimitives;

type AnimatedPrimitives = {
  [P in Primitives]: AnimatedComponent<FC<JSX.IntrinsicElements[P]>>;
};

Animated Components

Spring Animation Hooks

Core react-spring hooks for creating and managing spring-based animations in Three.js scenes.

function useSpring(config: SpringConfig): SpringValues;
function useSprings(count: number, configs: SpringConfig[]): SpringValues[];
function useSpringRef(): SpringRef;
function useSpringValue(initial: any): SpringValue;
function useTrail(count: number, config: SpringConfig): SpringValues[];
function useTransition<T>(
  items: T[],
  config: TransitionConfig<T>
): TransitionValues<T>[];

Spring Hooks

Animation Components

Declarative components for spring animations as an alternative to hooks.

function Spring(props: SpringProps): JSX.Element;
function Trail(props: TrailProps): JSX.Element;
function Transition<T>(props: TransitionProps<T>): JSX.Element;

Animation Components

Advanced Animation Features

Advanced animation capabilities including chaining, imperative control, and utility hooks.

function useChain(refs: SpringRef[], timeSteps?: number[]): void;
function useScroll(config: ScrollConfig): SpringValues;
function useResize(config: ResizeConfig): SpringValues;
function useInView(config: InViewConfig): [SpringValues, RefCallback];

Advanced Features

Types

Core type definitions used throughout the animated Three.js ecosystem.

type AnimatedComponent<T extends ElementType> =
  ForwardRefExoticComponent<AnimatedProps<ComponentPropsWithRef<T>>>;

type AnimatedProps<Props extends object> = {
  [P in keyof Props]: P extends 'ref' | 'key'
    ? Props[P]
    : AnimatedProp<Props[P]>;
};

type AnimatedProp<T> = T | SpringValue<T>;

type Primitives = keyof JSX.IntrinsicElements;

type AnimatedPrimitives = {
  [P in Primitives]: AnimatedComponent<FC<JSX.IntrinsicElements[P]>>;
};

interface SpringConfig {
  from?: any;
  to?: any;
  config?: {
    tension?: number;
    friction?: number;
    mass?: number;
    clamp?: boolean;
    precision?: number;
    velocity?: number;
    duration?: number;
    easing?: (t: number) => number;
  };
  loop?: boolean | LoopConfig;
  delay?: number;
  immediate?: boolean;
  reset?: boolean;
  reverse?: boolean;
  cancel?: boolean;
  pause?: boolean;
  onStart?: (result: AnimationResult) => void;
  onChange?: (result: AnimationResult) => void;
  onRest?: (result: AnimationResult) => void;
}

interface SpringValues {
  [key: string]: SpringValue;
}

interface SpringRef {
  start(): void;
  stop(): void;
  update(config: Partial<SpringConfig>): void;
  set(values: any): void;
}

class SpringValue<T = any> {
  get(): T;
  set(value: T): void;
  start(config?: SpringConfig): Promise<void>;
  stop(): void;
  to(value: T): SpringValue<T>;
}

interface LoopConfig {
  reverse?: boolean;
  reset?: boolean;
}

interface AnimationResult {
  value: any;
  finished: boolean;
  cancelled: boolean;
}