CLI
Create, preview, check, and export films, and render static figures, from the command line.
Films#
vizmatic new#
Create a film from a starter that renders as written and passes the check.
npx vizmatic new intro --template explainerThe templates are explainer, equation, architecture, chart, and deck.
vizmatic preview#
Open a live preview with a timeline. The page reloads when you save.
npx vizmatic preview intro.ts --openvizmatic check#
Inspect a film without rendering video. The check samples the timeline and reports marks off the canvas, overlapping text, and lines that cross text. Each finding has a time and a position. Use --json to read the report in a script.
A film whose lines run past the frame on purpose, such as a warped grid, sets bleed: true in its options. The check then ignores lines and shapes past the edge, and it still reports text that runs off the canvas or sits against an edge.
npx vizmatic check intro.ts --look midnight,paper --jsonThe check looks where the film comes to rest, so it misses a problem that lasts only while something moves. --motion also inspects every frame. It reports a problem that appears only in motion as a warning, because it cannot tell a collision from one picture that replaces another. It reports 0.2 seconds or more with nothing visible as film.blank. It reports text that leaves before a viewer can read it as film.text_brief: a reader takes in 20 characters in one second, and a text needs half a second at least. --reading-speed <n> changes the speed, and 0 turns the rule off. --stepped is for a deck, which waits at each chapter: text that is up there is not reported. In a film, readingSeconds(text) from vizmatic/stage gives the time that a plain text needs. --content-top <px> sets the canvas y where the content starts, so that a heading that stays up does not count as content. --text-margin <px> sets how near text may come to an edge of the frame before the check reports film.text_edge. The default is 2% of the shorter side, and 0 turns the rule off. While the camera is zoomed, the check looks only at pinned text, because a zoom crops the rest on purpose.
npx vizmatic check intro.ts --motion --content-top 200vizmatic film#
Export a film. See Exporting for the options.
npx vizmatic film intro.ts --out dist/films --look midnight,paper --quality high| Flag | Meaning |
|---|---|
--out <dir> | The output folder. |
--look a,b | Render in these looks. |
--format mp4,webm,gif,png,svg | The output formats. |
--quality draft|standard|high|master | Encoder quality and motion blur. |
--fps <n> | Frame rate. |
--width <n> | Output width in pixels. |
--motion-blur <n> | Sub-frames per frame. |
--shutter <0-1> | The fraction of a frame the shutter stays open. |
--range a:b | Render part of the timeline. |
--frame t,t | Write stills at these times. |
--every <seconds> | Write stills at this interval, across the film or its --range. |
--sheet | Join the stills into contact sheets, each tile with its time. With no times, a sheet shows 12 moments spread over the film. |
--columns <n> | Tiles in a row of a contact sheet. |
--poster | Also write a poster frame. |
--workers <n> | Rasterizer threads. |
--audio <file> | Add a sound track. |
--background <color|none> | Replace the background. |
--ffmpeg <path> | Use this FFmpeg. |
--json | Print a report as JSON. |
vizmatic looks and vizmatic objects#
List the looks and the object library. Use --json in scripts and agents.
npx vizmatic looks --json
npx vizmatic objects --jsonFigures#
Render TSX figures to PNG and SVG.
npx vizmatic ./frame.tsx --out ./figures --theme dark,light --format both
npx vizmatic check ./frame.tsx --theme dark,light --json
npx vizmatic gif ./animated-frame.tsx --out ./figures --theme dark,light --fps 20Run npx vizmatic --help to see every option.