Frame Scrub
Scroll drives a frame sequence through a canvas playhead
Customize
Props
26| Name | Type | Default | Description |
|---|---|---|---|
frames | string[] | undefined | Explicit frame URLs in playback order. Takes priority over src. |
video | string | undefined | Video URL sampled into count frames up front, then scrubbed. Needs CORS access. |
videoQuality | number | 720 | Width in pixels each video frame is decoded at. |
src | string | undefined | Frame URL pattern containing an {i} token, e.g. "/seq/shot-{i}.webp". |
count | number | 48 | Number of frames. Used with src, or as the length of the built-in sequence. |
pad | number | 3 | Zero-pad width applied to {i} when expanding src. |
start | number | 1 | First frame number used when expanding src. |
variant | "plain" | "blend" | "ghost" | "slice" | "mosaic" | "wipe" | "blend" | How consecutive frames are composited while scrubbing. |
scrollLength | number | 3 | Extra viewports of scroll the sequence is spread across. |
smooth | number | 0.18 | Scroll-following easing. 0 tracks the scrollbar exactly. |
fit | "cover" | "contain" | "cover" | How each frame fills the stage. |
width | number | 1020 | Maximum stage width in pixels. |
height | number | 0.72 | Stage height as a fraction of the viewport. |
borderRadius | number | 20 | Stage corner radius in pixels. |
background | string | "#0a0a0a" | Colour painted behind every frame. |
accent | string | "#ededed" | Colour used by the built-in sequence and the readouts. |
trail | number | 4 | Echo count for the ghost variant. |
slices | number | 14 | Band count for the slice variant. |
cells | number | 6 | Column count for the mosaic variant. |
lag | number | 2.4 | How many frames of lag the offset variants spread across. |
punch | number | 0.06 | Extra scale applied at the start of the scrub. |
grain | number | 0.07 | Film grain strength. |
vignette | number | 0.34 | Vignette strength. |
showCounter | boolean | true | Show the frame readout in the stage corner. |
onFrameChange | (index: number) => void | undefined | Fired when the settled frame index changes. |
className | string | "" | Extra classes for the section wrapper. |
framesstring[]Explicit frame URLs in playback order. Takes priority over src.
undefinedvideostringVideo URL sampled into count frames up front, then scrubbed. Needs CORS access.
undefinedvideoQualitynumberWidth in pixels each video frame is decoded at.
720srcstringFrame URL pattern containing an {i} token, e.g. "/seq/shot-{i}.webp".
undefinedcountnumberNumber of frames. Used with src, or as the length of the built-in sequence.
48padnumberZero-pad width applied to {i} when expanding src.
3startnumberFirst frame number used when expanding src.
1variant"plain" | "blend" | "ghost" | "slice" | "mosaic" | "wipe"How consecutive frames are composited while scrubbing.
"blend"scrollLengthnumberExtra viewports of scroll the sequence is spread across.
3smoothnumberScroll-following easing. 0 tracks the scrollbar exactly.
0.18fit"cover" | "contain"How each frame fills the stage.
"cover"widthnumberMaximum stage width in pixels.
1020heightnumberStage height as a fraction of the viewport.
0.72borderRadiusnumberStage corner radius in pixels.
20backgroundstringColour painted behind every frame.
"#0a0a0a"accentstringColour used by the built-in sequence and the readouts.
"#ededed"trailnumberEcho count for the ghost variant.
4slicesnumberBand count for the slice variant.
14cellsnumberColumn count for the mosaic variant.
6lagnumberHow many frames of lag the offset variants spread across.
2.4punchnumberExtra scale applied at the start of the scrub.
0.06grainnumberFilm grain strength.
0.07vignettenumberVignette strength.
0.34showCounterbooleanShow the frame readout in the stage corner.
trueonFrameChange(index: number) => voidFired when the settled frame index changes.
undefinedclassNamestringExtra classes for the section wrapper.
""