Recipes
Practical configs for common showcase tasks.
Copy-paste starting points. Each is an entry in your assets array (or settings).
A vertical social reel
A 9:16 clip with multiple output formats and title cards:
{
name: "social",
url: "https://your-site.com",
generator: "scroll-reel",
options: {
width: 430,
height: 932,
deviceScaleFactor: 2,
duration: 5000,
aspect: "9:16",
outputs: ["mp4", "gif", "poster"],
intro: { title: "Acme", subtitle: "Spring 2026" },
outro: { title: "acme.com" },
},
}A choreographed product tour
Pause on each section instead of one continuous scroll:
{
name: "tour",
url: "https://your-site.com",
generator: "scroll-reel",
options: {
choreography: [
{ to: "#hero", holdMs: 1200 },
{ to: "#features", holdMs: 1500 },
{ to: "#pricing", holdMs: 1500 },
{ to: "100%", durationMs: 1000 },
],
kenBurns: { scaleTo: 1.05 },
},
}A scripted interaction demo
Drive the UI with a synthetic cursor (records realtime):
{
name: "search-demo",
url: "https://your-site.com",
generator: "scroll-reel",
options: {
cursor: { color: "#e91e63" },
actions: [
{ do: "click", selector: "#search" },
{ do: "type", selector: "#search input", text: "leather tote" },
{ do: "hover", selector: ".results a:first-child" },
],
},
}A media wall
Composite several captures into a seamless-looping wall. Each column names
the assets it stacks (they run first — no inputs map needed) and carries its own motion. Tiles fit
the column width and keep their own height (16:9 → short, 9:16 → tall), so the columns read as a
natural masonry:
assets: [
{ name: "shot-home", url: "/", generator: "screenshots", options: { fullPage: false } },
{ name: "shot-shop", url: "/shop", generator: "screenshots", options: { fullPage: false } },
{ name: "img-hero", generator: "image", options: { src: "public/img/hero.jpg" } },
// …enough to fill the columns…
{
name: "wall",
generator: "wall",
options: {
durationSeconds: 16,
pan: { direction: "left", loops: 1 },
columns: [
{ tiles: ["img-hero", "shot-home"], direction: "down",
pulses: [{ at: 0.1, duration: 0.15, distance: 0.5 }] },
{ tiles: ["shot-shop", "img-hero"], direction: "up", loops: 1, stagger: 0.4 },
{ tiles: ["shot-home", "shot-shop"], stagger: 0.15 },
],
// While dialing it in: `test: true` (faux labeled boxes, no producers, no server) +
// `capture: "realtime"` renders in seconds. Remove both for the real render.
},
},
]Multi-page tour
Capture several routes and concatenate them into one reel:
{
name: "site-tour",
url: "https://your-site.com",
generator: "scroll-reel",
options: {
routes: [
"https://your-site.com",
{ url: "https://your-site.com/pricing", autoSections: true },
{ url: "https://your-site.com/contact", durationMs: 2000 },
],
aspect: "16:9",
},
}Capture a deployed URL in CI
Skip the managed server and point at a live URL; add --no-sandbox for most CI runners:
settings: {
browser: { headless: true, args: ["--no-sandbox"] },
}pro-visu generate --skip-serverOnly rebuild what changed
Turn on caching to skip assets whose inputs and options are unchanged:
pro-visu generate --cache
# or persist it:settings: { cache: true }