motionhub

Reusable looks for narrated and explanatory video. An open format and a public catalogue: how a film looks and how it moves, written so that a person or an agent can make a new film in it with any engine.

English · 简体中文

Browse the motions · Docs · Specification

Browse every motion on motionhub.dev

What a motion is

Every motion is written around a MOTION.md, an open format that works like a SKILL.md: one file says how a film looks and moves, and a directory around it can bring ready-made components for your agent to use first.

A motion holds a look and no film: its ground, colour and type, and how things arrive, change and leave. There is no story, script, scene or timing in it. You bring the story; the motion keeps the look, in whichever engine you use.

Quick start

Nothing to install. Pick a motion, then paste this into any agent that can open a URL:

Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion @iamsuosi/lab-notebook

To make it shorter, install the skill once, for every agent on your computer:

npx skills add motionhub-dev/motionhub -g

Then say what you want:

Say	What happens
/motionhub make a film about <your topic> in @iamsuosi/lab-notebook	The agent fetches the motion, checks it against its SHA-256, reads MOTION.md and tokens.json whole, and makes your film in its look with whatever engine it uses
/motionhub make a Remotion film about <your topic> in @iamsuosi/lab-notebook	The same, in Remotion, built from the motion's components and tokens
/motionhub share this project's look as a motion	The agent writes the motion from the project's look and never its story, runs the checks, shows you the result and opens the pull request only when you say yes

Or from the command line, with Node.js 20 or later:

npx @motionhub/cli search hand-drawn          # motions with every word
npx @motionhub/cli get @iamsuosi/lab-notebook   # into ./motions/@iamsuosi/lab-notebook/, checked against its SHA-256

Use a motion has every way, and Command line every command.

What a motion looks like

On motionhub a motion is a directory of five files, and a directory for each tool that wants ready-made pieces (for your own project, one MOTION.md is enough):

motions/@<scope>/<slug>/   a motion, id @<scope>/<slug>: its creator's GitHub name and its slug
  motion.json     its id, version, name, one line, authors and licence
  MOTION.md       the look in words, for people and agents: essence, colour, type, motion, what to avoid
  tokens.json     the exact values, as W3C design tokens: colours, faces, durations, easings
  poster.jpg      one frame of a film made in it
  CREDITS.md      every font and asset it needs, with its licence and source
  react/          optional: components that run unchanged in any React engine

{
  "spec": "motion/0.4",
  "scope": "iamsuosi",
  "slug": "lab-notebook",
  "version": "1.1.0",
  "name": {"en": "Lab Notebook", "zh-CN": "实验手记"},
  "line": {"en": "A page of a squared notebook where the diagram is drawn stroke by stroke as it is explained, labelled by hand, the result boxed in red."},
  "authors": [{"name": "SuoSi", "github": "iamsuosi"}],
  "license": {"text": "CC-BY-4.0", "code": "MIT"},
  "lang": "en",
  "tags": ["hand-drawn", "line-art", "light"],
  "fit": {"for": {"en": "How things work and what the numbers mean, worked out by hand: science and engineering principles, money and consumer explainers, comparisons and step-by-step reasoning.", "zh-CN": "手算推导的讲解：理工原理、财经与消费类解释、对比和分步推理。"}, "not": {"en": "Stories carried by people and places: it has no map and no characters. Brand films.", "zh-CN": "靠人物和地点推动的故事：它没有地图，也没有角色。品牌片。"}}
}

SPEC.md says exactly what each file holds and what any tool can rely on.

Engines

The same motion gives the same look in every engine.

Engine	How a motion works in it	Guide
Remotion	Tokens become values, and the components in react/ run unchanged through @motionhub/remotion	Remotion
HyperFrames	Tokens become CSS variables and eases, and the components in react/ draw at your timeline's time through @motionhub/hyperframes	HyperFrames
Anything else	HTML and CSS, GSAP, Motion Canvas or a renderer of your own: follow MOTION.md and tokens.json, the way you would follow a design system	Use a motion

Both bindings provide @motionhub/runtime, which is all a motion's components import besides React.

Share a motion

Made a film whose look others should have? With the skill installed, ask your agent from that project:

/motionhub share this project's look as a motion

By hand:

npx @motionhub/cli init <slug> --github <you>   # ./motions/<slug>/ with every required file to fill in, scoped to you
npx @motionhub/cli share motions/<slug>         # the checks, then a link: sign in with GitHub to open the pull request

No git, gh or GitHub token is needed: the link opens the pull request under your name. --pr opens it from your fork with gh instead.

This is the beginning of the README. Read the rest at the original. Read the full README ↗