Zoomdeck zooming presentations in the browser

Concepts

Slides, logical coordinates, the zooming camera, and how a deck is recorded and replayed.

Slides and the tree#

A presentation is a tree of slides. In Markdown a slide is a ::: slide container; in code it is an instance of Slide. Every slide owns a logical canvas, 16 × 9 units by default, and its content is authored in those units regardless of where the slide ends up on screen.

A child slide is placed in its parent through a viewport: a rectangle in the parent's canvas that shows the child's whole canvas, scaled uniformly, possibly rotated and letterboxed. Because viewports nest, the transform of a slide is the composition of the transforms of its ancestors, and when a viewport moves every descendant follows.

root (32 × 18)
├── chapter A (16 × 9, viewport at x=-8, width 12)
│   ├── detail A1
│   └── detail A2 (rotated by 0.1 rad)
└── chapter B

Pre-order visits#

Playback walks the tree in pre-order: a slide runs its own steps and visits its children in order, each visit zooming the camera into the child's viewport; returning zooms back out. The order within a slide is the source order of its includes, unless an include carries step=N, which interleaves the visit with the parent's numbered fragments. skip_return and skip_next let a presentation flow from one child straight to the next.

Coordinates#

Inside a slide, coordinates are the slide's own: the origin is the center of the canvas, x grows to the right and y upwards, and one unit is one unit of the canvas whatever the zoom level. Text is positioned by its left edge and first baseline, images and shapes by their center, and any element can choose another anchor. Children are placed by the center of their viewport.

Stops, clips and recording#

When a deck loads, the complete slide program runs once, instantly. Every stop (a click) closes a clip that remembers the animations that produced it, and the player stores a compact delta snapshot of the settled state after each clip. Navigation restores a snapshot and replays the clip's animations in real time, so:

  • forward and backward steps, outline jumps and deep links are immediate;
  • the left key can play the current stop backwards, because clips are made of interpolations;
  • author code runs exactly once per page load, like a single render.

Visibility follows the tree: only the root is visible at the start, each descendant fades in on its first entry and stays visible afterwards, so parents show their finished children as previews.

What runs where#

Part Role
Markdown dialect slides, elements, placement, fragments and animations as text
deck.json title, colors, typography, presenter options, styles, macros, imports
Code slides TypeScript Slide subclasses with the complete animation engine
Player outline, keyboard, pen, spotlight, speed, fullscreen, deep links
Command line editing preview with reload, static and single-file exports