Create a Code or Terminal Animation
Animate code, commands, and interfaces — terminal typing, code diffs, file trees, AI prompt boxes, browser windows, and API flows.
Goal: animate code, a command, or an interface moment. Expected result: a short animated MP4 of your terminal, code, or UI. Required plan: Right now (beta): everything is free and unwatermarked. Nothing below is charged yet. Required assets: none — just your command, code, or prompt text. Estimated time: about 5 minutes.
#Overview
Tech templates make developer content look like the real thing — text types into a terminal, code diffs light up, prompt boxes fill in. They live in the Tech and Devices categories. This guide covers eight:
- Terminal typing (Tech) — a command types into a terminal.
- Code diff (Tech) — added and removed lines highlighted.
- File tree reveal (Tech) — a project tree expands.
- ChatGPT prompt box (Devices) — a prompt in a ChatGPT-style box.
- Claude prompt box (Devices) — a prompt in a Claude-style box.
- Browser window (Tech) — content in a browser chrome.
- Search bar typing (Tech) — a query types into a search bar.
- Request→Response (API flow) (Tech) — a request going out and a response coming back.
#When to Use It
Use Terminal typing or Search bar typing to show a command or query being entered. Use Code diff for a before/after change, File tree reveal to show project structure, and Browser window to frame a web moment. Use ChatGPT prompt box or Claude prompt box to show an AI prompt, and Request→Response (API flow) to explain an API round trip.
#Before You Begin
You'll export an MP4, so use a Chromium browser — Google Chrome (desktop) is recommended. No account is required. Have your command, code, or prompt text ready.
The typing and reveal animations are built in and run on the exporter's virtual clock, so the export is frame-perfect. You supply the text; the motion is handled for you.
#Step-by-Step Instructions
- Open the studio at https://heymotion.io/app.
- Under Tech (or Devices for the prompt boxes), pick the template that fits.
- In the edit panel, type your command, code, prompt, or query into the fields and textareas.
- Set Clip length (seconds) long enough for the typing or reveal to finish — longer text needs a longer clip.
- Press ↺ Replay to check the pacing, then click ⬇ Export MP4.
#Options and Settings
| Control | Where | What it does |
|---|---|---|
| Command / code / prompt fields | Right edit panel | The text that animates |
| Clip length | Bottom of edit panel | Duration (1–20s) |
| Brand panel | 🎨 Brand button | Colors and the mono font |
#Example
A CLI demo: choose Terminal typing, enter your install command, set the clip to 6 or 7 seconds so the full command types out and the result appears, and export. Cut it in as you explain the step.
#Best Practices
Keep commands and code short — a few lines type cleanly; a full screen of code gets small and rushed. Give the clip enough length for the typing to finish. The mono font comes from your brand kit, so set it there if you want a specific monospace look.
#Common Mistakes
Pasting too much code is the usual issue — trim to the lines that matter. A clip that's too short cuts off mid-type. Remember colors and fonts come from the Brand panel, not per-template controls.
#Related Articles
Frame a UI inside a device with a Device Mockup, and review the render step in Export an MP4.