creatordesign system
GitHub
Live scenes
Broadcast · YouTube · Creator Design System

Live scenes

The five arrangements a stream actually cycles through. Every dashed region is a capture source — put the OBS scene there and the framing is already correct.

Starting soonEp. 07 · 20:00 CET
Live in 4:32

Rebuilding the theme, token by token

Chat's open · say hello

1 · standby — topic and countdown, no share yet

Chapter 2 — naming the tokens● 1,248 watching
cameraSwarnil

2 · share right — share takes the golden share of the width. The default.

Live debugging42 min
cameraSwarnil

3 · share left — mirrored, for right-handed webcam framing

Guest — pairing on the grid● live
camera ASwarnil
camera BGuest

4 · duo — equal halves: guest, reaction, pairing

Answering chatQ&A
camera — full frameSwarnil

5 · focus — camera full, share as a picture-in-picture. Q&A moments.

Why the header strip is fixed height

Every scene carries the same 6cqw strip with the topic on the left and the state on the right. Cutting between scenes then never makes the topic jump — the only thing that changes is what's underneath it. That's the whole trick to a stream that looks produced.

The chat rail from the live screen composes with any of these: drop .chat into the grid as a final column.

.live-stage + .live-1…5 · .src-share / .src-cam · .live-head · .src__tag