Skill 22 · Hyperframes Creative
Subchapter 22.10
references/narration.mdMarkdown3 KBView on GitHub
How to write narration scripts for video compositions. Read when the composition includes voiceover or TTS.
Write like a person, not a brochure:
Write what you want the voice to say. TTS reads literally.
| In the product | Write in script as |
|---|---|
| 135+ | more than one hundred thirty five |
| $1.9T | nearly two trillion dollars |
| 99.999% | ninety nine point nine percent |
| 200M+ | over two hundred million |
| 10x | ten times |
| API | A P I |
| stripe.com | stripe dot com |
The visual can show the exact figure while the voice rounds it.
For product videos:
Not every video needs all four. A 15-second social ad might be Hook + Proof + CTA. A 60-second product tour uses all four with more Story.
The most important sentence in the video. It must create tension, curiosity, or surprise in the first 3 seconds.
Patterns that work:
If the opening is generic (“Welcome to Stripe” / “Introducing our product”), start over.
From a 62-second product launch video (team reference):
Your AI agent already knows how to make videos.
It just needs the right format.
This is Hyperframes. An open source framework. HTML in, video out.
A div is a keyframe. Data attributes are your timeline.
CSS is your look. G-Sap is your animation engine.
Anything a browser can render can be a frame in your video.
CSS animations. G-Sap. Lottie. Shaders. Three.js.
Drop in music, sound effects, footage — it all composes together.
No new framework for the agent to learn.
Just HTML.
The agent writes it. The renderer captures every frame as MP4.
It's deterministic. Identical outputs, every time.
Give your agent the CLI. Tell it what to make.
Watch it build.
Hyperframes. Go make something.Note: ~140 words for 62 seconds — that’s 2.3 words/sec, leaving room for pauses and visual breathing.