Introduction
pro-visu turns a website into marketing assets — scroll reels, screenshots, media walls, and specimens — from a single config.
pro-visu is a portable CLI that turns the websites you build into marketing and
showcase assets: scroll reels, responsive screenshots, looping media walls, and font/colour
specimens — all from a single pro-visu.config.ts.
Install it into a website repo, point assets at a URL, and run pro-visu generate. Output
is written into a gitignored pro-visu/ folder alongside a manifest.json.
The mental model
Three pieces:
- Config — a
pro-visu.config.tswith two blocks:settings(repo-level CLI behaviour) andassets(the list of things to generate). - Generators — each asset names a
generatorthat knows how to produce one kind of output. Options are merged fromsettings.defaults["<generator>"]and the asset's ownoptions. - Manifest — every run writes
<outDir>/manifest.jsonrecording what was produced (id, generator, file, dimensions, bytes, duration).pro-visu listprints it.
Assets can also depend on each other through inputs, forming a small DAG — for example, a
wall whose tiles are images, screenshots, and clips produced by other
assets (the wall derives those dependencies from the asset names in its columns).
Generators at a glance
| Generator | Output | What it's for |
|---|---|---|
scroll-reel | mp4 (+ gif/webp/poster) | Deterministic frame-stepped recordings — scroll reels, choreographed tours, scripted interactions, social formats |
screenshots | png / jpeg | Responsive full-page and element captures per breakpoint |
wall | mp4 | A seamless-looping media wall of your assets, each column scrolling on its own |
image | (passthrough) | Register an existing image file as an asset (e.g. a wall tile) |
specimen | mp4 | A looping type specimen from a font file |
palette | png | A still colour-palette image |
palette-reel | mp4 | A looping colour-palette reveal video |
The pipeline is a plugin contract, so new asset types slot in without core changes.
Quick start
As a project dev-dependency (recommended — typed config + a version pinned for reproducible builds):
pnpm add -D pro-visu # adds it to your repo
npx pro-visu init # scaffold config, gitignore the output dir, ensure a browser
npx pro-visu generate # capture the assets in your configOr with no install at all, via npx or a global install, using a JSON config:
npx pro-visu init --json # scaffold pro-visu.config.json + a JSON Schema
npx pro-visu generateContinue with Getting started for the full comparison of both modes (and using an unreleased build), or jump to Configuration.
Captures run in a managed Chromium (downloaded once on first use) and encode with a bundled ffmpeg — no global installs required.