Controlling playback

const player = create(stage, doc, { autoplay: false });

player.play();
player.pause();
player.toggle();   // flip whichever state you're in

player.seek(0.8);          // jump to 0.8 seconds
player.seekFraction(0.5);  // jump to the middle (0..1 of duration)
player.setProgress(0.5);   // same as seekFraction — progress semantics

import { scrollProgress, viewportProgress, sample, progressToTime } from "@blinn-motion/core";

// Scroll container
window.addEventListener("scroll", () => {
  player.pause();
  player.setProgress(scrollProgress(document.documentElement));
}, { passive: true });

// Or sample yourself — no player needed
const tree = sample(doc, progressToTime(doc.duration, p));

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

// When `progress` is set, autoplay is forced off
<BlinnMotion doc={doc} progress={scrollP} />

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

// Just the resolved tree — paint it yourself
const tree = useMotionProgress(doc, scrollP);

const player = create(stage, doc, { loop: true });

player.loop = false;  // stop looping at runtime
player.loop = true;   // resume looping

create(stage, doc, { rate: 0.5 }); // half speed
create(stage, doc, { rate: 2 });   // double speed

const player = create(stage, doc, {
  loop: true,
  autoplay: true,
  onframe: (t, fraction) => {
    if (!dragging) slider.value = String(fraction);
    timecode.textContent = t.toFixed(2) + "s";
  },
});

let dragging = false;
slider.addEventListener("pointerdown", () => { dragging = true; player.pause(); });
slider.addEventListener("pointerup",   () => { dragging = false; });
slider.addEventListener("input", () => player.seekFraction(Number(slider.value)));