Themed video templates
Ready-made templates in four themes and two shapes, and how to make your own with Claude.
Each template here is a whole short video, not a single scene: a hook, five or so beats and an end card, 20–25 seconds long. Every visible word, number, chart point, image and both brand colours are fields, so one template makes many videos without code. Each comes in four themes and two shapes.
The templates
| Template | Length | Fields | What happens |
|---|---|---|---|
| Launch film | 24.4 s | 44 | Hook, a 3D product-screenshot reveal, a feature with a code card, counting stats, a timeline mock, AI steps, an end card |
| Product tour | 21.6 s | 36 | A spotlight walks three areas of your screenshot, numbered hotspots pop on, an automation runs step by step, the same flow plays on a phone |
| AI agent demo | 21.4 s | 38 | The question is typed, the agent runs its steps (spinners resolve into checks), the answer streams in with a chart, a ⌘K command sends it on |
| Metrics reel | 24 s | 61 | A hero number counts up over a sparkline, a line chart draws from six points you set, ranked bars, KPI tiles, a goal ring that laps past 100 % |
| Testimonial wall | 23.8 s | 54 | A drifting wall of quote cards, a pull quote with a highlighter, a star rating that fills to your average, a customer story, rows of customer names |
They ship with the React template in public/templates, one file per theme and shape:
metrics-reel.miraiclip-template.json its own theme, 16:9
metrics-reel-vertical.miraiclip-template.json its own theme, 9:16
metrics-reel-paper.miraiclip-template.json another theme, 16:9
metrics-reel-paper-vertical.miraiclip-template.json
…- Fill in the form: in the studio, choose Template → My templates → Import .json, then pick the file.
- Open the sample video: choose Project → Open project…, then pick the same file.
Themes
Every template has a Theme field, so you can switch the look without picking a different file.
| Theme | Look | Motion |
|---|---|---|
midnight | Dark navy, soft brand glows, Inter | Springs up from below, slow push-in |
paper | Warm paper and ink, serif headlines, ruled texture, hard ink shadows | Slides in from the left, the camera pans |
terminal | Black CRT, monospace, scanlines, sharp corners | Stepped, flickering entrances and hard cuts |
pop | Pastel brand colour, chunky type, thick outlines, halftone dots | Bounces |
Each theme also sets its own default brand colours. Change them with the two colour fields, or with Project → Brand kit; both recolour every scene.
Data fields
Numbers aren't baked into the pictures. In the metrics reel:
- each chart point (0–100) sets the height of the line at that point;
- the bars scale to the largest value you enter;
- the goal ring fills to your percentage and runs a second lap past 100 %.
In the testimonial wall:
- the stars fill to the rating you type (
4.9); - each avatar shows the first letter of the person's name, so editing the name updates it.
Make your own with Claude
The Claude Code plugin includes a make-template skill. Ask for a template and Claude:
- Writes a beat sheet: the scenes, their length, what is on screen, how it moves.
- Plans the fields: every visible word, both colours, the theme, any image and any number.
- Builds the template with the skill's shared kit. The kit provides the motion system, the four themes, both shapes and the build step, and comes with about two dozen tested scene patterns (counters, typing, spotlights, charts, rings, quote walls and more).
- Opens it in the React studio, captures frames in every theme and both shapes, and fixes what it sees.
- Writes it up and hands over the eight template files. Exporting the final video is left to you.
> Make a template for our weekly changelog: version number, three changes with screenshots, and a "what's next" card.To check templates in the studio, the skill needs the React template's dev server running (npm run dev) and npm i playwright in your working folder.
How a template is built
A template is ordinary defined template JSON. Each scene is one animated full-frame HTML clip, and its {{placeholders}} are filled from the fields. Three things make these templates hold up when people edit them:
- Start times are CSS custom properties. Every element has a
--dstart time, and the renderer seeks each frame exactly, so preview and export match. - One set of scenes, two shapes. The 9:16 version reuses the same markup and timing with a block of layout overrides, so it is re-laid-out rather than cropped.
- Themes are variables. Colours, type, corners, shadows and motion direction come from the theme's CSS variables, so the same scene reads correctly on dark, paper, terminal and pop backgrounds.