Audio and captions

Read this reference only when the deliverable includes narration, music, sound effects, captions, or a muted-playback requirement.

Build an audio plan

Record each source, owner or license, duration, format, intended role, and whether it may be redistributed. Do not download or generate media unless the user authorized that production path.

Prioritize intelligibility:

1. narration or essential product sound;
2. supporting sound effects;
3. music and ambience.

Music should not be programmatically pulsed on every beat merely because the BPM is known. Shape volume around narration, editorial transitions, and the track's own dynamics. Use automation sparingly and listen to the rendered result.

Synchronize to final media

Use the actual audio duration and waveform when setting scene boundaries. Keep timeline values derived from fps and composition duration rather than hardcoded frame counts.

const secondsToFrames = (seconds: number, fps: number) =>
  Math.round(seconds * fps);

When using Remotion audio components, verify the installed API and whether volume callbacks receive source-relative or composition-relative frames. Keep fades within the source's audible region.

const clamp01 = (value: number) => Math.max(0, Math.min(1, value));

const fadeEnvelope = (
  frame: number,
  start: number,
  end: number,
  fadeInFrames: number,
  fadeOutFrames: number,
) => {
  const inGain = fadeInFrames > 0 ? (frame - start) / fadeInFrames : 1;
  const outGain = fadeOutFrames > 0 ? (end - frame) / fadeOutFrames : 1;
  return clamp01(Math.min(inGain, outGain));
};

Adapt this envelope to actual edit points. Do not reuse arbitrary desktop, phone, or transition multipliers.

Narration

• Write for one hearing: concrete nouns, manageable clauses, and stable terms.
• Read the script aloud before recording.
• Match delivery to the viewer and subject; do not default to launch-video hype.
• Remove breaths or noise only when the edit remains natural.
• Keep a clean narration stem so the mix can be revised.

If narration is generated, disclose the production method when required and verify pronunciation, names, numbers, and technical vocabulary.

Captions

Create captions from the final narration, not an earlier script. Preserve meaning rather than mechanically filling a fixed character count.

• split at phrase boundaries;
• keep each caption on screen long enough to read;
• avoid covering product controls or platform UI;
• use sufficient contrast and a background treatment that survives changing footage;
• verify punctuation, names, units, and specialist terms;
• export the requested sidecar format and/or burn-in version.

For sound effects that convey information, provide an equivalent caption or visual cue.

Mix and verify

Render the final composition before judging the mix. Check:

1. speech intelligibility throughout;
2. no clipping, abrupt source boundaries, or unexplained level jumps;
3. consistent perceived loudness across cuts and deliverables;
4. no music masking consonants or product sounds;
5. clean intro and outro boundaries;
6. caption timing against the final encoded file;
7. muted playback still communicates essential meaning when required.

Use available metering tools for peaks and loudness, but do not claim a broadcast or platform standard was met unless it was measured against that specified standard.

Remotion implementation cheatsheet

Read this reference only when implementing animation, responsive composition, font loading, or render commands. Confirm every API against the versions installed in the target repository.

Animation parameters

Start from the interaction's meaning, then tune while watching at normal speed.

const progress = spring({
  frame: localFrame,
  fps,
  config: { damping: 18, stiffness: 120, mass: 1 },
});

• Increase damping to reduce oscillation.
• Increase stiffness for a faster response.
• Increase mass for a heavier response.
• Prefer non-oscillating timing for routine UI, data, and instructions.
• Review at final scale; a movement visible in Studio may disappear in a feed.

Use interpolate() clamping when the input can precede or exceed its range:

const opacity = interpolate(localFrame, [0, enterFrames], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

Responsive composition

Derive layout from composition dimensions and safe areas. Do not scale a desktop frame uniformly into portrait.

const { width, height } = useVideoConfig();
const orientation = height > width ? "portrait" : "landscape";
const shortEdge = Math.min(width, height);

Branch composition when the information hierarchy changes. Test long copy, product UI, captions, and platform overlays independently in every requested format.

Font loading

Use the font mechanism supported by the installed Remotion version. Load fonts before rendering dependent frames, bundle only licensed files, and provide a predictable fallback. Test missing and slow font paths rather than masking them with an arbitrary renderer timeout.

Render workflow

Inspect project scripts first. Typical commands may include:

npx remotion compositions
npx remotion studio
npx remotion still <composition-id> --frame=<frame> out/review.png
npx remotion render <composition-id> out/video.mp4

Use composition IDs, props, codecs, and timeouts defined by the project. Render representative stills around transitions before paying the cost of a full render.

Determinism checks

• Seek directly to a frame and compare it with playback reaching the same frame.
• Avoid wall-clock time, random values without stable seeds, and mutable module state.
• Pass local frame values to scene-relative animation.
• Verify asynchronous media and data use Remotion's supported render-delay mechanism.
• Test the first and last frame of every sequence for flashes or stale layers.

Review checklist

Check the final encoded file, not only Studio: resolution, frame rate, duration, safe areas, text rendering, media presence, audio sync, caption sync, and representative device playback.

Explainer writing

Use this for product demos and technical explainers that must work when heard once.

Build the narrative

1. Start from a concrete situation the viewer recognizes.
2. State the question or problem the video will resolve.
3. Explain the mechanism before introducing specialist vocabulary; then use the correct term consistently.
4. Demonstrate the product or experiment chronologically. Let visible actions carry claims that prose would otherwise have to assert.
5. Move from each finding to the next question explicitly enough that the viewer does not lose the thread.
6. Separate observation, interpretation, and limitation. Deflate conclusions the evidence cannot support.
7. End with the practical implication or next action, not a generic mission statement.

Write for speech

Use contractions and concrete nouns. Vary sentence length, but reserve very short sentences for real emphasis. Repeat a hard concept when the viewer cannot scroll back. Remove written-prose transitions, retention bait, empty hype, and perfectly balanced cadence.

Read the script aloud at delivery speed. Revise anything that trips the tongue, overloads working memory, or claims more than the visual evidence shows.

Pair narration with evidence

For every line, identify what the viewer sees: a product action, cursor movement, interface state, diagram, data point, or purposeful pause. If a line has no supporting visual and adds no necessary context, cut it.

Remotion primitives

Read this reference only when the selected treatment benefits from reusable scene lifecycle, transition, text-reveal, or typing behavior. These are adaptable patterns, not mandatory visual signatures.

Contents

• Scene lifecycle
• Text reveal
• Transition overlay
• Typing behavior
• Selection rules

Scene lifecycle

Keep scene-relative timing explicit and handle zero-length fades without duplicate interpolation points.

import { AbsoluteFill, interpolate } from "remotion";

type SceneProps = {
  children: React.ReactNode;
  frame: number;
  duration: number;
  fadeIn?: number;
  fadeOut?: number;
};

export const Scene = ({
  children,
  frame,
  duration,
  fadeIn = 0,
  fadeOut = 0,
}: SceneProps) => {
  const enter = fadeIn > 0
    ? interpolate(frame, [0, fadeIn], [0, 1], {
        extrapolateLeft: "clamp",
        extrapolateRight: "clamp",
      })
    : 1;
  const exit = fadeOut > 0
    ? interpolate(frame, [duration - fadeOut, duration - 1], [1, 0], {
        extrapolateLeft: "clamp",
        extrapolateRight: "clamp",
      })
    : 1;

  return <AbsoluteFill style={{ opacity: Math.min(enter, exit) }}>{children}</AbsoluteFill>;
};

Add backgrounds only when the shot should occlude earlier layers. Transparent scenes are valid for intentional compositing.

Text reveal

Reveal by line, word, or character only when sequencing helps comprehension. Use semantic text and preserve natural spacing.

const words = text.split(/(\s+)/);

return words.map((token, index) => {
  if (/^\s+$/.test(token)) return token;
  const opacity = interpolate(frame - index * stagger, [0, enterFrames], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return <span key={`${token}-${index}`} style={{ opacity }}>{token}</span>;
});

Avoid springing every word or scaling type from extreme sizes unless the treatment specifically calls for that emphasis.

Transition overlay

Use an overlay only when a cut or direct scene overlap does not express the relationship.

export const FadeOverlay = ({ frame, duration, color }: {
  frame: number;
  duration: number;
  color: string;
}) => {
  const midpoint = duration / 2;
  const opacity = interpolate(frame, [0, midpoint, duration], [0, 1, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return <AbsoluteFill style={{ backgroundColor: color, opacity, zIndex: 100 }} />;
};

Set stacking relative to the actual composition rather than assuming 100 is universally sufficient.

Typing behavior

Use typing only for a real command, search, message, or input whose sequence matters.

const typed = Math.floor(
  interpolate(frame, [start, end], [0, text.length], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  }),
);
const visibleText = text.slice(0, typed);

Keep the cursor subordinate, stop or change it when entry completes, and ensure the full value remains visible long enough to read.

Selection rules

• Prefer a cut when continuity is already clear.
• Prefer local transforms over layout-property animation.
• Keep effects tied to a narrative or state change.
• Parameterize tokens through the composition's design system.
• Test primitives at sequence boundaries, in every requested format, and under direct frame seeking.