Angular adapter

npm i @blinn-motion/angular

import { Component } from "@angular/core";
import { BlinnMotionComponent } from "@blinn-motion/angular";
import type { MotionDoc } from "@blinn-motion/core";
import doc from "./card.motion.json";

@Component({
  selector: "app-hero",
  standalone: true,
  imports: [BlinnMotionComponent],
  template: `
    <blinn-motion
      #motion
      [doc]="doc"
      renderer="dom"
      [loop]="true"
      [autoplay]="true"
      (frame)="onFrame($event)"
    ></blinn-motion>
    <button type="button" (click)="motion.toggle()">Play / pause</button>
  `,
})
export class HeroComponent {
  doc = doc as MotionDoc;
  onFrame(e: { time: number; fraction: number }) {
    /* scrubber / meter */
  }
}

import { attachBlinnMotion } from "@blinn-motion/angular";

const handle = attachBlinnMotion(hostEl, { doc, autoplay: false });
handle.seekFraction(0.5);
handle.dispose();