MOTIONSMITH is pre-release. The template, the five commands and the fourteen laws work today. The asset pipeline and ship do not. Pre-release. Five commands work; the asset pipeline does not.

MOTIONSMITH
Join the waitlist

v0.1.0 — pre-release

Motion engine for coding agents

Motion-led sites, from one brief.

A motion engine your coding agent can drive. It writes one file. The CLI emits the site, compresses the film, and audits it at two viewports before it lets you ship.

Join the waitlist Read the fourteen laws
What you stop doing
Scroll bugs shipped
0
Motion laws enforced
14
Audit passes per build
4
Hand-written pin CSS
0
Runtime dependencies
1
Time to first film
Day 1

Drive it from your agent

  • /ms-brief
  • /ms-direct
  • /ms-choreograph
  • /ms-copy
  • /ms-art
  • /ms-build
  • /ms-audit
  • /ms-ship

Ten commands, brief to deploy.

Brief to deploy, in ten commands

No seam where you write glue code.

  1. /ms-brief 01 Interrogates the business and writes the file
  2. /ms-direct 02 Picks the reference and synthesises tokens
  3. /ms-choreograph 03 Selects set pieces and budgets the scroll
  4. /ms-copy 04 Writes every string to its type tier
  5. /ms-art 05 Directs, generates and compresses the film
  6. /ms-build 06 Assembles the site from the brief
  7. /ms-audit 07 Headless truth pass at both viewports
  8. /ms-critique 08 Judges the taste, not the tests
  9. /ms-ship 09 Deploys and verifies the deploy
  10. /ms-restage 10 Re-skins the whole site onto a new vertical

Agent decides — 5 CLI executes — 5

The split is the product. Everything left of it needs taste, so the CLI never touches it — it does not invent copy, choose a reference, or judge a film.

What lands in your repo

Ordinary code. No runtime, no account, no hosted dependency.

Eleven set pieces, prop-driven
src/components/
One motion layer, GSAP-gated
src/scripts/
Design tokens, light or dark
tokens.css
Your brief — the only file you maintain
motion.brief.json
Generated data and page Overwritten by sync. Never hand-edited.
src/data/
Immutable cache headers and robots
public/
Cloudflare Pages deploy script
package.json
The fourteen laws, as a loadable skill
plugin/

Astro and GSAP, one runtime dependency in the CLI, and a folder you could hand to any developer tomorrow.

motion.brief.json — the contract

One brief.The whole site.

See what it emits

The eleven set pieces

Every one content-driven and brand-free. The previews are real builds — eight from this page, three from the worked example, which shares nothing with it.

Scroll cost is what a pinned piece spends from the intensity budget. validate refuses a composition that goes over, and refuses two pinned pieces in a row.

The fourteen laws

Written as failure signatures rather than principles, because a principle is unactionable and a signature is a lookup. The audit reports findings by these IDs and nothing else useful.

ML-01 — One journey, one timeline

The object is correct while scrolling down, then snaps to a stale position — often one it held two sections earlier — when you scroll back up, or when you land mid-page on reload. Opacity is the usual tell: the thing is visible in a section where it should be long gone.

ML-02 — Pin with position: sticky, never ScrollTrigger.pin

Content jumps by exactly the height of the pinned section on refresh, on font load, or on rotation. Anchor links land in the wrong place. The section reads as a blank gap with JS disabled.

ML-03 — Hidden states are .js-gated

The bundle 404s, an extension blocks it, or a syntax error lands — and the page renders blank or half-empty. Worse: it looks fine to you because your cache is warm.

ML-04 — Ownership is declared

A headline is invisible on mobile or under reduced motion, but perfect on desktop. Or: a line renders 208% down instead of 108% and you cannot see where the extra came from.

ML-05 — Centre with xPercent and yPercent, never percentage margins

The object is wildly off-position — hundreds of pixels adrift — and the error scales with viewport width, not with the object.

ML-06 — Content-revealing work lives outside the GSAP layer

With reduced motion on, a decorative element renders as a permanent artifact — a solid line across the page, a stray marker — or a counter sits frozen at its initial value forever.

ML-07 — Mobile is its own choreography

The phone build is a static document with three videos on it, or — worse — it inherits a pinned sequence and every swipe fights a scrub.

ML-08 — On a phone, drive telemetry from the media's own playhead

Where desktop scrubs a video by scroll, portrait plays it and drives the overlay from timeupdate. Scroll-scrubbing a video on a phone competes with the gesture the user is already making, and seeking is expensive on mobile decoders.

ML-09 — Generate portrait paths from measured geometry

The marker lands correctly on the phone you tested and misses the target on every other aspect ratio. A viewBox authored for landscape stretches into nonsense in portrait.

ML-10 — Objects travel only through measured empty corridors

A flying object sits on top of a price, a headline, or a button. It reads as a rendering artifact, not as art direction.

ML-11 — Scroll offsets are measured, not guessed

Waypoints come from a helper that measures the document. The master timeline is padded to ScrollTrigger.maxScroll so that timeline seconds and scroll pixels stay one to one.

ML-12 — Rebuild on refresh, not only on resize

Waypoints are subtly early or late on first load and correct after a resize. Classic tell: it is right when you are debugging and wrong for the user.

ML-13 — Heavy media is fetched on approach

A megabyte of video downloads on first paint for a section three screens down that many visitors never reach. The trap: calling play() at boot forces the download regardless of preload, and the lazy attribute makes it look handled.

ML-14 — GSAP must earn its place

A JS bundle over roughly 120 KB gzipped for a marketing page, or a scroll handler doing work no one can see. Hover, press, disclosure and focus are CSS.

Build it once yourself

Not a boilerplate inventory — the things that look easy until the second breakpoint.

Pinned scrub that survives refresh and font load
40
Headless audit at two viewports, reduced-motion and no-JS
40
Portrait choreography that is not desktop with the motion removed
32
Reduced-motion and no-JS parity across every section
24
Cross-page flight layer with measured corridors
24
Design tokens that survive a dark inversion
20
Scrubbed-video encode and poster pipeline
16
And you still do not know it is right
196

Hours are recoverable. A motion bug a client finds on their own phone is not.

Who it is for

Three readers, three different numbers.

Waitlist — open

Tell us your
vertical

MOTIONSMITH is pre-release, and this page names the parts that are not built. The template, init, validate, sync, qa and doctor work today. The asset pipeline, ship, upgrade and the plugin's ten commands do not. Leave an address and we will write when they do.

Read the fourteen laws

One note when it ships. Nothing else, and no list.