1仕組みと動作原理
核心となる主張は画面録画ではなく「再構築」:画面録画は静的な外観、マウスのブレ、不自然なカットを引き継ぐのに対し、再構築によってフレームの決定性、イージング可能なトランジション、あらゆる解像度での鮮明さ、音声駆動のデュレーションが得られます。
A screen-recording inherits the deck's static look, mouse jitter, and abrupt slide cuts. Rebuilding in code (Remotion) buys: per-frame-deterministic reveals, transitions that actually ease, text that stays crisp at any resolution, and slide durations driven by audio length.
ストーリー優先:最初に1文のバックボーン(背骨)を定め、1スライドにつき1つの事柄のみを扱い、スライドタイトルはラベルではなく論断にします。
- **One throughline (the spine).** State the deck's single takeaway in one sentence. Every slide must advance that sentence; if a slide doesn't, cut it or move it to an appendix.
唯一の鉄則:ナレーションがクロックを支配する——各スライドの長さ=そのスライドの音声実測値+わずかなハンドル(余白)。目分量での推測は禁止。
**Each slide lasts exactly as long as its narration audio, plus a small handle.** Measure every voiceover clip's real duration, convert to frames, and make that the slide's length.
各スライドの音声は自身のコンポーネント内に配置:映像と音声が同一の Sequence で位置決めされるため、物理的にズレが発生しません。
Because the audio lives inside the same component that draws the visuals, and both are placed by the sequencer at the same start frame, voice and picture physically cannot drift.
トランジションのフレーム予算を計算する:TransitionSeries のトランジションは時間の追加ではなくオーバーラップであり、隣接スライドのフレームを消費します。
A `<TransitionSeries.Transition>` does **not** add time — it overlaps its neighbors, consuming frames from the end of the outgoing slide and the start of the incoming one.
スライド内のビルドリビールはナレーションと同期させる:読み上げられた瞬間に要素が出現し、視聴者が3行先を読んでしまわないようにします。
The point of a build is pacing: show each element when the narration reaches it, so the viewer reads the line being spoken — not three lines ahead.
可読性は厳格な境界線:本文は 1080p で ≥28–32px、タイトルは 56–80px、コントラスト比 ≥4.5:1、コンテンツは中央 90% に収める。
- **Type scale, not deck scale.** A deck viewed on a laptop ≠ a video viewed in a feed. Bump body to ≥ 28–32px at 1080p; titles 56–80px.
検証ループ:まず compositions を読み取って合計時間を取得し、トランジション上ではなく「各スライドの静止表示区間」からサンプリングを行います。
- Use `npx remotion compositions` to read the deck's `durationInFrames`/`fps` and pick the end frame; sample a still **inside each slide's hold**, not on a transition, to judge the built state.
トランジションにはロジック(したがって/しかし/それゆえ)を持たせる:控えめな fade は「並びに」に、大きな push はセクション区切りにのみ使用します。
- **Transitions carry logic, not just motion.** The cut between slides should answer "so what's next?" — therefore, but, which means, here's the proof.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion(AbsoluteFill/Sequence/Audio/spring/interpolate) |
| package | @remotion/media-utils(getAudioDurationInSeconds 量测旁白) |
| package | @remotion/transitions(TransitionSeries / linearTiming / fade / slide) |
| package | @remotion/google-fonts(reference 建议的字体加载方式;选择它会在渲染期访问 Google Fonts) |
| cli | npm / npx(安装并运行 Remotion 工程、读 compositions、渲染) |
| network | iart.ai(reference 尾部推广链接,具 utm 参数;仅读者点击才请求) |
4推奨統制措置と判定根拠
- scripts/: ローカルスクリプトまたはコマンドの実行: skill ディレクトリ内に同梱スクリプトなし。SKILL.md/reference がエージェントに対し `npm i remotion @remotion/tra` の実行を指示。
- 网络端点: 外部ネットワークアクセスの宣言: 実行時に業務 API の呼び出しなし。ナレーション音声はローカルファイルであり、Remotion がローカルで読み取り計測。
- 本地工作目录: ファイルの読み書きと成果物の出力: ユーザープロジェクト内に `out/f-title.png`/`out/f-mid.png`/`out/f-end.png`、`out/deck.mp4`、`o` を書き出し。
5二重目の独立検証
- [ok] 音频量测与 HANDLE 数值是否两处一致 — SKILL.md 代码块 `const HANDLE = 0.4; // breathing room after the voice ends` 与 sequencing.md 的 `const HANDLE = 0.4; // seconds of breathing room after each voice line` 同值。
- [ok] theme 数值是否与 reference 一致 — SKILL.md 示例 theme(bg #0B0B12 / fg #F5F5F7 / accent #6C5CE7 / titlePx 72 / bodyPx 30 / maxWidthPct 90)与 slide-components.md 的 theme.ts 逐项相同。
- [ok] 转场帧预算的声明与实现 — SKILL.md「A transition borrows frames from both neighbors, so add its length back into the slide budget」与 sequencing.md 的记账规则(slide.durationInFrames += TRANSITION)同口径。
- [discrepancy] @remotion/google-fonts 的声明层级 — @remotion/google-fonts 只出现在 sequencing.md 的 pitfalls(作为可选建议),SKILL.md 既未列入依赖面、也未提示渲染期可能访问 Google Fonts;照抄该建议会产生未声明的出网行为。
- [ok] SKILL.md 内联组件与 reference 组件是否冲突 — SKILL.md 的 Bullet 用 spring(...durationInFrames: 12) + interpolate(p,[0,1],[18,0]),reference 用 useEnter() 封装同一动效;属精简版与封装版的关系,非矛盾。
- [unlocatable] 旁白生成方式是否被声明 — SKILL.md workflow 第 2 步写「Generate/record narration per slide.(One audio file per slide (TTS or recorded).)」但未指名任何 TTS 服务或端点——属用户自备素材;「无 TTS 端点」这一结论无法在源码内定位到明确声明,故记 unlocatable(非档位依据)。
6結論
c9a450ffb476b92f…