Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 25 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,25 @@

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

**A visual language for coding agents to explain ideas.**
**Evidence-backed explainer videos for coding agents.**

Seqvio gives coding agents a capture-to-explanation path for turning real terminal/browser activity and technical ideas into clear narrated videos. Human-readable `EDITORIAL.md` and `VISUAL-DESIGN.md` artifacts make content choices and visual direction reviewable before the executable `ExplainerDocument` IR binds spoken cues to visual actions with `ExplanationBeat`s.

> **Current status:** The repository supports explicit React/TSX compositions and `ExplainerDocument` with complete `whiteboard`, `code`, `diagram`, `terminal`, and `browser` compiler paths. Phrase-anchored ExplanationBeats drive logical visual timing, post-TTS semantic time maps, speech/highlight QA, and deterministic local rendering. Terminal and browser pipelines compile real recorded steps through the same IR. Capture CLI contract `2.0` names the canonical IR artifact `explainer.json`.

## Demo

Pre-rendered overview videos with CosyVoice narration, covering all three visual style packages (`@seqvio/whiteboard`, `@seqvio/scatterbrain`, `@seqvio/product-demo`). Source compositions live in [`examples/compositions/`](./examples/compositions/).
The current 720p product demo shows the reviewable plan, executable
`ExplainerDocument`, phrase-level `ExplanationBeat`, QA, and local rendering
path through a native-module CI diagnosis.

**English overview** — [`seqvio-overview-en.tsx`](./examples/compositions/seqvio-overview-en.tsx)
**[Watch the current narrated demo](./docs/assets/videos/seqvio-product-hunt-en.mp4)**
— source: [`seqvio-product-hunt-en.tsx`](./examples/compositions/seqvio-product-hunt-en.tsx)

https://github.com/user-attachments/assets/83687d9c-63f0-4544-a67a-8f6eacc19928

**中文介绍** — [`seqvio-overview-zh.tsx`](./examples/compositions/seqvio-overview-zh.tsx)

https://github.com/user-attachments/assets/3ce605bc-7ad1-449b-a67c-5d8368f5398b
Localized overview compositions remain available under
[`examples/compositions/`](./examples/compositions/), but their previously
published videos predate the current explanation contract and are no longer the
primary product demo.

## Quick Start

Expand Down Expand Up @@ -61,7 +63,10 @@ npm install -g @seqvio/renderer
seqvio-render --help
```

Published packages: `@seqvio/core`, `@seqvio/whiteboard`, `@seqvio/scatterbrain`, `@seqvio/product-demo`, `@seqvio/technical`, and `@seqvio/renderer`.
Public packages: `@seqvio/core`, `@seqvio/whiteboard`, `@seqvio/scatterbrain`,
`@seqvio/product-demo`, `@seqvio/technical`, and `@seqvio/renderer`.
Experimental capture packages: `@seqvio/capture`, `@seqvio/browser-recorder`,
and `@seqvio/terminal-narrator`.

Install optional style/component packages when a composition imports them directly:

Expand Down Expand Up @@ -97,7 +102,11 @@ After steps 1 and 2, try a prompt like:

> Using `/seqvio`, first create and review an editorial plan and visual design brief, then compile them into a 4-scene Chinese ExplainerDocument with phrase-anchored visual Beats, run QA, and 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`.
The recommended path reviews `EDITORIAL.md` and `VISUAL-DESIGN.md`, compiles an
`ExplainerDocument`, resolves narration timing, runs `seqvio-qa`, and renders
the MP4. Hand-authored TSX remains the lower-level path for deliberate visual
control. Experimental terminal/browser adapters can supply observed scenes to
the same IR; they are not required for authored explainers.

Supported agents include Cursor, Claude Code, Codex, Gemini CLI, and other coding agents that support skills.

Expand Down Expand Up @@ -189,7 +198,7 @@ The skill lives in [`skills/seqvio/SKILL.md`](./skills/seqvio/SKILL.md) with sup
| [`audio-workflow.md`](./skills/seqvio/references/audio-workflow.md) | Extract, synthesize, and mux narration |
| [`render-workflow.md`](./skills/seqvio/references/render-workflow.md) | Build, render, and smoke-test commands |
| [`production-techniques.md`](./skills/seqvio/references/production-techniques.md) | Voice-first timing, reference-style analysis, and visual QA rules |
| [`planning-workflow.md`](./skills/seqvio/references/planning-workflow.md) | Storyboard IR planning and agent handoff |
| [`planning-workflow.md`](./skills/seqvio/references/planning-workflow.md) | Editorial/visual planning and agent handoff |

Install the skill (see [Quick Start](#quick-start)):

Expand Down Expand Up @@ -223,8 +232,8 @@ Seqvio is the visual language for coding agents that need to explain, not merely
- Browser scene support with recorded video, cursor/focus/click metadata, exact action clocks, and time-mapped media seeking
- `ExplanationBeat` cues, exact phrase anchors, visual actions, capture evidence, post-TTS `outputFrame`s, and semantic `sceneTimings[].timeMap`
- `@seqvio/core` scene and transition primitives: `VideoComposition`, `Scene`, `Transition`
- ExplainerDocument and retained Storyboard IR schema, validation, pacing,
and TSX compilation helpers
- ExplainerDocument as the canonical IR, with retained Storyboard IR compatibility
for whiteboard-only input
- `seqvio-render` CLI for TSX-to-MP4 rendering
- `seqvio-audio` CLI for audio/caption manifest extraction and TTS synthesis
- `seqvio-qa` CLI with baseline/capture profiles, stable audio/temporal/media diagnostics, configurable warning promotion, and key-frame visual checks
Expand Down Expand Up @@ -295,6 +304,7 @@ Voiceover is muxed automatically from the manifest. **Do not** add `--burnCaptio
| [`@seqvio/technical`](./packages/technical) | Technical explainer runtime: code walkthroughs, architecture diagrams, terminal demos, annotations, and bundled fonts |
| [`@seqvio/terminal-narrator`](./packages/terminal-narrator) | Pre-stable node-pty/xterm capture → IR/ExplanationBeat → optional narrated MP4 |
| [`@seqvio/browser-recorder`](./packages/browser-recorder) | Pre-stable Chromium action capture with exact action timing → IR/ExplanationBeat |
| [`@seqvio/capture`](./packages/capture) | Shared experimental capture session and artifact contracts |
| [`@seqvio/renderer`](./packages/renderer) | TSX bundler plus `seqvio-render` and `seqvio-audio` CLIs |

## Documentation
Expand All @@ -310,6 +320,8 @@ Recommended reading:
- [`examples/compositions/README.md`](./examples/compositions/README.md) — example catalog and conventions
- [`skills/seqvio/SKILL.md`](./skills/seqvio/SKILL.md) — agent production loop
- [`skills/seqvio/references/production-techniques.md`](./skills/seqvio/references/production-techniques.md) — narrated explainer production rules and QA checklist
- [`docs/marketing/POSITIONING.md`](./docs/marketing/POSITIONING.md) — current product positioning and capability boundary
- [`docs/marketing/FEATURE-STATUS.md`](./docs/marketing/FEATURE-STATUS.md) — public versus experimental wording

If documentation conflicts with code, treat the code and [`docs/COMPOSITION-AUTHORING.md`](./docs/COMPOSITION-AUTHORING.md) as the source of truth.

Expand Down
32 changes: 20 additions & 12 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@

[English](./README.md) | 简体中文

**让 coding agent 拥有解释想法的视觉语言。**
**让 coding agent 把真实技术工作变成有证据的讲解视频。**

Seqvio 为 coding agent 提供从真实系统捕获到讲解视频的完整路径。人类可读的 `EDITORIAL.md` 与 `VISUAL-DESIGN.md` 先让内容取舍和视觉方向可审阅,再由正式 `ExplainerDocument` IR 通过 `ExplanationBeat` 绑定旁白短语与视觉动作。

> **当前状态:** 仓库支持显式 React/TSX composition,以及拥有完整 `whiteboard`、`code`、`diagram`、`terminal`、`browser` 编译路径的 `ExplainerDocument`。短语锚定的 ExplanationBeat 驱动逻辑视觉时间、TTS 后语义 timeMap、语速/高亮 QA 和确定性本地渲染。Capture CLI contract `2.0` 将正式 IR 产物统一命名为 `explainer.json`。

## Demo

预渲染产品介绍视频,使用 CosyVoice 旁白,覆盖三个视觉风格包(`@seqvio/whiteboard`、`@seqvio/scatterbrain`、`@seqvio/product-demo`)。源 composition 位于 [`examples/compositions/`](./examples/compositions/)。
当前 720p 产品演示以 native-module CI 故障诊断为例,展示可审阅策划、
正式 `ExplainerDocument`、短语级 `ExplanationBeat`、QA 和本地渲染路径。

**英文介绍** — [`seqvio-overview-en.tsx`](./examples/compositions/seqvio-overview-en.tsx)
**[观看当前带旁白演示](./docs/assets/videos/seqvio-product-hunt-en.mp4)**
— 源码:[`seqvio-product-hunt-en.tsx`](./examples/compositions/seqvio-product-hunt-en.tsx)

https://github.com/user-attachments/assets/83687d9c-63f0-4544-a67a-8f6eacc19928

**中文介绍** — [`seqvio-overview-zh.tsx`](./examples/compositions/seqvio-overview-zh.tsx)

https://github.com/user-attachments/assets/3ce605bc-7ad1-449b-a67c-5d8368f5398b
中英文 overview composition 仍保留在
[`examples/compositions/`](./examples/compositions/);此前发布的视频早于
当前解释契约,因此不再作为主要产品演示。

## 快速开始

Expand Down Expand Up @@ -60,7 +60,9 @@ npm install -g @seqvio/renderer
seqvio-render --help
```

已发布包:`@seqvio/core`、`@seqvio/whiteboard`、`@seqvio/scatterbrain`、`@seqvio/product-demo`、`@seqvio/technical`、`@seqvio/renderer`。
Public 包:`@seqvio/core`、`@seqvio/whiteboard`、`@seqvio/scatterbrain`、
`@seqvio/product-demo`、`@seqvio/technical`、`@seqvio/renderer`。实验性捕获包:
`@seqvio/capture`、`@seqvio/browser-recorder`、`@seqvio/terminal-narrator`。

当 composition 直接 import 可选视觉包时,可额外安装:

Expand Down Expand Up @@ -96,7 +98,10 @@ export ELEVENLABS_API_KEY=your_key

> 使用 `/seqvio`,先生成并审阅讲解策划与视觉设计说明,再编译成 4 场景中文 ExplainerDocument,加入短语锚定视觉 Beat,运行 QA 后渲染 MP4。

Skill 会引导 agent:选示例 composition、改 TSX、提取旁白元数据、合成音频、运行 `seqvio-render`。
推荐路径会先审阅 `EDITORIAL.md` 和 `VISUAL-DESIGN.md`,编译
`ExplainerDocument`,解析旁白时间,运行 `seqvio-qa`,最后渲染 MP4。
需要精细视觉控制时仍可直接手写 TSX;实验性的 terminal/browser 适配器
可以向同一个 IR 提供真实观察场景,但不是创作型讲解的必需依赖。

支持 Cursor、Claude Code、Codex、Gemini CLI 等支持 skills 的 coding agent。

Expand Down Expand Up @@ -188,7 +193,7 @@ Skill 主文件:[`skills/seqvio/SKILL.md`](./skills/seqvio/SKILL.md),参考
| [`audio-workflow.md`](./skills/seqvio/references/audio-workflow.md) | 提取、合成、混流旁白 |
| [`render-workflow.md`](./skills/seqvio/references/render-workflow.md) | build、render、smoke test 命令 |
| [`production-techniques.md`](./skills/seqvio/references/production-techniques.md) | voice-first timing、参考风格分析和视觉 QA 规则 |
| [`planning-workflow.md`](./skills/seqvio/references/planning-workflow.md) | storyboard IR planning 和 agent handoff |
| [`planning-workflow.md`](./skills/seqvio/references/planning-workflow.md) | Editorial/Visual 规划和 agent handoff |

安装 skill(见 [快速开始](#快速开始)):

Expand Down Expand Up @@ -222,7 +227,7 @@ Seqvio 是 coding agent 用来解释想法的视觉语言,而不只是一个
- Browser 场景支持录制视频、光标/聚焦/点击元数据、真实动作时钟和 time-mapped 媒体 seek
- `ExplanationBeat` cue、精确短语锚点、视觉动作、捕获证据、TTS 后 `outputFrame` 和语义 `sceneTimings[].timeMap`
- `@seqvio/core`:`VideoComposition`、`Scene`、`Transition`
- ExplainerDocument 与保留的 Storyboard IR schema、validation、pacing 和 TSX compile helpers
- ExplainerDocument 是正式 IR;Storyboard IR 仅作为白板输入兼容路径保留
- `seqvio-render`:TSX 到 MP4
- `seqvio-audio`:manifest 提取与 TTS 合成
- `seqvio-qa`:baseline/capture profile、稳定音频/时序/媒体诊断、警告升级和关键帧视觉检查
Expand Down Expand Up @@ -295,6 +300,7 @@ node packages/renderer/dist/cli.js \
| [`@seqvio/technical`](./packages/technical) | 技术讲解 runtime:代码走读、架构图、终端演示、标注和内置字体 |
| [`@seqvio/terminal-narrator`](./packages/terminal-narrator) | Pre-stable node-pty/xterm 捕获 → IR/ExplanationBeat → 可选旁白 MP4 |
| [`@seqvio/browser-recorder`](./packages/browser-recorder) | Pre-stable Chromium action 捕获,保留真实动作时间 → IR/ExplanationBeat |
| [`@seqvio/capture`](./packages/capture) | 实验性的共享 capture session 和 artifact 契约 |
| [`@seqvio/renderer`](./packages/renderer) | TSX bundler,以及 `seqvio-render` / `seqvio-audio` CLI |

## 文档
Expand All @@ -310,6 +316,8 @@ node packages/renderer/dist/cli.js \
- [`examples/compositions/README.md`](./examples/compositions/README.md)
- [`skills/seqvio/SKILL.md`](./skills/seqvio/SKILL.md)
- [`skills/seqvio/references/production-techniques.md`](./skills/seqvio/references/production-techniques.md)
- [`docs/marketing/POSITIONING.md`](./docs/marketing/POSITIONING.md) — 当前产品定位和能力边界
- [`docs/marketing/FEATURE-STATUS.md`](./docs/marketing/FEATURE-STATUS.md) — public 与 experimental 的对外措辞

如果文档与代码冲突,以代码和 [`docs/COMPOSITION-AUTHORING.md`](./docs/COMPOSITION-AUTHORING.md) 为准。

Expand Down
5 changes: 5 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ If you are trying to use Seqvio today, read these first:
| [`../examples/compositions/README.md`](../examples/compositions/README.md) | Composition examples and render command |
| [`../packages/whiteboard/README.md`](../packages/whiteboard/README.md) | Whiteboard component API and examples |
| [`../packages/product-demo/package.json`](../packages/product-demo/package.json) | Product walkthrough component package metadata |
| [`marketing/POSITIONING.md`](./marketing/POSITIONING.md) | Public positioning and product boundary |
| [`marketing/FEATURE-STATUS.md`](./marketing/FEATURE-STATUS.md) | Public and experimental capability wording |

## Current Source of Truth

Expand Down Expand Up @@ -48,6 +50,9 @@ These docs describe the repository as it exists today:
| [`VISION.md`](./VISION.md) | Product positioning, target users, scope, and design principles (slow-changing source of truth) |
| [`ROADMAP.md`](./ROADMAP.md) | Directional bet and phase ordering; what to build next and why. Subordinate to `VISION.md` |
| [`EXPLAINER-FRAMEWORK-IMPROVEMENT-PLAN.md`](./EXPLAINER-FRAMEWORK-IMPROVEMENT-PLAN.md) | Active implementation plan for capture, ExplanationBeat timing, deterministic playback, QA, and release readiness |
| [`marketing/LANDING-COPY.md`](./marketing/LANDING-COPY.md) | Versioned landing page copy |
| [`marketing/PRODUCT-HUNT.md`](./marketing/PRODUCT-HUNT.md) | Product Hunt tagline, description, and demo promise |
| [`marketing/DEMO-SCRIPT.md`](./marketing/DEMO-SCRIPT.md) | Current 60-75 second product demo sequence |

Active, time-boxed work items live in GitHub issues and milestones, not in a docs file.

Expand Down
11 changes: 11 additions & 0 deletions docs/assets/demo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ README demo videos now live in [`../videos/`](../videos/):

- `seqvio-overview-en.mp4` + `seqvio-overview-en.preview.gif`
- `seqvio-overview-zh.mp4` + `seqvio-overview-zh.preview.gif`
- `seqvio-product-hunt-en.mp4` (current explanation-contract demo)

GitHub README cannot inline-play repo-hosted MP4 with `<video>`; README uses the GIF previews (click through to MP4 for narration).

Expand All @@ -18,6 +19,16 @@ Source compositions:

- `examples/compositions/seqvio-overview-en.tsx`
- `examples/compositions/seqvio-overview-zh.tsx`
- `examples/compositions/seqvio-product-hunt-en.tsx`

The overview and Product Hunt sources must follow the current product path in
[`../../marketing/POSITIONING.md`](../../marketing/POSITIONING.md). Do not use
the retained Storyboard compatibility input as the primary workflow.

For tracked demo video, render at 1280x720 or 1920x1080 with the repository's
medium-or-higher quality profile. Bitrate varies substantially for flat motion
graphics, so inspect text-heavy key frames and the encoded output instead of
using file size or average bitrate as the only acceptance criterion.

Local CLI renders and audio intermediates should write to `output/` at the repository root (gitignored).

Expand Down
Binary file added docs/assets/videos/seqvio-product-hunt-en.mp4
Binary file not shown.
42 changes: 42 additions & 0 deletions docs/marketing/DEMO-SCRIPT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Current Product Demo Script

Target length: 60-75 seconds. Use 1920x1080 for Product Hunt and 1280x720
for the README variant. Keep code and terminal text readable at normal playback.

## 1. Failure, 0-8s

Show the observed native-module CI error. State the question: why did a rebuild
report success while the module still failed to load?

## 2. Editorial decision, 8-18s

Show `EDITORIAL.md`. Select `causal-diagnosis` as the primary soft pattern and
`evidence-demonstration` as supporting advice. Highlight the explicit omission
of unrelated release details.

## 3. Visual direction, 18-27s

Show `VISUAL-DESIGN.md`: terminal for observed output, diagram for the load path,
and code only for the configuration that caused install scripts to be blocked.

## 4. Executable explanation, 27-40s

Show `explainer.json`. Connect one narrated claim to an `ExplanationBeat` with a
phrase anchor, visual target, and captured step id. Clearly distinguish authored
diagram content from capture-derived terminal evidence.

## 5. Timing and QA, 40-55s

Resolve the spoken phrase after TTS. Show the resulting output frame and a short
QA report covering timing, evidence, media, and key-frame checks.

## 6. Result, 55-68s

Play the finished explanation: symptom, expected load path, blocked install
script, corrected configuration, and verified module load.

## 7. Close, 68-75s

End on: "Turn real technical work into explainable video." Show the GitHub URL
and `npm install -g @seqvio/renderer`. Label terminal/browser capture as
experimental in supporting copy, not in the spoken close.
15 changes: 15 additions & 0 deletions docs/marketing/FEATURE-STATUS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Feature Status For Public Materials

| Area | Status | Public wording |
| --- | --- | --- |
| `ExplainerDocument` and five scene compilers | Public | Complete authoring and rendering path |
| EditorialPlan / VisualDesignBrief | Public | Reviewable planning artifacts before executable IR |
| ExplanationBeat timing and post-TTS alignment | Public | Narration, visual action, and evidence share one timing contract |
| `seqvio-qa` | Public | Deterministic audio, pacing, media, semantic, and key-frame checks |
| `@seqvio/terminal-narrator` | Experimental | Real terminal capture with platform-specific prerequisites |
| `@seqvio/browser-recorder` | Experimental | Chromium action capture with recorded evidence and timing |
| `@seqvio/capture` | Experimental | Shared capture contracts and artifacts |
| Screenshot privacy masking | Deferred | Do not promise this in marketing copy |

Marketing demos must identify whether a scene is authored or capture-derived.
Do not describe experimental adapters as a universal one-click workflow.
Loading
Loading