Get started
MOTION.md is an open format for how a film looks and moves. It is a Markdown file your agent reads before it draws anything, so the film it makes for your story keeps one look from the first frame to the last. One file is enough to start. A directory around it can add ready-made React components, which your agent uses first.
You may already give your agent files like it:
| File | Tells an agent |
|---|---|
AGENTS.md |
How to work in this project |
SKILL.md |
How to do a kind of task, with the scripts that come with it |
MOTION.md |
How a film looks and moves, with the components that come with it |
Start with one file
Put this at your project's root, as MOTION.md:
---
spec: motion/0.5
name: Harbour Chart
tokens:
color:
paper: "#EFE6D2"
sea: "#1F4E5F"
buoy: "#C8553D"
font:
title: ["Fraunces", "serif"]
label: ["IBM Plex Mono", "monospace"]
duration:
draw: 1.4s
---
# Harbour Chart
## Essence
An old nautical chart in two inks: thin lines and small labels, never a photo or 3D.
## Colour
`paper` is the ground, `sea` is every line and word, and `buoy` is the one mark in a frame.
## Type
`title` for the one heading in a frame, `label` for everything else.
## Motion
Lines draw on from left to right over `draw`. Nothing bounces.
## Avoid
- A second red mark → keep one per frame.
The front matter holds its exact values, so an agent never has to guess a colour. An agent with the motionhub skill looks for MOTION.md at your project's root, and then at motion/MOTION.md:
/motionhub make a film about <your topic>
Two commands help. The first checks the file, and the second writes its values out as tokens.json, for a binding or a theme:
npx @motionhub/cli check MOTION.md --format-only
npx @motionhub/cli tokens --out tokens.json
Add components
A MOTION.md can lead a directory, the way a SKILL.md can bring scripts:
clay-world/
MOTION.md the look, in words
tokens.json the exact values, as W3C design tokens
react/ its components, ready to use
parts/ slice.tsx, figure.tsx, world.tsx and more
motion.json its id, version, authors and licence
poster.jpg one frame of a film made in it
CREDITS.md every font and asset it needs
- Components come first. Where a motion has them, your agent uses them rather than drawing the look again. They run in Remotion and HyperFrames through a binding, and in any other React engine you bind them to.
- The words and tokens govern.
MOTION.mdsays what each piece is for and what to avoid, and the tokens say exactly which colour, face and easing to use. Anything the components do not draw is made from these, in any engine.
In a directory, the values live in tokens.json alone, and every motion on motionhub is a directory.
What it says
Every MOTION.md has five sections, so an agent always knows where to look:
| Section | Says |
|---|---|
Essence |
What makes a frame read as this look at a glance, and what it is easily confused with |
Colour |
What each colour is for, and what is never coloured |
Type |
The faces and their roles, sizes, and how words sit in the frame |
Motion |
How things arrive, change and leave, and how they follow the narration or music |
Avoid |
The mistakes this look invites, and what to do instead |
A motion with components also has a Components section, saying what each one is for. Any other sections may follow, and two are recommended: Treatments, a recipe for each kind of frame, and Self-audit, what to check before a film is finished.
It describes a look and never a particular film. It has no story, script, scenes or timings: you bring those.
An example
From Clay World, a look on motionhub:
# Clay World
## Essence, and what it is not
- Everything is a rounded, hand-pressed form of matte clay, slightly out of true, thumb-dented; no sharp edge, no gloss.
- Things have weight: what falls stretches, squashes flat, throws up crumbs and jolts the camera.
## Colour roles
- One saturated clay leads a frame. Never pure white or black, a gradient on a form, or a glow.
The whole file goes on to its type, its motion and what to avoid.
Use one, or write your own
To make a film in a look from motionhub, follow Use a motion. To publish a look of your own, ask your agent from the project whose look you want to share. It writes the whole directory that motionhub needs:
/motionhub share this project's look as a motion
Share a motion has the rest.
The definition
The format is defined in the specification: MOTION.md in section 5, one file in section 11 and components in section 12. The format is still a draft, and it only grows: a later version never changes the meaning of what an earlier one says.
Propose a change
The format is open, and changes to it are made in the open:
- Open an issue to say what should change and why.
- Edit the specification to open a pull request from your browser. Add a
Signed-off-by: Your Name <you@example.com>line to the commit message, or the checks refuse it.
Or from a terminal:
gh issue create --repo motionhub-dev/motions --title "MOTION.md: <your change>"
This page is docs/motion-md.md in the repository, rendered. Suggest a change