1---
2name: video-layout
3description: Video-first layout, composition, and text sizing guidance for Remotion.
4metadata:
5  tags: layout, composition, typography, text, motion graphics, promo
6---
7 
8# Video layout
9 
10Videos are watched differently than web pages are read. Design for quick understanding from the full frame, not for a dense UI that rewards close inspection.
11 
12## Start from the frame
13 
14- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
15- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
16- Prefer centered, stacked, or strongly aligned layouts. Avoid scattered dashboard-like layouts.
17- Use empty space intentionally. A video frame with one strong message is usually better than a frame full of widgets.
18- Do not place objects side by side just because there is room. If two elements compete, show them one after another or make one clearly secondary.
19 
20## Default scene structure
21 
22For promos, explainers, and motion graphics, a good default scene is:
23 
24- One main text message
25- One supporting visual, such as an icon, product card, shape, or screenshot-style mockup
26- One or two background accents
27 
28Avoid defaulting to many cards, badges, borders, pills, or tiny labels. Those are web UI patterns and often make videos feel cluttered.
29 
30## Prevent overlap by construction
31 
32- Do not manually position every readable element with independent `top`, `left`, `right`, or `bottom` values.
33- Put readable content in normal layout containers using `flex`, `grid`, `gap`, `justifyContent`, and `alignItems`.
34- Use absolute positioning mainly for backgrounds, decorative shapes, glows, particles, and elements that are meant to layer behind the content.
35- Reserve a slot for each major element in the scene. For example, a vertical promo scene can use a centered column with `gap` for headline, card, and CTA.
36- Animate elements from their reserved slot using `opacity`, `transform`, and `scale`; do not animate them into a space occupied by another element.
37- If an element enters from offscreen or from another part of the frame, its final resting position must still belong to a layout slot.
38- When text length is unknown or user-provided, assume it may wrap. Give the text block enough width and vertical room instead of placing another object immediately under it.
39 
40## Text in video
41 
42- Text must be readable at video-viewing distance. If unsure, make it larger, not smaller.
43- Treat small text as decorative unless the user explicitly needs it to be read.
44- For 1080px-wide compositions, use these rough minimums:
45  - Main headline: 84px
46  - Important supporting text: 44px
47  - Labels or short callouts: 32px
48- Scale those values with the composition width. For example, a 1920px-wide composition needs larger text than a 1080px-wide composition.
49- Keep line lengths short. Break long ideas into multiple scenes instead of shrinking the font.
50- Use strong contrast between text and background. Add a subtle backing shape or simplify the background if the text is hard to read.
51- Do not stack many text blocks in the same area. Give each message its own moment or clearly separated region.
52 
53## Solve crowding with time
54 
55- Let time solve layout problems. Instead of showing every feature at once, reveal them one after another.
56- If a frame feels crowded, remove an element, enlarge the focal element, or move the secondary element to another scene.
57- Favor centered or strongly aligned compositions over scattered UI layouts.
58- Use background shapes, gradients, and cards to support the message, not to create visual noise.
59- Keep the visual system consistent across scenes: repeated spacing, repeated alignment, and a small set of shapes/colors.
60 
61## Pre-render check
62 
63Before rendering, inspect a representative frame at normal size:
64 
65- Can the main message be read quickly?
66- Is there one obvious focal point?
67- Are any objects touching, overlapping, or awkwardly sitting next to each other?
68- Would the frame still make sense if seen for less than one second?
69