Docs / Video Scenes

Video Scenes

Video scenes play a clip full-bleed on the canvas. Add zoom and pan directives to guide the viewer's attention, use seek to start mid-clip, and stitch multiple non-contiguous segments from the same source into a single scene.

Basic playback

--- video ---
![Demo](https://example.com/demo.mp4)

--- video (default, 15s) ---
![Walkthrough](https://example.com/walkthrough.mp4)

Video plays from the beginning at its natural frame rate. Default duration is 6s unless specified. The video always loops during preview. premountFor=30 pre-loads 30 frames before the scene starts to prevent black flash on scene entry.

For screen recording footage from the SlickVid Chrome extension, set the scene duration to match the footage length or the segment you want to show.

Zoom and pan effects

Use timecoded zoom directives to direct the viewer's eye to specific areas of the video. The syntax is identical to image scene zoom directives.

--- video (default, 12s) ---
![Screen recording](https://example.com/demo.mp4)
00:02.0 zoom top-center 2x
00:05.0 zoom center-center hold 1.5s
00:07.5 zoom out
DirectiveEffect
00:02.0 zoom top-center 2x At 2 seconds, ease into top-center at 2x scale
00:05.0 zoom center-center hold 1.5s At 5 seconds, zoom to center, then freeze for 1.5 seconds
00:07.5 zoom out At 7.5 seconds, ease back to full view (1x)

Scale defaults to 2.5x if omitted. All 9 position names work: top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right.

Seek - start mid-clip

The seek directive jumps the source video playback head to a specific timestamp at a given point in the scene. The most common use is 00:00.0 seek 00:05.0 to skip the first 5 seconds of a clip and start from the interesting part.

--- video (default, 10s) ---
![Recording](https://example.com/full-recording.mp4)
00:00.0 seek 00:05.0    start clip at source 5 seconds

The scene duration controls how much source video is consumed from the seek point. In the example above, 10s of video plays starting from source 5:00.

Multi-seek - stitch segments

Add multiple seek directives to stitch non-contiguous parts of the same source clip into one seamless scene. Each seek creates a new segment that plays until the next seek or until the scene duration is reached.

--- video (default, 16s) ---
![Full recording](https://example.com/recording.mp4)
00:00.0 seek 00:02.0    start at source 2:00
00:06.0 seek 00:10.0   at scene-time 6s, jump to source 10:00

In this example:

Scene timeSource time playing
0:00 - 0:06Source 2:00 - 2:06
0:06 - 0:16Source 10:00 - 10:10

The scene duration (16s) is the total amount of source video consumed across all segments. Each segment plays until either the next seek fires or the total duration is reached.

Combining seek with zoom

--- video (default, 16s) ---
![Walkthrough](https://example.com/walkthrough.mp4)
00:00.0 seek 00:05.0
00:02.0 zoom top-center 2x
00:05.0 zoom out
00:08.0 seek 00:30.0
00:10.0 zoom bottom-right 2.5x
00:14.0 zoom out

Video inside a panel card

Use --- panel (media) --- to display a video clip inside a styled card frame rather than full-bleed. Supports the same seek and zoom directives. Great for device mockups and app walkthroughs.

--- panel (media, border, rotate) ---
![App demo](https://example.com/app-demo.mp4)
# Mobile checkout flow
00:00.0 seek 00:02.0
00:03.0 zoom bottom-center 2x
00:06.0 zoom out