Get it on npm

Before and after

Two pictures (or two tiles when none are given) split by a handle that sweeps across to reveal the after side and settles in the middle, each side labelled.

  • essentials/before-after
  • Essentials
  • callout
  • Full frame
  • 5 s (3–20 s)
Style
Live in your browser
Before and after at 16:9
0.00 / 5.00 s
npx volito render essentials/before-after --style studio --out before-after.mov
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render essentials/before-after --prop caption="Same footage, one pass of the agent" --prop before="Before" --out before-after.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render essentials/before-after --aspect 9:16 --style cobalt --out before-after-9x16.mov
volito render essentials/before-after --format mp4 --out before-after.mp4
volito still essentials/before-after --t 2.5 --out before-after.png
volito info essentials/before-after     # every prop and part
volito add essentials/before-after      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("essentials/before-after"), { props: { caption: "Same footage, one pass of the agent", before: "Before" }, out: "before-after.mov" });

Or ask an agent with the MCP server connected: “Render the Volito before and after (essentials/before-after) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
captiontextSame footage, one pass of the agent≤ 60 chars
before
Before label
textBefore≤ 16 chars
after
After label
textAfter≤ 16 chars
beforeImage
Before picture
image——
afterImage
After picture
image——

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

PartWhat it is
groundthe ground
framethe pictures, handle and labels
captionthe caption

Tags: before after, compare, split, reveal, transformation

More in Essentials

Lower third

A name plate over footage: an accent spine grows, the plate wipes in, the name rises, the role slides in.

Title card

A full-frame chapter or opening title: a kicker chip, the title built letter by letter, a brush underline, a subtitle — over the brand's ground with an outlined number drifting behind.

Kinetic headline

Big words that pop in one by one — on the voice when you give it a transcript — with a marker swiped under the *starred* words.

Subscribe

A call to action over footage: the channel card springs in, a cursor glides onto the button and presses it, the bell rings.

Social handle

Your handle in a corner: a pill with the platform's icon slides in, a follow button presses, it tucks away.

Callout

Points at something in the shot: a ring pulses on the spot, a line draws out to a label card that pops in beside it.