English | 简体中文
Structured content to narrated explainer videos.
Seqvio is a focused workflow for turning lessons, product walkthroughs, and technical concepts into short explainer videos. It combines scene composition, whiteboard-style visuals, product-demo primitives, narration metadata, captions, visual QA, and local MP4 rendering into one source-controlled pipeline.
Current status:Seqvio0.4.0
publishes@seqvio/core
,@seqvio/whiteboard
,@seqvio/scatterbrain
,@seqvio/product-demo
, and@seqvio/renderer
. The repository supports explicit React/TSX compositions, storyboard IR validation/compilation, style presets, product walkthrough scenes, audio/caption metadata, visual QA snapshots, and local MP4 rendering. Higher-level AI authoring and studio workflows are tracked in the[Roadmap].
Pre-rendered overview videos with ElevenLabs narration and burned-in captions. Source compositions live in examples/compositions/.
English overview — seqvio-overview-en.tsx
seqvio-overview-en.mp4 #
中文介绍 — seqvio-overview-zh.tsx
seqvio-overview-zh.mp4 #
Seqvio has two separate pieces:
| Piece | What it is | Install with |
|---|---|---|
| Agent skill | ||
| Teaches Cursor and other agents how to author TSX compositions and run the render workflow | npx skills add ... |
|
| Renderer CLI | ||
Runs seqvio-render , seqvio-audio , and seqvio-qa |
||
npm install @seqvio/renderer or a local repo build |
Installing the skill alone is not enough to render videos. You also need the CLI (or a local checkout of this repository).
npx skills add makesynt/seqvio --skill seqvio -a cursor -y
Replace cursor
with your agent if needed (claude-code
, codex
, etc.). To preview available skills first:
npx skills add makesynt/seqvio --list
This step copies the Seqvio skill into your agent. It does not install npm packages, clone this repo, or render MP4 output by itself.
Pick one path:
Option A — npm package (simplest for most users)
npm install -g @seqvio/renderer
seqvio-render --help
Published packages: @seqvio/core
, @seqvio/whiteboard
, @seqvio/scatterbrain
, @seqvio/product-demo
, and @seqvio/renderer
.
Install optional style/component packages when a composition imports them directly:
npm install @seqvio/product-demo @seqvio/scatterbrain
Option B — local repository (best for contributors and example compositions)
git clone https://github.com/makesynt/seqvio.git
cd seqvio
npm ci
npm run build
node packages/renderer/dist/cli.js --help
Use the workspace CLI when you want the bundled examples/compositions/ and monorepo smoke scripts.
For ElevenLabs or other TTS providers, export credentials before synthesis:
export ELEVENLABS_API_KEY=your_key
See .env.example. The CLI reads process environment variables and does not auto-load
.env
.After steps 1 and 2, try a prompt like:
Using
/seqvio
, create a 4-scene Chinese product overview with whiteboard visuals, ElevenLabs narration, and burned-in captions. Render the final MP4.
The skill guides the agent through: pick an example composition, edit TSX, extract narration metadata, synthesize audio, and run seqvio-render
.
Supported agents include Cursor, Claude Code, Codex, Gemini CLI, and other coding agents that support skills.
seqvio-render \
--component path/to/scene.tsx \
--output ./output/demo.mp4 \
--width 1280 --height 720 --fps 30 --quality medium
When using a local repo checkout, run the built CLI with node packages/renderer/dist/cli.js
. More detail: Manual setup.
Requirements: Node.js >=18
, Chromium (via Puppeteer), FFmpeg (bundled in @seqvio/renderer
). Local repo development uses npm workspaces and package-lock.json
.
- Product and framework intro videos
- Lesson explainers and concept breakdowns
- Process diagrams and onboarding walkthroughs
- Multi-scene narrated videos with captions
- Reusable explainer compositions for automated content pipelines
Start from examples:
| Example | Description |
|---|---|
seqvio-overview-en.tsx |
seqvio-overview-zh.tsx
seqvio-audio-demo.tsx
seqvio-style-manifest-demo.tsx
seqvio-product-demo-preview.tsx
seqvio-scatterbrain.tsx
loop-engineering-explainer.tsx
packages/whiteboard/examples/
TSX composition -> audio manifest -> TTS synthesis -> seqvio-render -> MP4
- Author a composition in TSX with
@seqvio/core
plus visual packages such as@seqvio/whiteboard
,@seqvio/scatterbrain
, or@seqvio/product-demo
. - Declare narration in
meta.audio.narration
when the video needs voiceover. - Extract and synthesize audio with
seqvio-audio
. - Check key frames with
seqvio-qa
when layout or visual fidelity matters. - Render frames and mux narration with
seqvio-render
.
See docs/COMPOSITION-AUTHORING.md for the authoring contract.
The skill lives in skills/seqvio/SKILL.md with supporting references:
| Reference | Purpose |
|---|---|
authoring-patterns.md |
audio-workflow.md
render-workflow.md
production-techniques.md
planning-workflow.md
Install the skill (see Quick Start):
npx skills add makesynt/seqvio --skill seqvio -a cursor -y
The skill teaches workflow and commands. Install @seqvio/renderer
separately when you need to render MP4 output.
Seqvio is not trying to be a general-purpose video editor or a generic HTML-to-video engine. It focuses on structured explainer videos.
Explainer-first workflow— scenes, narration, captions, and visual steps in one composition** Whiteboard-native primitives**— handwritten-style text, shapes, images, icons, style presets, and pen/hand timing** Specialized visual packages**— sticky-note workshop scenes with@seqvio/scatterbrain
and product walkthrough scenes with@seqvio/product-demo
Structured narration contract— visual timing and audio metadata stay close together** Visual QA loop**— snapshot key frames and catch blank renders before final MP4 work** Agent-friendly authoring surface**— small contracts, explicit frame timing, curated examples** Local, deterministic rendering**— Puppeteer + FFmpeg from source-controlled compositions
- React/TSX composition files with
meta
duration and fps @seqvio/whiteboard
components:WhiteboardScene
,DrawText
,DrawShape
,DrawImage
,DrawIcon
,Hand
, and style presets@seqvio/scatterbrain
sticky-note / cork-board components@seqvio/product-demo
components:ProductDemoScene
,BrowserFrame
,ScreenshotPlaceholder
,CursorPath
,Callout
,ProductTitle
@seqvio/core
scene and transition primitives:VideoComposition
,Scene
,Transition
- Storyboard IR schema, layout registry, validation, and TSX compilation helpers
seqvio-render
CLI for TSX-to-MP4 renderingseqvio-audio
CLI for audio/caption manifest extraction and TTS synthesisseqvio-qa
CLI for key-frame visual snapshots and lightweight render checks- ElevenLabs, OpenAI, MiniMax, and edge-tts narration providers
Use this section when working from a local repository checkout or when you need narrated renders with bundled examples.
npm install -g @seqvio/renderer
This installs seqvio-render
, seqvio-audio
, seqvio-generate
, seqvio-preview
, seqvio-add
, and seqvio-qa
globally. Dependencies @seqvio/core
and @seqvio/whiteboard
are pulled in automatically. Install @seqvio/product-demo
or @seqvio/scatterbrain
separately when your composition imports those packages outside the monorepo.
git clone https://github.com/makesynt/seqvio.git
cd seqvio
npm ci
npm run build
node packages/renderer/dist/cli.js \
--component examples/compositions/seqvio-intro.tsx \
--output output/seqvio-intro.mp4 \
--width 1280 --height 720 --fps 30 --quality medium
Local renders write to output/ (gitignored).
node packages/renderer/dist/audio-cli.js extract \
--component examples/compositions/seqvio-overview-en.tsx \
--out output/seqvio-overview-en.manifest.json
node packages/renderer/dist/audio-cli.js synthesize \
--provider elevenlabs \
--manifest output/seqvio-overview-en.manifest.json \
--outDir output/seqvio-overview-en-audio
node packages/renderer/dist/cli.js \
--component examples/compositions/seqvio-overview-en.tsx \
--output output/seqvio-overview-en.mp4 \
--width 1280 --height 720 --fps 30 --quality medium \
--audioManifest output/seqvio-overview-en-audio/audio-manifest.resolved.json
Voiceover is muxed automatically from the manifest. Do not add --burnCaptions
unless you intentionally want hard-coded subtitles in the frames (short lines + bottom safe area). For YouTube/Bilibili, upload SRT separately instead. See skills/seqvio/references/audio-workflow.md.
| Package | Description |
|---|---|
@seqvio/whiteboard |
@seqvio/core
@seqvio/scatterbrain
@seqvio/product-demo
@seqvio/renderer
seqvio-render
and seqvio-audio
CLIsStart at the docs hub: docs/README.md
Recommended reading:
— authoring contract and API rulesdocs/COMPOSITION-AUTHORING.md
— renderer, audio, and environment issuesdocs/TROUBLESHOOTING.md
— example catalog and conventionsexamples/compositions/README.md
— agent production loopskills/seqvio/SKILL.md
— narrated explainer production rules and QA checklistskills/seqvio/references/production-techniques.md
If documentation conflicts with code, treat the code and docs/COMPOSITION-AUTHORING.md as the source of truth.
Planned or in-progress work includes:
- AI-assisted scene generation CLI
- Richer script-to-voice authoring beyond the current TTS workflow
- Visual editor / studio workflow
- Storyboard JSON and template auto-layout expansion beyond the current validation/layout registry
- Expanded transition catalog (today:
fade
,slide
, andwipe
)
Design proposals and historical notes:
Contributions are welcome. Please read:
MIT © Seqvio Team