🧭 Product onboarding
Explaining a new feature in ~90 seconds is HyperFrames' most immediate use case. Instead of a static screenshot tour, you deliver a narrated MP4 that users watch in the app itself — and can regenerate whenever the feature changes.
Screenshots age: with every release, the UI changes and the carousel becomes outdated. With HyperFrames, SCRIPT.md is the source of truth. You edit the script, run node build-index.mjs && npx hyperframes render and have a new video in minutes — no editor, no screen recorder.
Writing SCRIPT.md
6 scenes, ~100 seconds of narration in total. Describe the feature from the user's point of view, not the developer's.
Generate narration with Kokoro
Voice pf_dora --speed 0.98, measure duration with ffprobe, fill in AUDIO[] in the generator.
Compose scenes in build-index.mjs
Each scene = one UI state recreated in premium dark HTML. Use GSAP to animate entrances and highlights.
Render and distribute
npx hyperframes render --quality high --output renders/onboarding-v2.mp4 — upload it to a CDN or embed it directly in the app.
- ✓ 1–3 sentences of narration per scene (≤20 s)
- ✓ UI recreated in HTML, not a real screenshot
- ✓ Final CTA with a direct link to the feature
- ✓ 9:16 version for mobile onboarding
- ✗ 5+ minute video — user drops off after 30 s
- ✗ Screenshots instead of HTML (becomes outdated)
- ✗ Very fast narration — use
--speed 0.98, not 1.2 - ✗ No silent version: forgetting to rerender after an update
Name the renders onboarding-v1.mp4, onboarding-v2.mp4. This way, the CDN doesn't cache the old video, and you keep a history for rollback.
🎓 Micro-lessons and courses
Turning a concept into a short narrated lesson — with animated code, an SVG diagram, and synchronized captions — is what HyperFrames does best. Each lesson is a SCRIPT.md; a course is a folder of SCRIPTs.
The array CAPTIONS[] no build-index.mjs defines the captions synchronized with the audio. For micro-lessons, fill in every scene — people watching without sound (LinkedIn feed, phone on silent) can still absorb the content.
📣 Launch / video changelog
Announcing a release with a narrated video instead of a text post increases engagement—especially on LinkedIn and the product’s Discord channel. HyperFrames produces the changelog video in the same CI that publishes the release.
Release notes posts are ignored by 80%+ of users. Videos that are 60–90 s long, with narration and animation of the new feature, have 3–5× higher open rates on channels like Discord, Slack, and product email.
- ✓ Focus on 3 changes, not all 47 from the release
- ✓ Show the animated “before” and “after”
- ✓ 9:16 version for Stories/Reels of the product
- ✓ Automate in CI:
npx hyperframes renderin the release pipeline
- ✗ Listing fixed bugs — the user doesn’t care
- ✗ More than 2 minutes long — attention drops
- ✗ Narrate internal company jargon ("service layer refactor")
- ✗ Forget the CTA: "update now at inema.club/app"
🧑🤝🧑 Explain a technical concept to the team
Align internal understanding without a meeting. A 90-second video explains an architectural decision, a new coding standard, or a deploy process — and stays available for asynchronous reference in Notion, Confluence, or a Slack channel.
Alignment meetings have a high attention cost and low retention. A narrated 90-second video with an animated diagram and real code can be paused, rewound, and watched when the developer is focused — not when they were summoned.
| Aspect | HyperFrames video | Synchronous meeting |
|---|---|---|
| Team time cost | 90 s per person | 30–60 min × N devs |
| Availability | Asynchronous, 24/7 | Depends on scheduling |
| Content retention | Can pause/review | Depends on notes |
| Update | Rerun the build | New meeting |
Use the function sceneN() of the build-index.mjs to inject futuristic SVG with animated arrows (GSAP gsap.from() + stagger) showing the system flow. Much clearer than a text slide.
📄 Video documentation that doesn’t go stale
The biggest complaint about video documentation is that it becomes outdated within weeks. With HyperFrames, the video is a build artifact—when the content changes, just edit SCRIPT.md and run the build again. No video editor needed.
APIs change—docs become outdated
Renamed endpoint, new parameter, changed behavior. The old video is out of date.
Edit SCRIPT.md e assets/txt/sN.txt
Adjust the narration lines and HTML for the affected scene. ~5 minutes of work.
Rerun narration only for the changed scenes
npx kokoro-tts assets/txt/s3.txt --voice pf_dora --speed 0.98 --output assets/audio/s3.wav
Rebuild and render
node build-index.mjs && npx hyperframes lint && npx hyperframes render --quality high --output renders/docs-api-v3.mp4
Updated video published
From zero to a new MP4: ~10 min. No opening a video editor, no recording the screen again.
🎨 Adapt the house style to the client's brand
HyperFrames has a default premium dark palette (#0D1321 bg, #FFC300 accent). But the design.md is the only file you need to replace to adapt the entire look to a different brand—while keeping the whole pipeline.
Changes with design.md:
- ✓ Background color (
bg) - ✓ Accent color (buttons, borders, highlights)
- ✓ Fonts (headings, body, monospace)
- ✓ Final CTA color and text
- ✓ Company logo/icon in the opening scene
Doesn't change (the pipeline remains the same):
- — Scene structure (SCRIPT.md)
- — TTS (pf_dora, Kokoro local)
- — Render (headless Chrome + FFmpeg)
- — npx hyperframes lint/render commands
- ✓ Always use a dark background (premium dark — don't give in to the "white background")
- ✓ Accent with ≥4.5:1 contrast against the background
- ✓ Title font with weight 700 or 800
- ✓ Test with
npx hyperframes inspect --samples 16before delivering
- ✗ White background — antialiased fonts look pixelated in the render
- ✗ Very light accent (e.g.,
#FFFF00) — obscures the text - ✗ Change the
LEAD/TAIL/FADEwithout testing (LEAD=0.5 TAIL=0.9 FADE=0.45are the validated values) - ✗ Use a font unavailable on Google Fonts — it breaks the
fetch-fonts.mjs
The values LEAD=0.5 (silence before narration), TAIL=0.9 (pause after narration) and FADE=0.45 (fade duration between scenes) were calibrated for the voice pf_dora --speed 0.98. If you change the voice or speed, recalibrate these values.
📋 Module 4.2 Summary
- ✓ Product onboarding: narrated video in ~90 s, regenerable with every release
- ✓ Micro-lessons: 6-scene structure with CAPTIONS[] for accessibility
- ✓ Video changelog: max. 3 features, product-focused narration
- ✓ Asynchronous technical alignment: animated SVG replaces a 30-minute meeting
- ✓ Video docs: MP4 is a build artifact, update in ~10 min
- ✓ Brand adaptation: only design.md changes — the entire pipeline stays the same
- →
pf_dora --speed 0.98— default Brazilian Portuguese voice - →
LEAD=0.5 / TAIL=0.9 / FADE=0.45— validated timings - →
npx hyperframes lintbefore every render - →
npx hyperframes inspect --samples 16to check the layout - →
bg #0D1321 / accent #FFC300— standard premium dark palette - →
--quality highfor the final render (not a draft)
🧰 Prompt library
Collection of ready-to-use prompts for the most common use cases — onboarding, micro-lesson, changelog, and more.