npm - paper-motion - Versions diffs - 0.0.0-stage → 0.2.0 - Mend

paper-motion 0.0.0-stage → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/README.md +59 -2
package/bin/pamo.mjs +664 -0
package/examples/breath/brief.md +11 -0
package/examples/breath/poster.jpg +0 -0
package/examples/breath/scene.html +59 -0
package/examples/chrome-endcard/brief.md +7 -0
package/examples/chrome-endcard/fonts/GeistMono-Variable.woff2 +0 -0
package/examples/chrome-endcard/fonts/GeistSerif-Regular.woff2 +0 -0
package/examples/chrome-endcard/poster.jpg +0 -0
package/examples/chrome-endcard/scene.html +68 -0
package/examples/chrome-endcard/wordmark.js +16 -0
package/examples/halo-explainer/audio/script.txt +8 -0
package/examples/halo-explainer/audio/words.json +554 -0
package/examples/halo-explainer/brand/IDENTITY.md +24 -0
package/examples/halo-explainer/brand/decisions/2026-11-08-type.md +5 -0
package/examples/halo-explainer/brand/motion.json +9 -0
package/examples/halo-explainer/brand/shader-set/set.json +104 -0
package/examples/halo-explainer/brand/sound.json +33 -0
package/examples/halo-explainer/brand/tokens.json +97 -0
package/examples/halo-explainer/brief.md +34 -0
package/examples/halo-explainer/poster.jpg +0 -0
package/examples/halo-explainer/scene.html +372 -0
package/examples/install-loop/brief.md +7 -0
package/examples/install-loop/fonts/GeistMono-Variable.woff2 +0 -0
package/examples/install-loop/fonts/GeistSerif-Regular.woff2 +0 -0
package/examples/install-loop/poster.jpg +0 -0
package/examples/install-loop/scene.html +46 -0
package/examples/orbit-keynote/audio/script.txt +7 -0
package/examples/orbit-keynote/audio/words.json +494 -0
package/examples/orbit-keynote/brand/IDENTITY.md +25 -0
package/examples/orbit-keynote/brand/decisions/2026-11-08-look.md +6 -0
package/examples/orbit-keynote/brand/decisions/2026-11-08-voice.md +3 -0
package/examples/orbit-keynote/brand/motion.json +9 -0
package/examples/orbit-keynote/brand/shader-set/set.json +45 -0
package/examples/orbit-keynote/brand/sound.json +45 -0
package/examples/orbit-keynote/brand/tokens.json +106 -0
package/examples/orbit-keynote/brief.md +25 -0
package/examples/orbit-keynote/poster.jpg +0 -0
package/examples/orbit-keynote/scene.html +323 -0
package/examples/signal/brief.md +10 -0
package/examples/signal/poster.jpg +0 -0
package/examples/signal/scene.html +50 -0
package/lib/board.mjs +95 -0
package/lib/browser.mjs +88 -0
package/lib/catalog.mjs +77 -0
package/lib/customize.mjs +162 -0
package/lib/keys.mjs +93 -0
package/lib/live-board.js +128 -0
package/lib/modules.mjs +23 -0
package/lib/react-hooks.mjs +9 -0
package/lib/registry.mjs +344 -0
package/lib/render.mjs +193 -0
package/lib/server.mjs +89 -0
package/lib/sfx.mjs +287 -0
package/lib/shaderset.mjs +65 -0
package/lib/wordmark.mjs +64 -0
package/package.json +46 -4
package/runtime/brand.js +71 -0
package/runtime/core.js +269 -0
package/runtime/index.js +349 -0
package/runtime/jsx-shim.js +3 -0
package/runtime/kit.js +98 -0
package/runtime/moves/bar-reveal.js +19 -0
package/runtime/moves/blur-in.js +7 -0
package/runtime/moves/cells.js +17 -0
package/runtime/moves/crossfade.js +6 -0
package/runtime/moves/cut.js +3 -0
package/runtime/moves/dive-in.js +21 -0
package/runtime/moves/draw-on.js +12 -0
package/runtime/moves/drift.js +7 -0
package/runtime/moves/flash.js +15 -0
package/runtime/moves/flip-3d.js +9 -0
package/runtime/moves/flip-in.js +12 -0
package/runtime/moves/flip-lift.js +24 -0
package/runtime/moves/glitch.js +16 -0
package/runtime/moves/iris.js +12 -0
package/runtime/moves/magic-move.js +49 -0
package/runtime/moves/mask-reveal.js +10 -0
package/runtime/moves/odometer.js +32 -0
package/runtime/moves/orbit.js +8 -0
package/runtime/moves/pop-in.js +12 -0
package/runtime/moves/punch.js +9 -0
package/runtime/moves/push.js +14 -0
package/runtime/moves/rgb-split.js +7 -0
package/runtime/moves/roll.js +20 -0
package/runtime/moves/scan-reveal.js +10 -0
package/runtime/moves/scramble.js +21 -0
package/runtime/moves/shake.js +15 -0
package/runtime/moves/slices.js +14 -0
package/runtime/moves/snap-scroll.js +23 -0
package/runtime/moves/squash-drop.js +21 -0
package/runtime/moves/tile-swirl.js +29 -0
package/runtime/moves/track-in.js +7 -0
package/runtime/moves/type-on.js +41 -0
package/runtime/moves/unfold.js +20 -0
package/runtime/moves/whip-pan.js +21 -0
package/runtime/moves/whip.js +14 -0
package/runtime/moves/wipe.js +9 -0
package/runtime/moves/word-rise.js +10 -0
package/runtime/moves/zoom-through.js +13 -0
package/runtime/moves.js +94 -0
package/runtime/player.js +69 -0
package/runtime/react-shim.js +15 -0
package/templates/blank/brief.md +39 -0
package/templates/blank/scene.html +44 -0
package/templates/brand-sheet/index.html +241 -0
package/templates/move-demo/brief.md +4 -0
package/templates/move-demo/scene.html +158 -0
package/templates/piece/brief.md +39 -0
package/templates/piece/scene.html +62 -0
package/templates/shader-set/shot.js +47 -0
package/templates/still/brief.md +3 -0
package/templates/still/scene.html +56 -0

package/examples/breath/brief.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Brief
+Warm, quiet 4:5 loop: a breathing field of dust-colored light and a single italic word.
+**Intent** — slow the viewer's breathing down for twelve seconds.
+**Format** — 1080×1350 · 30fps · 12s · seamless loop · social feed / screen.
+**Palette** — near-black umber ground `#1b1a17`, clay `#3d3328`, sand `#a8927a`, bone `#e9dccb`.
+**Material** — MeshGradient with grain (mixer + overlay) so it reads like film, not like a UI gradient.
+**Type** — one word, italic old-style serif, wide tracking; a tiny mono footnote.
+**Motion** — one oscillation of scale per loop (period = duration). Letters arrive with blur→focus, leave in reverse order.
+**Structure** — 0–1s field only · 1.2–3s word arrives · 4–8s hold · 8.2–10s word leaves · 10–12s field returns to frame 0.

package/examples/breath/poster.jpg ADDED Viewed

Binary file

package/examples/breath/scene.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>breath</title>
+<style>
+  #stage { color: #f3ece2; }
+  .layer { position: absolute; inset: 0; }
+  .word {
+    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
+    text-align: center; font: 400 64px/1 "Iowan Old Style", "Palatino", Georgia, serif;
+    letter-spacing: 0.16em; text-indent: 0.16em; font-style: italic;
+    color: #e9dccb; mix-blend-mode: difference; /* stays legible over light and dark */
+  }
+  .foot {
+    position: absolute; left: 0; right: 0; bottom: 72px; text-align: center;
+    font: 500 13px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.4em; color: #e9dccb; mix-blend-mode: difference;
+  }
+</style>
+</head>
+<body>
+<main id="stage">
+  <div id="field" class="layer"></div>
+  <div class="word" id="word">breathe</div>
+  <div class="foot" id="foot">IN · OUT</div>
+</main>
+<script type="module">
+  import { scene, split, stagger, progress, keys, ease, osc } from 'paper-motion';
+  const s = scene({ width: 1080, height: 1350, fps: 30, duration: 12, background: '#1b1a17' });
+  const field = s.shader('#field', 'MeshGradient', {
+    colors: ['#1b1a17', '#3d3328', '#a8927a', '#e9dccb'],
+    distortion: 0.9, swirl: 0.12, speed: 0.22,
+    grainMixer: 0.18, grainOverlay: 0.22,
+  }, { loop: 3 });
+  const chars = split('#word', 'chars');
+  const foot = document.querySelector('#foot');
+  s.update((t) => {
+    // One slow breath per loop: period = duration keeps the loop seamless.
+    field.set({ scale: 1.15 + 0.08 * osc(t, 12, -0.25) });
+    chars.forEach((c, i) => {
+      const inP = stagger(t, i, { start: 1.2, each: 0.14, duration: 1.6, easing: ease.outCubic });
+      const outP = stagger(t, chars.length - 1 - i, { start: 8.2, each: 0.1, duration: 1.4, easing: ease.inCubic });
+      const v = inP * (1 - outP);
+      c.style.opacity = v;
+      c.style.filter = `blur(${(1 - v) * 10}px)`;
+      c.style.transform = `translateY(${(1 - inP) * 14 - outP * 10}px)`;
+    });
+    foot.style.opacity = 0.8 * keys(t, [[2.5, 0], [4, 1, ease.inOutSine], [8, 1], [9.5, 0, ease.inOutSine]]);
+  });
+  await s.start();
+</script>
+</body>
+</html>

package/examples/chrome-endcard/brief.md ADDED Viewed

@@ -0,0 +1,7 @@
+# chrome-endcard
+8 s 16:9 end card: a liquid-metal (chrome) wordmark is uncovered by a soft diagonal wipe while the metal calms down, then a tagline rises and an install command types in, with low synthesized sound.
+- 1920×1080 · 30 fps · 8 s
+- Shows: an image shader (LiquidMetal) fed a wordmark drawn on a canvas (`wordmark.js`), a CSS mask wipe, animating a shader param per frame with `layer.set()`, `s.sfx()` cues (whoosh, thud), human typing with `typingTimes()` + `keySounds()` and `s.sound()`.
+- Look: chrome on black, Geist Serif and Geist Mono.

package/examples/chrome-endcard/fonts/GeistMono-Variable.woff2 ADDED Viewed

Binary file

package/examples/chrome-endcard/fonts/GeistSerif-Regular.woff2 ADDED Viewed

Binary file

package/examples/chrome-endcard/poster.jpg ADDED Viewed

Binary file

package/examples/chrome-endcard/scene.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>chrome-endcard</title>
+<style>
+  @font-face { font-family: 'GSerif'; src: url(./fonts/GeistSerif-Regular.woff2); }
+  @font-face { font-family: 'GMono'; font-weight: 100 900; src: url(./fonts/GeistMono-Variable.woff2) format('woff2-variations'); }
+  #stage { background: #000; overflow: hidden; }
+  .abs { position: absolute; box-sizing: border-box; white-space: pre; }
+  #logo { left: 0; top: 190px; width: 1920px; height: 520px; }
+  #tag { left: 0; width: 1920px; top: 668px; text-align: center; font: 400 26px/32px GMono; color: #8a8a8a; }
+  #cmdrow { left: 0; width: 1920px; top: 762px; height: 26px; text-align: center; font: 500 21px/26px GMono; color: #e6e6e6; }
+  #cur { display: inline-block; width: 11px; height: 24px; background: #e6e6e6; vertical-align: -5px; margin-left: 2px; }
+</style>
+</head>
+<body>
+<main id="stage">
+  <div id="logo" class="abs"></div>
+  <div id="tag" class="abs">creative-directed videos for people who use coding agents</div>
+  <div id="cmdrow" class="abs"><span id="cmd"></span><span id="cur"></span></div>
+</main>
+<script type="module">
+import { scene, progress, keys, ease } from 'paper-motion';
+import { typeOn, typingTimes, keySounds } from 'paper-motion/moves';
+import { wordmark } from './wordmark.js';
+const s = scene({ width: 1920, height: 1080, fps: 30, duration: 8, background: '#000' });
+await document.fonts.load('400 26px GMono');
+const logoEl = document.querySelector('#logo');
+// Look B · chrome, approved from the looks board.
+const CHROME = { colorBack: '#000000', colorTint: '#ffffff', softness: 0.12, repetition: 5, shiftRed: 0.3, shiftBlue: 0.3, distortion: 0.14, contour: 0.6, angle: 20 };
+const metal = s.shader(logoEl, 'LiquidMetal', { image: await wordmark(), fit: 'contain', scale: 0.8, speed: 1, shape: 'none', ...CHROME });
+const tag = document.querySelector('#tag');
+const cmd = document.querySelector('#cmd'), cur = document.querySelector('#cur');
+const CMD = '$ npx skills add solanodz/paper-motion';
+// A person types the install line: bursts inside words, a beat between them; text and keys share the times.
+const TIMES = typingTimes(CMD, { start: 3.2, cps: 14, seed: 4 });
+const ENTER = TIMES[TIMES.length - 1] + 0.4;
+s.update((t) => {
+  // Entrance: a soft diagonal wipe uncovers the word while it settles from 104% and the metal calms down.
+  const w = progress(t, 0.3, 2.0, ease.outCubic) * 150 - 30;
+  const m = `linear-gradient(100deg, #000 ${w}%, transparent ${w + 30}%)`;
+  logoEl.style.maskImage = m; logoEl.style.webkitMaskImage = m;
+  logoEl.style.transform = `scale(${1.04 - 0.04 * progress(t, 0.35, 2.6, ease.outExpo)})`;
+  metal.set({ distortion: keys(t, [[0, 0.45], [2.6, 0.14, ease.outCubic]]) });
+  // Tagline rises in; the install line types, then the cursor blinks.
+  const a = progress(t, 2.3, 3.0, ease.outCubic);
+  tag.style.opacity = a; tag.style.transform = `translateY(${(1 - a) * 14}px)`;
+  typeOn(cmd, CMD, t, { times: TIMES, cursor: cur });
+});
+// Sound: one low swell under the reveal, then soft keys. Nothing bright.
+let seed = 7;
+s.sfx(0.3, 'whoosh', { dur: 1.5, from: 260, to: 900, peak: 0.55, gain: 0.32, body: 0.5, seed: seed++ });
+s.sfx(0.55, 'thud', { freq: 48, gain: 0.3, decay: 0.7 });
+s.sfx(2.3, 'paper', { dur: 0.6, gain: 0.04 });
+keySounds(s, CMD, TIMES, { seed: 3, enter: ENTER }); // synthesized; pass { bank } to use real keystrokes (pamo keys)
+s.sound({ lowpass: 2400, gain: 1 });
+await s.start();
+</script>
+</body>
+</html>

package/examples/chrome-endcard/wordmark.js ADDED Viewed

@@ -0,0 +1,16 @@
+// Draws the "paper-motion" wordmark (Geist Serif) on a transparent canvas and
+// returns it as a PNG data URL. LiquidMetal uses the alpha as the logo shape.
+export async function wordmark({ text = 'paper-motion', size = 420, pad = 60 } = {}) {
+  await document.fonts.load(`400 ${size}px GSerif`);
+  const c = document.createElement('canvas');
+  const g = c.getContext('2d');
+  g.font = `400 ${size}px GSerif`;
+  const m = g.measureText(text);
+  c.width = Math.ceil(m.width + pad * 2);
+  c.height = Math.ceil(m.actualBoundingBoxAscent + m.actualBoundingBoxDescent + pad * 2);
+  g.font = `400 ${size}px GSerif`;
+  g.letterSpacing = '-0.01em';
+  g.fillStyle = '#fff';
+  g.fillText(text, pad, pad + m.actualBoundingBoxAscent);
+  return c.toDataURL('image/png');
+}

package/examples/halo-explainer/audio/script.txt ADDED Viewed

@@ -0,0 +1,8 @@
+Your solar panels make the most power at noon.
+But you use the most at night.
+Halo stores the difference.
+One: sunlight hits your panels.
+Two: whatever you don't use flows into Halo, a battery the size of a suitcase.
+Three: when the sun goes down, your home runs on stored sunlight.
+Lower bills. Lights on, even in a blackout.
+Halo. Keep the sun after dark.