VibeMovie

Your vibe coding session, as a movie.

Transforms your AI-assisted coding activity into a cinematic, narrated video — complete with chapters, a storyline, dramatic music, and visual effects. Not a screen recording. A movie.

Demo

▶ Watch the launch video — what if claude made a movie about your PR?

https://github.com/pooriaarab/vibemovie/raw/main/branding/launch-video.mp4

Install

npm i -g vibemovie
# or run it directly
npx vibemovie --help

Quick start

# render a session recap from a JSON events file (or stdin)
vibemovie render session.json
# → writes ./vibe-recap.html — open it in any browser

vibemovie render session.json --ratio 9:16 --template speedrun --out recap.html
cat session.json | vibemovie render

# expose the render tool to your agent
vibemovie mcp

The default engine is Hyperframes: the recap is a self-contained animated HTML page rendered fully offline — zero API keys, no network, nothing leaves your machine. (Gen-video providers like Sora/Wavespeed slot into the cascade above it later; v0 ships the guaranteed floor.)

Input is a JSON array of events (or { "events": [...] }):

[
  { "kind": "task-done", "ts": 1769500000000, "agent": "claude-code", "cwd": "/repo/demo",
    "payload": { "label": "Refactor auth middleware", "durationMin": 18 } },
  { "kind": "tests-pass", "ts": 1769503600000, "payload": { "passed": 42 } },
  { "kind": "pr-merged", "ts": 1769505100000, "payload": { "pr": 42, "branch": "main" } }
]

Library usage:

import { renderMovie } from 'vibemovie';

const { html, path } = await renderMovie(events, {
  ratio: '16:9',            // '16:9' | '9:16' | '1:1'
  template: 'documentary',  // 'documentary' | 'speedrun' | 'meme'
  out: 'recap.html',        // optional — omit to just get the HTML string
});

buildScenes(events) (events → scene list) and renderHyperframes(scenes) (scene list → HTML) are pure and exported for custom pipelines.

Why Build This

• VibeReplay captures sessions — VibeMovie turns them into stories
• "I built a SaaS in 4 hours" is interesting — a cinematic version of it is unforgettable
• Content creators spend hours editing coding videos — this automates the entire pipeline
• Every VibeMovie shared is a viral ad for the tool
• Think: AI-generated documentary of your coding process

Features

• Story arc — AI analyzes your session and creates a narrative: setup, struggle, breakthrough, deploy
• Cinematic editing — Automatic cuts, zooms, transitions, and focus on the interesting parts
• AI narration — Generated voiceover that explains the journey: "At minute 23, everything broke..."
• Dynamic soundtrack — Music that matches the emotional arc (powered by VibeRadio engine)
• Code highlights — Key code snippets rendered beautifully with syntax highlighting and annotations
• Stats overlay — Lines of code, files changed, tokens used, time elapsed
• Chapters — Auto-generated based on git commits and milestones
• Multiple formats — YouTube (16:9), X/TikTok (9:16), LinkedIn (1:1), GIF summary
• Thumbnail generation — AI-generated thumbnail optimized for clicks
• Templates — Documentary, tutorial, speedrun, meme

Generation engine (cascade)

Video generation follows the shared @vibe/core cascade so it always works:

1. Your existing model — if your agent's provider does video (e.g. Sora via your OpenAI), use it.
2. A video-gen key you bring — Wavespeed, Replicate, or similar.
3. Hyperframes fallback — pure HTML/CSS/JS animated "video" (a rendered, animated web page). No generative-video model, no key, no network — always available. (The prototype below is a working Hyperframes recap.)

Options across all tiers: sync/live (scenes build as the agent works) or async (rendered after a turn/session) — user-configurable per hook · aspect ratios 16:9 / 9:16 / 1:1 / GIF · sound on/off (

... View full README on GitHub