Write it.
Export the video.

Real geometry, real frames

Every motif is a closed polygon resampled to 96 points, so any motif morphs into any other by interpolating points — not by cross-fading two images.

The renderer keeps its backing store at the style's native size: 480×270 for Pixel Arcade, 1920×1080 for the clean looks. That single number is why the 8-bit style actually looks 8-bit.

• Six styles, fourteen morphable motifs
• Seven transitions, ten entrances, eight easing curves
• Three camera moves, per-scene duration
• Contrast-checked accent colours (WCAG, 3:1 minimum)

Frame-exact MP4, not a screen recording

Export walks the timeline one frame at a time: set the clock to i / fps, render, grab the pixels, hand them to the hardware encoder. A busy tab cannot drop a frame because nothing is captured in real time.

The soundtrack is mixed down through an OfflineAudioContext from the same note data the preview plays, then encoded alongside the video and muxed into the MP4.

// the whole export loop
for (let i = 0; i < totalFrames; i++) {
  renderer.render(project, i / fps);
  ctx.drawImage(renderer.canvas, 0, 0, w, h);
  const frame = new VideoFrame(surface, { timestamp });
  encoder.encode(frame, { keyFrame: i % (fps * 2) === 0 });
  frame.close();
}

Software rendering is slow — a 4-second test took about 100 seconds on a CPU-only renderer. On a machine with a GPU it runs far faster. There is a real-time WebM fallback for browsers without a video encoder.