mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
47 lines
1.8 KiB
Plaintext
47 lines
1.8 KiB
Plaintext
---
|
|
title: "Create a motion graphic"
|
|
description: "Make a short, motion-led title, statistic, chart, logo sting, or overlay."
|
|
---
|
|
|
|
import { MotionKindChooser } from "/snippets/motion-kind-chooser.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.">
|
|
<video
|
|
className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
|
|
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"
|
|
controls
|
|
playsInline
|
|
preload="metadata"
|
|
/>
|
|
</Frame>
|
|
|
|
## What are you animating?
|
|
|
|
<MotionKindChooser />
|
|
|
|
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="Browse starting visuals" icon="grid-2" href="/catalog">
|
|
Find titles, charts, lower thirds, maps, overlays, and effects.
|
|
</Card>
|