Quickstart

You need two things to render an animation: a MotionDoc (the JSON document) and a host (element, component, or custom element). Here’s the shortest path from zero to motion.

Install an adapter

Pick the package for your stack. Each web binding pulls in @blinn-motion/core and the paint backends it needs.

npm i @blinn-motion/dom

npm i @blinn-motion/react

npm i @blinn-motion/vue

npm i @blinn-motion/react-native

Also available: @blinn-motion/canvas, @blinn-motion/svelte, @blinn-motion/angular, @blinn-motion/lit.

Get a MotionDoc

Either export one from Figma with the Blinn Motion plugin (Export → pick your framework → download JSON), or hand-author one for tests. A MotionDoc is plain JSON:

card.motion.json

{
  "format": "motion-engine",
  "version": "1.0",
  "duration": 1.2,
  "fps": 60,
  "stage": { "width": 375, "height": 600, "background": "#0E1116FF" },
  "layers": [ /* … */ ]
}

Mount it and press play

Hand the engine your host and the document.

import { create } from "@blinn-motion/dom";
import doc from "./card.motion.json";

const player = create(
  document.getElementById("stage")!,
  doc,
  { loop: true, autoplay: true }
);

player.play();
player.seek(0.8);
player.setProgress(0.5); // 0…1 — scroll / gesture

import { BlinnMotion } from "@blinn-motion/react";
import doc from "./card.motion.json";

export default function Hero() {
  return <BlinnMotion doc={doc} renderer="dom" loop autoplay />;
}

<script setup>
import { BlinnMotion } from "@blinn-motion/vue";
import doc from "./card.motion.json";
</script>

<template>
  <BlinnMotion :doc="doc" renderer="dom" :loop="true" :autoplay="true" />
</template>

Pick your stack

Stack	Package	Docs
Vanilla / Vite	`@blinn-motion/dom` or `canvas`	DOM · Canvas
React / Next.js	`@blinn-motion/react`	React
Vue	`@blinn-motion/vue`	Vue
Svelte	`@blinn-motion/svelte`	Svelte
Angular	`@blinn-motion/angular`	Angular
Lit / web components	`@blinn-motion/lit`	Lit
Expo / React Native	`@blinn-motion/react-native`	React Native
Astro	React or Lit islands	overview

Next steps

Understand the format

Layers, tracks, keyframes and easing.

Control playback

Play, pause, seek, loop, speed and scrubbing.

Export from Figma

Plugin setup, export flow, framework guides.

All adapters

Fidelity matrix and package map.

Get started

Core concepts

Adapters

Guides

Reference

Pick your stack

Next steps

Understand the format

Control playback

Export from Figma

All adapters

​Pick your stack

​Next steps

Understand the format

Control playback

Export from Figma

All adapters

Pick your stack

Next steps