Concepts

A StageRoutine presentation is built from four main parts:

Stage

The Stage is the presentation canvas and engine. It manages the 1920x1080 screen, hosts the background, and runs animations.

const stage = new Stage();

Scenes

A Scene is a visual chapter of your presentation. You specify which elements are visible using .with(...):

stage.scene("Architecture").with(title, codeBlock);

When changing scenes, elements shared between them smoothly animate to their new positions instead of disappearing.

Steps

A Step is a pause point. Calling stage.pause() groups all previous property changes into a click step:

title.opacity = to(1);
stage.pause(); // Pauses playback until you press Next

Elements

An Element is an animated instance of a component on screen (Title, CodeBlock, Table, etc.). Each element wraps a real DOM node with reactive properties (x, y, scale, opacity).

const title = Title("Hello StageRoutine", { position: [80, 36], origin: "top" });

Comparison to Traditional Slides

Slide Decks	StageRoutine	How It Differs
Presentation Window	Stage	Stays alive continuously across all scenes.
Slide	Scene	Elements persist between scenes when shared.
Click / Build	Step	Animates properties between pauses.
Text Box / Shape	Element	Reactive DOM node driven by GPU transforms.