Scene Transitions

Add entrance and exit animations to any scene using the transition-in: and transition-out: config keys. Animations are baked into the scene's own duration - no extra frames are added and the total video length is unchanged.

Syntax

Add transition-in: and/or transition-out: to any scene's config block, alongside other keys like variant: and duration:.

--- text ---
# First Scene

--- text ---
variant: bounce
transition-in: zoom-in
transition-out: zoom-out

# Second Scene

--- panel ---
variant: stats
transition-in: zoom-in

# Revenue
$48,200
+12% from last month

Transition duration is always 0.5s (15 frames at 30fps) and is counted inside the scene's own duration. A 6s scene with transition-in: zoom-in still lasts 6s total.

Available variants

Two CSS-based variants are supported for transition-in: and transition-out::

zoom-in

Entrance: scale 0.85 to 1 + fade in. Exit: scale 1 to 0.85 + fade out.

CSS

zoom-out

Same animation as zoom-in - the name is symmetric. Use either for either direction.

CSS

Both keys accept the same variant names. Mix and match freely:

--- notifications ---
variant: bottom-right
duration: 8s
transition-in: zoom-in
transition-out: zoom-out

# Build succeeded
deploy-prod finished in 42s

Legacy WebGL transitions (deprecated)

The standalone --- transition --- scene type is still supported for backwards compatibility but is deprecated. It inserts a dedicated transition scene between two scenes using WebGL fragment shaders. Use transition-in: / transition-out: for new videos.

--- text ---
# Scene before

--- transition ---                  legacy - inserts extra scene
variant: dissolve

--- text ---
# Scene after

10 WebGL effects are available in the legacy transition type only:

dissolve

Random noise blocks dissolve away to 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.

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.

WebGL

burn

Fire edge rises from the bottom with an orange glow.

WebGL

ripple

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

WebGL