Preview

The preview studio serves your work on 127.0.0.1:4177 with hot reload. Its controls drive the real animations in the previewed document, not a mock timeline.

pnpm paxfx preview examples/title-card/preview.html
pnpm paxfx watch examples/title-card/preview.html

Studio controls#

• Play / Pause / Step operate on every animation in the preview frame. Step advances one 60fps frame, scaled by the selected speed.
• Scrub drags all animations to a percentage of their duration. Looping animations scrub one iteration.
• Speed (0.5x to 2x) sets the playback rate.
• Reduced motion injects a style that disables animations and transitions, so you can verify the fallback without changing OS settings.

The sidebar reports live validation: animation count, measured duration, and, when a sibling scene JSON is found, layer and track counts plus whether a reduced-motion variant is present.

Inspect and compare#

pnpm paxfx inspect examples/title-card/scene.json
pnpm paxfx compare a.json b.json

inspect prints size and kind for an artifact. compare reports whether two artifacts are byte-identical.

Refine#

paxfx refine applies a deterministic instruction to a scene JSON file. The grammar is fixed; anything outside it fails loudly instead of guessing.

pnpm paxfx refine scene.json --to "slower"
pnpm paxfx refine scene.json --to "25% faster"
pnpm paxfx refine scene.json --to "duration 3s"
pnpm paxfx refine scene.json --to "color #5ce1e6"
pnpm paxfx refine scene.json --to "reduce motion"

• slower / faster scale the whole timeline by 1.25x / 0.8x; <n>% slower|faster and duration <seconds>s give precise control.
• color <#hex> replaces the scene's dominant layer fill.
• reduce motion adds (or strengthens) a reduced-motion variant with all tracks disabled.

Every refine snapshots the scene before and after under .pax/snapshots/ and prints the undo path. When a compiled preview sits next to the scene, it is recompiled so the studio reflects the change immediately.

Related#

• Export
• Critic