remotion-scene-anatomy

When to Use

Use this in Stage 04 after beat-timings.md is finalized. This skill encodes the four patterns that make narrated Remotion videos behave correctly:

1. timing.ts -- a single source of truth for beat boundaries
2. Beat-local time -- each scene reads useCurrentFrame() inside its <Sequence>, so its T constants live in beat-local seconds
3. Gap-fill sequences -- each scene's durationInFrames extends to the next beat's start, with a background AbsoluteFill underlay, so no black frames appear between scenes
4. End-card pattern -- always lockup + website url, never a tagline overlay

For deeper Remotion API reference, see the upstream remotion-best-practices skill in ../../../script-to-animation/skills/remotion-best-practices/.

Rules

• rules/timing-ts.md -- the exact timing.ts structure
• rules/beat-local-time.md -- why scenes use beat-local T constants and how to re-time when audio changes
• rules/gap-fill-sequence.md -- the endFrame = next ? Math.floor(next.start*fps) : totalFrames pattern
• rules/end-card-pattern.md -- lockup + url, springs, no tagline

Per-Scene Anatomy

Every scene file follows the same shape:

// Beat N -- short description (abs start - end seconds)
// VO callouts (local seconds): tag = local_t

import React from 'react';
import {useCurrentFrame, useVideoConfig} from 'remotion';

const T = {
  callout1: <local seconds>,
  callout2: <local seconds>,
  // ...
};

export const BeatN: React.FC = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const t = frame / fps;
  // reveals keyed off t and T.*
  return (/* JSX */);
};

When the audio is regenerated, beat-timings.md changes, timing.ts changes, and the per-scene T constants are re-derived from the new sub-callout values (absolute time minus the new beat start).

Master Composition