🧬 Combination Patterns

The prop from The Sequence says which frame that content block starts to exist on the timeline.

It’s the foundation of every stagger and every synchronization between elements—without it, everything appears simultaneously at frame 0.

from = delay in frames · local frame resets to 0 · combines with durationInFrames.

Pattern where each item in a list starts N frames after the previous one: from={index * 5}.

Creates the feeling of a "cascade," making lists and menus much more elegant than having everything enter at once.

N = 4–8 frames is the sweet spot · too large = too slow · index comes from .map().

Start element B a few frames before A ends — creating intentional overlap and fluidity.

Eliminates the "empty screen" gaps that make the video feel amateurish and smoothly shifts attention.

from_B = from_A + dur_A - overlap · typical overlap = 6–12 frames.

Store the offsets in named variables (const TITLE_START = 0; const LIST_START = 20;) instead of scattered magic numbers.

When you need to change a timing, you only change one number and everything that depends on it updates together.

constants at the top of the component · derive: LIST_START = TITLE_START + TITLE_DUR · no magic numbers.

When multiple elements don't have from, they all appear on frame 0, creating an overloaded flash of information.

Frame 0 is the video's first impression—putting everything there is like shouting everything at once.

rule: each element has its own from · frame 0 = main element only · stagger the others.

Inside a Sequence, the local frame starts at 0 — so spring({frame, fps}) fires fresh on every entry.

Combining Sequence + spring is Remotion’s most natural staggered entrance pattern, used in 70% of the 81 templates.

local frame · spring starts at 0 · each item has its own independent spring.

Multiple <AbsoluteFill> siblings — each occupies 100% of the space, stacked like transparencies.

Without this, you'd try to use position/z-index by hand and break Remotion's responsive layout.

absolute positioning · 100% fill · order = z · siblings, not children.

The standard convention: first the Background (video/gradient), then the main content (title, list), and finally the overlay (vignette, fade).

Reversing the order makes the background cover the text — an immediate visual error that confuses the viewer.

last child = frontmost · background = first · overlay = last.

A translucent black layer between the background and the text increases contrast without hiding the Background.

White text over colorful video with no overlay is unreadable in 80% of cases—the overlay fixes it in 2 lines.

rgba(0,0,0,0.4) · test with real content · don't overdo it (≤0.6).

Each AbsoluteFill can have its own animated opacity — the background fades in while the content is still waiting.

Lets you reveal the background before the text, creating temporal visual hierarchy without complicated code.

style={{opacity}} · combines with Sequence · opacity 0 hides but preserves space.

Design rule: at most 1–2 elements should be the main focus. The others provide support.

When the background, text, and icon animate with the same intensity, the viewer doesn't know where to look.

background = subtle · content = highlight · overlay masks the excess.

In Remotion Studio, you can inspect each element, see its position in the hierarchy, and identify what is covering what.

Without this skill, debugging an overlay that "disappeared" can take hours; with it, seconds.

DevTools · temporary outline · opacity: 0.5 to reveal hidden layers.

<Series> places each <Series.Sequence> automatically one after another, calculating the offsets.

Assembling 3+ scenes with manual Sequence requires calculating from; Series removes that work and keeps the code readable.

durationInFrames per scene · order = time · easy to reorder.

Each scene should last long enough for the viewer to absorb the content — at least ~60 frames (2s at 30fps) for text.

Scenes that are too short create anxiety; scenes that are too long get boring. Finding the balance is what sets professional production apart from amateur work.

minimum 2s for text · 3–5s for complex concepts · test by reading aloud.

@remotion/transitions provides TransitionSeries with fade, slide, and wipe — without calculating overlaps by hand.

A well-chosen transition connects scenes emotionally; a hard cut can also be intentional—knowing when to use each is what counts.

fade = neutral · slide = movement · wipe = reveal · duration = 10–20 frames.

Fast cuts (1–2s per scene) create energy; slow cuts (4–6s) create weight and contemplation. The choice communicates intent.

A technical tutorial works best at a slow pace; a highlight reel works best at a fast pace. The wrong pacing undermines the content.

content type sets the pace · consistency within the video · intentional variation creates a peak.

Calculate which frame each beat falls on (frame = beat * fps * (60/bpm)) and align the scene cuts to those frames.

Videos with cuts on the beat look professionally produced, even with simple visuals.

frameDaBatida = (60/bpm) * fps · multiples of 4 bars · use Remotion Audio as a reference.

The final scene should bring things to a close: a soft fade-out, a logo/CTA appears, or the screen simply darkens—without an abrupt cut.

A bad ending undoes all the positive impressions built throughout the video — that’s what the viewer remembers.

final fade-out = required · generous last-scene duration · CTA in the final third.