CLI-first video generation

Video, written in JavaScript.

Scenes are code. Renders are pixel-identical to preview, pinned by golden screenshots, and exported to MP4 or PPTX with a single command.

Explore examples → Read the docs Star on GitHub
60 fps deterministic JS scenes in git Golden screenshot CI MP4 / PPTX export
npm i -g yoclip && yoclip render examples/hello
Copied to clipboard
yoclip About — live render
60 fps · deterministic
yoclip About — rendered live by the Flutter embed player from source scenes Open in Studio

How it works

From code to final cut.

No timelines, no keyframe editors. Three steps, all version-controlled.

01

Write JS scenes

Each scene is a plain JavaScript module with a render function. Canvas, text, shapes, timing — all expressed in code you already know.

render(frame)
02

Preview & pin goldens

Preview live, then lock every frame with golden screenshots. CI compares renders pixel-for-pixel, so visual regressions never slip through.

0 diff
03

Export anywhere

One command renders the final video or slide deck — byte-identical to what you previewed, ready for CI, releases, or socials.

MP4 PPTX CI

Features

Everything a render pipeline needs.

Declarative scenes

Compose text, shapes, images, and timing with UI-like layout primitives — then render the same pixels every time.

Docs →

Golden tests / CI

Golden screenshots make every pull request a frame-accurate review. Video finally behaves like software.

Docs →

Export MP4 / PPTX

One command renders the final video or slide deck — byte-identical to what you previewed, ready for CI or releases.

Docs →

Themes & variants

Swap palettes, copy, and layout through themes — produce branded or localized variants without forking scenes.

Audio envelopes

Layer music and voiceover with volume envelopes, fades, and sample-precise offsets — mixed at render time.

Web embed player

Drop a yoclip project into any page with an iframe. Same engine, same pixels, no re-encode.

AI-assisted Studio

A native macOS Studio with an AI agent that writes, previews, and tweaks scenes alongside you.

A scene, in full

If you can write a function, you can ship a video.

scenes/hello.scene.js
JS Open in examples 
// a 3-second title card at 60 fps
export default {
  id: 'hello',
  duration: 180, // 3s @ 60fps
  render(frame) {
    const t = Math.min(frame / 48, 1); // ease-in over 0.8s
    return {
      type: 'stack',
      children: [{
        type: 'text',
        text: 'hello, yoclip',
        opacity: t,
        style: { fontSize: 96, color: '#8C5CF6' },
      }],
    };
  },
};
Rendered frame from the hello scene preview = render

The frame the CLI exports is byte-identical to what you preview in Studio — whether you render MP4 or PPTX.

Case study

From ticket to pull request.

How EPAM's open-source dm.ai CLI framework was turned into a dual-theme product film without touching a video editor.

DMTOOLS — AI-native factory automation

A single yoclip project renders both dark and light versions of a CLI-harness story: code context, agent execution, CI/CD integrations, and human-in-the-loop approval — all described in JavaScript scenes.

290+ CLI tools exposed as scene data
2 Brand themes from one project
0 Manual video edits
Watch the film Browse slides See the scenes

Example projects

Films made with .

Browse real projects you can clone, render, and remix.

All examples on GitHub
Note: the two “EPAM” examples are brand exercises — they show how yoclip can adapt to an external design system. yoclip itself is not an EPAM product.

Source-level playback

Play from code, not just pixels.

The web player loads the project's yoclip.yaml, scene JS and assets over HTTP and renders them with the same Flutter engine used by Studio and export. No re-encode, no MP4 proxy.

embed.html 
<iframe
  src="https://yoclip.studio/player/?src=https://yoclip.studio/assets/projects/yoclip_about/yoclip.yaml"
  width="960"
  height="540"
  frameborder="0"
  allow="autoplay; fullscreen"
></iframe>

Web embed

Drop yoclip into any page.

Host your project on any static storage and embed it with an iframe. The player fetches yoclip.yaml, loads scenes over HTTP, and renders with the same engine used for MP4 / PPTX export.

Live demo

This is the same Flutter player embedded via iframe, playing the yoclip About sample straight from its source files.

Rendered by the Flutter embed player from yoclip.yaml — the same project exports to MP4 or PPTX.

Open in Studio Slide deck mode View source

Embed code

<iframe src="https://yoclip.studio/player/?src=https://cdn.example.com/promo/yoclip.yaml&autoplay=1&muted=1&loop=1" width="960" height="540" frameborder="0" allow="autoplay; fullscreen" > </iframe>
ParamDefaultMeaning
srcrequiredURL of yoclip.yaml (absolute or relative to the player)
autoplay0Start playing once loaded
muted1*Start muted (browser policy)
loop0Restart at end
controls1Show play/pause, seek, mute, fullscreen
slides0Start in slide mode with prev/next slide controls
studio0Open the full read-only Studio UI
variant—Render a project variant, e.g. light
start0Initial frame
CORS required. The storage hosting your project must send Access-Control-Allow-Origin headers for .yaml, .js, fonts, images and audio.

Controls

Remote control from your host page.

host-page.js 
const player = document.querySelector('iframe').contentWindow;

player.postMessage({ yoclip: 'play' }, '*');
player.postMessage({ yoclip: 'seek', frame: 320 }, '*');
player.postMessage({ yoclip: 'mute', muted: false }, '*');

window.addEventListener('message', (e) => {
  if (e.data?.yoclip === 'ended') console.log('done');
});

Documentation

Yoclip Scene API.

Open reference for writing JavaScript scenes. The Yoclip Studio and CLI are closed tools; the scene language documented here is public and stable.

Loading documentation…