Illustrative cover generated by us — see the source repo for real examples.
How to use
- 1
Copy the install prompt
Sign in, then click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/motion-graphics make me: Short design-led clips: kinetic type, stat count-ups, logo stings, lower thirdsExample message showing how to invoke it, not a real output.
What you get
- A category router for the right motion recipe
- Design notes for timing and easing
- Rendered clips via HyperFrames
Good fit
- Short design-led clips: kinetic type, stat count-ups, logo stings, lower thirds
Not for
- Narrated or multi-scene videos (use the general video workflow)
What you need
- Node.js and FFmpeg
- HyperFrames CLI (npx hyperframes)
- Optional GEMINI_API_KEY for generated images
- License
- Apache-2.0
- Author
- @heygen-com
- Source
- heygen-com/hyperframes/skills/motion-graphics · ★ 57,418
Upstream description
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart.…
Other ways to install
Prefer doing it yourself? These commands do the same as the button.
Read https://skilloop.dev/skills/motion-graphics/install.md and follow the instructions to install the skill.
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/motion-graphics -g -a claude-code
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/motion-graphics -g -a codex
git clone --depth 1 https://github.com/heygen-com/hyperframes.git /tmp/hyperframes mkdir -p ~/.claude/skills && cp -r /tmp/hyperframes/skills/motion-graphics ~/.claude/skills/motion-graphics
Original work by its authors, redistributed under its license. We only link and describe it.
Related skills
Launch Teaser Countdown
A 9-second launch teaser: 3-2-1 countdown, flash, letter-by-letter product reveal and a launch-date pill — in your brand colors, rendered locally.
Release Notes Reel
Turn a changelog into a 12-second "What's new" reel: version badge, three feature cards and a CTA end card.
Kinetic Quote Card
A vertical 8-second quote video: words pop in one by one, the key word gets an animated underline, then the attribution slides in.
Stat Count-up Reel
Three numbers roll up like an odometer with progress bars — milestones, impact reports and year-in-review clips in 10 seconds.