Image Scenes
Image scenes display a full-bleed photo or screenshot with optional animation. Choose from default (zoom and pan), scroll for tall infographics, gallery for a smooth 3D carousel, or card for a fast spin-to-snap entrance. An optional heading renders as a bottom overlay.
Basic syntax
--- image --- full-bleed, default duration 6s --- image --- auto-scroll tall image variant: scroll duration: 8s --- image --- smooth 3D carousel + expand variant: gallery duration: 10s --- image --- fast spin + sharp snap-in variant: card duration: 10s 
Add an optional heading for a bottom gradient overlay caption:
--- image --- duration: 6s # Our new dashboard 
Default - zoom and pan
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 --- duration: 6s  00:01.0 zoom top-center 2x 00:04.0 zoom out
The zoom origin position is one of 9 named anchors:
| Position | Meaning |
|---|---|
| top-left | Zoom into the top-left corner |
| top-center | Zoom into the top-center edge |
| top-right | Zoom into the top-right corner |
| center-left | Zoom into the left edge, vertically centered |
| center-center | Zoom into the canvas center |
| center-right | Zoom into the right edge, vertically centered |
| bottom-left | Zoom into the bottom-left corner |
| bottom-center | Zoom into the bottom edge, centered |
| bottom-right | Zoom 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 --- duration: 8s  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
Scroll mode
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 shape | Scroll direction | How 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 --- variant: scroll duration: 10s  --- image --- variant: scroll duration: 8s # Q3 Timeline 
Gallery carousel
Gallery mode arranges multiple images in a 3D rotating carousel, then expands the first image to fill the canvas. Add two to six images and SlickVid handles the layout automatically.
The animation runs in two phases:
| Phase | Duration | What happens |
|---|---|---|
| 1 - Carousel | 65% of scene | Images arranged in a 3D ring. Carousel spins one full 360 rotation with ease-out deceleration. |
| 2 - Expand | 35% of scene | Carousel fades out. First image scales up from card size to fill the full canvas. |
--- image --- variant: gallery duration: 12s    
Card carousel
Card mode is a high-energy alternative to gallery. The carousel starts at 0.1x scale and accelerates with motion blur as it spins, growing to fill the screen. Then a sharp 250ms crossfade drops in the first image perfectly in focus. The effect reads as "spinning fast, then locking on target."
| Phase | Duration | What happens |
|---|---|---|
| 1 - Spin | 65% of scene | 3D carousel spins with accelerating speed and motion blur. Scale grows from 0.1x to 3x. |
| 2 - Snap | 250ms crossfade | Blurred carousel fades out. First image snaps in sharp and full-screen. |
--- image --- variant: card duration: 10s    --- image --- variant: card effects: rotate duration: 10s # The dashboard at a glance  