Lottie made vector animation portable: After Effects (or similar) → JSON →lottie-web / native players. Blinn Motion targets a different source of truth:Figma Motion timelines for product UI, exported as a sparse MotionDoc and played by a pure-JS engine.
Side-by-side
| Blinn Motion | Lottie | |
|---|---|---|
| Primary authoring | Figma Motion | After Effects (+ Bodymovin / similar) |
| Document | MotionDoc (sparse UI keyframes) | Lottie JSON (often illustration-dense) |
| Typical player (web) | ~9 KB gzip (core + DOM) | ~75 KB gzip (lottie-web ballpark) |
| Web + RN from one file | Yes (adapters) | Yes (ecosystem players) |
| Seek / scrub / progress | First-class API | Supported, varies by player |
| Best fit | Product UI that lives in Figma | Illustration loops, AE pipelines |
When Blinn is the better default
- Design already owns motion in Figma, not AE.
- You want git-diffable motion next to app code.
- You need identical timing across DOM, Canvas, and React Native.
- Ship cost matters: sparse JSON + small pure-JS player for UI chrome, not full AE graphs.
When Lottie still wins
- Motion is authored in After Effects or an existing Lottie library.
- You need a mature illustration/asset ecosystem and community renderers.
- The deliverable is a complex character or marketing loop, not nested product frames.
Live comparison
The landing page runs a head-to-head stage: a real Lottie file next to a pixel-matched MotionDoc. Open blinnmotion.com → vs Lottie or the share card/s/vs-lottie (unique OG preview).
Ship Figma Motion without the AE detour
If your designers animate in Figma Motion, Blinn avoids re-authoring in AE just to get a Lottie file. Export with the Figma plugin, then mount with@blinn-motion/react (or any adapter).
npm i @blinn-motion/react
# play a MotionDoc exported from Figma MotionKeep reading
- Figma Motion to code — full handoff pipeline
- Render engine —
sample(doc, t) - FAQ