Demo video

Pax renders demo and launch videos locally. You compose a demo document, Pax compiles it into one self-contained HTML film in the Pax design language, and a deterministic renderer captures and encodes it.

Render a film#

1. 1

   See what is available

   Copy

   paxfx demo list

2. 2

   Render from a template

   Copy

   paxfx demo render launch-hero --preset launch-hero --format mp4

3. 3

   Fork the document to edit it

   init writes the compiled document to .pax/demos/ so you can change copy, segments, and tokens.

   Copy

   paxfx demo init launch-hero --set product=Acme
   paxfx demo render .pax/demos/launch-hero.demo.json --format gif

Prompt your agent like you mean it#

Don't ask for a video. Brief a commercial.

Paste this into Cursor, Claude Code, or any agent with Pax MCP. Swap the brackets. Hit send.

Make me a launch film for [PRODUCT].
 
Not a slideshow. A commercial.
 
Pull the real brand from [URL]: logo, colors, type, voice. Then shoot a 45 to 60 second, 1920×1080, 60fps film that sells the feeling of using the product when it is working.
 
Structure it like a desk you want to sit at:
1. Open on the brand. One line that stops the scroll.
2. Name the pain without pity.
3. Reveal the product as a constellation. The toolkit, connected.
4. Walk three to five real surfaces. UI that looks shipped, not mocked.
5. Close on the offer and the URL. Leave them wanting the trial, not the trailer.
 
Use Pax demo video. Compose a seekable HTML film with brand tokens and CSS keyframes on the master clock. Render with:
 
paxfx demo render .pax/demos/[slug].demo.json --preset launch-hero --format mp4
 
Local. Deterministic. No stock footage. No fake metrics. Reduced-motion safe.
 
When you are done, the file in .pax/exports/ should feel like money spent well.

The agent should check paxfx doctor first, compose a demo document (templates or custom html segments), then render on your machine. Identical inputs produce identical files.

How rendering works#

1. The demo compiler turns the document into one self-contained HTML timeline. Every animation is a CSS keyframe with an absolute delay against a single master clock.
2. Headless Chromium opens the film at a fixed viewport, device scale, sRGB color profile, and dark scheme. The renderer pauses every animation through the Web Animations API and seeks it to an exact millisecond before each screenshot, so no frame depends on wall-clock timing.
3. FFmpeg assembles the frames into mp4 (H.264), webm (VP9), transparent webm, or gif. Poster png frames come straight from the renderer. Metadata is stripped and bitexact output is requested, so identical inputs on the same machine produce identical files.

Canvas or WebGL pages join the deterministic clock by defining window.__paxSeek(ms).

Segments#

A demo document is an ordered list of segments with crossfade transitions.

html segments expose --pax-t0 (segment content start) and --pax-brand-* tokens. Drive motion with CSS keyframes using animation-delay: calc(var(--pax-t0) + 400ms). No script tags.

Brand tokens default to the Pax studio palette with acid and chroma accents, and can be overridden per document. Motion personalities from @pax-sh/motion (pax-editorial, pax-precise, pax-acid, pax-drift, pax-pulse) control easing, duration scale, and stagger. Every compiled film carries a prefers-reduced-motion pathway that settles to final states.

Templates and presets#

Each template accepts parameters through --set key=value.

Scene media exports#

The same engine powers scene exports. The scene's compiled DOM preview is captured at its exact canvas size, frame rate, and duration.

paxfx export scene.json --format mp4

Formats: mp4, webm, webm-alpha, gif, png.

Capabilities#

Media rendering requires FFmpeg and a Playwright Chromium build. Pax refuses with the exact fix when either is missing.

brew install ffmpeg
pnpm exec playwright install chromium

paxfx doctor reports both. Transparent webm additionally requires an FFmpeg build with libvpx-vp9.

MCP tools#

Common issues#

Next steps#