Lit adapter - Blinn Motion

@blinn-motion/lit registers a custom element that plays a MotionDoc through DOM or Canvas. Use it from Lit, vanilla HTML, Astro islands, or any framework that can host web components.

Install

npm i @blinn-motion/lit

Peer: Lit ≥ 3.

Register + play

import { defineBlinnMotionElement } from "@blinn-motion/lit";
import doc from "./card.motion.json";

// Safe to call more than once; also auto-registers on package import.
defineBlinnMotionElement();

const el = document.querySelector("blinn-motion")!;
el.doc = doc;
el.renderer = "dom"; // or "canvas"
el.loop = true;
el.autoplay = true;

el.addEventListener("frame", (e) => {
  const { time, fraction } = (e as CustomEvent).detail;
});

<blinn-motion></blinn-motion>

Set sideEffects: true is already declared on the package so bundlers keep registration. Prefer an explicit defineBlinnMotionElement() in your entry so tree-shaking never drops the element definition.

Properties

Property	Type	Default
`doc`	`MotionDoc`	required
`renderer`	`"dom" \| "canvas"`	`"dom"`
`loop`	`boolean`	`true`
`autoplay`	`boolean`	`true`
`rate`	`number`	`1`
`progress`	`number \| undefined`	controlled 0…1

Methods

Same as other adapters: play, pause, stop, toggle, seek, seekFraction, setProgress, setRate.

Events

Event	Detail
`frame`	`{ time, fraction }` (bubbles, composed)

Pure mount

import { attachBlinnMotion } from "@blinn-motion/lit";
attachBlinnMotion(host, { doc, renderer: "canvas" });

Examples

examples/lit
examples/astro (Lit island)

​Install

​Register + play

​Properties

​Methods

​Events

​Pure mount

​Examples

Install

Register + play

Properties

Methods

Events

Pure mount

Examples