Image layers
$.addImage(props, { source }) adds a still image. VideoFlow auto-detects the format from the URL or content-type. Positioning, sizing, and rotation all share the same model as text layers.
On this page
const $ = new VideoFlow({ width: 512, height: 512, fps: 30 });
// Ken-Burns drift on a full-cover image with a label on top.
const bg = $.addImage(
{ fit: 'cover', scale: 1 },
{ source: 'https://videoflow.dev/samples/sample.jpg' },
);
bg.animate(
{ scale: 1, position: [0.55, 0.5] },
{ scale: 1.18, position: [0.45, 0.5] },
{ duration: '4s', easing: 'easeInOut', wait: false },
);
const label = $.addText(
{
text: 'Beautiful scenery',
fontSize: 4.5, fontWeight: 800, color: '#fff',
textShadowColor: 'rgba(0,0,0,0.55)', textShadowBlur: 0.6,
},
{
transitionIn: { transition: 'fade', duration: '600ms' },
transitionOut: { transition: 'fade', duration: '500ms' },
},
);
$.wait('3s');
label.remove();
$.wait('500ms');
bg.remove();
return $;const logo = $.addImage(
{
position: [0.5, 0.4],
scale: 0.8,
},
{
source: 'https://example.com/logo.png',
transitionIn: { transition: 'zoom', duration: '800ms', easing: 'easeOut' },
transitionOut: { transition: 'fade', duration: '500ms' },
},
);
$.wait('2s');
logo.remove(); // triggers transitionOutProperties
| Prop | Type / default | Notes |
|---|---|---|
source (setting) | string | URL, data URL, or path. SVG, PNG, JPG, WebP, GIF all supported. |
fit | cover | contain / contain | How the image sizes to the project canvas. |
position / anchor | [x, y] | Same as text. |
scale / rotation / opacity | Animatable transforms. | |
borderRadius | string | CSS radius. Clips the image. |
filterBlur | 0–1 | Normalised blur. Animatable. |
filterBrightness | 1.0 | Animatable. |
filterSaturate | 1.0 | Animatable. |
startTime (setting) | Time | Rarely needed — the flow pointer sets it for you. |
Ken Burns pan
const bg = $.addImage(
{ fit: 'cover', scale: 1.1 },
{ source: '/hero.jpg' },
);
bg.animate(
{ scale: 1.1, position: [0.55, 0.5] },
{ scale: 1.25, position: [0.45, 0.5] },
{ duration: '8s', easing: 'linear', wait: false },
);
// Foreground content runs on top while the background drifts.