🏗️ Nested AbsoluteFill — the layer stack
AbsoluteFill is a Remotion component that renders a div with position: absolute; top: 0; left: 0; width: 100%; height: 100%. When you place two or more as siblings (not as children of one another), they stack — just like photographic transparencies placed on top of one another.
import { AbsoluteFill } from "remotion"; export const LayeredScene = () => ( {/* Container principal */} <AbsoluteFill> {/* CAMADA 1 — fundo (renderizado primeiro = mais atrás) */} <AbsoluteFill> <Background /> </AbsoluteFill> {/* CAMADA 2 — conteúdo principal */} <AbsoluteFill style={{ display: "flex", alignItems: "center" }}> <Title /> </AbsoluteFill> {/* CAMADA 3 — overlay (renderizado por último = mais na frente) */} <AbsoluteFill style={{ background: "rgba(0,0,0,0.3)" }} /> </AbsoluteFill> );
💡 Practical tip
The declaration order in JSX is the rendering order (implicit z-index). The last child is in front. This differs from CSS z-index—here the code structure is the visual documentation.
🎨 Background → content → overlay
The 3-layer convention is universal in video editing: the background (Background) provides the visual atmosphere, the content (Content) delivers the message, and the overlay ties everything together and ensures legibility. Reversing any layer immediately breaks the hierarchy.
✓ Correct order
- 1.Background — video, gradient, background image.
- 2.Content — title, list, main icon.
- 3.Overlay — vignette, gradient, edge fade-out.
✗ Common ordering mistakes
- ✗Overlay before the content — content stays underneath the darkening.
- ✗Background after the content — background covers the text.
- ✗Everything inside a single AbsoluteFill with manual positioning.
🌫️ Vignette and dark overlay — readability
The most common problem when combining background video with text is readability. A vibrant, colorful background may have the exact same tones as the white text, making it invisible. The solution is a semi-transparent black layer between the two.
📊 Opacity values for overlay
- rgba(0,0,0,0.2) — subtle, for already dark backgrounds. Barely perceptible.
- rgba(0,0,0,0.4) — the default for most cases. A good balance.
- rgba(0,0,0,0.6) — very light or colorful backgrounds. It can get too dark.
- rgba(0,0,0,0.8) — almost opaque. Use only for scene fade-outs.
const frame = useCurrentFrame(); // Overlay entra gradualmente nos primeiros 20 frames const overlayOpacity = interpolate( frame, [0, 20], [0, 0.4], { extrapolateRight: "clamp" } ); return ( <AbsoluteFill style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} /> );
💡 Practical tip
Before setting the overlay value, open the most “problematic” frame (usually with the lightest or most colorful background) and adjust until the text is comfortably readable—not just “technically readable.”
🎚️ Opacity by layer — independent fade
Each AbsoluteFill can have its own independently animated opacity. This creates cascading reveal effects: the background can fade in over the first 20 frames while the content waits until frame 30. The viewer takes in the context before the message.
Background fades in (frames 0–20)
The Background reveals the visual setting—the viewer already knows where they are before seeing the message.
Overlay follows the background (frames 5–25)
Ensures that by the time the text appears, the background is dark enough for contrast.
Content enters last (frame 25+)
With the context established and the overlay ready, the content comes in over a readable canvas.
⚖️ Don’t compete for attention
Video design is about focus. At every moment, there should be one main element that commands attention. When the background, text, and icon all animate with the same intensity at the same time, viewers get disoriented — looking at everything but seeing nothing.
✓ Attention hierarchy
- ✓Background: subtle, slow animation (not distracting).
- ✓Content: expressive entrance animation (this is the focus).
- ✓Decoration: low opacity, no motion.
✗ Visual chaos
- ✗Background with fast, bright particles throughout the video.
- ✗Title and subtitle animate together with different springs.
- ✗4+ saturated-color elements competing in the same scene.
💡 Single-focus rule
Pause the video on any frame and ask yourself: "where does the eye naturally go?" If the answer isn’t immediate and clear, the frame is overloaded. Reduce the intensity of supporting elements until the focus is obvious.
🔍 Debugging Layers in Studio
When a layer “disappears” or becomes unexpectedly invisible, the fastest debugging technique is to add a outline temporary in each AbsoluteFill or increase its opacity to identify exactly where it is in the stack.
// Técnica 1: outline colorido para ver bordas <AbsoluteFill style={{ outline: "2px solid red" }}> <Background /> </AbsoluteFill> // Técnica 2: opacidade 0.5 para revelar sobreposição <AbsoluteFill style={{ opacity: 0.5 }}> <Overlay /> </AbsoluteFill> // Técnica 3: comentar camadas individualmente {/* <AbsoluteFill><Background /></AbsoluteFill> */}
📌 Module summary
Next module:
3.3 — Rhythm & Transitions Between Scenes: Series, breathing room in durations, and how to sync to the beat.