# Show HN: Seqvio – a whiteboard explainer toolkit for React/TSX videos

> Source: <https://github.com/makesynt/seqvio>
> Published: 2026-07-08 12:18:42+00:00

English | [简体中文](/makesynt/seqvio/blob/main/README.zh-CN.md)

**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:Seqvio`0.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/](/makesynt/seqvio/blob/main/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/](/makesynt/seqvio/blob/main/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](/makesynt/seqvio/blob/main/.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](#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/`

``` php
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](/makesynt/seqvio/blob/main/docs/COMPOSITION-AUTHORING.md) for the authoring contract.

The skill lives in [ skills/seqvio/SKILL.md](/makesynt/seqvio/blob/main/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](#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 rendering`seqvio-audio`

CLI for audio/caption manifest extraction and TTS synthesis`seqvio-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/](/makesynt/seqvio/blob/main/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](/makesynt/seqvio/blob/main/skills/seqvio/references/audio-workflow.md#caption-burn-in-optional).

| 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 rules`docs/COMPOSITION-AUTHORING.md`

— renderer, audio, and environment issues`docs/TROUBLESHOOTING.md`

— example catalog and conventions`examples/compositions/README.md`

— agent production loop`skills/seqvio/SKILL.md`

— narrated explainer production rules and QA checklist`skills/seqvio/references/production-techniques.md`

If documentation conflicts with code, treat the code and [ docs/COMPOSITION-AUTHORING.md](/makesynt/seqvio/blob/main/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`

, and`wipe`

)

Design proposals and historical notes:

Contributions are welcome. Please read:

[MIT](/makesynt/seqvio/blob/main/LICENSE) © Seqvio Team