remotion

تولید ویدئوهای داده‌محور MP4 با React و Remotion، از storyboard تا رندر نهایی.

این skill با Remotion 4 و React/TypeScript، ویدئوهای برنامه‌نویسی‌شده و داده‌محور می‌سازد؛ از طراحی storyboard و صحنه‌ها تا تولید فایل MP4. برای ویدئوهای بازاریابی، معرفی محصول، walkthrough رابط کاربری، explainer و ویدئوهای دارای caption مناسب است.

فرآیند کار شامل طراحی ساختار، پیاده‌سازی انیمیشن‌های مبتنی بر frame با interpolate و spring، typecheck، رندر آزمایشی و بازبینی stillها پیش از خروجی نهایی است. نتیجه قابل تکرار، قابل ویرایش و مناسب تولید نسخه‌های متعدد از یک قالب ویدئویی خواهد بود.

چه چیزی می‌گیرید

• storyboard و plan.md با ساختار صحنه‌ها، زمان‌بندی و مشخصات composition
• پروژه React/TypeScript با ساختار استاندارد Remotion و sceneهای قابل ویرایش
• انیمیشن‌های deterministic بر پایه frame، `interpolate`، `spring` و `Sequence`
• رندر آزمایشی، استخراج still برای بازبینی بصری و اصلاح پیش از خروجی نهایی
• فایل MP4 نهایی به‌همراه مسیر source و مشخصات ویدئو

برای چه کاری خوب است

• تیم‌های محصول و بازاریابی که به ویدئوهای معرفی، launch یا branded explainer نیاز دارند
• طراحان و توسعه‌دهندگانی که می‌خواهند ویدئوهای UI walkthrough یا آموزشی را با کد تولید کنند
• پروژه‌هایی که به خروجی‌های متعدد از یک قالب، داده‌های پویا و کنترل دقیق زمان‌بندی نیاز دارند

برای چه کاری نیست

• ساخت انیمیشن‌های تعاملی داخل وب‌سایت؛ برای این کار معمولاً GSAP یا کتابخانه‌های frontend مناسب‌تر است
• پروژه‌هایی که به تدوین دستی و timelineمحور در نرم‌افزارهایی مانند After Effects نیاز دارند
• محیط‌هایی که Node.js، Chromium یا FFmpeg در دسترس نیست و امکان رندر کمکی کاربر وجود ندارد

دربارهٔ این اسکیل

Remotion

Produce data-driven videos with Remotion: React components as video.
Act as a creative director first — Remotion rewards systems thinking (one
caption component reused 20 times beats 20 bespoke scenes). Then act as a
Remotion engineer: everything is a pure function of the current frame.

The frame model is absolute law: components receive frame (integer) and must
render deterministically from it. No useState counters, no Date.now(), no
randomness without seeds. Same frame => same pixels, or renders drift.

Workflow at a glance

Phase 0 PREFLIGHT -> Phase 1 PLAN -> Phase 2 CODE -> Phase 3 DRAFT (range)
    -> Phase 4 FINAL (full) -> Phase 5 DELIVER
                                   ^
        revisions: edit -> DRAFT again -> user approves -> FINAL

Project layout contract

Scaffolded projects live under the current working directory:

<cwd>/videos-react/<topic-slug>/
├── plan.md          # storyboard from Phase 1
├── package.json     # create-video template (remotion 4 pinned)
├── remotion.config.ts
├── src/
│   ├── index.ts     # entry (registerRoot)
│   ├── Root.tsx     # <Composition> registry — Phase 2 edits this
│   └── scenes/*.tsx # one component per scene/beat
├── out/             # renders — never hand-edited, gitignored
└── final.mp4        # delivered video (copied from out/, Phase 4)

<topic-slug> is short kebab-case. Reuse the folder for revisions.

Phase 0: Preflight

node <skill-dir>/scripts/preflight.mjs

Verifies node 18+, npm, ffmpeg. The Chromium binary is provisioned by Remotion
itself on first render (network needed once) — or point at an existing one
with --browser-executable. If no browser can be provisioned, set strategy
now: code + typecheck only, renders user-assisted — say so at delivery.

Phase 1: Plan (no code yet)

Read references/remotion-api.md and classify into one tier:

Write <cwd>/videos-react/<slug>/plan.md: title, arc, composition list (id,
duration, fps, size), per-sequence beats with primitives named concretely
(interpolate slide, spring pop, <Sequence from>), caption script if any,
audio assets. Fidelity rules: title mirrors the topic; state the point before
visualizing; methods step by step.

Phase 2: Code

Scaffold non-interactively, then install:

npx -y create-video@<pinned> --yes --blank <cwd>/videos-react/<slug>
npm install --prefix <cwd>/videos-react/<slug>

(Pin the create-video version the skill was verified against; record it in the
plan. Never float major versions — the CLI surface moves.)

Write src/scenes/*.tsx, register one <Composition> per deliverable in
src/Root.tsx:

<Composition id="Launch" component={Launch} durationInFrames={900}
  fps={30} width={1920} height={1080} />

Consult references/remotion-api.md,
references/troubleshooting.md, and
examples/ (title-slide, spring pop, captioned sequence patterns).

Coding standards:

• Pure functions of frame (via useCurrentFrame()). Easing via Easing.bezier or spring() — never CSS animations (they run on wall time).
• Sequences compose with <Sequence from={n} durationInFrames={m}>; nest, don't overlap implicitly.
• Fonts: system stacks in drafts; bundle webfonts before finals (render machines may lack them).
• Props flow top-down; validate with zod schemas when a composition takes inputs.

Gate before rendering (typecheck, seconds):

npx tsc --noEmit --prefix <cwd>/videos-react/<slug>

Phase 3: Draft render (mandatory, never skip)

npx remotion render <CompId> <slug>/out/draft.mp4 --frames=0-89 --codec=h264 --crf 23

• --frames=0-89 renders the first 3s at 30fps (ranges are inclusive).
• Remotion encodes MP4 itself — no separate ffmpeg step.
• Windows shells: pass --props as a FILE, never inline JSON (shell strips quotes).

Visual frame review (mandatory): stills, not scrubbing:

npx remotion still <CompId> <slug>/out/still_<frame>.png --frame=<n>

Pull start/middle/end stills (plus every entrance beat). Check: text inside
safe area, no overlap, captions legible at target size, brand colors exact.
Fix, re-render the range, re-review.

Phase 4: Final render

npx remotion render <CompId> <slug>/out/final.mp4 --codec=h264 --crf 18
cp <slug>/out/final.mp4 <slug>/final.mp4

Default deliverable 1080p30; 60fps or 4K only on explicit request (set on the
<Composition>, not via flags — --width/--height/--fps overrides exist but
composition-source-of-truth wins for reproducibility). Verify with ffprobe.

Phase 5: Deliver

**Video ready**

Topic: <topic>
Plan recap:
- Sequence 1: <one line>
...

File: <absolute path to final.mp4> (<WxH>@<fps>, ~M:SS estimated)
Source: <absolute path to videos-react/<slug>/src/>

License note: Remotion is source-available, not OSI open-source. Confirm
https://www.remotion.dev/docs/license covers your use.

Want any changes? Range re-renders are fast; full render once satisfied.

Revision policy

1. Edit src/. 2. tsc --noEmit. 3. Range re-render. 4. Iterate. 5. Full

render + redeliver. Never ship without a draft pass.

Hard rules

• Frame-pure components only: no wall-clock, no unseeded random, no CSS animations.
• Always preflight before planning; always typecheck before rendering; always draft-range + stills review before finals.
• Never hand-edit out/; regenerate via the CLI.
• One video project per topic under <cwd>/videos-react/<slug>/.
• If any phase fails repeatedly (2+ fix attempts), report the blocker honestly.

دانلود ZIP