Getting Started

Remotion Bits is a collection of beautiful, production-ready animation components for Remotion. Build complex video animations with elegant React components, pre-built effects, and a powerful utility library.

Installation

Copy individual components directly into your project:

# Initialize the registry first
npx jsrepo init https://unpkg.com/remotion-bits/registry.json

# Then add components
npx jsrepo add animated-text
npx jsrepo add gradient-transition

npm install remotion-bits

pnpm add remotion-bits

yarn add remotion-bits

bun add remotion-bits

npx skills add av/remotion-bits

Prerequisites

Remotion Bits requires the following peer dependencies to already be installed:

remotion >= 4.0.0
react >= 18.0.0
react-dom >= 18.0.0

Core Components

Remotion Bits provides five powerful animation components:

Text Animations

AnimatedText lets you animate text character-by-character, word-by-word, or by line with configurable staggering and easing.

Motion Effects

StaggeredMotion applies coordinated animations across multiple child elements with directional timing control.

Gradient Transitions

GradientTransition smoothly interpolates between CSS gradients with support for linear, radial, and conic gradients.

Particles

ParticleSystem creates complex particle effects with customizable behaviors like gravity, drag, and wiggle animations.

3D Scenes

Scene3D renders interactive 3D scenes with camera controls, sequential animations via steps, and 3D element transformations.

Quick Start

Here’s a simple example animating text with fade and slide effects:

import { Composition } from 'remotion';
import { AnimatedText } from 'remotion-bits';

export const MyComposition = () => {
  return (
    <div style={{
      backgroundColor: '#000',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <AnimatedText
        transition={{
          split: 'word',
          opacity: [0, 1],
          y: [50, 0],
          stagger: 3,
          duration: 30
        }}
        style={{
          fontSize: '4rem',
          color: 'white',
          fontWeight: 'bold'
        }}
      >
        Hello Remotion Bits!
      </AnimatedText>
    </div>
  );
};

// Register the composition
export const Root = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={120}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Using Utilities

Remotion Bits includes powerful utility functions for advanced animations:

import { interpolate } from 'remotion-bits';

// Interpolate with easing functions
const scale = interpolate(frame, 0, 60, 0.5, 1.5, {
  easing: 'easeOutBounce'
});

TypeScript Support

Remotion Bits is built with TypeScript and provides full type definitions out of the box:

import type { AnimatedText } from 'remotion-bits';
import { AnimatedText as AnimatedTextComponent } from 'remotion-bits';

const MyText: React.FC = () => {
  return (
    <AnimatedTextComponent
      transition={{
        split: 'character',
        opacity: [0, 1],
        rotate: [45, 0],
        duration: 40,
        easing: 'easeOutQuad'
      }}
    >
      Fully typed!
    </AnimatedTextComponent>
  );
};

Explore Examples

Visit the Bits Catalog to see all available animation bits organized by category:

Text Animations - Fade in, blur-slide, word-by-word, character-by-character animations
Background Effects - Linear, radial, and conic gradient transitions
Particles - Snow, fountain, and grid particle effects
3D Scenes - Flying through text, 3D element transforms, and camera movements

Each example includes interactive playgrounds where you can see the animations in action.

Next Steps

Explore Components - Browse the Reference Documentation for detailed component APIs
View Examples - Check out the Bits Catalog for real-world animation patterns
Learn Utilities - Master the utility functions for custom animations
Build - Combine components and hooks to create your own custom animations