---
title: "Remotion Fundamentals: A Field Note on Using React Components for Video"
description: "A write-up on how the powerful React and TypeScript ecosystem can be applied directly to video production through Remotion, and where this approach shines."
lang: "en"
canonical: "https://llm-lab.dev/en/posts/react-remotioni-movie-test/"
source: "https://llm-lab.dev/en/posts/react-remotioni-movie-test.md"
publishedAt: "2024-02-14"
updatedAt: "2024-02-14"
category: "実装検証"
tags:
  - "react"
  - "remotion"
  - "typescript"
---

# Remotion Fundamentals: A Field Note on Using React Components for Video

## The paradigm of building video with react

When you think of video production, the usual image is manipulating GUI tools like adobe after effects. Remotion was built on the principle that "if ui can be defined with components, then a video timeline should also be definable with code."

I found the idea of bringing web frontend assets — especially the powerful react and typescript ecosystem — directly into video production to be a very interesting approach. Below are the key points I noted.

---

## Three core concepts

To understand Remotion, the core ideas boil down to these three:

### 1. `Composition` (defining a video)

This is the smallest unit that defines metadata such as a video's resolution (pixels for width and height), frame rate (fps), and total number of frames (duration). In react terms, it is equivalent to the "framework for the entire screen."

### 2. `Sequence` (controlling the timeline)

A component that controls during which frames a specific element is visible inside a video. This allows you to declaratively describe the operations of "layers" and "timelines" in video editing software as parent-child relationships (nesting) of react components.

### 3. Hooks for retrieving the "current frame"

The most powerful parts of Remotion are the `useCurrentFrame` and `useVideoConfig` hooks.

Because you can retrieve the currently playing frame number in real time, you can write "dynamic style changes over time (animation)" as pure javascript logic like the following:

```typescript
// imagine calculating opacity and position based on frame count
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// fade in gradually over one second (fps frames)
const opacity = Math.min(frame / fps, 1);
```

---

## Why Remotion instead of css animation?

At first glance, you might wonder how this differs from running css animations on a normal website. The decisive difference lies in "deterministic control of every single frame."

Animations in a web browser can drop frames (lag) depending on machine specs and rendering load. However, Remotion strictly simulates the state for each specified frame, and ultimately renders each frame accurately as an image on the server side (in a headless browser such as puppeteer). These frames are then combined into a single mp4 video using ffmpeg.

This mechanism guarantees robustness: no matter how complex the javascript calculations or external api data fetching may be, the final output video will "never suffer audio desync or dropped frames."

---

## Where I think it fits best

Thinking about what situations would make this tool a strong asset, I feel it has clear strengths in the area of "dynamic video generation" such as the following:

- **Data-driven video automation:**
  Automatically render personalized annual usage report videos (like "your year in review") by injecting database data as props.
- **Operational cost automation:**
  Mass-produce eye-catching videos for technical blogs or short-form social media videos in a fixed format on the backend, triggered by markdown or json.

The fact that familiar skills in html/css, tailwind, and typescript connect directly to an automated video production pipeline also suggests very good compatibility with llm ops and various automation logic. I would like to look for an opportunity to embed this into a custom automation workflow and experiment with it.