mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-03 12:17:03 +00:00
WaterrrForeverandClaude Opus 5.5
c4edac3056
The per-workflow guides now route through /hyperframes, so the sidebar group names what the reader wants to do rather than skills that no longer ship. The guides no longer promise a confirmation round the retired workflow skills ran (the interview and brief); they say what to put in the request and when to ask for a proposal or storyboard first. URLs are unchanged. Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
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";
|
|
|
|
Make a motion graphic 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 a motion graphic is — 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.
|
|
```
|
|
|
|
Say whether you want a finished video or a transparent overlay when it could
|
|
be either. 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 request shape 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, make a [custom 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)
|