Presentation Modes
When you run slides-tape serve deck.md, it spins up a live WebSockets server with three synchronized interfaces accessible via URL parameters.
1. Director Mode (http://localhost:3000)
The default root URL. This is the master control view where you can run the presentation locally, open terminals, and record audio narratives. It includes floating control buttons for Play, Demo, Record, and Fullscreen.
2. Audience Mode (/?mode=audience)
The clean, distraction-free view designed for projectors and screen-sharing.
- True 1080p Enforced Scaling: The engine forces a 16:9 1920x1080 CSS grid and uses bounding-box scaling to fit any window perfectly.
- Live Re-rendering: Connects to the WebSockets server to listen for slide transitions, fragment reveals, and live code highlighting events triggered by the presenter.
- No Overlays: All control buttons are hidden to prevent accidental cursor hover distractions.
3. Presenter Mode (/?mode=presenter)
A powerful, dual-pane desktop-style dashboard for the speaker.
- Dual-Pane Staging: Shows “Current Slide” and “Next Slide” or “Next Fragment” to ensure you always know what’s coming.
- Thumbnail Strip: A fluid horizontal strip of every slide at the bottom for rapid non-linear navigation.
- Speaker Notes: A dedicated notes pane.
- Live Code Highlighting Feedback: Physically dims and highlights code in real-time as you press
H. - Synchronization Master: Acts as the master remote. Every keystroke is instantly broadcast to all active Audience viewers.
Keyboard Shortcuts
| Key | Action |
|---|---|
Space | Toggle autoplay |
Right / n | Next Slide or Fragment |
Left / p | Previous Slide or Fragment |
H | Step through code highlights |
Enter | Trigger embedded Terminal/Web Demo run |
Esc | Close active Demo terminal |
F | Toggle Fullscreen |
G | Jump to slide (prompt) |
1-9 | Jump directly to slide N |
Autoplay Timeline Engine
When you hit Space to toggle autoplay, the engine computes a decoupled, end-to-end timeline.
- Total Duration: Defined by
<!-- duration: -->or global default. - Granular Sub-animations: Code highlights and fragments step through sequentially, consuming their specific
--delayand--dur. - Safety Buffers: If sub-animations exceed base slide duration, the engine automatically grants a safety buffer, ensuring the slide doesn’t transition abruptly.