Scenes & layouts
Reusable scene and layout foundations
Reusable split screens, comparison frames, product stages, radial compositions, and modular canvases with frame-driven motion.
Layouts solve the composition around the content: how a chat hands off to a preview, how code and output share a frame, or how a product surface sits on a cinematic stage.
Use these as scene foundations, then replace their deterministic demo content with the project’s real copy, media, and design tokens.
14 verified components. Browse every category.
Backdrop
rcnConfigurable full-frame background (color / gradient / image / live component) with Screen Studio-style padding and a rounded, shadowed content frame.
Beat Timeline
hfA paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.
Before After Wipe
hfTwo 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.
Chat to Preview Layout
rcnTwo-column layout where chat shrinks and preview expands.
Comparison Split
hfTwo 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.
Count Grid
scnA small group of cards rushes into place around a count, then the camera pulls back as the surrounding grid fills and the number jumps to its larger scale.
Grid Card Assemble
hfN 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.
Live Code Compilation
rcnSplit-screen where typed code on the left snaps a live UI preview on the right, HMR-style.
Radial Surround
hfLabeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.
Separator
hfA one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal
Sketched Frame
hfMedia in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
Split Tilt Cards
hfTwo 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.
Stage
rcnPlace a screenshot, recording, or long page on a perspective studio plane and direct an integrated camera across it with timeline keyframes.
Vertical Media Filler
hfPortrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)