mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
ukimsanov
ad4c6a9b6e
**Nine guide videos rebuilt in the light house style.** They were dark — a reader clicking between sibling guides watched the theme flip. mcp, performance, rendering, skills, html-in-canvas and remove-background were restyled to the bone field; faceless-explainer, product-launch and voice-and-audio were re-narrated with River, the house voice the user-journey films use. Measured luma is 177-230, matching the journey films, and every one carries audio. The restyle also surfaced a real bug in the frame itself: the house coral #D96A4F is 2.95:1 on bone, under the WCAG large-text floor, and `hyperframes check` failed on it. Darkened to #B44E33 (4.43:1) before any of these rendered. **canary-rollouts trimmed from 2,443 words to 520.** The statistical-calibration essay — pre-registered experiment design, a probability formula, rejected hardware-fingerprinting alternatives — was never documentation for someone shipping a staged rollout. Cut to Add one / Override one / Remove one / Where it lives, the part that was already good. **thirty-days now shows the films.** It was 431 words and 30 links to x.com for a series entirely about videos, with no thumbnails. It now leads with real preview clips where a film exists and marks the rest with a visual placeholder rather than a dead off-site link.
73 lines
3.2 KiB
Plaintext
73 lines
3.2 KiB
Plaintext
---
|
|
title: "Create a faceless explainer"
|
|
sidebarTitle: "Faceless explainer"
|
|
description: "Turn notes, an article, or a difficult idea into a visual explanation without product footage."
|
|
---
|
|
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
Start from a topic, article, or notes. HyperFrames invents the typography, diagrams, abstract graphics, and data visualization that teach it.
|
|
|
|
|
|
<DocsVideo
|
|
title="One idea told four ways, with no footage to start from"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v2.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v2.jpg"
|
|
/>
|
|
|
|
Kinetic type, an abstract graphic, a diagram, and a data-visualisation — all
|
|
invented from the text. There is no source video anywhere in this.
|
|
|
|
## Make the request
|
|
|
|
Attach or paste the source material:
|
|
|
|
```text
|
|
Using /hyperframes, turn these notes into a short visual explainer for a
|
|
general audience: [paste notes]
|
|
```
|
|
|
|
The agent proposes the teaching angle and asks about information that must stay
|
|
exact. A topic alone is enough to begin; a script is useful only when its words
|
|
are already approved.
|
|
|
|
## How should the idea land?
|
|
|
|
- **Understand one idea** — open with a useful question, then reveal the mechanism one layer at a time.
|
|
- **Follow a process** — keep one visual stage and show each step in the order the viewer needs it.
|
|
- **Remember three points** — make the ideas parallel, concrete, and visually distinct enough to recall later.
|
|
- **Learn through a story** — use one case to move from setup and tension to a general lesson.
|
|
|
|
If you supply an approved script, say whether HyperFrames may restructure it or
|
|
must keep every word.
|
|
|
|
Use a [product and website video](/guides/product-launch-video) when the real interface should provide the proof. Use [captions or designed overlays](/guides/captions-and-recuts) when existing footage should remain underneath.
|
|
|
|
## From information to understanding
|
|
|
|
HyperFrames does not turn each paragraph into a scene. It finds the teaching spine, removes asides, and builds a sequence around the one idea the viewer should retain.
|
|
|
|
The visuals share one coherent language and develop with the explanation. A diagram should reveal a mechanism; a chart should prove a claim; motion should show what changes.
|
|
|
|
## Review whether it teaches
|
|
|
|
- The opening creates a question, tension, or surprise.
|
|
- The main idea is clear by the second scene.
|
|
- Each body scene advances one mechanism, step, example, or implication.
|
|
- Numbers and factual claims match the source.
|
|
- The ending lands the sentence you wanted the viewer to remember.
|
|
|
|
Ask the agent when the teaching sequence or evidence must change. Use
|
|
[Storyboard](/studio/storyboard) to inspect the sequence directly, or Studio
|
|
for a precise visual, timing, or animation correction.
|
|
|
|
<Card title="Finish and share" icon="circle-check" href="/guides/export-and-share">
|
|
Check the final project, render through your preferred surface, and review the file.
|
|
</Card>
|
|
|
|
## Related topics
|
|
|
|
- [Prompt for explainers](/prompting/explainers)
|
|
- [Review the storyboard](/studio/storyboard)
|
|
- [Create a product video from real screens](/guides/product-launch-video)
|