Transition presets

// Each slot uses one preset for both entry and exit on a fresh text layer.
// Built with the flow pattern — add → wait → remove()
const $ = new VideoFlow({
  name: 'Transitions',
  width: 1920,
  height: 1080,
  fps: 30,
  backgroundColor: '#0c0e16',
});

const PRESETS = [
  'fade', 'slideUp', 'zoom', 'overshootPop',
  'blurResolve', 'glitchResolve', 'rotate3dY', 'lightSweepReveal',
  'typewriter'
];

// Persistent header — added once, removed once the loop finishes.
const header = $.addText(
  { text: 'TRANSITIONS', fontSize: 4, fontWeight: 700, color: '#ffffff90', position: [0.5, 0.15] },
  {
    transitionIn:  { transition: 'fade', duration: '400ms' },
    transitionOut: { transition: 'fade', duration: '400ms' },
  },
  { waitFor: 0 },
);

// Per-preset cycle: 500ms entry → 400ms hold → 500ms exit.
for (const name of PRESETS) {
  const layer = $.addText(
    { text: name, fontSize: 8, fontWeight: 800, color: '#ffffff', position: [0.5, 0.5] },
    {
      transitionIn:  { transition: name, duration: '500ms' },
      transitionOut: { transition: name, duration: '500ms' },
    },
    { waitFor: 0 },
  );
  $.wait('900ms');
  layer.remove();
  $.wait('500ms');
}

header.remove();

return $;