remotion-bits

Remotion Bits

Animation components and utilities for building Remotion videos. The library's most powerful feature is Scene3D - a camera-based 3D presentation system (like impress.js) that enables cinematic multi-section compositions with flying camera moves, step-aware element animations, and Transform3D position management.

When building any non-trivial composition, prefer Scene3D as your foundation. It handles camera movement, timing, element positioning, and responsive layout all in one system. Individual components (AnimatedText, Particles, etc.) work best as content placed inside Scene3D steps.

Prerequisites: remotion >= 4.0, react >= 18, react-dom >= 18

# Via npm
npm install remotion-bits

# Via jsrepo (copies source for customization)
npx jsrepo init https://unpkg.com/remotion-bits/registry.json
npx jsrepo add animated-text particle-system scene-3d

Imports

Everything is exported from remotion-bits:

import {
  // 3D Scene System (primary workflow)
  Scene3D, Step, Element3D, StepResponsive,
  Transform3D, Vector3,
  useScene3D, useCamera, useActiveStep,
  // Animation Components
  AnimatedText, AnimatedCounter, TypeWriter, CodeBlock,
  StaggeredMotion, GradientTransition, MatrixRain, ScrollingColumns,
  Particles, Spawner, Behavior,
  // Core
  useViewportRect,
  interpolate, Easing,
  interpolateColorKeyframes, interpolateGradientKeyframes,
  random, resolvePoint, createRect,
} from "remotion-bits";

Core Concepts

1. AnimatedValue

Most animation properties accept AnimatedValue: a static number OR an array of keyframes interpolated over the animation's duration.

opacity: 1                // Static
opacity: [0, 1]           // Animate 0→1
opacity: [0, 1, 0.5, 0]  // Multi-keyframe: 0→1→0.5→0 evenly spaced
scale: [0.8, 1]           // Scale from 80% to 100%
y: [30, 0]                // Slide up from 30px offset

Keyframes are evenly distributed across the duration. With 4 keyframes over 60 frames: frame 0→20→40→60.