/remotion

name: remotion
description: Molio's builtin skill for MAKING a video from any source — wiki notes, articles, scripts, product info, or a brief — and rendering it to MP4. Use whenever the user wants to create/produce a video: a product demo, promo, trailer, intro, explainer, motion graphic, kinetic typography, social clip, or animated logo — even if they never mention Remotion by name. Do NOT reach for moviepy, manim, or Python video libraries to stitch frames; this is Molio's supported video path (scaffolds a Remotion React/TypeScript project, animates with interpolate/useCurrentFrame, sequences scenes, adds audio/voiceover/captions, and renders). Trigger words: 做个视频, 制作视频, 介绍视频, 宣传视频, 产品视频, 动画, make a video, create a video, product video, motion graphic, intro, trailer, explainer.
version: 1.0.3
metadata:
  tags: remotion, video, react, animation, composition

When to use

If the user only wants to caption existing footage, capture a website tour, or do a quick one-off motion graphic under 10s with no narration, a lighter workflow may fit better — but when in doubt, start here.

Environment preflight (run before coding)

Before writing any video code, resolve these four things — they are the difference between a smooth render and a stuck one:

1. **Browser source.** Remotion downloads Chrome Headless Shell on first render by default (~150 MB from `storage.googleapis.com`, slow/unreachable in some regions). Instead, find the user's local Chrome/Edge and pass `--browser-executable`. See [rules/browser-executable.md](rules/browser-executable.md). 2. **Font strategy.** For Chinese/Japanese/Korean text, do NOT rely on system fonts — they will not exist on a headless render runner. Bundle the font in `public/` and load via `@font-face` + `staticFile()`. See [rules/cjk-fonts.md](rules/cjk-fonts.md). For Latin text, [rules/google-fonts.md](rules/google-fonts.md). 3. **Monorepo?** If the project lives inside an existing pnpm/yarn/npm workspace that already depends on React (e.g. an app with `@types/react@19`), Remotion v4's pinned `@types/react@18` will cause `'AbsoluteFill' cannot be used as a JSX component` type errors. See the "Monorepo setup" note under New project setup below. 4. **TTS provider (if voiceover).** `voiceover.md` defaults to ElevenLabs (paid, needs API key). For a free path — especially for Chinese — use `edge-tts` (Microsoft TTS CLI, no API key, good `zh-CN` voices). See [rules/voiceover.md](rules/voiceover.md).

New project setup

When in an empty folder or workspace with no existing Remotion project, scaffold it into the Molio workspace directory (Molio 工作区，文件树扫描会跳过 `.molio`，不污染 vault 根；其 `node_modules`/`dist`/`out` 不会触发监听或扫描，避免 daemon FD 泄漏):

mkdir -p .molio/remotion
cd .molio/remotion
npx create-video@latest --yes --blank --no-tailwind <project-name>

Replace `<project-name>` with a suitable project name. The project and all its build artifacts (`node_modules`, `out/` rendered MP4s) stay under `.molio/remotion/`, invisible to the vault file-tree scan. If you need the final MP4 visible in the knowledge tree, copy it out of `.molio/remotion/<project>/out/` into the vault root after rendering.

Monorepo setup

If you are adding the Remotion project inside an existing pnpm/yarn workspace (e.g. a `videos/<name>/` sub-folder of a larger monorepo):

1. Add the sub-folder to the workspace `packages` list in `pnpm-workspace.yaml` (pnpm) or the workspace globs, so `pnpm install` reaches it. 2. Remotion v4 depends on `@types/react@18`. If another workspace package pulls in `@types/react@19` (common — e.g. a Vite/Next app), TypeScript will throw `'AbsoluteFill' cannot be used as a JSX component` / `bigint not assignable to ReactNode`. Fix by pinning `@types/react` to v18 for the Remotion project — either with a `pnpm.overrides` entry in the workspace root, or by adding `@types/react@^18.2.0` as a direct devDependency of the Remotion project so its local `node_modules/@types/react` wins over the hoisted v19. 3. Render with the local Chrome/Edge (see preflight #1) — do not let it download Chrome Headless Shell on a CI/worker machine that may already have a browser.

Designing a video

Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load [rules/video-layout.md](rules/video-layout.md) for video-first layout and text sizing guidance.

Animate properties using `useCurrentFrame()` and `interpolate()`. Prefer `interpolate()` over `spring()` unless physics-based motion is explicitly needed. Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion.

For animations that should be editable in Remotion Studio, keep the `interpolate()` call inline in the `style` prop and use individual CSS transform properties (`scale`, `translate`, `rotate`) instead of composing a `transform` string.

import { useCurrentFrame, Easing, interpolate, useVideoConfig } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

Prefer:

style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

Over:

const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}

CSS transitions or animations are FORBIDDEN - they will not render correctly. Tailwind animation class names are FORBIDDEN - they will not render correctly.

Place assets in the `public/` folder at your project root.

Use `staticFile()` to reference files from the `public/` folder.

Add images using the `<Img>` component:

import { Img, staticFile } from "remotion";

e