GLSL effects

// Three panels stacking different GLSL effects.
const $ = new VideoFlow({
  name: 'Effects',
  width: 1920,
  height: 1080,
  fps: 30,
  backgroundColor: '#000',
});

// Panel 1 — bloom over a warm colorGrade. Effects compose in order.
const bg1 = $.addImage(
  {
    fit: 'cover',
    effects: [
      { effect: 'colorGrade', params: { exposure: 0.3, saturation: 0.4, temperature: 0.4, contrast: 0.15 } },
      { effect: 'bloom',      params: { threshold: 0.6, intensity: 0.9, radius: 1.25 } },
    ],
  },
  { source: 'https://videoflow.dev/samples/sample.jpg' },
);
$.wait('300ms');
const label1 = $.addText(
  {
    text: 'Bloom',
    fontSize: 5, fontWeight: 800, color: '#fff7d4', position: [0.5, 0.85],
    effects: [{ effect: 'glow', params: { intensity: 1.2, radius: 0.95, color: '#ffe9a8' } }],
  },
  {
    transitionIn:  { transition: 'overshootPop', duration: '400ms' },
    transitionOut: { transition: 'fade',         duration: '300ms' },
  },
);
$.wait('2.4s');
label1.remove();
$.wait('300ms');
bg1.remove();

// Panel 2 — three glitch passes stacked.
const bg2 = $.addImage(
  {
    fit: 'cover',
    effects: [
      { effect: 'rgbSplit',      params: { amount: 0.005, bandSize: 0.04, randomness: 0.6 } },
      { effect: 'sliceGlitch',   params: { sliceCount: 36, offsetAmount: 0.02, randomness: 0.7 } },
      { effect: 'vhsDistortion', params: { trackingAmount: 0.8, tearAmount: 0.25, scanlineIntensity: 0.5 } },
    ],
  },
  { source: 'https://videoflow.dev/samples/sample2.jpg' },
);
$.wait('200ms');
const label2 = $.addText(
  {
    text: 'GLITCH',
    fontSize: 6, fontWeight: 900, color: '#ff3aa8', position: [0.5, 0.5],
    effects: [{ effect: 'rgbSplit', params: { amount: 0.012 } }],
  },
  {
    transitionIn:  { transition: 'glitchResolve', duration: '300ms' },
    transitionOut: { transition: 'fade',          duration: '200ms' },
  },
);
$.wait('2.6s');
label2.remove();
$.wait('200ms');
bg2.remove();

// Panel 3 — frosted glass + animated `lightSweep.progress` via dot-path.
const bg3 = $.addImage(
  {
    fit: 'cover',
    effects: [
      { effect: 'frostedGlass', params: { blurRadius: 0.5, distortion: 0.6, frostAmount: 0.25 } },
      { effect: 'lightSweep',   params: { progress: 0, angle: 25, width: 0.18, intensity: 0.9, color: '#ffffff' } },
    ],
  },
  { source: 'https://videoflow.dev/samples/sample3.jpg' },
);
// `wait: false` runs the sweep concurrently while the label appears below.
bg3.animate(
  { 'effects.lightSweep.progress': -0.2 },
  { 'effects.lightSweep.progress':  1.2 },
  { duration: '2.4s', wait: false, easing: 'easeInOut' },
);
$.wait('300ms');
const label3 = $.addText(
  {
    text: 'Glass',
    fontSize: 5, fontWeight: 800, color: '#ffffff', position: [0.5, 0.5],
    effects: [{ effect: 'glow', params: { intensity: 0.9, radius: 0.95, color: '#dff1ff' } }],
  },
  {
    transitionIn:  { transition: 'blurResolve', duration: '500ms' },
    transitionOut: { transition: 'fade',        duration: '300ms' },
  },
);
$.wait('2.5s');
label3.remove();
$.wait('300ms');
bg3.remove();

return $;