# remotion

> Remotion video rendering with motion design tokens. Use when creating programmatic videos, implementing motion token animations in Remotion, or building video templates. References Remotion documentation and M3 token integration.

- Author: Edison
- Repository: soilmass/motion-design-agent
- Version: 20260124075058
- Stars: 1
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/soilmass/motion-design-agent
- Web: https://mule.run/skillshub/@@soilmass/motion-design-agent~remotion:20260124075058

---

---
name: remotion
description: Remotion video rendering with motion design tokens. Use when creating programmatic videos, implementing motion token animations in Remotion, or building video templates. References Remotion documentation and M3 token integration.
---

# Remotion Integration

React-based video rendering with motion design tokens.

## Standards Reference

| Standard | Documentation |
|----------|---------------|
| Remotion | remotion.dev/docs |
| M3 Tokens | Integrated via tokens/ |

## Core Concepts

### Frame-Based Animation
Remotion uses frames, not milliseconds.

```javascript
// 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

```javascript
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
```javascript
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
```javascript
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

```javascript
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

```jsx
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

```jsx
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

| Token | Value | 24fps | 30fps | 60fps |
|-------|-------|-------|-------|-------|
| short-1 | 50ms | 1 | 2 | 3 |
| short-4 | 200ms | 5 | 6 | 12 |
| medium-1 | 250ms | 6 | 8 | 15 |
| medium-2 | 300ms | 7 | 9 | 18 |
| long-2 | 500ms | 12 | 15 | 30 |

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