Blinn Motion is the runtime for Figma Motion. It exports a Motion timeline as JSON — not an image — converts it into a small format called MotionDoc, and plays it with a pure-JS render engine plus thin adapters for DOM, Canvas, React, Vue, Svelte, Angular, Lit, React Native, and more. The render engine is the core. Every adapter paints the same resolved render tree, so an animation looks and times identically across platforms.
The pipeline
Meta-frameworks use the packages above (no extra runtime): Next.js → React client components, Astro → React/Lit islands, Expo → React Native.

​
Start here

Quickstart

Install a package and play your first animation in three steps.

The MotionDoc format

The small, readable document that holds your whole animation.

The render engine

One pure method — sample(doc, t) — does all the work.

Adapters

DOM, Canvas, React, Vue, Svelte, Angular, Lit, RN — one document, every platform.

​
Why Blinn Motion

Figma as source of truth

Keyframes, springs and curves come from the Motion timeline — no hand rebuild in CSS, no After Effects detour for product UI motion.

Identical timing everywhere

Same resolved tree, same shared clock. An animation times the same on every adapter.

Open format you can own

MotionDoc is small, readable JSON — inspectable, git-diffable, versionable.

Built for product UI

Real frames and transforms, not only illustration loops. Drop into vanilla JS, React, Vue, Svelte, Angular, Lit or React Native with a thin adapter.

​
When to use Blinn

FitUse Blinn when…
✅ PrimaryMotion already lives in Figma and should ship in the app
✅You need seek / scrub / shared timing across web and native
✅You want a diffable motion artifact in git
—You only need a one-shot video or GIF for social
—Motion is authored only outside Figma (different pipeline)
Blinn Motion is an independent, MIT-licensed project — the runtime for Figma Motion, not a wrapper around another motion ecosystem.