Vue adapter

npm i @blinn-motion/vue

<script setup lang="ts">
import { ref } from "vue";
import { BlinnMotion, type BlinnMotionHandle } from "@blinn-motion/vue";
import doc from "./card.motion.json";

const motion = ref<BlinnMotionHandle | null>(null);
</script>

<template>
  <BlinnMotion
    ref="motion"
    :doc="doc"
    renderer="dom"
    :loop="true"
    :autoplay="true"
    :on-frame="(t, f) => console.log(t, f)"
  />
  <button type="button" @click="motion?.toggle()">Play / pause</button>
</template>

import { ref } from "vue";
import { useBlinnMotion } from "@blinn-motion/vue";
import doc from "./card.motion.json";

const host = ref<HTMLElement | null>(null);
const player = useBlinnMotion(host, doc, { renderer: "canvas", autoplay: true });

<BlinnMotion :doc="doc" :progress="scrollP" />