Scenes & layouts
Also searched as: scene layouts, split screen, modular stage, comparison frame, video layout
Canonical Definition
Scenes and layouts are structural composition systems — split screens, radial stages, side-by-side comparisons, and responsive frames — that organize multi-element narratives.
60 to 180 frames per layout scene
cubic-bezier(0.16, 1, 0.3, 1)
A motion piece is more than isolated effects; it requires architectural framing. Layouts define how conversational chat threads hand off into live previews, how code sidebars pair with browser viewports, and how before/after states compare.
Building layouts with responsive flexbox and CSS grid in Remotion allows the exact same scene structure to adapt between 16:9 desktop presentations and 9:16 vertical reels.
Split Screens & Before/After Wipes
Visualizing product contrast and transformation side-by-side
A split-screen layout divides the canvas with an interactive divider rule, contrasting legacy friction on the left with automated efficiency on the right.
How this works: A dual-pane layout contrasting two alternative approaches with synchronized scroll and divider reveal.
- Independent synchronized scroll positions
- Adjustable split ratio (50/50, 60/40, or animated sweep)
- Responsive layout adapting between horizontal and vertical stacks
3D Tilted Stages & Radial Frames
Adding spatial dimension to multi-card product showcases
Cards sit on an isometric perspective plane that rotates and tracks in time with product feature callouts.
How this works: Layered product cards arranged on a tilted 3D perspective stage with depth separation.
- CSS `transform-style: preserve-3d` with realistic depth layering
- Interactive hover and continuous camera parallax
- Clean hierarchy between primary active card and background context
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- When comparing two items, stagger their entrances by 8 frames so the eye compares them sequentially.
Common Failure Modes (What to avoid)
- Crowding too many simultaneous actions into one layout: split screens must maintain one focal center at any given moment.
Working catalog implementations
Typed Remotion components ready to drop into code.
Comparison Split
Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.
Before After Wipe
Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.
Split Tilt Cards
Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.
Grid Card Assemble
N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.
Build scenes & layouts in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Product demos & devices
Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
Composition & UIGalleries & carousels
Galleries and carousels are multi-item motion structures — Cover Flow decks, 3D tunnel reels, and scrolling card feeds — that display portfolios, product catalogs, and collections.
Motion FundamentalsAspect ratios & safe areas
Aspect ratio is the proportional relationship between a video frame's width and height (16:9 for landscape, 9:16 for vertical reels, 1:1 for square feeds), defining compositional margins and UI safe zones.