Stage Light

A dark, matte stage where one soft light rests on whatever the narration is about. Things are presented, not drawn: plates name them, very large condensed figures measure them, and the light moves from one to the next while everything it leaves waits in shadow.

Essence, and what it is not

• A dark stage and one pool of warm light. The light is the narration's attention: it is always on the subject of the sentence.
• Things out of the light stay where they are, dimmed and greyed, so a comparison is always visible and its focus always clear.
• Figures are the heroes: tall condensed numerals, the one the scene is about in the light's amber.
• One accent colour. Everything that is not the subject is a shade of grey.

Not a keynote slide (no title-and-bullets, no logo walls, no gradients for their own sake), not a dashboard (no grids of cards, no small charts side by side), not a neon interface (no glows, no outlines lit up).

Ground and material

stage.tsx draws the ground: a near-black matte (bg) with a soft vignette, a fine grain so the dark does not band in a video, and a warm pool of light (grad, at low strength) whose centre and size are props (spotX, spotY, spotR). Plates are flat dark panels (panel) with a hairline highlight on their top edge and a soft shadow under them. Nothing is glossy, nothing glows.

Colour roles

• data: amber, the one accent. The figure in focus, a plate's lit edge, the eyebrow over a title, a link's moving point, the focused bar.
• text: warm white for what is in the light.
• muted: grey for labels, units and things out of the light.
• grad: the colour of the light itself, used only by the stage.
• good, bad: only when a figure is a gain or a loss and the scene says so, never together with amber on the same figure.

Type and captions

Big Shoulders Display (display) for figures (180 to 300 px, weight 800) and titles in capitals (110 to 160 px). Hanken Grotesk (sans) for labels (26 to 34 px) and plates' second lines. Chinese: Noto Sans SC for both roles, the figures stay in the display face. The caption has no box: warm white, 36 px, weight 500, a soft shadow, and a short amber bar at its left.

Motion

The light moves; things barely do. A light move takes 1 to 1.5 s with an ease in and out, starting on the word that names the new subject. Things arrive by a short fade in place (0.3 s) or are already there in shadow. Figures count up to their value (0.8 to 1.4 s, easing out) on the words that say them. Leaving the light is a fade of brightness and colour over about a second, never a removal. Do not tween x or y on the stage: those move the whole element; move the light with its own props.

Composition and framing

Few things, large. One to three subjects on the stage; a subject's plate above its figure. The light's centre sits on the subject in focus; the subject takes at least a third of the frame. Comparisons are side by side at one height, so the eye only moves across. A scene that sums up centres the light and the claim. Keep the band above the captions clear of small text.

Sound

Optional: a low, soft swell under a light move, a short muted tick when a figure lands. No music is part of the motion.

Components

• compare — Meter (react/parts/meter.tsx): Horizontal bars on one scale, each labelled at its end, growing on the words; the one in focus in the light's colour. Fits: two to five quantities of one kind; a then-and-now; sizes that differ by orders of magnitude (on a labelled log scale)
• data — Numeral (react/parts/numeral.tsx): One figure set very large in the condensed face, counting up to its value, with its unit and what it counts. Fits: a count, a price or a size that the scene is about; two of them side by side, one in the light
• ground — Stage (react/parts/stage.tsx): A dark matte stage with one soft pool of light that moves to whatever the narration is about. Fits: every scene; tween the light to the subject on the word that names it (props spotX, spotY, spotR: x and y would move the whole stage)
• link — Link (react/parts/link.tsx): A hairline from one thing to another with a bright point running along it, and an optional word at its middle. Fits: from then to now; a cause to its effect; money or data moving between two plates
• steps — Ranking (react/parts/ranking.tsx): Rows of named things with a year and a figure, revealed one by one, the row the narration is on in the light and the rest in shadow. Fits: milestones over time; the top five of something; steps of a process, each with its number
• term — Plate (react/parts/plate.tsx): A dark plate naming one thing, its top edge catching the light while it is the subject. Fits: a product, a company, a person or a year that the narration compares; one plate per thing, the same plate for it throughout
• title — Kicker and title (react/parts/kicker.tsx): A short line in the light's colour, spaced wide, over a title in tall condensed capitals. Fits: the claim a section makes; a result stated as a headline; the question a film opens on

Native moves

• Move the light. The pool slides from one subject to the next as the narration turns to it, and the old subject greys. Fits content like: then and now; a company and its rival; a cause and its consequence.
• Count it up. A figure counts from zero to its value on its words, in amber when it is the point. Fits content like: a price; a count of users; a size in bytes.
• Two plates, one link. Two named things with a hairline between them, a point running along it. Fits content like: a supplier and a buyer; an old version and its successor; a sender and a receiver.
• Walk the list. Rows appear one by one as the narration names them, and the light steps down to each; the rows behind stay in shadow. Fits content like: milestones over the years; the top five products; the stages of a launch.
• Widen to the claim. The light opens wide and centres on one title in capitals stating the result. Fits content like: the multiple that sums a comparison; the verdict; the takeaway.

Avoid: pitfalls

• Two things in amber: neither is the subject. Fix: one amber thing per frame.
• Everything in the light: the stage reads as a slide. Fix: dim what the sentence is not about.
• A light that jumps: Fix: tween it on the word, over at least a second.
• Small text in the dark: it vanishes in a compressed video. Fix: labels 26 px or more, in warm white or grey, never dark grey.
• Huge ranges on a linear bar: the small bar disappears. Fix: a log scale, written under the bars, or a ratio as the hero figure.

Freedom in each work

Each film decides its story, scenes, which things are on the stage, where the light starts and the ending. Three far-apart structures: a then-and-now in two pools; a ranking where the light walks down a list of plates; a single figure examined from three sides, each a light on one factor.