Skip to content

v0.1.0: Guides that talk

Latest

Choose a tag to compare

@SilverNine SilverNine released this 24 Oct 15:18
· 12 commits to main since this release

First public release.

Guides that talk. Write a script, point the agent at your web app (or bring screenshots), and get a narrated walkthrough: a small static web page with a live transcript and follow-along mode, or an MP4 with subtitles.

Play the sample guide, or browse the motion gallery.

What is in 0.1.0

  • Cue, don't keyframe. cue(scene, word) ties every spotlight, pin, zoom and cursor move to a word of the narration. Edit the script, re-synthesize, and the screen re-times itself.
  • Player. Stage plus a side panel with the live transcript and steps, segmented progress, step-by-step mode that pauses after each step, captions, light and dark themes, copy buttons. The clock is the audio position, so picture and sound cannot drift.
  • MP4 render. The same player stepped frame by frame in headless Chromium, encoded in parallel, narration laid under it. Subtitles as .srt or burned in. The sample (1:27) renders in about 40 seconds on a laptop.
  • Narration. Word-timestamped TTS: Edge neural voices with no API key, or ElevenLabs. A pronunciation dictionary keeps on-screen spelling in the captions. stg verify transcribes the take back with whisper.cpp and compares it with the script.
  • 13 motion cards with a live gallery: spotlight, numbered pin, magnifier, cursor click, callout, type-in, screen swap, camera push-in, redact, title, chapter, step list, drawn dialog.
  • One entry point. node <skill>/scripts/stg.mjs for setup, doctor, new, capture, synth, verify, check, build, frames and mp4. The skill folder is the engine; your guides live in your project.

Install

npx skills add SilverNine/script-to-guide

# or, Claude Code plugin
claude plugin marketplace add SilverNine/script-to-guide
claude plugin install script-to-guide@silvernine

Needs macOS or Linux, Node 18+, Python 3.10+ and ffmpeg. The agent runs stg setup on first use.

Attached

  • first-diagram.mp4: the sample guide rendered to MP4
  • first-diagram.srt: its subtitles

Edge voice output follows Microsoft's terms; check them before you publish. The code is MIT.