Use when a recorded-video composition should use the Render Lab design system: production-control-room visuals, browser/render/QC instruments, frame-driven Remotion motion, and semantic components instead of generic cards or decorative UI.
Use when a recorded-video composition should use the Render Lab design system: production-control-room visuals, browser/render/QC instruments, frame-driven Remotion motion, and semantic components instead of generic cards or decorative UI.
Render Lab Design System
Render Lab is a video design system for technical recorded videos. It makes the pipeline visible: voice, browser assets, render frames, FFmpeg, QC, and final MP4.
When To Use
The video explains browser video generation, agent workflows, render quality, or pipeline choices.
The user rejects generic cards, pills, icon tiles, or AI-looking slide layouts.
The output should combine base video skills with a project-specific visual language.
Load Order
Read .agents/design-systems/registry.yaml and confirm active: render-lab.
Use the base skills listed in the registry.
Load only the Render Lab sub-skill files needed for the current decision:
Start global-style-spec.json from .agents/design-systems/render-lab/global-style-spec.template.json, then adapt only what the recording requires.
Core Rules
Every visual must be an instrument, evidence object, route, comparator, gate, or QC state.
Do not place decorative containers next to each other.
Do not use standalone labels like unless an actual browser asset is passing through a lane.
HTML passthrough
Prefer Remotion-native frame-driven components for polished video UI.
Use Hyperframes for real HTML/browser passthrough atoms, not as a generic card factory.
Use the global asr-timing-review skill for transcript and timing decisions. Render Lab does not own timing methodology.
Composition principles (validated in production, 2026-06)
Principles, not values — bind to the active tokens (remotion/src/slide/tokens.ts), never hardcode hex/px. Pair these with the design-critic skill (the critic asks "is this good?"; these answer "here's what good means on this field").
Dark-field legibility. A text/element color must contrast with the field it sits on. On the dark field, use the light ink token — NEVER the light-theme ink (it is near-black and vanishes). Never rely on a component's default color; set it explicitly for the field. Audit every text element for "can I actually read this?".
Contrast discipline. One structural color carries the scene; ONE emphasis accent per beat marks the single thing that matters (the number, the turn-word), chosen semantically (a positive metric takes the positive accent). Vary the accent across neighboring beats. Monochrome and timid, evenly-spread palettes are the AI tell — and no rainbow.
Headline fit. Hero type is large; keep headline lines short enough to set at full size on ONE visual line, or rely on the shrink-to-fit. A wrapped or shrunk hero line breaks the reveal and reads cramped — rephrase before you squeeze.
Capture/card framing. Never full-bleed-stretch a captured UI to the frame's ratio. Frame it on a browser card at its NATIVE aspect with margin, guidance text in its own zone (not overlaid). Pick the card composition from the asset ratio: near-square → caption beside (two-column); ultra-wide band → caption above + a contained field so it isn't lost in black.
Motion earns its place. Every motion must reveal, route, compare, inspect, warn, confirm, or pace the message — cut effect-for-effect. One high-impact moment beats scattered micro-motion; a still beats a busy move for a settled state.
2.5D is the default; true 3D is rare
Default everything to AE-controllable 2.5D. Heavy real-R3F 3D is now RARE — 0–1 per video. This is a locked, research-backed art-direction decision. The "rendered-room" R3F look (perspective camera + PBR glass/graphite + HDRI studio environment + contact-shadow floor) was rejected on the tokenrouter-v3 render as floaty, uncontrollable — a "weird glass border", "a studio that doesn't feel like a studio". The default look is the opposite of a camera you don't control: flat layers placed with intent.
The 2.5D-controllable technique (the default for every elevated beat):
Depth from CSS-transform tilt, not a 3D camera — perspective(1200px) rotateY/rotateX ~3–8°.
A drawn, blurred drop-shadow under the tilted layer (not a contact-shadow band on a floor).
Parallax between foreground and background layers for separation.
Eased keyframes, never linear — Easing.bezier(0.16,1,0.3,1), spring for overshoot.
Deliberate placement, not a simulated room.
When true 3D earns its place — the ONLY cases:
The value is genuinely volumetric — the viewer must see a real object from multiple sides and the rotation IS the point.
A material must respond to motion — refraction/lensing through glass, a specular sweep across a REAL bevel.
A transition travels THROUGH 3D space — a portal a parallax can't fake.
A signature hero/logo materializes in real space, once.
Two gates every 3D candidate must pass:
Fakeability — if CSS tilt + drawn shadow + parallax + easing fakes it, it is NOT a 3D case.
Controllability — if you can't frame it as a single lit surface, don't ship it.
When 3D IS used, make it controllable: orthographic or tight frame; one key light; NO HDRI environment floor; NO contact-shadow band; frame-driven; baked to MP4 where possible.
Kit consequence:
KEEP for the rare moment — headline-text-3d, glass + glass-sweep, portal-ring.
RETIRE-BY-DEFAULT to 2.5D — floating-screen, image-card-3d, spatial-scene, and the ceramic/graphite ambient slabs. Reach for their real-R3F form only when a beat clears both gates above.
Elevated-beat moves — ground depth in real technique
The default treatment for every move below is the 2.5D-controllable technique (see "2.5D is the default; true 3D is rare" above): a flat layer + CSS-transform tilt + a drawn blurred shadow + an eased push-in/parallax. The R3F forms named in parentheses are the RARE exception — reach for them only when the beat clears the fakeability + controllability gates.
When a beat earns elevation (a 3D surface, a camera move, kinetic type, a section device), do not invent the move — pull a concrete one from the curated references and name it in the brief. This is the multisearch-first rule applied to design, not just to building a new component. Sources, in order: yt_tech_creator_craft and yt_ae_to_code_recreation (yt-rag — search the move before you commit it), then shared/research/2026-creator-effects/ (esp. 01-creator-trends-taxonomy.md), shared/research/ae-variety-research.md, and popular-template-effects-brush-plan-2026-05-31.md. The brief's paragraph for each elevated scene cites the move + its source.
A starting vocabulary (illustrative taste, NOT a fixed template — the content picks the move, and you may use a move that isn't listed):
Cold-open / hook → open ON the artifact (real screen, failing state, or one-sentence thesis) inside the first 1–2 s; one slow push-in then a held beat. No montage, no brand-stinger preamble. (title-3d / screen-rec + cinematic-zoom-in, glass-caption)
Hero product-UI reveal → DEFAULT: a real captured screen (image/webm) on a flat layer, tilted with CSS-transform (perspective rotateY/rotateX ~3–8°), a drawn blurred shadow beneath, pushed in on an eased Z-feel + parallax, settling face-on. UI-as-texture, never rebuilt as DOM meshes. RARE exception (clears both gates) — texture it onto a real lit slab flown in on a camera dolly/orbit + motion blur. (2.5D-tilt captured-card default; floating-screen / three-hero-slab, expand-to-focus, glass + glass-sweep only for the earned 3D case)
Big number / stat → frame-driven count-up where the motion encodes magnitude; hold on the settled number. (big-stat + StatCountUp / DeltaBars)
Data / architecture / before-after → progressive disclosure, one element at a time, matched object positions so the diff reads; the reveal lands ON the spoken word. (pipeline / diagram / compare-2up / line-chart + RoutingFlow / CompareColumns / DeltaBars, match-cut)
Section handoff → the cut is a segue that conveys a relationship — a match-cut on a shared shape/velocity, often carried by a sound swell, not a busy graphic. (section-divider / portal-divider + match-cut / push-through / luma-wipe, portal-ring)
Kinetic headline → DEFAULT: flat type split into words/chars, per-index stagger with a strong ease-out, an optional subtle CSS-transform tilt; reveal the one word that turns the argument. RARE exception — headline-text-3d only when the type must materialize volumetrically in real space (clears both gates; keep strings short — it overflows). (kinetic-type default; headline-text-3d for the earned 3D case)
Screen-rec walkthrough → frame-hold the key state, punch-in/dim to the exact control (not generic zoom), cursor/click emphasis. (screen-rec / scroll-panel / expand-to-focus, floating-screen)
CTA / close → resolve, don't pile on: the logo/mark settles with one position+opacity move, optionally a single glass sweep / bloom. (title-3d / LogoConstellation + glass-sweep, portal-ring)
Quality bar — judged, not counted
The bar is qualitative. Both the visual planner (node 04 self-check) and QC (node 11) hold it; pair it with the design-critic stance ("is this actually good?"). It is judgment, never a quota — every number below is a feel the content can override with a one-line reason.
Earned depth. Every 3D/camera/kinetic moment justifies itself — it reveals, compares, inspects, or hands off something a flat frame can't. If a depth beat would only decorate, make it flat. Selective depth beats 3D-everything.
Renderable honesty — the failure mode that bit the last run. Only plan a beat the renderer can actually honor: match the capability's real slots, content-kinds, and caps (the catalog digest carries them). Bind every elevated beat to a real asset of the right kind — never point a surface/hero-slab at a still when it textures video only, never at a gap asset; if the right asset doesn't exist, downgrade the beat to a flat frame rather than shipping an empty slab or a dumped gap-notice. Declare a renderable fallback for every elevated beat. Prefer the real captured asset over a synthetic stand-in.
LOCKED — voice-guided timeline; pacing is a SCRIPT decision. On the voiced path a scene's on-screen duration = its spoken cue span (breath-to-breath, chained from frame 0); cue-frame == master-frame is structural. visualBudgetSeconds is INERT on the voiced path (the resolver ignores it), so authoring a budget meant to make the visual outlast its narration is the BANNED budget-stretch: it desyncs the single continuous audio track and is gate-rejected (pipeline/qc-voice-sync.mjs aborts the render). To hold a beat longer, LENGTHEN THAT BEAT'S NARRATION in the script — never decouple a visual budget from the VO. (The one documented exception — a beat outlasting its VO while the audio track is ALSO reconciled with matching per-cue silence gaps — is NOT implemented on the continuous-WAV path.)
Content-fit at plan time. Keep every string inside the layout's registry caps and the 1776×936 safe area. Honor known fit dials (headline-text-3d overflows long strings — keep them short; quote-on-glass attribution clips at the bottom). A hero line that wraps or shrinks-to-fit has already failed — rephrase.
Palette holds; no cheap-React. One structural color per scene + one semantic accent; vary the accent across neighbors. No off-token color, no default component styling, no AI-even palette. (v2 held this — keep it a guardrail.)
Cadence as feel. Roughly one elevated moment every ~15–20 s and one "shiny" beat every ~5–10 s — but spread across the spine, not back-loaded into a cluster with a long flat stretch before it. Flat data frames (RoutingFlow / DeltaBars / SpecGrid / CompareColumns) carry rhythm between elevations.
Premium-vs-cheap tells. Easing is the #1 tell — slow-in/slow-out, Easing.bezier/spring overshoot, never linear. The visual change lands ON the spoken word (≥0.5 s lag reads amateur). One thing at a time with real inspect-holds. Real artifact + real PBR (studio env + contact shadows, correct sRGB), not flat DOM or washed-out color. No glitch/flash/whoosh catalog; restraint reads as polish.
Output Expectations
composition-brief.md names render-lab as the active design system.
