Video Transitions

Place a transition scene between any two scenes to animate the cut. The transition captures the previous scene's last frame and animates it out over the transition duration. 12 effects are available - 2 CSS-based and 10 WebGL-powered.

Syntax

--- text ---
# Scene before transition

--- transition (dissolve) ---       default 1 second

--- text ---
# Scene after transition

Override the duration with a time token. Shorter is generally better for product demos - 0.5s to 1.5s feels snappy without being distracting.

--- transition (wipe, 0.5s) ---   fast wipe
--- transition (burn, 2s) ---     slow dramatic burn

Transition scenes have no content - any markdown inside a transition block is ignored. Only the type and optional duration are used.

All transition effects

CSS transitions run natively in the browser. WebGL transitions use fragment shaders - all shaders are compiled once and reused across the video, so multiple WebGL transitions don't add significant render time.

zoom-in

Previous scene shrinks to the center point and fades to black.

CSS

zoom-out

Previous scene expands outward and fades to black.

CSS

dissolve

Random noise blocks dissolve away to reveal black.

WebGL

pixelize

Noise dissolve with blocks that grow coarser over time.

WebGL

wipe

Soft-edge wipe travels from left to right.

WebGL

radial

Clock wipe from 12 o'clock going clockwise.

WebGL

iris

Black closes in from the outside edges (iris in).

WebGL

checkerboard

Alternating checkerboard squares close in two staggered waves.

WebGL

blinds

Venetian blinds - each horizontal strip fills top to bottom.

WebGL

glitch

Scanline bands switch off randomly with white flashes at the live edge.

WebGL

burn

Fire edge rises from the bottom with an orange glow.

WebGL

ripple

Iris-in with a wavy 8-lobed ripple edge.

WebGL

Choosing the right transition

Use case	Recommended
Clean cut between data scenes	dissolve, wipe
Dramatic section break	burn, iris, zoom-in
Tech / developer demo	glitch, pixelize
Cinematic reveal	radial, ripple
Minimal / corporate	zoom-out, dissolve
High energy / SaaS marketing	checkerboard, blinds, wipe

Keep the same transition throughout a video for consistency. Mixing many different effects looks busy and distracts from the product being shown.