Introduction

Welcome to StageRoutine - code-driven presentations built for the stage.

StageRoutine is a TypeScript library for creating presentations in code. Instead of flipping through separate slides, you define scenes on a stage: elements can enter, leave, or animate smoothly to new positions.

Key Features

• Scene Transitions: Elements shared between scenes move smoothly to their new positions, while unused elements exit cleanly.
• Step-Driven Playback: Group animations into click steps. You can step forward or backward cleanly.
• Automatic Layout: Arrange elements into rows, columns, and grids without manual positioning.
• Ready-to-Use Components: Text, syntax-highlighted code, terminal windows, and architecture diagrams.
• Extensible: Build custom components, visual decorators, and icon sets.
• Presenter Tools: Dual-screen presenter view with speaker notes, live timer, and laser pointer.

How It Works

Create elements once, assign them to scenes, and update properties between presenter pauses:

import { Card, Stage, Title, to } from "stageroutine";

const stage = new Stage();
const title = Title("Hello, World!", {
  variant: "hero",
  position: [80, 39.6],
  origin: "top",
});
const card = Card("Press Space to begin", {
  position: [80, 50.4],
  origin: "top",
  opacity: 0,
});

// Scene 1: Welcome
stage.scene("Welcome").with(title);
stage.pause();

// Scene 2: Title glides up, card appears
stage.scene("Overview").with(title, card);
title.y = to(10.8);
card.opacity = to(1).when(title, "halfway");
stage.pause();

Documentation Guide

1. Quick Start - Install and run your first presentation.
2. Concepts - Learn the 4 core parts: Stage, Scene, Step, and Element.
3. Building Presentations - Guides for coordinates, scenes, animation, layout, and visual effects.
4. Under the Hood - How the internal engine, snapshots, and animation loop work.