stageroutine

Public API surface for StageRoutine.

Everything user-facing is exported flat from the root, so a single import { ... } from "stageroutine" covers the whole library with IDE autocompletion. Tooling and asset entry points:

• stageroutine/jsx-runtime — JSX runtime (configured as jsxImportSource by the Vite plugin)
• stageroutine/styles.css — base stylesheet
• stageroutine/vite — the StageRoutine Vite plugin

A symbol is exported here exactly when it is part of the documented user-facing API. Implementation element classes, fluent builder classes, and engine internals are intentionally not public.

Core

Coordinate definitions, reactivity primitives, stage configuration, and lifecycle event contracts.

Name	Description
Stage	Presentation director managing scenes, step transitions, snapshots, and the virtual viewport.
CustomElementOptions	Custom drawing options. Properties use author-defined units.
DOMElement	Animated DOM element instance managed by the reactive Stage runtime. Wraps an underlying HTML/SVG element and exposes bindable transform and visual properties.
ElementOptions	Base positioning and visual options shared across all Stage elements.
GroupElement	Public fluent contract for a logical group of elements.
NavGotoSceneEvent	Command event payload to jump directly to a scene index.
NavGotoStepEvent	Command event payload to jump directly to a step index.
NavSceneChangedEvent	Event payload emitted when the active scene changes.
NavStepChangedEvent	Event payload emitted when the active presentation step changes.
OverlayContext	Context passed to overlay plugins when they are mounted on the stage. Provides the DOM containers, stage dimensions, navigation methods, and event subscriptions.
OverlayPlugin	Interface for overlay plugins that attach interactive UI on top of the stage.
PointerSetStateEvent	Command payload to set the pointer active state.
PointerStateChangedEvent	Event payload emitted when the pointer active state changes.
ReactiveElementBase	Base interface for all reactive presentation elements on stage.
Scene	Fluent scene contract.
StageContext	Context passed to background renderers when they are attached to the stage.
StageEventMap	Complete event map for the stage event bus. - Requests (req:*) are imperative instructions sent to the stage (e.g. req:nav:nextStep). - Events (evt:*) are state notifications broadcast by core (e.g. evt:nav:stepChanged).
StageOptions	Options for initializing the Stage presentation director.
StageResizedEvent	Event payload emitted when the stage viewport dimensions change.
StageStateChangedEvent	Complete state snapshot emitted whenever presentation state changes.
AnchorKeyword	Standard named box point keyword.
AnchorMode	How a connector endpoint picks its attachment point on a target outline. "auto" pins to the midpoint of the facing straight side when there is one, otherwise it behaves like "ray". "closest" takes the nearest outline point. "ray" takes the crossing of the direction towards the other endpoint.
CoordProp	Stage coordinate in stage units (or "center" to center along that axis). Accepts a number, "center", a transition, or a relative-delta updater.
CustomElement	Custom numeric properties, animated with .to().
ElementAnchor	A point on an element box: a named keyword or an [x, y] percentage pair. Used by element origin and by connector anchors.
ElementChild	Content accepted by container factories.
LogLevel	Minimal logging API with configurable log levels.
Point	2D point as a fixed-length [x, y] tuple.
Position	Stage coordinate pair in stage units, or "center" to center on both axes.
PositionCoord	Coordinate value on a stage axis: a number in stage units, or "center".
PositionUpdater	2D coordinate updater function. Accepts (x, y) or a ([x, y]) tuple and returns the target coordinate in stage units.
ReactiveProp	Represents a property that accepts a static value, a reactive transition descriptor, or a numeric relative-delta updater.
Size	Element size in stage units, or an authored CSS length such as "40rem".
UnwrapTransition	Unwraps a potentially animated property type to its underlying raw value.
logger	Logger control object for configuring logging behavior.
Element	Wraps custom drawing with snapshot-safe numeric properties.
group	Creates a zero-DOM logical group proxy over multiple stage elements. Grouping allows broadcasting transitions, property mutations, and decorators across elements without adding container elements to the DOM tree.

Components

Prebuilt elements rendered on the stage, from text and shapes to tables, terminals, and media.

Name	Description
Webcam	Webcam utilities and device enumeration.
ActivationBarElement	Public state for a sequence diagram activation.
ActivationOptions	Configuration options for execution activation bars.
BrowserWindowElement	Public browser window controls.
BrowserWindowOptions	Browser window options. Default size: 120 × 65 stage units.
BulletItem	A single bullet item with optional per-item overrides.
BulletListElement	Public controls for a bullet list.
BulletListOptions	Configuration options for the BulletList component.
CameraDevice	Camera device info descriptor.
CodeBlockElement	Public controls for a code block.
CodeBlockOptions	Configuration options for the syntax-highlighted CodeBlock component.
ConnectorElement	Public controls for a connector.
ConnectorOptions	Configuration options for creating a reactive Connector between two elements or points.
IconDefinition	Definition for registering an icon namespace or resolver.
IconElement	Public controls for an icon.
IconOptions	Configuration options for the Icon component.
ImageElement	Public controls for an image.
ImageOptions	Configuration options for the Image component.
LifelineElement	Public controls for a sequence diagram lifeline.
LifelineOptions	Configuration options for vertical dashed lifeline timelines.
LiveTerminalElement	Public controls for a live terminal.
LiveTerminalOptions	Configuration options for the LiveTerminal component.
PeriodicPulseOptions	Options for continuous periodic packet pulses along a connector.
PulseOptions	Options for triggering glowing packet animations along a connector.
SequenceDiagramController	Public coordinator for a sequence diagram.
SequenceDiagramOptions	Configuration options for the SequenceDiagram coordinator.
TableElement	Public controls for a table.
TableOptions	Configuration options for the Table component.
TerminalBlockElement	Public controls for a terminal block.
TerminalBlockOptions	Options for configuring the TerminalBlock component.
TextElement	Mutable text content.
TitleOptions	Configuration options for the Title component.
VideoElement	Public controls for a video.
VideoOptions	Configuration options for the Video component.
WebcamElement	Public controls for a webcam.
WebcamOptions	Configuration options for the Webcam component.
BulletItemInput	Item specification for a bullet list: plain text, a styled item, or a nested array for indentation.
ConnectorHeadType	Head marker decoration types at the endpoints of a Connector line.
ConnectorTarget	Valid endpoint target for a Connector line (DOMElement or point coordinates as an [x, y] tuple).
ImageFit	Media object-fit scaling mode: - "contain" (default): Scales media to fit inside bounds while preserving aspect ratio. - "cover": Zooms and fills bounds completely, cropping overflow. - "fill": Stretches media to exact bounds. - "none": Displays media at intrinsic pixel size. - "scale-down": Scales down like "contain" if larger than container, otherwise behaves like "none".
KickerOptions	Configuration options for the Kicker component.
LabelOffset	Offset for adjusting label badge position. A number is stage units. A string is a CSS length ("rem", "px"). Accepts a 2D tuple [x, y] or a single vertical offset. e.g. [0, -1.5] or ["2rem", -8].
LabelPlacement	Normalized placement along the connector path. - "start": 25% along the path - "center": 50% along the path (default) - "end": 75% along the path - number: explicit fractional ratio from 0.0 to 1.0
TextOptions	Configuration options for the Text component.
TitleVariant	Visual typography variant for the Title component.
BrowserWindow	Creates an interactive webpage in a browser window.
BulletList	Bullet list component with individual bullet point animation and interactive click-and-drag focus.
Card	Rectangular card container.
CodeBlock	Code snippet component with syntax highlighting powered by the Shiki TextMate engine and interactive line/multi-line drag focus.
Connector	Creates a reactive visual connector / arrow between two nodes or coordinate points.
defineIcons	Registers an icon set or custom SVG icons.
Icon	Creates a reactive Icon element on stage.
Image	Creates a reactive Image element on stage.
Kicker	Micro-label component used for chapter indices and section category tags.
LiveTerminal	Creates an interactive shell for live demos.
SequenceDiagram	Creates a reactive Sequence Diagram coordinator with lifelines and messages.
Table	Table component with column alignment, row proxies, and interactive row-level focus.
TerminalBlock	Terminal block component with macOS-style window controls and line-by-line interactive focus.
Text	Body copy paragraph component formatted for high-legibility stage presentations.
Title	Headline typography component supporting default title, hero, and serif editorial variants.
Video	Creates a reactive native Video player element on stage.
Webcam	Creates a live reactive Webcam element on stage.

Shape & Frame

Geometry primitives, clipping frames, and path generators.

Name	Description
BoxPathOptions	Options for the box (rounded rectangle) path generator.
CirclePathOptions	Options for the circle / ellipse path generator.
DiamondPathOptions	Options for the diamond path generator.
FrameElement	Public controls for a frame.
FrameOptions	Configuration options for the Frame clipping component.
HexagonPathOptions	Options for the hexagon path generator.
PathContext	Contextual geometry parameters passed to a PathFunction.
PolygonPathOptions	Options for the regular polygon path generator.
ShapeElement	Public controls for a shape.
ShapeOptions	Configuration options for the Shape and Card components.
SpeechBubblePathOptions	Options for the speech bubble path generator.
SquirclePathOptions	Options for the squircle (superellipse) path generator.
StarPathOptions	Options for the star path generator.
TailTargetSpec	Explicit live tail target with an attachment anchor and clearance padding.
ThoughtBubblePathOptions	Options for the thought bubble path generator.
TrianglePathOptions	Options for the triangle path generator.
BubbleTail	Accepted forms of the bubble tail option: a length, a local anchor, a target spec, or a bare target element/point for live tracking.
PathFunction	A function that calculates an SVG path string ('d' attribute) for given dimensions.
ShapeVariant	Surface material preset for the Shape component.
paths	Geometric SVG path generators for shapes, cards, and clipping frames.
Frame	Clips media or DOM child elements to an SVG path geometry contour.
Shape	Universal shape container supporting multiple geometries and surface treatments.

Layout

Fluent helpers for arranging elements in stacks, grids, and circles.

Name	Description
AlignmentOptions	Alignment of existing elements.
CircleLayoutOptions	Options for circular/orbit layout arrangement.
GroupLayoutOptions	Options for rigid-body group transform (uniform scale + translate).
LayoutOptions	Shared stack and grid placement options.
LayoutRegion	Available rectangle in stage units. No DOM container is created.
RelativeLayoutOptions	Placement relative to an element.
StackLayoutOptions	Stack placement and distribution.
Align	9-position content alignment grid for text and children inside a container. Single-axis shorthands are centered on the other axis: "top" means top-center, "left" means middle-left.
GridSlot	A cell in a grid layout. Empty cells are null or undefined.
LayoutAnimation	Animation configuration for layout placement. Can be: - boolean: true to animate with default duration (0.6s). - Function: A callback receiving (position, element, index) returning a configured transition via to(position).
LayoutElement	Any stage element that layout helpers can measure and position.
RelativeAlign	Edge alignment within layout space.
StackSlot	A slot in a stack layout: either a single element or a nested array of elements (column/row).
layout	One-shot positioning without DOM containers.

Motion

Transitions, stagger coordination, and step-driven animation.

Name	Description
BezierMotionOptions	Absolute cubic Bézier controls in stage units.
ElementPlane	Authored element geometry with an optional local transform.
ElementTransition	Public fluent contract for multi-property transitions on an element or group.
PositionTransitionDescriptor	Position transition. Default route: straight.
PulseSequenceController	Controller handle returned by pulseSequence().
PulseSequenceOptions	Options for configuring a multi-connector sequential pulse loop.
PulseSequenceStep	Step configuration for a multi-connector sequential pulse chain.
ReplaceOptions	Configuration options for in-place element replacement transitions.
ReplaceTransition	Public fluent contract for an in-place replacement operation.
SpiralMotionOptions	Spiral arrival around the destination.
StaggerOptions	Configuration options for cascading stagger animations across multiple elements.
StaggerTransition	Public fluent contract for a staggered reveal operation.
TransitionDescriptor	Fluent builder descriptor returned by to(value) for scheduling transitions.
AnimationMilestone	Animation milestone representing progress of another element's transition: - "start": Triggers immediately when target element begins animating (progress = 0). - "halfway": Triggers when target element reaches 50% of its easing progress. - "end"
BuiltinEase	Built-in named easing curves supported by StageRoutine transitions.
EaseCurve	Custom easing function mapping progress t (0..1) to animated value.
ElementTransitionProps	Transition targets from an element's presentation properties.
FlowEffect	Continuous ambient stroke animations supported across shapes and connectors.
MotionPath	Pure route factory. Samples t from 0 (start) to 1 (destination), in stage units.
ProjectedQuad	Source corners in stage units: top-left, top-right, bottom-right, bottom-left.
motion	Reusable route factories for position transitions.
space	Measures independently transformed elements in stage units.
pulseSequence	Orchestrates a sequential packet pulse chain across multiple connectors.
replace	Creates an in-place element replacement transition swapping two elements smoothly without ghosting.
stagger	Creates a fluent stagger coordinator to cascade animations across a list of elements.
to	Creates a fluent transition modifier with a 2D coordinate delta updater. e.g. card.position = to((x, y) => [x, y - 10]).duration(0.4)

Decorators

Composable visual effects applied to elements and backgrounds.

Name	Description
BracketOptions	Configuration options for the grouping bracket decorator.
DreamOptions	Configuration options for the dream liquid decorator.
GlowEffect	Glow controller attached to one element.
GlowOptions	Glow appearance and initial strength.
GlowTransitionProps	Animated glow targets.
GradientOptions	Configuration options for the linear gradient text decorator.
GrainOptions	Configuration options for the film grain texture decorator.
KenBurnsKeyframe	Keyframe snapshot for Ken Burns camera motion.
KenBurnsOptions	Configuration options for the Ken Burns camera pan and zoom decorator.
RuleOptions	Configuration options for rules and dividers.
ScrimOptions	Configuration options for the background scrim underlay decorator.
ShineEffect	One shared light, attached to one or more elements on the same stage.
ShineOptions	A shared reflection's appearance and initial position.
TransformEffect	A transform controller attached to one element.
TransformOptions	Local transformation of any stage element.
TypewriterOptions	Configuration options for the typewriter element decorator. All time durations are expressed in seconds (float).
VignetteOptions	Configuration options for the radial dark vignette decorator.
BracketStyle	Supported geometric styles for grouping brackets.
ElementDecorator	Callback function that applies visual effects or behavior to a stage element.
KenBurnsFocus	Target focal anchor point or normalized percentage coordinate pair [x, y].
TransformTransitionProps	Animation targets for a local transform.
TypewriterStep	Represents an individual action in a structured typewriter script: - string: Types out the text at default speed. - { text: string; speed?: number }: Types out text at an optional custom per-character speed in seconds. - { delete: number; pause?: number; speed?: number }: Backspaces delete count of characters after an optional pause in seconds, with optional backspace speed in seconds. - { pause: number }: Pauses typing for a given duration in seconds.
bracket	Decorates an element with a grouping bracket (curly brace, square bracket, or corner frame).
dream	Decorates an element with an optical liquid dream entrance.
glow	Creates a theme-coloured glow with snapshot-safe intensity.
gradient	Decorates an element with a linear gradient text effect and optional flowing animation.
grain	Decorates an element or background with a film grain texture.
kenBurns	Decorates an element or frame with authentic Ken Burns camera panning and slow zooming.
rule	Decorates an element with an accent rule / divider line or curved bracket.
scrim	Decorates an element with a soft radial dark aura underlay to make foreground text pop from busy animated backgrounds.
shine	Creates one reflection shared by all elements decorated with it.
transform	Creates an independent local transform. No animation loop.
typewriter	Decorates an element with simulated typing cadence, backspacing, and a blinking cursor.
vignette	Decorates an element or background with a radial dark vignette.

Backgrounds

Full-bleed renderers drawn behind the stage content.

Name	Description
AsciiFluidOptions	Configuration options for procedural ASCII fluid simulation background.
Background	Interface implemented by dynamic or static stage background renderers.
BackgroundOptions	Base options for background elements.
CSSBackgroundOptions	Configuration options for full-bleed CSS backgrounds.
GradientFluidOptions	Configuration options for procedural chromatic gradient fluid background.
StarfieldOptions	Configuration options for the 3D Starfield background.
BackgroundDecorator	A decorator applied to a background element.
AsciiFluid	Creates a procedural ASCII Fluid background element.
CSSBackground	Creates a full-bleed CSS background supporting colors, gradients, and images.
GradientFluid	Creates a procedural continuous Chromatic Gradient Fluid background element.
Starfield	Creates an interactive 3D Starfield background element.

Presenter

Dual-screen presenter console, laser pointer, and navigation overlays.

Name	Description
PresenterClient	Client for synchronizing a custom presenter view with the main presentation window via BroadcastChannel.
PresenterRecorder	Records a presentation at 1440p, up to 60 fps and 24 Mbps.
AnnotationController	Controller interface for the annotation overlay.
AnnotationOptions	Configuration options for the annotation overlay.
LaserPointerController	Extended controller for the laser pointer overlay, beyond the base OverlayPlugin interface.
LaserPointerOptions	Configuration options for the laser pointer overlay.
NavigationOverlayOptions	Options for the navigation overlay.
PresenterRecorderState	Recorder lifecycle and microphone state.
Annotation	Creates an annotation overlay plugin enabling the presenter to draw smooth, luminous ink directly over slide content.
LaserPointer	Laser pointer overlay with glowing trail and cursor suppression.
NavigationOverlay	Creates a navigation overlay plugin with prev scene, prev step, next step, next scene, and pointer toggle buttons.

Theme

Color tokens and built-in theme presets.

Name	Description
ThemeConfig	Theme configuration object for customizing stage canvas, typography, surfaces, and colors. All properties are optional and strictly typed.
cyberpunk	Cyberpunk theme preset.
defaultDark	Default dark theme preset.
defaultLight	Default light theme preset.
dracula	Dracula theme preset.
themes	Collection of all built-in theme presets.
tokyoNight	Tokyo Night theme preset.

Other

Type Alias	Description
TerminalStatus	Lifecycle of a live terminal as seen by the presentation.