Image background

// Title fades in over a fit:'cover' image that blurs in parallel.
const $ = new VideoFlow({
  name: 'Image Background',
  width: 1920,
  height: 1080,
  fps: 30,
});

// Image source goes in `settings` (2nd arg).
const bg = $.addImage(
  { fit: 'cover' },
  { source: 'https://videoflow.dev/samples/sample.jpg' },
);

// `wait: false` runs the blur in the background without advancing the flow.
bg.animate(
  { filterBlur: 0 },
  { filterBlur: 0.5 },
  { duration: '4s', wait: false },
);

$.wait('500ms');

// textShadow* props decorate the glyphs themselves — no need for a CSS filter.
const title = $.addText({
  text: 'Beautiful Scenery',
  fontSize: 5,
  fontWeight: 700,
  color: '#ffffff',
  textShadowColor: 'rgba(0,0,0,0.5)',
  textShadowBlur: 0.5,
});

// .fadeIn() / .fadeOut() are opacity-keyframe shorthands that advance the flow.
title.fadeIn('1s');
$.wait('3s');
title.fadeOut('1s');
$.wait('500ms');

return $;