React adapter

npm i @blinn-motion/react

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

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

import { useRef } from "react";
import { BlinnMotion, type BlinnMotionHandle } from "@blinn-motion/react";

function Controlled({ doc }) {
  const ref = useRef<BlinnMotionHandle>(null);
  return (
    <>
      <BlinnMotion ref={ref} doc={doc} renderer="dom" />
      <button onClick={() => ref.current?.toggle()}>Play / pause</button>
      <input
        type="range" min={0} max={1} step={0.001}
        onChange={(e) => ref.current?.seekFraction(Number(e.target.value))}
      />
    </>
  );
}

import { useRef } from "react";
import { useBlinnMotion } from "@blinn-motion/react";

const host = useRef<HTMLDivElement>(null);
const player = useBlinnMotion(host, doc, { renderer: "canvas" });
// <div ref={host} />

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

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