Getting Started

Remotion Bits is a collection of beautiful, production-ready animation components for Remotion. Get started in minutes and create stunning video animations with minimal code.

Installation

Via npm

Install the package using your preferred package manager:

npm install remotion-bits

pnpm add remotion-bits

yarn add remotion-bits

Via jsrepo

Alternatively, copy individual components directly into your project:

npx jsrepo add text-transition
npx jsrepo add background-transition

Prerequisites

Remotion Bits requires the following peer dependencies:

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

If you haven’t already set up a Remotion project, follow the Remotion quickstart guide.

Quick Example

Here’s a simple example to get you started with a text animation:

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

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

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

What’s Next?

Now that you have Remotion Bits installed, explore the components:

• TextTransition - Animate text with fade, slide, word-by-word, and character effects
• BackgroundTransition - Smooth gradient transitions between any CSS gradients
• MotionTransition - Flexible motion wrapper for any element

Or check out the examples to see real-world use cases.

Need Help?

• Browse the component documentation
• Check out utilities for advanced customization
• View examples for inspiration

TypeScript Support

Remotion Bits is built with TypeScript and provides full type definitions out of the box. Your IDE will provide autocomplete and type checking for all component props.

import type { TextTransitionProps } from 'remotion-bits';

// Full TypeScript support
const props: TextTransitionProps = {
  transition: {
    opacity: [0, 1],
    y: [50, 0],
    split: "word", // TypeScript knows valid values
    splitStagger: 3,
  }
};