mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
ukimsanov
6fe5b4f82a
Adds the pages the rebuilt navigation is organised around, and moves the sidebar onto that structure. Every entry points at a file that exists after this commit; nothing is rewritten or removed yet, and no redirect is claimed yet. - Studio (13 pages) — the editor had no section of its own - One guide per creation workflow, matching the shipped agent skills - Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help, Go further, Product updates, 30 Days of HyperFrames Pages a later commit retires drop out of the sidebar here but still exist and still resolve, so the site stays navigable at this commit. Incidentally fixes a link to /concepts from the Lambda migration guide that is broken on main today — the destination did not exist.
69 lines
2.9 KiB
Plaintext
69 lines
2.9 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.
|
|
|
|
<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>
|
|
|
|
## 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>
|
|
|
|
## 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)
|