paper-motion 0.1.0 → 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

@@ -2,7 +2,8 @@
 // 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.
-import { ease, clamp, progress, rng } from './index.js';
+// 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 = {
@@ -25,150 +26,69 @@ export const MOVES = {
   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',
 };
 
-const E = (p, curve = ease.inOutCubic) => curve(clamp(p));
-
-// ── transitions: (a, b, p, options) ─────────────────────────────
-
-export function cut(a, b, p) { a.style.opacity = p < 1 ? 1 : 0; b.style.opacity = p < 1 ? 0 : 1; }
-
-export function crossfade(a, b, p, { curve } = {}) {
-  const q = E(p, curve);
-  a.style.opacity = 1 - q; b.style.opacity = q;
-}
-
-/** 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;
-}
-
-/** B pushes A out; `dir` is where A leaves to. */
-export function push(a, b, p, { dir = 'left', curve = ease.inOutQuart } = {}) {
-  const q = E(p, curve);
-  const horiz = dir === 'left' || dir === 'right';
-  const size = horiz ? (a.offsetWidth || b.offsetWidth) : (a.offsetHeight || b.offsetHeight);
-  const s = dir === 'left' || dir === 'up' ? -1 : 1;
-  const ax = q * size * s, bx = (q - 1) * size * s;
-  a.style.transform = horiz ? `translateX(${ax}px)` : `translateY(${ax}px)`;
-  b.style.transform = horiz ? `translateX(${bx}px)` : `translateY(${bx}px)`;
-  a.style.opacity = 1; b.style.opacity = 1;
-}
-
-/** B is revealed from an edge (`from`: bottom, top, left, right) behind a hard mask. */
-export function maskReveal(a, b, p, { from = 'bottom', curve = ease.outExpo } = {}) {
-  const r = (1 - E(p, curve)) * 100;
-  const inset = { bottom: `${r}% 0 0 0`, top: `0 0 ${r}% 0`, left: `0 ${r}% 0 0`, right: `0 0 0 ${r}%` }[from];
-  b.style.clipPath = `inset(${inset})`; b.style.opacity = 1;
-  if (a) a.style.opacity = p >= 1 ? 0 : 1;
-}
-
-/** B draws in from the top under a scan line element (`line`, absolutely positioned inside B's parent). */
-export function scanReveal(a, b, p, { line, curve = ease.linear } = {}) {
-  const q = E(p, curve);
-  b.style.clipPath = `inset(0 0 ${(1 - q) * 100}% 0)`; b.style.opacity = 1;
-  if (line) { line.style.top = `${b.offsetTop + q * b.offsetHeight}px`; line.style.opacity = q > 0 && q < 1 ? 1 : 0; }
-  if (a) a.style.opacity = p >= 1 ? 0 : 1;
-}
-
-/** 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);
-}
-
-// ── text: (el, t, options) ──────────────────────────────────────
-
-/**
- * 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;
-}
-
-const words = (el) => {
-  if (!el._pmWords) {
-    // keep <br> line breaks: split each text run into words, leave the breaks where they were
-    const parts = [...el.childNodes].flatMap((n) => (n.nodeName === 'BR' ? ['\n'] : (n.textContent ?? '').split(/(\s+)/)));
-    el.textContent = '';
-    el._pmWords = parts.map((w) => {
-      if (w === '\n') { el.append(document.createElement('br')); return null; }
-      if (!w) return null;
-      if (/^\s+$/.test(w)) { el.append(w); return null; }
-      const outer = Object.assign(document.createElement('span'), { style: 'display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.08em;margin-bottom:-0.08em' });
-      const inner = Object.assign(document.createElement('span'), { textContent: w, style: 'display:inline-block' });
-      outer.append(inner); el.append(outer);
-      return inner;
-    }).filter(Boolean);
-  }
-  return el._pmWords;
-};
-
-/** 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}%)`;
-  });
-}
-
-/** Text comes into focus from a blur. */
-export function blurIn(el, t, { start = 0, duration = 0.8, blur = 14, curve = ease.outCubic } = {}) {
-  const q = curve(progress(t, start, start + duration));
-  el.style.filter = `blur(${(1 - q) * blur}px)`; el.style.opacity = q;
-}
-
-/** 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);
-}
-
-// ── camera ──────────────────────────────────────────────────────
-
-/** A slow constant push-in over `duration` seconds (default: the whole scene). */
-export function drift(el, t, { amount = 0.04, duration = 10, origin = '50% 50%' } = {}) {
-  el.style.transformOrigin = origin;
-  el.style.transform = `scale(${1 + amount * clamp(t / duration)})`;
-}
+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/templates/move-demo/scene.html

@@ -23,7 +23,7 @@ import { scene, ease, clamp } from 'paper-motion';
 import * as M from 'paper-motion/moves';
 
 // The four choices this demo shows. `pamo new <name> --move … --pace … --text … --camera …` sets them.
-const MOVE = 'crossfade'; // transition between frames: cut crossfade wipe push maskReveal scanReveal zoomThrough
+const MOVE = 'crossfade'; // transition between frames: cut crossfade wipe push maskReveal scanReveal zoomThrough whip cells slices iris glitch flip3D flash
 const PACE = 'medium';    // calm | medium | fast
 const TEXT = 'plain';     // how the line appears: typing | rise | blur | track | plain
 const CAMERA = 'still';   // still | drift | travel (travel moves the camera between frames and replaces MOVE)
@@ -105,9 +105,10 @@ s.update((t) => {
     if (k < 0) beats[0].el.style.opacity = 1;
     else {
       const a = beats[k].el, b = beats[k + 1].el;
-      ({ cut: () => M.cut(a, b, p >= 0.5 ? 1 : 0), crossfade: () => M.crossfade(a, b, p), wipe: () => M.wipe(a, b, p),
+      (({ cut: () => M.cut(a, b, p >= 0.5 ? 1 : 0), crossfade: () => M.crossfade(a, b, p), wipe: () => M.wipe(a, b, p),
          push: () => M.push(a, b, p), maskReveal: () => M.maskReveal(a, b, p), scanReveal: () => M.scanReveal(a, b, p),
-         zoomThrough: () => M.zoomThrough(a, b, p, { origin: beats[k].kind === 'name' ? '30% 50%' : '50% 50%' }) })[MOVE]?.();
+         zoomThrough: () => M.zoomThrough(a, b, p, { origin: beats[k].kind === 'name' ? '30% 50%' : '50% 50%' }) })[MOVE]
+        ?? (() => M[MOVE]?.(a, b, p)))(); // any other transition in the library: whip, cells, slices, iris, glitch, flip3D, flash
     }
   }
   // the line appears as its frame lands