@blinn-motion/svelte

Svelte adapter for Blinn Motion — idiomatic use:blinnMotion action plus a pure attach helper. Same MotionDoc engine as every other adapter.

Works with Svelte 4 and 5.

Install

npm install @blinn-motion/svelte
# peer: svelte

Quick start

<script lang="ts">
  import { blinnMotion } from "@blinn-motion/svelte";
  import doc from "./card.motion.json";
</script>

<div
  use:blinnMotion={{
    doc,
    renderer: "dom",
    loop: true,
    autoplay: true,
  }}
  style="width:375px;height:600px"
></div>

Live demo

svelte.blinnmotion.com

Action params

type BlinnMotionActionParams = {
  doc: MotionDoc;
  renderer?: "dom" | "canvas"; // default "dom"
  loop?: boolean;
  autoplay?: boolean;
  rate?: number;
  /** Controlled 0…1 — disables clock autoplay while set */
  progress?: number;
  onFrame?: (time: number, fraction: number) => void;
};

Update params reactively; the action remounts/updates as needed.

Controlled progress

<script>
  import { blinnMotion } from "@blinn-motion/svelte";
  import doc from "./card.motion.json";
  let progress = $state(0);
</script>

<div use:blinnMotion={{ doc, progress }} style="width:375px;height:600px"></div>
<input type="range" min="0" max="1" step="0.001" bind:value={progress} />

Imperative handle

<script lang="ts">
  import { blinnMotion, getBlinnHandle } from "@blinn-motion/svelte";
  import doc from "./card.motion.json";

  let el: HTMLDivElement;

  function play() {
    getBlinnHandle(el)?.play();
  }
</script>

<div bind:this={el} use:blinnMotion={{ doc, autoplay: false }}></div>
<button on:click={play}>Play</button>

Handle: play · pause · stop · toggle · seek · seekFraction · setProgress · setRate

attachBlinnMotion

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

const attached = attachBlinnMotion(node, { doc, renderer: "canvas" });
attached.setControlledProgress(0.4);
attached.dispose();

Docs

• Svelte adapter
• Playback
• GitHub

License

MIT © Blinn Motion