Scenes & Steps

In StageRoutine, elements are not locked to a single slide. The same element can live across multiple scenes, smoothly animating to new positions when you switch scenes.

Declaring Scenes

You declare a scene by giving it a name and listing which elements belong in it:

// 1. Define elements once
const title = Title("StageRoutine", { position: [80, 40.5], origin: "top" });
const kicker = Kicker("01 / ARCHITECTURE", { position: [80, 31.5], origin: "top" });
const code = CodeBlock(["const app = new Stage();"], { position: [80, 36], origin: "top", opacity: 0 });

// 2. Scene 1: Title and Kicker
stage.scene("Intro").with(title, kicker);
stage.pause();

// 3. Scene 2: Title stays, shrinks to the corner, and Code appears
stage.scene("Code").with(title, code);
title.x = to(16);
title.y = to(9);
title.scale = to(0.7);
code.opacity = to(1).when(title, "halfway");
stage.pause();

Element Persistence

When you switch from Scene 1 to Scene 2:

• Shared elements (title in both scenes): Remain on screen and animate smoothly to their new x, y, scale, or opacity.
• New elements (code added in Scene 2): Enter the stage and animate in.
• Removed elements (kicker omitted in Scene 2): Automatically fade out and hide.

Because elements are persistent JavaScript objects, you don't need duplicate markup or transition hacks between slides.

Entering and exiting elements automatically animate opacity using enterDuration and exitDuration (default 0.6s, easing quartOut) with enterDelay and exitDelay (default 0s), unless you set the opacity property explicitly.

Step Pauses

Within any scene, you can have multiple sequential reveals or animations. Calling stage.pause() creates a click pause for the presenter:

// Step 1: Reveal first bullet
bullet1.opacity = to(1);
stage.pause();

// Step 2: Reveal second bullet on next click
bullet2.opacity = to(1);
stage.pause();

Speaker Notes

Attach speaker notes inline for specific steps:

stage.note("Explain the microservices architecture here.").pause();

You can also keep notes in a separate Markdown file where headings match scene names and steps use > [!STEP]:

import notesDoc from "./notes.md?raw";

stage.notesDocument(notesDoc);

For full documentation on Markdown notes, timing frontmatter, and stage directions, see the Presenter Console guide.