Code to Video

Write declarative XML. Get complete videos with AI voiceovers, automatic timing, and animated visuals.

Loading preview…

This video was generated from this code:

<vml id="code-to-video-preview" title="Code to Video Preview" fps="30" width="1920" height="1080">
  <scene id="intro" title="intro">
    <layer id="content">
      <title-slide
        props='{"eyebrow":"Code to Video","title":"This video was made from code.","subtitle":"VideoML → motion, timing, and audio.","verticalAlign":"center","horizontalAlign":"center","entranceStartFrame":-999}'
      />
    </layer>
    <cue id="intro-vo">
      <voice>This video was made from code.</voice>
    </cue>
  </scene>

  <transition id="code-push-1" effect="push" duration="18f" ease="power2.inOut" props='{"direction":"left"}' />

  <scene id="transition" title="transition">
    <layer id="content">
      <title-slide
        props='{"eyebrow":"Transition","title":"This transition was made from code.","subtitle":"Scene-to-scene motion is data-driven.","verticalAlign":"center","horizontalAlign":"center","entranceStartFrame":-999}'
      />
    </layer>
    <cue id="transition-vo">
      <voice>This transition was made from code.</voice>
    </cue>
  </scene>

  <transition id="code-push-2" effect="push" duration="18f" ease="power2.inOut" props='{"direction":"left"}' />

  <scene id="animation" title="animation">
    <layer id="content">
      <anime-harness-demo />
    </layer>
    <cue id="animation-vo">
      <voice>This animation was made from code.</voice>
    </cue>
  </scene>

  <transition id="code-push-3" effect="push" duration="18f" ease="power2.inOut" props='{"direction":"left"}' />

  <transition id="sfx-hit" effect="fade" duration="18f" ease="power2.out" overflow-audio="clip">
    <sfx id="transition-hit" start="4f" clip-duration="0.6s" prompt="short impact" />
  </transition>

  <scene id="sfx" title="sound effects">
    <layer id="content">
      <title-slide
        props='{"eyebrow":"Sound Effects","title":"This sound effect was made from code.","subtitle":"SFX cues can be attached to transitions.","verticalAlign":"center","horizontalAlign":"center","entranceStartFrame":-999}'
      />
    </layer>
    <cue id="sfx-vo">
      <voice>This sound effect was made from code.</voice>
    </cue>
  </scene>

  <transition id="code-push-4" effect="push" duration="18f" ease="power2.inOut" props='{"direction":"left"}' />

  <scene id="close" title="close">
    <layer id="content">
      <title-slide
        props='{"eyebrow":"VideoML","title":"Make videos with code.","subtitle":"Render as MP4 or live HTML.","verticalAlign":"center","horizontalAlign":"center","entranceStartFrame":-999}'
      />
    </layer>
    <cue id="close-vo">
      <voice>Make videos with code.</voice>
    </cue>
  </scene>
</vml>

Videos as source code

Babulus turns declarative XML into complete videos. You write the structure you want—scenes, voiceover narration, visual styling, transitions—and the platform automatically generates, times, and renders everything.

This isn't a video editor. It's a compiler that takes code as input and produces MP4 files as output.

AI generates the audio

Every <voice> element triggers AI audio generation. Babulus connects to services like ElevenLabs or OpenAI, synthesizes natural-sounding speech, and manages the audio files automatically.

Background music, sound effects, and ambient audio work the same way. Reference them in code, and Babulus handles retrieval, caching, and integration.

Timing is calculated automatically

You never specify timestamps. Babulus analyzes the duration of generated audio clips and calculates scene timing automatically. Change your narration, and everything adjusts—no manual recalculation needed.

Scenes transition based on actual audio length. Pauses respect the durations you specify in code. Visual animations synchronize with voiceover pacing. The system figures it out.

Visuals are React components

Every visual element is an animated React component. This gives you full access to CSS animations, responsive layouts, dynamic data visualization, and modern web development patterns—all rendered into video frames.

Better yet: these components can live on web pages too. Build a chart animation for your video, then embed the same component in a blog post or interactive demo. The code is reusable everywhere.

Built for AI agents

Code-as-video has a critical advantage: AI agents work natively with code. Traditional video tools require AI to make dozens of API calls through human-centric interfaces—adding scenes, adjusting parameters, uploading assets, tweaking timing. Each operation is a separate action in a database-backed system.

With Babulus, an AI agent can read, understand, and modify entire video productions in a single pass. It analyzes structure, refactors scenes, adjusts pacing, updates content, and generates variations by working directly with source code. The code is the video.

This means AI agents have first-class access to video production. They collaborate on video projects like they collaborate on software projects—with the same tools, workflows, and level of control. Code becomes the single source of truth that both humans and AI can read, write, and reason about.

The full pipeline

From code to MP4:

Write or update your .babulus.xml file
Babulus parses the code and generates voiceover audio via AI
The timing engine calculates scene durations from audio lengths
React components render with synchronized animations
Everything composites into a final video file

Your video is now version-controlled, reproducible, and programmable. Change the code, commit it, regenerate. No timeline editing required.

Ready to generate videos from code?