Remotion Integration

React-based video rendering with motion design tokens.

Standards Reference

Core Concepts

Frame-Based Animation

Remotion uses frames, not milliseconds.

// Convert ms to frames
const msToFrames = (ms, fps = 30) => Math.round((ms / 1000) * fps);

// medium-1 (250ms) at 30fps = 8 frames
const frames = msToFrames(250, 30);

Token Integration

import tokens from '../tokens/motion.tokens.json';

const getDuration = (tokenName, fps = 30) => {
  const ms = parseInt(tokens.motion.duration[tokenName].$value);
  return msToFrames(ms, fps);
};

const getEasing = (tokenName) => {
  const [x1, y1, x2, y2] = tokens.motion.easing[tokenName].$value;
  return Easing.bezier(x1, y1, x2, y2);
};

Interpolation

Basic Usage

import { interpolate, useCurrentFrame, Easing } from 'remotion';

const MyComponent = () => {
  const frame = useCurrentFrame();

  const opacity = interpolate(
    frame,
    [0, 8], // 8 frames = 250ms at 30fps
    [0, 1],
    { easing: Easing.bezier(0.05, 0.7, 0.1, 1) }
  );

  return <div style={{ opacity }} />;
};

With Tokens

import { interpolate, useCurrentFrame, Easing } from 'remotion';
import tokens from '../tokens/motion.tokens.json';

const MyComponent = () => {
  const frame = useCurrentFrame();
  const fps = 30;

  const durationFrames = msToFrames(
    parseInt(tokens.motion.duration['medium-1'].$value),
    fps
  );

  const [x1, y1, x2, y2] = tokens.motion.easing['emphasized-decelerate'].$value;

  const opacity = interpolate(
    frame,
    [0, durationFrames],
    [0, 1],
    { easing: Easing.bezier(x1, y1, x2, y2) }
  );

  return <div style={{ opacity }} />;
};

Spring Animation

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
import tokens from '../tokens/spring.tokens.json';

const MyComponent = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const springConfig = tokens.motion.spring.enter.$value;

  const scale = spring({
    frame,
    fps,
    config: {
      damping: springConfig.damping,
      stiffness: springConfig.stiffness,
      mass: springConfig.mass
    }
  });

  return <div style={{ transform: `scale(${scale})` }} />;
};

Composition Structure

import { Composition } from 'remotion';

export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="TitleCard"
        component={TitleCard}
        durationInFrames={90} // 3 seconds at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Sequence Animation

import { Sequence } from 'remotion';

const MyVideo = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={30}>
        <Title />
      </Sequence>
      <Sequence from={15} durationInFrames={45}>
        <Subtitle />
      </Sequence>
      <Sequence from={30} durationInFrames={60}>
        <Content />
      </Sequence>
    </>
  );
};

Frame Conversion Table

See references/interpolate-recipes.md for common patterns. See references/spring-configs.md for spring presets.