# Remotion Video

> Current Remotion video production pack for React-based product videos, previews, and renderer handoff.

- Skill: `memi-design/remotion-video` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add memi-design/remotion-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/memi-design/remotion-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: memi-design (https://skillmd.com/u/memi-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/memi-design/remotion-video

---


# Remotion Video

Use this Note when the output should be a React-coded video project. Prefer a
real Remotion scaffold over static storyboard prose when Studio is asked to
preview, render, or hand off a video.

## Current Workflow

1. Create a project with `package.json`, `remotion.config.ts`, `src/index.ts`,
   `src/Root.tsx`, and a storyboard module.
2. Preview with `npx remotion studio src/index.ts`.
3. Render with `npx remotion render src/index.ts <composition-id> <output>`.
4. For backend rendering, use Remotion's renderer APIs only after the project
   has a stable composition id, width, height, fps, duration, and props schema.

## Scaffold Rules

- Keep the default composition id stable: `MemoireVideo`.
- Store generated projects under `.memoire/videos/<id>`.
- Put the render output under `.memoire/videos/<id>/dist/<id>.mp4`.
- Use React and Remotion primitives for timeline logic; avoid ad hoc DOM timers.
- Include `prefers-reduced-motion` or low-motion alternates when the output will
  also be embedded in the Studio UI.

## Quality Bar

- Every scene has a purpose: hook, proof, product action, result, CTA.
- Use transform and opacity for core motion.
- Reserve camera-like motion for product explanation, not decoration.
- Verify text fits 16:9 and 9:16 crops before rendering social variants.