Navigate the Studio
A tour of the three-pane HeyMotion layout — the template library on the left, the live preview stage in the center, and the edit panel on the right — plus the mobile drawers.
#Overview
The HeyMotion workspace is a three-pane layout: the template library on the left, the live preview stage in the center, and the edit panel on the right. Once you know what lives where, everything you do — pick a template, type your content, watch it, export it — moves in a straight line across the screen.
#The three panes at a glance
#Left — the template library
The left sidebar is your template library. All 104 templates are grouped into the 9 categories (Core, Story, Lists, Data, Tech, Devices, Subscribe, Overlays, Transitions), and each category shows a count of how many templates it holds. Click any template name to load it into the center stage, where it starts playing immediately.
When you're signed in, a My presets group appears here too, listing the presets you've saved. Click a preset to load it; use its small x to delete it.
#Center — the preview stage
The center is the preview stage, where your selected graphic renders at 1920×1080 (scaled to fit the shell) and loops continuously so you can judge the timing. Around it are the playback and output controls:
- A dimension menu for choosing your canvas size / aspect ratio.
- ↺ Replay to restart the animation from the beginning.
- ⬇ Export MP4 to render and download the finished video.
- A progress bar and a status line that report what's happening during an export.
#Right — the edit panel
The right side is the edit panel, where you control the selected graphic. From top to bottom it holds:
- 👤 Account toggle — sign in or out; when signed in, sync your brand and save presets.
- 🎨 Brand toggle — open the Brand panel to set colors, fonts, logo, and background for every template.
- Content fields — the text inputs, textareas, and image pickers specific to the current template. Typing updates the preview after a short pause (about a third of a second).
- Clip length (seconds) — a number field, 1–20 seconds, defaulting to the template's built-in duration.
#Area-by-area reference
| Area | Where | What it does |
|---|---|---|
| Template library | Left sidebar | Lists all templates in 9 categories with per-category counts; click to load |
| My presets | Left sidebar (signed in) | Your saved template+content snapshots; click to load, x to delete |
| Preview stage | Center | Loops the selected graphic at 1920×1080, scaled to fit |
| Dimension menu | Above the preview | Picks the canvas size / aspect ratio |
| ↺ Replay | Around the preview | Restarts the animation from frame one |
| ⬇ Export MP4 | Around the preview | Renders every frame in-browser and downloads the MP4 |
| Progress bar + status | Around the preview | Shows export progress and status messages |
| 👤 Account | Top of edit panel | Sign in / out; enables cloud sync and presets |
| 🎨 Brand | Top of edit panel | Colors, fonts, logo, background — applies to all templates |
| Content fields | Edit panel | The words, numbers, and images for the current template |
| Clip length | Bottom of edit panel | Exported duration, 1–20 seconds |
#On mobile
On a narrow screen the three panes collapse into drawers. Use the ☰ Templates button to open the template library, and the ✏️ Edit button to open the edit panel. The preview stays in the center. Close a drawer to get back to the full preview.
The preview loops on purpose — there's no play/pause. To watch a run from the very start, press ↺ Replay. What you see in the loop is exactly what the export will contain.
#Common Mistakes
A frequent early confusion is looking for a timeline or scrubber — there isn't one; the preview simply loops and Replay restarts it. Another is expecting per-template color controls in the edit panel: colors live in the 🎨 Brand panel and apply everywhere, by design.
#Related Articles
Now that you know the layout, learn to Choose a Template and Customize a Template. To make everything match your look, see Set Up Your Brand Kit.