Your first video

The snippet below is a complete, runnable VideoFlow composition. Press play on the preview to see it. The sandbox exposes the VideoFlow class globally and expects you to return $ at the end.

const $ = new VideoFlow({
  name: 'Hello world',
  width: 512, height: 512, fps: 30,
  backgroundColor: '#0f0f23',
});

const title = $.addText({
  text: 'Hello,\nVideoFlow!',
  fontSize: 10,
  fontWeight: 800,
  lineHeight: 1.15,
  textAlign: 'center',
  color: '#ffffff',
});

title.animate({ opacity: 0, scale: 0.85 }, { opacity: 1, scale: 1 }, { duration: '800ms', easing: 'easeOut' });
$.wait('1.5s');
title.fadeOut('500ms');
$.wait('700ms');

return $;

Line by line

1. new VideoFlow({...}) — create a composition. Set width, height, fps, and a default backgroundColor.
2. $.addText({...}) — push a text layer. Returns the layer instance so you can animate it.
3. title.animate(from, to, opts) — push a pair of keyframes. By default, the flow pointer advances by duration.
4. $.wait('1.5s') — advance the flow pointer without adding layers.
5. return $ — the sandbox compiles the returned instance to VideoJSON.

Export it

Outside the playground, compile and render with any renderer:

import VideoFlow from '@videoflow/core';
import BrowserRenderer from '@videoflow/renderer-browser';

const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });
// ... build your flow ...

const json = await $.compile();
const blob = await BrowserRenderer.render(json, {
  onProgress: (p) => console.log(`${Math.round(p.percent)}%`),
});

const url = URL.createObjectURL(blob);
window.open(url);

Where to next

• Builder API — the full fluent surface.
• Animation & keyframes — how .animate() works.
• Text layers — every property on the text layer.