DOM adapter

@blinn-motion/dom builds nested DOM layers and plays a MotionDoc using @blinn-motion/core’s render math. It’s the fidelity reference: transforms, gradients, SVG vector paths with arrowheads, clip-path polygons & stars, masks, and procedural shaders.

Install

npm i @blinn-motion/dom

Create a player

import { create } from "@blinn-motion/dom";
import doc from "./card.motion.json";

const player = create(
  document.getElementById("stage")!,  // host element
  doc,                                 // a MotionDoc
  { loop: true, autoplay: true }       // options
);

create(container, doc, opts) returns a DomPlayer. It mounts a sized stage inside your container and starts the shared clock.

Options

boolean

default:"false"

Restart from the beginning when the timeline ends.

boolean

default:"false"

Begin playing as soon as the player mounts.

number

default:"1"

Playback speed multiplier — 0.5 is half speed, 2 is double.

(t: number, fraction: number) => void

Called every frame with the current time (seconds) and progress (0..1). Use it to drive a scrubber or a timecode readout.

Control playback

player.play();
player.pause();
player.toggle();

player.seek(0.8);          // seconds
player.seekFraction(0.5);  // 0..1 of the duration

player.loop = false;       // get/set looping at runtime

Building a scrubber? Pass an onframe callback to keep your slider in sync, and call seekFraction on input. See Controlling playback.

Adapters overview Canvas adapter

Get started

Core concepts

Adapters

Guides

Reference

Install

Create a player

Options

Control playback

​Install

​Create a player

​Options

​Control playback

Install

Create a player

Options

Control playback