mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
ukimsanov
592301248e
**The poster guard I added twice was unworkable and I never ran it.** It called existsSync on docs/images/catalog/<name>.png. That directory is gitignored — previews are generated locally, uploaded to the CDN and never committed — so the check is false on every clean checkout and in CI. It would have stripped the poster from all 168 pages, not the 13 with a missing file. It also referenced REPO_ROOT, which does not exist in that file, so the script crashed on the first item. I described this guard in two commit messages without once executing the generator. The poster is now gone entirely, which is the smaller and more honest fix. These previews are autoPlay muted loop, so the poster is visible for a few hundred milliseconds; 13 of the 168 files do not exist and the browser fetches the poster before the video. Removing the attribute kills 13 x 403 and 168 needless image requests, and there is nothing to keep in sync. Also applied a complexity pass to the delivery encode: - hasAudio() deleted. 17 lines and a spawnSync per item to choose between "-c:a aac" and "-an". ffmpeg ignores -c:a when the input has no audio stream; checked, exit 0, output carries no audio track. - The 40-line spawn + Promise wrapper is execFileSync. Everything around it in that script is already synchronous. - The duplicated poster lookup is gone with the poster itself. Net 76 lines lighter. Generator runs clean, emits 168 pages, carry-forward intact.
85 lines
3.4 KiB
Plaintext
85 lines
3.4 KiB
Plaintext
---
|
|
title: "Create a motion graphic"
|
|
sidebarTitle: "Motion graphic"
|
|
description: "Make a short, motion-led title, statistic, chart, logo sting, or overlay."
|
|
---
|
|
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
Use Motion Graphics for one short, design-led idea—usually under ten seconds—where the movement carries the message.
|
|
|
|
|
|
<DocsVideo
|
|
title="Kinetic type, a count-up, a chart, a logo sting, a lower third"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/motion-graphics-demo-v1.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/motion-graphics-demo-v1.jpg"
|
|
/>
|
|
|
|
Short beats back to back, because that is what this workflow makes — units of
|
|
motion small enough to drop into something else.
|
|
|
|
## Make the request
|
|
|
|
State the message and the short result:
|
|
|
|
```text
|
|
Using /hyperframes, make a six-second motion graphic that counts from zero to
|
|
10,000 and lands on “Thank you.” No narration.
|
|
```
|
|
|
|
The agent proposes the visual treatment and confirms the output when it could
|
|
be either a finished video or a transparent overlay. Exact beat timings are
|
|
optional unless a specific moment must land precisely.
|
|
|
|
## What are you animating?
|
|
|
|
- **Words** — use kinetic type when movement and emphasis carry the message.
|
|
- **One number** — count or reveal a statistic, settle on the result, and hold it long enough to register.
|
|
- **Data** — animate a chart or comparison so the sequence makes the conclusion clear.
|
|
- **Logo** — build a short sting with a deliberate entrance, completion, and clean hold.
|
|
- **Overlay** — create a lower third or callout that enters, holds, and clears completely over footage.
|
|
- **Page, post, or map** — capture the real source and animate one detail into the visual payoff.
|
|
|
|
The same workflow can animate kinetic type, a statistic, chart, logo, lower third, map, real webpage, news headline, or post.
|
|
|
|
If the result needs narration, several scenes, or a longer story, use [General Video](/guides/general-video).
|
|
|
|
## Choose the output
|
|
|
|
- **MP4** for a finished standalone graphic.
|
|
- **WebM or MOV with transparency** for a logo sting, lower third, callout, or other overlay placed over footage.
|
|
|
|
For an overlay, name where it should sit and how long it should hold. The first and final frames must clear cleanly.
|
|
|
|
## Review the motion
|
|
|
|
- The words, data, source, and logo are exact.
|
|
- The complete message is readable while the video plays.
|
|
- The main movement helps communicate the meaning.
|
|
- The opening and ending states are deliberate.
|
|
- A transparent export has been checked over real footage.
|
|
|
|
<Card title="Finish and share" icon="circle-check" href="/guides/export-and-share">
|
|
Check the motion at full speed, render the chosen format, and review the final file.
|
|
</Card>
|
|
|
|
## A finished one, end to end
|
|
|
|
The demo above shows the range. This is a complete graphic built from it —
|
|
music and sound, no narration, the motion carrying all of it.
|
|
|
|
<Frame caption="A complete year-in-review graphic. It uses music and sound, but no narration; the motion carries it.">
|
|
<DocsVideo
|
|
title="A complete year-in-review motion graphic"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-hypecard.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-motion.jpg"
|
|
/>
|
|
</Frame>
|
|
|
|
|
|
## Related topics
|
|
|
|
- [Prompt for motion graphics](/prompting/motion-graphics)
|
|
- [Edit animation and keyframes in Studio](/studio/animation)
|
|
- [Create a longer narrated video](/guides/general-video)
|