“Generate Videone Nganggo Opo, Pak?” — The Stack Behind My Reels

A comment landed on one of my reels: “Generate videone nganggo opo, Pak?” — Javanese for “What do you generate the video with, sir?”

The short answer: my own engine.

Not CapCut, not Canva, not a text-to-video service. I built canvas-story-reel, a small Canvas 2D + JavaScript engine for producing technical explainer videos.

It works roughly like this:

  1. The story is written as declarative scenes. I don't arrange elements one by one on an editor timeline. The video's content is written as data: nodes, edges, animation steps, captions, a hook card, and layout rules.

  2. Canvas 2D draws every scene. The engine reads the scene, computes element positions, then draws the diagram and its animation. The same scene renders to four aspect ratios.

  3. Playwright captures the frames. Headless Chromium, driven by Playwright, renders every frame consistently.

  4. ffmpeg assembles the result. Frames become video, then audio, sound effects, and voice-over are mixed into the final MP4.

The part I've spent the most work on isn't the video rendering at all — it's the automated verifier.

Before a reel counts as passing, it is checked to make sure that:

  • the hook appears within 2 seconds and contains a number or a question mark;
  • no step exceeds its duration ceiling;
  • nodes don't collide with each other;
  • edges don't cut through nodes;
  • text stays readable at the floor set for its role;
  • the end-to-start loop is genuinely seamless — measured with a pixel diff, not eyeballed.

Every render also produces a JSON receipt and a contact sheet. When something is off, I can tell which scene and which rule failed without rewatching the whole video.

Voice-over driven by the engine's timing

The latest version adds voice-over driven by the engine's timing.

Narration is written per step, then synthesized through an external voice-over service using the eleven_v3 model. Each line's audio has to fit inside its time window. Speed-up is capped at 1.12×; if a line is still too long, the script gets shortened — the voice is never forced faster.

After that the engine:

  • ducks the SFX bed by about 11 dB while narration plays;
  • normalizes the audio to −14 LUFS at 48 kHz;
  • copies the video stream without re-rendering.

The first narrated reel covered how SSO works. Early numbers:

  • Instagram: 1,496 views, 97.4% from non-followers, 33 interactions (18 likes, 7 saves, 5 shares);
  • TikTok: 1,078 views, 43 likes, 12 saves, and a 6.88-second average watch time.

The stack

JavaScript + Canvas 2D → Playwright/Chromium → ffmpeg → an external VO service (eleven_v3).

What makes it useful isn't merely that it can produce an MP4 — it's that format, timing, layout, loop, and audio can all be tested like software.

These videos aren't really edited. They're compiled.