What It Actually Does
You give it a source — a URL, a PDF / Markdown / Word doc, a pasted brief, or even an existing HTML page — and it produces a playable, screen-recordable explainer video: an HTML file you open in a browser, press play on, and capture. Optionally, it renders a finished MP4 for you. The narration is real voiceover (via ElevenLabs), and the visuals are animated and synced to it.
In one line: /storyboard <url> → a narrated, animated, screen-recordable explainer video. Open source (MIT), built on Claude Code, with ElevenLabs for voice. Repo: github.com/gRAYESS123/storyboard-claude.
Two output shapes ship in the box: a 16:9 deck (1920×1080, for YouTube and web) and a 9:16 deck (1080×1920, for Reels, TikTok, and Shorts), with the renderer auto-detecting which one you built. And there's an adopt mode — point it at an HTML page you already have, and it layers narration and animation on top without touching your styles.
The Idea: Claude Is the Animator
Most "AI makes a video" tools are template fillers: your text drops into pre-baked slides. Storyboard is the opposite bet. For every beat, Claude makes real motion-design decisions — which element gets the big entrance, in what order the rest cascade, which easing curve, which scene transition, and which single word in the narration earns a visual punch.
It makes those calls against an actual craft framework, not vibes:
- A decision matrix and the 12 principles of animation (the same anticipation/overshoot/settle language real animators use), encoded in a judgment file the skill re-reads before choreographing each beat.
- Six signature styles to commit to — kurzgesagt, apple-keynote, documentary, bold-editorial, data-journalism, neon-tech — each with its own palette, motion vocabulary, and pacing.
- A built-in acid test: would you understand each beat with the audio muted? Would the narration still land with the visuals deleted? It even has a programmatic
auditthat flags decks that lean on too few presets, overuse flashy transitions, or never let the deck breathe.
That's the difference between a slide generator and a motion designer — and it's why the output feels authored rather than assembled.
How It Works: Phases as Contracts
Under the hood, Storyboard is a pipeline of small phases, each writing a file the next one reads:
Concept proposes the beat list, narrative shape, and visual direction. Script writes ElevenLabs-ready narration with SSML timing. Build is where Claude animates. The optional generate, audit, verify, and render phases handle voiceover, self-critique, a screenshot playthrough, and the final MP4.
The design idea that matters: the artifacts are the contracts. A later phase only ever reads files — never the model's memory of what it just did. That's what makes the skill safe to call as one step inside a bigger agentic workflow: any phase can be re-run, handed to a different agent, or paused for a human to review, and nothing breaks. It's the same discipline I bring to production AI generally — stateless steps with inspectable handoffs beat one big opaque prompt every time.
The Engine, in One Breath
The deck is driven by a composable motion engine — storyboard-engine.js — that runs everything off the audio clock. Scrub the voiceover and every animation redraws to match. Highlights:
- 110+ animation presets and 17 cinematic scene transitions, composed (not one-preset-per-element) via attributes like
data-stagger,data-then,data-ease, anddata-loop. - Word-level sync: with ElevenLabs word timestamps, specific narration words trigger visual hits at the exact moment they're spoken.
- Preview before voiceover: a synthetic clock makes the deck fully playable while you're still authoring it — no audio required to review timing.
- Data-viz that draws on the clock (bars, donuts, counters, path diagrams), a fun-pack of brand-safe celebration effects, Lottie support, and a cast-and-sets layer with procedural characters and device mockups.
- Real post-production paths: sample-accurate sync from a DAW via AAF export, a tap-to-tune calibration mode, and a headless Chromium + ffmpeg render that turns the deck into a broadcast-quality MP4 in about three minutes for a 2:30 video.
Why This Matters Beyond Making Videos
Storyboard is a video tool on the surface, but the reason I'm proud of it is the engineering underneath — and it's the same engineering I bring to client work. The interesting problems were the production ones: how do you make an AI step reliable? You give it a craft framework to reason against instead of leaving taste to chance. You make each step write an inspectable artifact so the work is reviewable and re-runnable. You add a programmatic audit so quality is checked, not assumed.
That's exactly the discipline that separates an AI demo from an AI system you can put in production — whether it's a video skill, a support widget, or an internal automation. It's what I build.
Want an agentic Claude Code skill built for your team?
Storyboard is the kind of thing I ship as AI Automations — custom Claude-powered skills and workflows, built end-to-end with the reliability discipline above, running on your stack.
Book a Free Call →Try It
It's MIT-licensed and installs in one line. On macOS or Linux:
On Windows (PowerShell):
Then, inside Claude Code:
The full documentation, the worked example (a 150-second product pitch), and the capability demos live in the repo: github.com/gRAYESS123/storyboard-claude. Stars and issues welcome.
Frequently Asked Questions
Storyboard is an open-source (MIT) Claude Code skill, invoked with /storyboard, that turns a URL, a PDF/Markdown/Word document, a pasted brief, or an existing HTML page into a playable, screen-recordable narrated explainer video. Instead of filling a template, Claude acts as the animator — choreographing each beat using a decision matrix, the 12 principles of animation, and a motion engine driven by the audio clock.
A URL (it scrapes the page), a local PDF, Markdown, or Word document, a pasted text brief, or an existing HTML deck via "adopt" mode — where it layers narration and animation onto your page without changing its styles. It won't invent facts: if the source is thin, it asks for more rather than padding.
The voiceover uses ElevenLabs — Storyboard can call it to produce the MP3 plus word-level timestamps for sample-accurate sync, or you generate it yourself and drop it in. The primary output is a playable HTML deck you can screen-record; an optional render phase produces a finished MP4 (H.264 + AAC) headlessly via Chromium and ffmpeg.
It's motion design, not bullet points. Claude choreographs each beat — entrance presets, easing, scene transitions, and per-word visual hits from an engine of 110+ presets and 17 cinematic transitions, judged against a decision matrix and the 12 principles of animation, all playing against the audio clock so visuals land in time with the narration.
Yes — MIT-licensed at github.com/gRAYESS123/storyboard-claude. Install with a one-line curl command on macOS/Linux or an irm command on Windows PowerShell (or clone the repo and copy the skill into your Claude Code skills directory), then run /storyboard <url> inside Claude Code.
