You need two things to render an animation: a MotionDoc (the JSON document) and a host element to play it in. Here’s the shortest path from zero to motion.
1

Install an adapter

Pick the adapter for your platform. Each one pulls in @blinn-motion/core automatically.
npm i @blinn-motion/dom

pnpm add @blinn-motion/dom

yarn add @blinn-motion/dom
2

Get a MotionDoc

Either export one from Figma with the Blinn Motion plugin, 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": [ /* … */ ]
}
3

Mount it and press play

Hand the engine your host element and the document, then call play().
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();            // pause(), toggle()
player.seek(0.8);         // jump to 0.8s
player.seekFraction(0.5); // jump to the middle

​
Prefer React?

The same document, the same control surface — wrapped in a component. 
import { BlinnMotion } from "@blinn-motion/react";
import doc from "./card.motion.json";

export default function Hero() {
  return <BlinnMotion doc={doc} renderer="canvas" loop autoplay />;
}
The renderer is swappable. <BlinnMotion renderer="dom" /> uses the full-fidelity DOM adapter; renderer="canvas" paints to a 2D canvas. Both play the same resolved tree.

​
Next steps

Understand the format

Layers, tracks, keyframes and easing.

Control playback

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