Blinn Motion exports a Figma Motion animation as JSON — not an image — converts it into a small, own format called MotionDoc, and plays it with a pure-JS render engine that has adapters for the DOM, Canvas, React and React Native. 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
Figma Motion  (node.animations / timelines)
      │  keyframes, easing, springs — raw data
      ▼
@blinn-motion/figma-plugin  ──►  MotionDoc JSON
      │  sample(doc, t) — THE render method
      ▼
@blinn-motion/core  ──►  resolved RenderNode tree
      │
      ├─► @blinn-motion/dom            divs · CSS · SVG · masks
      ├─► @blinn-motion/canvas         pure-JS 2D canvas
      ├─► @blinn-motion/react          <BlinnMotion renderer="…" />
      └─► @blinn-motion/react-native   native <View> / <Text>

​
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 and React Native — one document, every platform.

​
Why Blinn Motion

Open format you own

MotionDoc is small, readable JSON — inspectable, diffable, versionable. No proprietary blob.

Identical timing everywhere

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

Springs & curves, solved

Linear, hold, cubic-bézier (Newton–Raphson) and damped springs — sampled per frame, never pre-baked.

Tiny & framework-agnostic

No runtime dependencies in the core. Drop it into vanilla JS, React or React Native.
Blinn Motion is an independent, MIT-licensed project. Lottie is a trademark of its respective owners; Blinn Motion is not affiliated with it — it’s just a kindred idea (ship motion as data, not video) built for the Figma Motion era.