paper-motion 0.0.0-stage → 0.2.0

package/runtime/moves/track-in.js

@@ -0,0 +1,7 @@
+import { ease, progress } from '../core.js';
+
+/** Letters settle from wide spacing (`from`, em) to `to`. */
+export function trackIn(el, t, { start = 0, duration = 1.0, from = 0.4, to = 0, curve = ease.outExpo } = {}) {
+  const q = curve(progress(t, start, start + duration));
+  el.style.letterSpacing = `${from + (to - from) * q}em`; el.style.opacity = Math.min(1, q * 2);
+}

package/runtime/moves/type-on.js

@@ -0,0 +1,41 @@
+import { clamp, rng } from '../core.js';
+
+/**
+ * When each character of `text` appears, typed by a person: quick bursts inside words, a beat after spaces,
+ * longer after punctuation, the odd hesitation. Deterministic per seed. Use the same times for the text
+ * (typeOn's `times`) and the sound (keySounds), so every letter lands on its keystroke.
+ * @returns {number[]} times in seconds, one per character
+ */
+export function typingTimes(text, { start = 0, cps = 11, seed = 1 } = {}) {
+  const r = rng(seed).next, base = 1 / cps, out = [];
+  let t = start;
+  for (let i = 0; i < text.length; i++) {
+    const prev = text[i - 1] ?? '', ch = text[i];
+    let k = 0.7 + 0.45 * r();                             // inside a word: fast, uneven
+    if (prev === ' ') k = 1.35 + 0.5 * r();               // starting a new word
+    if (/[.,;:!?]/.test(prev)) k = 2.2 + 1.2 * r();       // after punctuation
+    if (/[\/\-_@]/.test(ch) || /[\/\-_@]/.test(prev)) k *= 1.25; // symbols need a reach
+    if (r() < 0.04) k *= 2.4;                             // a hesitation
+    t += i === 0 ? 0 : base * k;
+    out.push(t);
+  }
+  return out;
+}
+
+/** Schedules one keystroke sound per character at `times` (from typingTimes), plus an optional enter. */
+export function keySounds(s, text, times, { bank, style, gain = 0.16, seed = 1, enter = null, pan = 0.04 } = {}) {
+  [...text].forEach((ch, i) => s.sfx(times[i], 'key', { kind: ch === ' ' ? 'space' : 'letter', gain, seed: seed * 1000 + i, pan: ((i % 5) - 2) * pan, ...(bank ? { bank } : {}), ...(style ? { style } : {}) }));
+  if (enter !== null) s.sfx(enter, 'key', { kind: 'enter', gain: gain * 1.1, seed: seed * 1000 + 999, ...(bank ? { bank } : {}), ...(style ? { style } : {}) });
+}
+
+/** Types `text` from `start` at `cps` characters a second, or at explicit `times` (typingTimes); `cursor` (an element) is solid while typing, blinks at `blink` Hz after. */
+export function typeOn(el, text, t, { start = 0, cps = 35, times = null, cursor = null, blink = 2.2 } = {}) {
+  if (times) start = times[0] ?? start;
+  const n = times ? times.filter((x) => x <= t).length : clamp(Math.floor((t - start) * cps), 0, text.length);
+  el.textContent = text.slice(0, n);
+  if (cursor) {
+    const typing = t >= start && (n < text.length || (times && t - times[times.length - 1] < 0.25));
+    cursor.style.opacity = t < start ? 0 : typing || Math.floor((t - start) * blink * 2) % 2 === 0 ? 1 : 0;
+  }
+  return n;
+}

package/runtime/moves/unfold.js

@@ -0,0 +1,20 @@
+import { ease, clamp, lerp, progress } from '../core.js';
+import { dims, items, show, sp, settle, blur, layer, hide, resetAll } from '../kit.js';
+
+/** A's items leave, A folds into a glowing line, a glint runs along it, and B unfolds out of the line with overshoot as its items rise from it. */
+export function unfold(a, b, p, { duration = 1.2, radius = 14 } = {}) {
+  const slot = a.parentElement, [w, h] = dims(a);
+  if (p <= 0 || p >= 1) { hide(slot, 'ufLine'); resetAll(a, b, ...items(a), ...items(b)); show(a, b, p); return; }
+  items(a).forEach((c, i) => { const l = progress(p, i * 0.03, i * 0.03 + 0.22); c.style.transform = `translateY(${-30 * ease.inCubic(l)}px)`; c.style.opacity = 1 - l; c.style.filter = blur(10 * l); });
+  const f = ease.inOutCubic(progress(p, 0.16, 0.42)), ins = (h / 2 - 1.5) * f;
+  a.style.clipPath = `inset(${ins}px 0 ${ins}px 0 round ${lerp(radius, 2, f)}px)`;
+  a.style.opacity = p < 0.44 ? 1 : 0;
+  const lp = progress(p, 0.36, 0.64), breathe = Math.sin(Math.PI * lp), g = ease.inOutCubic(lp) * 120 - 10;
+  layer(slot, 'ufLine', `display:${lp > 0 && lp < 1 ? 'block' : 'none'};left:${(w - w * (1 + 0.08 * breathe)) / 2}px;width:${w * (1 + 0.08 * breathe)}px;top:${h / 2 - 1.5}px;height:3px;z-index:4;border-radius:2px;`
+    + `background:linear-gradient(90deg,rgba(255,255,255,.35) ${g - 14}%,#fff ${g}%,rgba(255,255,255,.35) ${g + 14}%);box-shadow:0 0 ${18 * breathe}px rgba(255,255,255,${0.6 * breathe})`);
+  const u = settle(sp(p, 0.5, duration, { stiffness: 230, damping: 16 }), p), bi = Math.max(0, (h / 2 - 1.5) * (1 - u));
+  b.style.clipPath = `inset(${bi}px 0 ${bi}px 0 round ${lerp(2, radius, clamp(u))}px)`;
+  b.style.transform = `scaleY(${1 + Math.max(0, u - 1) * 0.6})`;
+  b.style.opacity = p > 0.5 ? 1 : 0;
+  items(b).forEach((c, i) => { const q = ease.outExpo(progress(p, 0.6 + i * 0.04, 0.88 + i * 0.03)); c.style.transform = `translateY(${40 * (1 - q)}px)`; c.style.opacity = q; c.style.filter = blur(8 * (1 - q)); });
+}

package/runtime/moves/whip-pan.js

@@ -0,0 +1,21 @@
+import { ease, clamp, lerp, progress } from '../core.js';
+import { dims, items, show, sp, settle, layer, hide, resetAll } from '../kit.js';
+
+/** A winds up, then whips out tilted and smeared; a light streak crosses at full speed; B whips in, overshoots and settles, its content trailing. */
+export function whipPan(a, b, p, { duration = 0.9, dir = 'left', tilt = 7, travel = 1.35 } = {}) {
+  const slot = a.parentElement, [w] = dims(a), s = dir === 'left' ? -1 : 1;
+  if (p <= 0 || p >= 1) { hide(slot, 'wpStreak'); resetAll(a, b, ...items(a), ...items(b)); show(a, b, p); return; }
+  const wind = ease.outCubic(progress(p, 0, 0.18)) * (1 - ease.inCubic(progress(p, 0.18, 0.3)));
+  const out = ease.inExpo(progress(p, 0.16, 0.5));
+  a.style.transformOrigin = '50% 70%';
+  a.style.transform = `translateX(${-s * 40 * wind + s * w * travel * out}px) rotate(${-s * 1.6 * wind + s * tilt * out}deg) skewX(${-s * 12 * out}deg) scale(${1 - 0.03 * wind})`;
+  a.style.opacity = p < 0.5 ? 1 : 0;
+  const e = settle(sp(p, 0.42, duration, { stiffness: 250, damping: 19 }), p), r = 1 - e;
+  b.style.transformOrigin = '50% 70%';
+  b.style.transform = `translateX(${-s * w * travel * r}px) rotate(${-s * tilt * r}deg) skewX(${s * 12 * clamp(r) * clamp(r)}deg)`;
+  b.style.opacity = p > 0.42 ? 1 : 0;
+  items(b).forEach((c, i) => { const ci = settle(sp(p, 0.47 + i * 0.03, duration, { stiffness: 230, damping: 17 }), p); c.style.transform = `translateX(${-s * 110 * (1 - ci)}px)`; });
+  const st = progress(p, 0.28, 0.64), so = Math.sin(Math.PI * st), sw = w * 0.45;
+  layer(slot, 'wpStreak', `display:${so > 0.01 ? 'block' : 'none'};left:${lerp(s < 0 ? w : -sw, s < 0 ? -sw : w, ease.inOutCubic(st))}px;top:-15%;width:${sw}px;height:130%;z-index:5;opacity:${0.7 * so};`
+    + `background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(${-s * 18}deg);mix-blend-mode:screen;filter:blur(16px)`);
+}

package/runtime/moves/whip.js

@@ -0,0 +1,14 @@
+import { ease, clamp } from '../core.js';
+import { size, hblur } from '../kit.js';
+
+/** B pushes A out very fast, with horizontal motion blur that follows the speed. `dir` is where A leaves to. */
+export function whip(a, b, p, { dir = 'left', blur = 70, curve = ease.inOutQuint } = {}) {
+  const q = curve(clamp(p)), v = (curve(clamp(p + 0.01)) - curve(clamp(p - 0.01))) / 0.02;
+  const [w] = size(a, b), s = dir === 'left' ? -1 : 1;
+  a.style.transform = `translateX(${q * w * s}px)`;
+  b.style.transform = `translateX(${(q - 1) * w * s}px)`;
+  const id = (a.parentElement._pmWhipId ??= `pm-whip-${Math.random().toString(36).slice(2, 8)}`); // one blur filter per stage, so two whips on a page don't share it
+  const f = v > 0.15 ? hblur(id, (blur * v) / 5) : 'none';
+  a.style.filter = f; b.style.filter = f;
+  a.style.opacity = 1; b.style.opacity = 1;
+}

package/runtime/moves/wipe.js

@@ -0,0 +1,9 @@
+import { E } from '../kit.js';
+
+/** B is uncovered by a soft edge at `angle` degrees; A stays underneath. */
+export function wipe(a, b, p, { angle = 100, soft = 30, curve } = {}) {
+  const w = E(p, curve) * (100 + soft) - soft;
+  const m = `linear-gradient(${angle}deg, #000 ${w}%, transparent ${w + soft}%)`;
+  b.style.opacity = 1; b.style.maskImage = m; b.style.webkitMaskImage = m;
+  if (a) a.style.opacity = p >= 1 ? 0 : 1;
+}

package/runtime/moves/word-rise.js

@@ -0,0 +1,10 @@
+import { ease, progress } from '../core.js';
+import { words } from '../kit.js';
+
+/** Words rise one by one from behind a mask line. */
+export function wordRise(el, t, { start = 0, each = 0.08, duration = 0.5, curve = ease.outExpo } = {}) {
+  words(el).forEach((w, i) => {
+    const q = curve(progress(t, start + i * each, start + i * each + duration));
+    w.style.transform = `translateY(${(1 - q) * 110}%)`;
+  });
+}

package/runtime/moves/zoom-through.js

@@ -0,0 +1,13 @@
+import { ease, clamp } from '../core.js';
+import { E } from '../kit.js';
+
+/** The camera dives through A (scaling past the lens) and lands on B. */
+/** `origin` is where the camera dives in (put it on the subject, e.g. '30% 50%'). B lands from slightly larger, so no edge shows. */
+export function zoomThrough(a, b, p, { scale = 6, origin = '50% 50%', curve = ease.inOutCubic } = {}) {
+  const q = E(p, curve);
+  a.style.transformOrigin = origin;
+  a.style.transform = `scale(${1 + (scale - 1) * Math.pow(q, 2)})`;
+  a.style.opacity = 1 - clamp((q - 0.55) / 0.3);
+  b.style.transform = `scale(${1.12 - 0.12 * q})`;
+  b.style.opacity = clamp((q - 0.45) / 0.35);
+}

package/runtime/moves.js

@@ -0,0 +1,94 @@
+// paper-motion moves: named, reusable pieces of motion. Each is a pure function of time or progress
+// that sets styles on elements, so it can be called from s.update() and stays frame-exact.
+//   import { wipe, typeOn, PACE } from 'paper-motion/moves';
+// Transitions take progress p (0 → 1); text and camera moves take scene time t.
+// Each move lives in its own file under moves/ (the registry copies them into projects with `pamo add`);
+// shared helpers are in kit.js (paper-motion/kit).
+
+/** Timing per pace: transition length, hold between beats, stagger between items (seconds). */
+export const PACE = {
+  calm: { enter: 1.0, hold: 2.6, stagger: 0.12 },
+  medium: { enter: 0.5, hold: 1.6, stagger: 0.08 },
+  fast: { enter: 0.25, hold: 0.8, stagger: 0.05 },
+};
+
+/** Every move by name, with what it does, so skills can list and demo them. */
+export const MOVES = {
+  cut: 'hard cut from A to B, on the beat',
+  crossfade: 'A dissolves into B',
+  wipe: 'a soft diagonal edge uncovers B',
+  push: 'B pushes A out of frame',
+  maskReveal: 'B is revealed from one edge, behind a hard mask line',
+  scanReveal: 'B draws in under a moving scan line',
+  zoomThrough: 'the camera dives through A and lands on B',
+  typeOn: 'text types itself, terminal style, with a block cursor',
+  wordRise: 'words rise one by one from behind a mask line',
+  blurIn: 'text comes into focus from a blur',
+  trackIn: 'letters settle from wide spacing to their tracking',
+  drift: 'a slow, constant push-in that keeps a still frame alive',
+  scramble: 'letters cycle through random glyphs and lock into place, left to right',
+  popIn: 'letters pop up one by one on a spring, with a little overshoot',
+  flipIn: 'letters flip up into place in 3D, one after another',
+  roll: 'the last word rolls like a slot machine through a list of words',
+  odometer: 'a number counts up with rolling digit wheels, like an odometer',
+  barReveal: 'a solid bar sweeps across and leaves the line behind it',
+  whip: 'a fast push with horizontal motion blur',
+  cells: 'B appears through a grid of squares that grow in a diagonal wave',
+  slices: 'B comes in as horizontal strips from alternating sides',
+  iris: 'B opens from a circle that grows out of a point',
+  glitch: 'a few frames of torn bands and RGB split, then B',
+  flip3D: 'the frame flips over like a card and shows B on the back',
+  shake: 'a camera shake on each hit that dies out fast',
+  punch: 'the frame punches in on each hit and springs back',
+  orbit: 'a 3D camera moves around layers set at different depths',
+  rgbSplit: 'red and cyan fringes burst out on each hit and fade',
+  flash: 'an overexposed white flash hides the cut from A to B',
+  drawOn: 'lines and shapes draw themselves stroke by stroke',
+  magicMove: 'each part of A flies on its own spring into the matching part of B; text cross-blurs; the box reshapes',
+  whipPan: 'A winds up, whips out tilted and smeared under a light streak; B whips in, overshoots, its content trails',
+  diveIn: 'the camera dives into a detail of A; B opens inside it, a ring breaks outward, B\'s parts rise into focus',
+  flipLift: 'A lifts toward the camera, flips with a wobble and a sheen, lands as B with an echo; B\'s parts pop in',
+  squashDrop: 'A squashes, launches up stretched; B falls in, squashes on impact, wobbles; its content follows through',
+  snapScroll: 'a vertical reel of cards scrolls past in 3D and snaps onto B; neighbours dim and tilt away',
+  unfold: 'A\'s items leave, A folds into a glowing line, B unfolds out of the line with overshoot, items rise from it',
+  tileSwirl: 'A breaks into tiles that lift and swirl in a wave, flipping over in flight to land as B',
+};
+
+export { cut } from './moves/cut.js';
+export { crossfade } from './moves/crossfade.js';
+export { wipe } from './moves/wipe.js';
+export { push } from './moves/push.js';
+export { maskReveal } from './moves/mask-reveal.js';
+export { scanReveal } from './moves/scan-reveal.js';
+export { zoomThrough } from './moves/zoom-through.js';
+export { typingTimes, keySounds, typeOn } from './moves/type-on.js';
+export { wordRise } from './moves/word-rise.js';
+export { blurIn } from './moves/blur-in.js';
+export { trackIn } from './moves/track-in.js';
+export { drift } from './moves/drift.js';
+export { scramble } from './moves/scramble.js';
+export { popIn } from './moves/pop-in.js';
+export { flipIn } from './moves/flip-in.js';
+export { roll } from './moves/roll.js';
+export { odometer } from './moves/odometer.js';
+export { barReveal } from './moves/bar-reveal.js';
+export { whip } from './moves/whip.js';
+export { cells } from './moves/cells.js';
+export { slices } from './moves/slices.js';
+export { iris } from './moves/iris.js';
+export { glitch } from './moves/glitch.js';
+export { flip3D } from './moves/flip-3d.js';
+export { flash } from './moves/flash.js';
+export { shake } from './moves/shake.js';
+export { punch } from './moves/punch.js';
+export { orbit } from './moves/orbit.js';
+export { rgbSplit } from './moves/rgb-split.js';
+export { drawOn } from './moves/draw-on.js';
+export { magicMove } from './moves/magic-move.js';
+export { whipPan } from './moves/whip-pan.js';
+export { diveIn } from './moves/dive-in.js';
+export { flipLift } from './moves/flip-lift.js';
+export { squashDrop } from './moves/squash-drop.js';
+export { snapScroll } from './moves/snap-scroll.js';
+export { unfold } from './moves/unfold.js';
+export { tileSwirl } from './moves/tile-swirl.js';

package/runtime/player.js

@@ -0,0 +1,69 @@
+// Preview player: real-time playback, scrubbing and frame stepping.
+// Only mounted in preview (never in renders).
+//   space play/pause · ←/→ one frame · shift+←/→ one second · home start · L loop · H hide UI
+
+export function mountPlayer(scene, startT = 0) {
+  const { stage, duration, fps } = scene;
+  let t = startT, playing = true, loop = true, last = performance.now(), busy = false;
+
+  const bar = document.createElement('div');
+  bar.innerHTML = `
+    <button data-a="play" title="space">❚❚</button>
+    <input type="range" min="0" max="${duration}" step="${1 / fps}" value="${t}">
+    <span class="pm-time"></span>
+    <button data-a="loop" title="L">loop</button>`;
+  bar.style.cssText = `position:fixed;left:0;right:0;bottom:0;height:44px;display:flex;gap:12px;align-items:center;
+    padding:0 16px;background:#0d0d0dee;color:#ddd;font:12px/1 ui-monospace,Menlo,monospace;z-index:99999;
+    border-top:1px solid #222;box-sizing:border-box`;
+  const css = document.createElement('style');
+  css.textContent = `.pm-bar button{background:#1c1c1c;color:#ddd;border:1px solid #333;border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
+    .pm-bar button.on{background:#ddd;color:#111}.pm-bar input{flex:1;accent-color:#ddd}.pm-time{min-width:150px;text-align:right}`;
+  bar.className = 'pm-bar';
+  document.head.appendChild(css);
+  document.body.appendChild(bar);
+  const [playBtn, , loopBtn] = bar.querySelectorAll('button, input');
+  const range = bar.querySelector('input');
+  const label = bar.querySelector('.pm-time');
+  loopBtn.classList.toggle('on', loop);
+
+  function fit() {
+    const avail = { w: innerWidth, h: innerHeight - (bar.style.display === 'none' ? 0 : 44) };
+    const s = Math.min(avail.w / scene.width, avail.h / scene.height, 1);
+    stage.style.transform = `translate(${(avail.w - scene.width * s) / 2}px, ${(avail.h - scene.height * s) / 2}px) scale(${s})`;
+  }
+  addEventListener('resize', fit); fit();
+
+  async function show(nt) {
+    t = Math.max(0, Math.min(duration, nt));
+    range.value = t;
+    label.textContent = `${t.toFixed(2)}s · f${String(Math.round(t * fps)).padStart(4, '0')} / ${Math.round(duration * fps)}`;
+    try { sessionStorage.setItem(`pm:t:${location.pathname}`, String(t)); } catch { /* storage blocked */ }
+    busy = true; await scene.seek(t); busy = false;
+  }
+  function setPlaying(p) { playing = p; playBtn.textContent = p ? '❚❚' : '▶'; last = performance.now(); }
+
+  function tick(now) {
+    if (playing && !busy) {
+      let nt = t + (now - last) / 1000;
+      if (nt >= duration) { if (loop) nt %= duration; else { nt = duration; setPlaying(false); } }
+      show(nt);
+    }
+    last = now;
+    requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+
+  playBtn.onclick = () => setPlaying(!playing);
+  loopBtn.onclick = () => { loop = !loop; loopBtn.classList.toggle('on', loop); };
+  range.oninput = () => { setPlaying(false); show(Number(range.value)); };
+  addEventListener('keydown', (e) => {
+    const step = e.shiftKey ? 1 : 1 / fps;
+    if (e.code === 'Space') { e.preventDefault(); setPlaying(!playing); }
+    else if (e.key === 'ArrowRight') { setPlaying(false); show(t + step); }
+    else if (e.key === 'ArrowLeft') { setPlaying(false); show(t - step); }
+    else if (e.key === 'Home') { show(0); }
+    else if (e.key.toLowerCase() === 'l') loopBtn.click();
+    else if (e.key.toLowerCase() === 'h') { bar.style.display = bar.style.display === 'none' ? 'flex' : 'none'; fit(); }
+  });
+  show(t);
+}

package/runtime/react-shim.js

@@ -0,0 +1,15 @@
+// Minimal stand-in for React so the official @paper-design/shaders-react
+// components can be called as plain functions. Calling a component returns
+// the props it would hand to <ShaderMount> (fragmentShader, uniforms, ...),
+// which paper-motion then mounts with the vanilla ShaderMount.
+const identity = (fn) => fn;
+export const memo = identity;
+export const forwardRef = identity;
+export const useState = (init) => [typeof init === 'function' ? init() : init, () => {}];
+export const useRef = (v = null) => ({ current: v });
+export const useEffect = () => {};
+export const useLayoutEffect = () => {};
+export const useMemo = (fn) => fn();
+export const useCallback = (fn) => fn;
+export const createElement = (type, props) => ({ type, props: props ?? {} });
+export default { memo, forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, createElement };

package/templates/blank/brief.md

@@ -0,0 +1,39 @@
+# Brief — <title>
+Status: draft | approved by <user> on <date>
+
+## Purpose
+Where it lives · who watches · what should happen after watching.
+
+## Feeling
+Three words. One sentence of intent.
+
+## References
+- <link> — what we take from it: …
+- <image> — what we take from it: …
+
+## Anti-references (never)
+- …
+
+## Content
+Exact text / none · must be read? · hero moment.
+
+## Format
+Aspect · duration · fps · loop · deliverables · safe areas.
+
+## Structure and pace
+Continuous / cuts / chapters · pace (cut every N s) · sync (music/VO/none) · opening · ending.
+
+## Look
+Palette · background · type (family, weights, sizes) · composition · texture · 2D/3D.
+
+## Motion
+Movement character · easing · transitions · camera · motion blur.
+
+## Sound
+Music / sfx (character) / VO / silent.
+
+## Done when
+The user's own words.
+
+## Open questions
+- …

package/templates/blank/scene.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>untitled</title>
+<style>
+  /* Everything lives inside #stage, sized by the scene config. */
+  #stage { font-family: ui-sans-serif, system-ui, sans-serif; color: #f2efe9; }
+  .layer { position: absolute; inset: 0; }
+</style>
+</head>
+<body>
+<main id="stage">
+  <div id="field" class="layer"></div>
+</main>
+
+<script type="module">
+  import { scene, progress, keys, ease, osc, noise, rng } from 'paper-motion';
+
+  // The whole piece is a pure function of t (seconds). No Date.now(), no Math.random(),
+  // no setTimeout: use rng(seed) / noise() and derive every value from t.
+  const s = scene({ width: 1920, height: 1080, fps: 30, duration: 10, background: '#0e0e0e' });
+
+  // Any Paper shader by name, with the same props as its React component.
+  // `paper-motion shaders` lists them all with defaults and presets.
+  const field = s.shader('#field', 'GrainGradient', {
+    colorBack: '#0e0e0e',
+    colors: ['#3b3a36', '#8c7e6a', '#e8e1d4'],
+    softness: 0.7, intensity: 0.15, noise: 0.35,
+    shape: 'blob', speed: 0.6,
+  });
+  // For a seamless loop of a diffuse field (mesh gradients, grain, noise), pass
+  // { loop: 2 } as 4th arg: it crossfades the last 2s into the first frame.
+  // Avoid it for crisp figures (blobs, shapes): they ghost during the crossfade.
+
+  s.update((t) => {
+    // Animate shader params over time, e.g.:
+    // field.set({ intensity: keys(t, [[0, 0.1], [5, 0.4, ease.inOutSine], [10, 0.1, ease.inOutSine]]) });
+  });
+
+  await s.start();
+</script>
+</body>
+</html>