Create Your First Graphic
Go from an empty studio to a finished, branded MP4 in about five minutes — no design or animation experience needed.
HeyMotion turns a blank canvas into a branded, broadcast-quality animated graphic in a few minutes. You don't need After Effects, and you don't need to know anything about animation. This guide walks you through your very first graphic end to end.
Here is the whole journey at a glance:
- Open the studio — no download, it runs in your browser.
- Set up your brand (optional the first time) — colors, fonts, and logo.
- Choose a template from the library on the left.
- Customize your content in the edit panel on the right.
- Preview the animation in the center.
- Export your video — a frame-perfect MP4 lands in your Downloads.
#Before You Begin
You need a modern browser. HeyMotion exports video entirely inside your browser using WebCodecs, so it works best in Google Chrome (desktop). Edge, Brave, and Arc work too. Safari and Firefox can preview graphics but may not be able to export — see Browser Requirements.
You do not need an account to make and export your first graphic. Signing in only adds cloud-synced brand settings and saved presets, which you can do later.
#Step-by-Step Instructions
#1. Open the studio
Go to https://heymotion.io/app. The studio loads with a template already selected so you can see something animating immediately. There's nothing to install.
#2. Pick a template
On the left is the template library, grouped into nine categories: Core, Story, Lists, Data, Tech, Devices, Subscribe, Overlays, and Transitions. Click any template name and it loads instantly into the center stage and starts playing.
For your first graphic, try Big counter (under Core) — it's a bold animated number, perfect for a stat like "1.2M views."
#3. Customize your content
The edit panel on the right shows every editable field for the selected template. For Big counter you'll see fields like the number, a label, and a caption. Type your own text and the preview updates automatically after a short pause.
Every template's fields are different, but they always control the words, numbers, and images — never the animation itself. The motion is built in.
There's a Clip length (seconds) field at the bottom of the edit panel. Leave it at the default for now; you can shorten or lengthen any clip later.
#4. Set your brand (optional)
Click 🎨 Brand near the top of the edit panel to open the brand controls. Change a color or two and watch the whole graphic re-skin instantly. Whatever you set here applies to every template, so you only do it once. If you'd rather explore first, skip this — the default System Prompt AI brand looks great out of the box.
Full details are in Set Up Your Brand Kit.
#5. Choose your canvas size
Above the preview is a dimension menu. The default is 16:9 (YouTube / desktop). If you're making a Short or Reel, switch to 9:16. The preview reshapes to match. See Canvas Sizes and Aspect Ratios for the full list.
#6. Preview the animation
The center stage loops your animation continuously. Press ↺ Replay any time to watch it again from the start. What you see here is what you'll get in the export.
#7. Export your MP4
Click ⬇ Export MP4. A progress bar fills as HeyMotion renders every frame in your browser, then the finished .mp4 downloads automatically. At 16:9 it's a 1920×1080, 30fps file — ready to drop straight into CapCut, Premiere, Final Cut, or DaVinci Resolve.
That's your first graphic. Full detail on the export step lives in Export an MP4.
#Options and Settings
| Control | Where | What it does |
|---|---|---|
| Template list | Left sidebar | Picks which graphic you're editing |
| Content fields | Right edit panel | Your words, numbers, and images |
| Clip length | Bottom of edit panel | Duration of the exported clip (1–20s) |
| Brand panel | 🎨 Brand button | Colors, fonts, logo — applies to all templates |
| Dimension menu | Above the preview | Aspect ratio / canvas size |
| Replay | Below the preview | Restart the animation |
| Export MP4 | Below the preview | Render and download the video |
#Best Practices
Keep your first clip short — three to six seconds is plenty for an insert. Type real content rather than leaving placeholder text, so the preview reflects your actual result. And set your brand colors once at the start; every graphic you make afterward inherits them automatically.
#Common Mistakes
The most common early stumble is exporting in the wrong browser. If Export MP4 fails with a message about encoding, you're almost certainly not in a Chromium-based browser — switch to Chrome. Another is expecting the preview to pause; it loops on purpose so you can judge the timing. Finally, if your export looks empty, make sure you actually typed content into the fields.
#Troubleshooting
- Export failed or the button says the browser can't encode → Troubleshoot a Failed Export
- The preview is choppy or frozen → Troubleshoot a Slow or Frozen Preview
#Tutorial and Video Resources
A companion walkthrough video is planned. Until then, this guide is the canonical first-run path.
#Related Articles
Continue with Set Up Your Brand Kit, then browse Choose a Template.