HeyMotionDocs
Open the Studio →

Customize a Template

Use the right-hand edit panel to change a template's text, numbers, images, and clip length — and save the result as a preset when you're signed in.

Beginnerfeature guide

Once you've picked a template, everything you change lives in the edit panel on the right. You edit content — the words, numbers, and images — while the built-in animation stays exactly as designed. This guide covers every control in that panel.

#Overview

The edit panel shows the fields for the currently selected template. Different templates expose different fields, because each one has different content. A Big counter has a number and a label; a Quote card has a quote and an attribution; a Photo card (image) has an image field. In every case you're filling in content, never touching the motion.

#When to Use It

Customize a template every time you build a clip. Even if the default text reads well, typing your own content ensures the preview and export show your real result.

#The Field Types

Field typeWhat it's forExample templates
Text inputA short line: a headline, a label, a nameTwoTone headline, Lower-third tag
TextareaLonger or multi-line copyQuote card, Checklist reveal
NumberA count or valueBig counter, Money counter
ImageUpload a picture, read in as a data URLPhoto card (image), Device frame
Clip length (seconds)Duration of the exported clip, 1–20sEvery template

The Clip length (seconds) field sits at the bottom of the panel and appears for every template. It defaults to that template's designed duration and accepts any value from 1 to 20 seconds.

Note

Image fields read your file in-browser and embed it directly — nothing is uploaded to a server. You can also remove an image and pick a different one. See Upload an Image.

#Live Preview

The center stage loops your graphic continuously. When you type into a content field, the preview updates after a short pause (about a third of a second) so it isn't re-rendering on every keystroke. Press ↺ Replay any time to watch the animation from the start.

#Step-by-Step Instructions

  1. Pick a template (see Choose a Template).
  2. In the right-hand edit panel, read the fields top to bottom.
  3. Replace the placeholder text with your own content. Wait a moment for the preview to catch up.
  4. For any image field, click the file picker and choose a picture; it appears in the preview.
  5. Adjust Clip length (seconds) if you want the clip shorter or longer.
  6. Watch the loop, press ↺ Replay to review, and refine until it reads well.

#Styling the Card (Card style panel)

Below the content fields sits the Card style panel — this is where you restyle the card itself, piece by piece. It has two levels:

  • Whole card — a Background color picker and a Text size (all) slider that scales every element together.
  • Each item — every element on the card is listed individually: each text line gets a font dropdown, a color picker, and a typable pixel size; decorative shapes (underlines, dots, dividers, panels) get a color picker too. Every item also has an eye button to hide it entirely — the layout reflows to close the gap — and a to reset just that item. Reset all changes returns the whole card to your brand.

Per-item styling travels with the card: it's included when you save a creation or preset, and it renders identically in the exported MP4.

#Background Media and the Asset Library

The Card style panel's Background group lets you set an uploaded image — or a short video loop (up to 8 MB) — as the card's background. Images are scaled to fit and export exactly as previewed; a background video plays behind the card's animation and is frame-synced in the export, so the MP4 matches what you saw on the stage. One card holds one background media slot; remove puts the painted brand background back.

Image fields on any card also have a library button: your team's shared asset library of logos, icons and pictures. Upload to it from the picker, or press ☆ to library on any image you've just placed to keep it for next time. Assets belong to the team, so everyone on your seats sees the same library.

#Saving as a Preset

If you're signed in, you can keep your work for reuse. Click Save as preset, give it a name, and it appears under My presets (open the Account panel on the right, then My presets). Click a preset's Use button to reload that template with your exact content, styling, and clip length. Presets store the configuration and clip length, and sync to your account.

Note

No account is needed to build and export. Presets and cloud sync are the reason to sign in. See Create and Save a Project.

#Best Practices

Type real content early so the preview reflects your actual graphic. Keep single-line fields short — long headlines can overflow the designed layout. And when you land on a look you'll reuse, save it as a preset so you don't rebuild it next time.

#Common Mistakes

The most common surprise is expecting a content field to change the animation — it won't; fields change content, and the Card style panel changes appearance. The second is not waiting for the debounce: give the preview a moment after typing before you judge it.

Start from Choose a Template, keep your work with Create and Save a Project, and add pictures via Upload an Image.