Video Generation
Create professional marketing videos from structured VideoSpecs using HTML-based scene templates, GSAP animations, and automated rendering via headless Chrome + FFmpeg.
Create professional marketing videos from structured specs using HTML-based scene templates, GSAP animations, and automated rendering.
How it works
The Video Generation engine turns a declarative VideoSpec into a finished MP4. You define scenes, pick templates, fill in content slots, and the system assembles an HTML composition with synchronized GSAP animations, then renders it frame-by-frame through a headless browser and stitches the result with FFmpeg.
Key concepts
- VideoSpec — JSON schema defining title, brand, format, and scenes
- Scene templates — reusable HTML + GSAP building blocks
- Assembly engine — compiles spec into a single composition
- Render pipeline — headless Chrome + FFmpeg output
Supported formats
| Format | Dimensions | Aspect |
|---|---|---|
| Desktop | 1920 × 1080 | 16:9 |
| Landscape | 1280 × 720 | 16:9 |
| Square | 1080 × 1080 | 1:1 |
| Portrait | 1080 × 1920 | 9:16 |
End-to-end workflow
- Define your VideoSpec. Choose a format, set brand colors and fonts, then add scenes. Each scene references a template and fills its content slots (headline, subtitle, stat value, etc.).
- Preview in browser. The admin editor shows a live iframe preview with play, pause, restart, and scrub controls. Switch between Desktop, Square, and Portrait tabs to check every aspect ratio.
- Fix copy before you render. Every video also has a shareable preview page with a Fields panel — edit any value in place and the preview reloads with the change. See Editing in the preview viewer.
- Add voiceover (optional). Write narration text per scene, then generate speech with ElevenLabs. Scene durations auto-size to match the audio length plus configurable padding.
- Render & export. Hit Render and the pipeline captures each scene individually, then FFmpeg stitches them into a final MP4. Progress is tracked in real time. Finished videos are uploaded to cloud storage with a download link.
Key features
Scene templates
Choose from built-in templates or create your own. Each template defines content slots, default duration, and GSAP animations.
| Template | Purpose |
|---|---|
| Hook | Bold headline + subtitle opener |
| Chat Demo | Animated user/AI chat bubbles |
| Stat | Animated counter with label |
| CTA | Call-to-action with URL |
Editing in the preview viewer
Every video has a preview page at /preview/video/<id> — the link MCP hands back when it creates a video. It plays the composition and, below the player, shows a Fields panel listing everything the render actually uses: the title, the persisted format, each scene's duration, every template slot, and per-scene voiceover text and voice id.
Click any value to edit it. Enter (or clicking away) commits, Escape reverts; multi-line fields commit on Cmd/Ctrl+Enter. The save is immediate and the preview reloads, so what you see is what will render. Fields are typed — colors get a swatch, numbers a number input, fixed-choice slots a dropdown, lists one item per line, and a chat-demo script becomes per-turn rows you can reorder, remove, or add to.
A few behaviours worth knowing:
- Editing voiceover text clears the cached clip for that scene, because the old audio no longer matches the words. Regenerate before rendering.
- The format buttons above the player are a preview-only override. They let you check other aspect ratios without changing the video; the persisted format is the editable Format field.
- Editing is blocked while a render is in flight, so a change can't land mid-render and produce a file matching neither version.
- Anyone with the link can watch; only your team can edit. Reads are open because that's how preview links are shared, but saving requires a signed-in user with a role on the video's site — for everyone else the panel renders read-only.
Platform pacing
Auto-adjust scene durations and transitions per platform. Short, punchy cuts for TikTok; longer, smoother pacing for YouTube and LinkedIn.
Supported platforms: YouTube, TikTok, Stories, LinkedIn, Twitter.
Voiceover generation
Write narration per scene, generate speech with ElevenLabs, and let auto-sizing adjust scene durations to fit the audio.
- Text-to-speech — ElevenLabs multi-voice TTS
- Auto-sizing — scenes expand to fit narration
- Inline preview — play VO clips in the editor
Batch & variations
Generate multiple video variations from a single base spec, or auto-split a long video into 15-second Instagram Story segments.
- Content variations — swap headlines, stats, or CTAs across a series
- Story auto-split — splits into ≤15s segments in portrait format
MCP & API access
Every video operation is available through both the admin UI and the v2 REST API, which is also exposed as MCP tools for AI-assisted workflows.
| Category | Tools |
|---|---|
| CRUD | create_video, get_video, update_video, list_videos, delete_video |
| Rendering | render_video, plus progress polling and exports |
| Advanced | batch_videos, generate_voiceover, list_templates |
Conversation video pipeline
Beyond standard marketing videos, BlackOps can turn an actual saved conversation (e.g. a Claude Code session) into a chat-demo video in one MCP call. See create_conversation_video — it reads a saved conversation note, animates it as a chat scene, and routes it through the same render pipeline.
Explore deeper
- Scene Templates — built-in and custom templates
- Conversation Videos — end-to-end MCP flow
- Rendering Pipeline — pipeline, progress, exports
- Voiceover — text-to-speech and auto-sizing
- Batch & Pacing — variations, story splits, platform pacing
Related
- Post Editor — inline-video markdown syntax for embedding rendered videos in blog posts
- Twitter Automation — attach rendered videos to tweets via
attach_media_to_tweet