English for Remotion Video Rendering

Remotion lets developers create videos using React components instead of traditional video-editing software, and describing that process requires vocabulary borrowed from both video production and frontend development. Knowing the difference between a “composition” and a “sequence,” or understanding what “frame-based rendering” actually means, helps you communicate clearly with both engineers and non-technical stakeholders reviewing generated videos. This guide covers the key terms.

Key Vocabulary

Composition — the top-level definition of a video in Remotion, specifying its React component, duration in frames, dimensions, and frame rate. “We registered a new composition for the certificate video, separate from the existing onboarding video composition.”

Frame-based rendering — Remotion’s approach of treating a video as a sequence of individually rendered frames, where each frame is just a snapshot of your React component at a specific point in time, rather than a continuously playing timeline. “Because it’s frame-based rendering, we can jump to frame 150 and see exactly what the video looks like at that instant, without playing the whole thing.”

Sequence — a component that offsets and constrains when its children appear within the overall composition’s timeline, letting you control exactly which frames a given element is visible for. “Wrap the logo animation in a Sequence so it only appears between frames 30 and 90, instead of for the whole video.”

Interpolation — calculating an in-between value (like opacity, position, or scale) based on the current frame number, which is how most animation in Remotion is driven, rather than using CSS transitions. “We interpolate the opacity from 0 to 1 over the first fifteen frames instead of relying on a CSS fade, since it needs to be deterministic for rendering.”

Deterministic rendering — the property that a given frame always renders identically no matter when or how many times it’s rendered, which is essential for server-side or distributed video rendering to produce a consistent result. “The flicker bug came from using Math.random() directly in the component — that breaks deterministic rendering, since each render pass produced different results.”

Lambda rendering — using serverless functions (via Remotion Lambda) to render video frames in parallel across many machines, dramatically speeding up render time for long or high-resolution videos compared to a single local render. “Local rendering took twenty minutes for this video; with Lambda rendering splitting the work across many functions, it finished in under a minute.”

Common Phrases

• “Is this composition registered correctly, or is the render pipeline not finding it?”
• “Wrap that in a Sequence so it doesn’t appear for the entire video.”
• “Don’t use Date.now() in the component — it’ll break deterministic rendering.”
• “We should move this to Lambda rendering; the local render time is becoming a bottleneck.”
• “Check the interpolation range — the animation is finishing before the sequence even starts.”

Example Sentences

Explaining the workflow to a non-technical stakeholder: “We build each video as a set of React components, and Remotion renders it frame by frame into an actual video file. Because everything is code, we can generate hundreds of personalized videos automatically instead of editing each one by hand.”

Debugging a rendering bug: “The exported video had visible flickering on the logo. It turned out we were using a random number directly inside the animation logic, which broke deterministic rendering — each frame needs to calculate the exact same result every time it’s rendered.”

Describing a performance improvement: “Switching from local rendering to Lambda rendering cut our render time from twenty minutes down to under a minute for the longer videos, since the frames get distributed across many parallel functions instead of rendering sequentially.”

Professional Tips

• Use “composition” specifically for the top-level video definition, not for individual scenes or elements within it — reserve “sequence” for those.
• When debugging visual glitches in rendered output, check for anything that breaks deterministic rendering first (random values, current-time lookups, network calls) — it’s the most common root cause.
• Recommend Lambda rendering explicitly when render times become a bottleneck for long or high-volume video generation, rather than just describing it as “slow.”
• Say “interpolation” when describing frame-driven animation values, to distinguish it clearly from CSS-based animation, which doesn’t work the same way in a frame-rendered context.

Practice Exercise

1. Explain, in two sentences, why deterministic rendering matters for a video rendered frame by frame.
2. Write a one-sentence bug report describing a visual glitch caused by non-deterministic code in a composition.
3. Describe, to a stakeholder, why Lambda rendering can be much faster than rendering a video locally.