Preview
A hot-reload preview server with a full transport — play, scrub, frame-step. The same UI that powers the in-browser playground.
bash
hyperframes preview comp.htmlThe preview server runs on http://localhost:5173, watches for file changes, and exposes a full transport. Edit, save, the page reloads, time stays where you left it.
What you'll learn
- The keyboard transport, and why each key earns its place on the cheatsheet
- The flags that matter for LAN sharing and custom watch globs
- That the same UI ships embeddable for your own tooling
Transport keys
| Key | Action | Why it matters |
|---|---|---|
Space | Play / pause | The one you'll press a thousand times. Persists across reloads. |
← / → | Step one frame | Catch single-frame artifacts — flicker, dropped tweens, the wrong easing. |
Shift + ← / → | Step one second | Skim a long composition without losing your place. |
Home / End | Jump to frame 0 / last | Tail-checking — does the last frame end where you think it does? |
0-9 | Jump to N × 10% | Coarse seek without taking your hand off the keyboard. |
L | Toggle loop | Stare at a four-second motion until it's right. |
R | Reload composition | When file watching can't catch your change (e.g. external assets). |
Transport overlay
A quick visual of the on-screen transport — same UI that ships in the playground.
0.00s
Flags
| Flag | Purpose |
|---|---|
--port 3000 | Run on a different port. Useful when 5173 is already in use. |
--host 0.0.0.0 | Expose on the LAN. Phones, tablets, and the QA team can hit the preview directly. |
--no-open | Don't auto-open the browser. Friendly to tmux and CI screenshots. |
--watch "src/**/*.html" | Custom watch glob for asset pipelines. |
--inspector | Open the inspector pane — tracks, durations, sampled timing per frame. |
Embedded preview
The preview UI is open-source and embeddable — the same component powers the in-browser playground. Drop it in a docs site, a CMS, or your design system:
bash
npm install @hyperframes/previewjs
import { Preview } from "@hyperframes/preview";
<Preview src="/path/to/comp.html" />Next
- Render — go from preview to a hash-stable MP4
- CLI reference — every command, every flag