Turn JSON code
into programmatic videos.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({
  name: 'VideoFlow trailer',
  width: 1920, height: 1080, fps: 30,
  backgroundColor: '#ffffff',
});

// ── Act 1: brand intro (white bg) ─────────────────────────────────────────────

const intro = $.addText(
  {
    text: 'Introducing',
    fontSize: 5, fontWeight: 500, color: '#52596a',
    position: [0.5, 0.5],
    letterSpacing: -0.05,
  },
  {
    transitionIn:  { transition: 'blurResolve', duration: '300ms' },
    transitionOut: { transition: 'fade',        duration: '450ms' },
  },
);
intro.animate(
  { letterSpacing: -0.05 },
  { letterSpacing:  0.20 },
  { duration: '1.7s', easing: 'easeOut', wait: false },
);
$.wait('1.6s');
intro.remove({ in: '100ms' });

// Logo + wordmark composited in one group so a single 3D tilt animates both.
const brand = $.group(
  { position: [0.5, 0.5] },
  {
    transitionIn:  { transition: 'tilt3d',      duration: '700ms' },
    transitionOut: { transition: 'blurResolve', duration: '500ms' },
  },
  () => {
    $.addImage(
      { fit: 'contain', scale: 0.22, position: [0.28, 0.5] },
      { source: 'https://videoflow.dev/images/logo.png' },
    );
    $.addText({
      text: 'VideoFlow',
      fontSize: 9, fontWeight: 800, color: '#0c1018',
      position: [0.57, 0.5],
      letterSpacing: -0.04,
    });
  },
  { waitFor: 0 },
);

$.wait('0.8s');

const sub1 = $.addText(
  {
    text: 'A library to create and render videos programmatically',
    fontSize: 2.5, fontWeight: 500, color: '#3a4257',
    position: [0.5, 0.66],
  },
  {
    transitionIn:  { transition: 'slideUp', duration: '600ms', params: { distance: 0.04 } },
    transitionOut: { transition: 'fade',    duration: '400ms' },
  },
);
$.wait('1.8s');
sub1.remove({ in: '100ms' });

const tagline = $.addText(
  {
    text: 'Turn JSON into Video',
    fontSize: 3.6, fontWeight: 800, color: '#FF5A1F',
    position: [0.5, 0.66],
    letterSpacing: -0.02,
  },
  {
    transitionIn:  { transition: 'overshootPop', duration: '600ms', params: { from: 0.7 } },
    transitionOut: { transition: 'blurResolve',  duration: '450ms' },
  },
);

// [...]

const blob = await $.renderVideo();