Docs / Image Scenes

Image Scenes

Image scenes display a full-bleed photo or screenshot with optional animation. Choose from default (with zoom and pan directives), scroll mode for tall infographics, or gallery carousel for a rotating 3D showcase. An optional heading renders as a bottom overlay.

Basic syntax

--- image ---                       full-bleed, default duration 6s
--- image (scroll, 8s) ---         auto-scroll tall image
--- image (gallery, 10s) ---      3D carousel + focus expand

![Alt text](https://example.com/screenshot.png)

Add an optional heading for a bottom gradient overlay caption:

--- image (default, 6s) ---
# Our new dashboard
![Dashboard](https://example.com/dashboard.png)

Default - zoom and pan

--- image --- object-fit: cover

The default variant fills the canvas with the image using object-fit: cover. Add zoom/pan directives to create cinematic Ken Burns-style motion - zoom into a region, hold, then ease back out.

Zoom directive syntax

--- image (default, 6s) ---
![Photo](https://example.com/photo.jpg)
00:01.0 zoom top-center 2x
00:04.0 zoom out

The zoom origin position is one of 9 named anchors:

PositionMeaning
top-leftZoom into the top-left corner
top-centerZoom into the top-center edge
top-rightZoom into the top-right corner
center-leftZoom into the left edge, vertically centered
center-centerZoom into the canvas center
center-rightZoom into the right edge, vertically centered
bottom-leftZoom into the bottom-left corner
bottom-centerZoom into the bottom edge, centered
bottom-rightZoom into the bottom-right corner

Scale and hold

Scale is optional - defaults to 2.5x. The hold Ns modifier freezes the current frame for N seconds before resuming playback:

--- image (default, 8s) ---
![Dashboard](https://example.com/dashboard.png)
00:00.5 zoom bottom-right 3x
00:02.5 zoom center-center hold 2s    hold at center for 2 seconds
00:06.0 zoom out
Tip: zoom out is shorthand for zoom center-center 1x - it resets the scale to full without jumping to a new region.

Scroll mode

--- image (scroll) --- auto-detects direction

Scroll mode is designed for tall infographics, long screenshots, and timeline images. It auto-detects the scroll direction by comparing the image's natural aspect ratio to the canvas:

Image shapeScroll directionHow it fits
Taller than canvas proportionally top to bottom Fills canvas width exactly, scrolls down
Wider than canvas proportionally left to right Fills canvas height exactly, scrolls right

The contained dimension fills exactly with no letterboxing or cropping. Scroll travels from 0% to 100% of the overflow dimension over the full scene duration.

--- image (scroll, 10s) ---
![Roadmap](https://example.com/roadmap-tall.png)

--- image (scroll, 8s) ---
# Q3 Timeline
![Timeline](https://example.com/timeline-wide.png)