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 101 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.
At the bottom of the sidebar you'll find Generate a card (describe a card in plain English and AI drafts it) and Suggest a template (send us the card you wish existed). Your saved work doesn't live in this sidebar — presets and creations are in the Account panel on the right.
#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.
- ⬇ Export to render and download the finished video.
- 🔖 Save to save the current card as a creation you can reopen later.
- ↺ Replay to restart the animation from the beginning.
- 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 it also holds My creations, My presets, the My Account page link, and Log out.
- Brand settings button — open the Brand workspace to set colors, fonts, logo, and background for every template.
- ✏️ Content toggle — the text inputs, textareas, and image pickers specific to the current template, plus the Card style panel for restyling individual elements (size, color, font, hide). Typing updates the preview after a short pause.
- Clip length (seconds) — a number field, 1–20 seconds, defaulting to the template's built-in duration.
- 💬 Ask HeyMotion — the built-in assistant, at the bottom of the panel.
#Area-by-area reference
| Area | Where | What it does |
|---|---|---|
| Template library | Left sidebar | Lists all templates by category with per-category counts; click to load |
| Generate a card / Suggest a template | Bottom of left sidebar | AI-draft a new card from a description; send a template idea |
| Preview stage | Center | Loops the selected graphic at 1920×1080, scaled to fit |
| Dimension menu | Controls bar | Picks the canvas size / aspect ratio |
| ⬇ Export | Controls bar | Renders every frame in-browser and downloads the MP4 |
| 🔖 Save | Controls bar | Saves the current card as a creation (reopen it anytime) |
| ↺ Replay | Controls bar | Restarts the animation from frame one |
| Progress bar + status | Controls bar | Shows export progress and status messages |
| 👤 Account | Top of edit panel | Sign in / out; My creations, My presets, My Account, Log out |
| Brand settings | Edit panel | Colors, fonts, logo, background — applies to all templates |
| ✏️ Content + Card style | Edit panel | The words, numbers, and images for the current template, plus per-element styling |
| Clip length | Bottom of edit panel | Exported duration, 1–20 seconds |
| 💬 Ask HeyMotion | Bottom of edit panel | Built-in assistant that answers from these docs |
#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 looking for your saved work in the left sidebar: creations and presets live in the Account panel on the right. Brand-wide colors live in the Brand workspace (the Brand settings button in the edit panel); to restyle just one card (or one element on it), use the Card style panel under Content.
#Dark or Light Workspace
The studio chrome ships dark. The Light mode button at the bottom of the template sidebar flips the workspace onto the editorial paper look, and your choice is remembered on this browser. The card preview is unaffected either way — what you export never depends on the workspace theme.
#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.