NS Design System
v3.0.0 · 257 tokens

161Lesson video scenes

Seventeen recording layouts on one 16:9 frame, each drawn in light and dark: sharing your screen, on camera, slides and code, and the four cards a lesson cuts to. No live badge, no ticker, no chat — a lesson is a file, not a moment.

The frame

Fixed before the first take and never touched again. Of the six zones, exactly one — the stage — changes between scenes; the kicker, the lesson index and the mark stay on the same pixels for the whole lesson, which is what lets someone who joins at minute nine know what they are watching.

Lesson Video — The Frame

One 16:9 canvas, six zones, both themes — and the live furniture that is deliberately absent

open ↗

Pick the scene by what you are doing

Not by what you feel like cutting to. Every row below is a thing a teacher is actually doing at a moment in a lesson, and the scene that serves it. If your situation is not in this table, the answer is almost always scene 02 or scene 07.

01Clicking through the org, running a query, watching a deploy — your hands matter, your face does notScreen, full frame
02Screen-share teaching where reactions carry meaning — the default for most lessonsScreen + camera, corner
03The shared window is narrow (a form, a record) and you are explaining rather than demonstratingScreen + camera, column
04A procedure with more than three stepsScreen + step rail
05One error, one field, one line of a debug logScreen detail, zoomed
06The first fifteen seconds — hook, promise, who you areThe open
07The why, the caveat, the common mistake — argument, not demonstrationCamera, full frame
08The one sentence you want them to rememberCamera + point card
09Walking a diagram while gesturing at itCamera + slide, two-up
10Structure, definitions, a list — anything you cannot demonstrateSlide, full frame
11The same slide, but the explanation runs longSlide + camera, corner
12Reading a prepared snippet line by lineCode, full frame
13Showing a mistake and the error it producesCode + result
14Two seconds after the hookTitle card
15Crossing from one section to the nextChapter card
16The last minute — what they can now doRecap card
17The last ten seconds — the only CTA in the lessonEnd card

Sharing your screen

The five scenes that carry most of a technical lesson. All of them assume the shared source is already 16:9 at native 1080p — a stretched or letterboxed screen is the fastest way to make good teaching look cheap, and the rules for getting that right are on the Live stream page, where they apply identically.

Lesson Video — Sharing Your Screen

Five screen-share scenes, each in both themes: screen alone, with a camera, with a rail, and zoomed

open ↗

On camera

Four scenes for the parts of a lesson that are an argument rather than a demonstration. Eyes on the upper-third line, a hand's width of headroom, the same crop the course thumbnails use — and the camera keeps one size and one corner for the entire lesson.

Lesson Video — On Camera

Four camera scenes in both themes: the open, straight-to-camera, with a point card, and two-up with a slide

open ↗

Slides and code

A deck built at 1920×1080 needs no scaling at all, which is the sharpest possible path to the viewer — and it inherits the system's kicker, heading and mono-index voice, so a slide is recognizably the same brand as the course page it sits inside.

Lesson Video — Slides & Code

Four scenes in both themes: a slide alone, a slide with camera, full-frame code, and code beside its result

open ↗

The cards between the teaching

Four full-frame cards with no camera and no screen. They are the lesson's punctuation: they give the viewer somewhere to breathe, they give the platform its chapter marks, and they are geometrically the same assets as the thumbnails, so a course reads as one thing from the grid all the way into the video.

Lesson Video — The Cards Between

Four full-frame cards in both themes: title, chapter, recap and end — no camera, no screen

open ↗

Light or dark?

Both ship. The rule is that one lesson picks one and holds it — never switch themes mid-lesson, and never mix a dark card with a light stage. Within a course, a whole module may differ from another; a single lesson may not.

Record dark when

  • You are in a dark editor or a dark-mode org — the frame and the stage agree instead of fighting.
  • The lesson is code-heavy: a bright frame around a dark code panel is a glare box on a phone at night.
  • You want the default. Dark is this brand's home, and the thumbnails are navy.

Record light when

  • The shared screen is a light org, a document or a whiteboard — chasing it with a dark frame just outlines it.
  • You are on camera in a bright room and cannot control the background.
  • The lesson is conceptual and diagram-led; hairlines read better on white at low bitrates.

Whichever you pick, the geometry is identical: every scene above is one layout with a swapped palette, driven by the same seven variables. If the light version needs a different arrangement, the arrangement was wrong.

Cutting rhythm

2sTitle card · chapter cardHard cut in, hard cut out. Long enough to read, short enough not to be skipped.
6–8sLesson title and name plate on the openThey leave together, once, and never return.
10–40sCamera, full frameA punctuation mark. Past about 40 seconds it stops reading as emphasis and starts reading as a webcam recording.
as long as it takesScreen scenesThe stage may hold for minutes — as long as something on it is changing. A still screen with narration over it is a slide, so cut to one.
320msEvery transitionThe brand-bar wipe, or a hard cut. No crossfades, no zooms, no stingers with sound effects.
10sEnd cardHeld in silence. Do not talk over it and do not cut it short — the platform's own end-screen elements need the room.

Recording settings

  • 1920×1080, 16:9 — canvas, capture and export. 30 fps for teaching; 60 only if something genuinely moves.
  • Shared display at native 1080p, scaling 100%. A HiDPI screen at default scaling sends a 2× frame the encoder downsamples, and every hairline in the org UI turns to mush.
  • Share one window, never the desktop — notifications, calendar popups, the other tab.
  • Browser at 125–150%, editor at 18–20pt. Set it before you record, not mid-demo.
  • Mono audio, about −16 LUFS, one mic. Half the audience has one earbud in.
  • The phone test. If you cannot read it on your own phone from the couch, it is not on screen yet.

The failure modes

What makes a lesson look improvised

  • The camera in a different corner or a different size in every scene.
  • A layout invented mid-lesson because the content did not fit one of the seventeen.
  • A theme switch partway through, or a light card against a dark stage.
  • Two overlays on screen at once, neither of them expiring.

What belongs to a live stream and never here

  • A LIVE badge on a file.
  • A ticker, a chat panel or a comment strip.
  • A countdown or a “starting soon” frame.
  • A rotating handle bug. One CTA, once, on the end card.