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.

block

Backdrop

rcn

Configurable full-frame background (color / gradient / image / live component) with Screen Studio-style padding and a rounded, shadowed content frame.

component

Beat Timeline

hf

A 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.

component

Before After Wipe

hf

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.

block

Chat to Preview Layout

rcn

Two-column layout where chat shrinks and preview expands.

component

Comparison Split

hf

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.

block

Count Grid

scn

A 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.

component

Grid Card Assemble

hf

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.

block

Live Code Compilation

rcn

Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style.

component

Radial Surround

hf

Labeled 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.

component

Separator

hf

A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal

block

Sketched Frame

hf

Media 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)

component

Split Tilt Cards

hf

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.

block

Stage

rcn

Place a screenshot, recording, or long page on a perspective studio plane and direct an integrated camera across it with timeline keyframes.

block

Vertical Media Filler

hf

Portrait 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)