paper-motion 0.4.0 → 0.5.0

package/runtime/brand.js

@@ -11,11 +11,23 @@ const get = (p, json) => fetch(p).then((r) => (r.ok ? (json ? r.json() : r.text(
 const sections = (md) => Object.fromEntries((md ?? '').split(/^## /m).slice(1).map((b) => { const i = b.indexOf('\n'); return [b.slice(0, i).trim(), b.slice(i + 1).trim()]; }));
 
 export async function loadBrand(root = '/brand') {
-  const [tokens, identityMd, motion, sound, setRaw] = await Promise.all([
+  let [tokens, identityMd, motion, sound, setRaw] = await Promise.all([
     get(`${root}/tokens.json`, true), get(`${root}/IDENTITY.md`), get(`${root}/motion.json`, true), get(`${root}/sound.json`, true), get(`${root}/shader-set/set.json`, true),
   ]);
   const identity = sections(identityMd);
-  const set = Array.isArray(setRaw) ? { entries: setRaw } : setRaw ?? { entries: [] };
+  let set = Array.isArray(setRaw) ? { entries: setRaw } : setRaw ?? { entries: [] };
+  // the studio's How it looks preview lays a look over the brand: `?embed&look=<base64url json>` (colours by role,
+  // fonts, a background entry, pace, entrance). Only an embedded preview reads it; a render never passes ?embed.
+  const q = new URLSearchParams(typeof location === 'undefined' ? '' : location.search);
+  let look = null;
+  if (q.has('embed') && q.get('look')) { try { look = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob(q.get('look').replace(/-/g, '+').replace(/_/g, '/')), (c) => c.charCodeAt(0)))); } catch { look = null; } }
+  if (look) {
+    tokens = { ...(tokens ?? {}) };
+    if (look.colors) { tokens.colors = { ...(tokens.colors ?? {}), ...Object.fromEntries(Object.entries(look.colors).filter(([, v]) => v).map(([k, v]) => [k, { hex: v }])) }; delete tokens.ramp; }
+    if (look.fonts) tokens.fonts = look.fonts;
+    if (look.background) set = { ...set, entries: [look.background, ...(set.entries ?? []).filter((e) => e.id !== look.background.id)] };
+    if (look.pace || look.entrance) motion = { ...(motion ?? {}), ...(look.pace ? { pace: look.pace } : {}), ...(look.entrance ? { entrance: look.entrance } : {}) };
+  }
 
   // fonts: stylesheets and files, all loaded before the first frame
   const fonts = Object.values(tokens?.fonts ?? {}).filter(Boolean);

package/runtime/index.js

@@ -144,6 +144,13 @@ const imageCache = new Map();
 // A transparent pixel stands in for an image shader with no image (PaperTexture and Water also work standalone).
 const BLANK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
+// A scene shown inside another page (?embed: the studio's live previews) draws its shaders at the size it is shown,
+// not at the frame's full size times the screen's density (8 million pixels a frame on a Retina screen for a box
+// 700 px wide). Renders never pass ?embed, so they keep every pixel.
+const EMBED_PIXELS = typeof location !== 'undefined' && /[?&]embed(?:[=&]|$)/.test(location.search)
+  ? Math.max(480 * 270, Math.round(innerWidth * innerHeight * Math.max(1, globalThis.devicePixelRatio ?? 1) ** 2))
+  : null;
+
 class ShaderLayer {
   /**
    * @param el       element the canvas fills (give it a size: e.g. position:absolute; inset:0)
@@ -177,7 +184,7 @@ class ShaderLayer {
       { preserveDrawingBuffer: true, ...(props.webGlContextAttributes ?? {}) },
       0, this.frame0,
       this.options.minPixelRatio ?? 2,
-      this.options.maxPixelCount ?? 3840 * 2160 * 2,
+      this.options.maxPixelCount ?? EMBED_PIXELS ?? 3840 * 2160 * 2,
       props.mipmaps,
     );
     if (this.options.loop) {
@@ -220,6 +227,8 @@ class ShaderLayer {
 
   seek(t) {
     if (!this.a) return;
+    // embedded, a layer no one can see (a later shot waiting at opacity 0, display none) is not drawn this frame
+    if (EMBED_PIXELS && this.el.checkVisibility && !this.el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return;
     const time = this.time ?? (t + (this.options.timeOffset ?? 0));
     const ms = (s) => this.frame0 + s * 1000 * this.speed;
     const L = this.options.loop;

package/runtime/player.js

@@ -5,8 +5,11 @@
 
 export function mountPlayer(scene, startT = 0) {
   const { stage, duration, fps } = scene;
-  const embed = new URLSearchParams(location.search).has('embed');
-  let t = startT, playing = true, loop = true, last = performance.now(), busy = false;
+  const q = new URLSearchParams(location.search), embed = q.has('embed');
+  // a part longer or shorter than its scene plays the whole scene slower or faster (the studio passes its rate)
+  const rate = Math.min(4, Math.max(0.25, Number(q.get('rate')) || 1));
+  // embedded, a scene plays once and holds its last frame (a click plays it again); on its own page it loops
+  let t = startT, playing = true, loop = !embed, last = performance.now(), busy = false;
 
   const bar = document.createElement('div');
   bar.innerHTML = `
@@ -43,20 +46,28 @@ export function mountPlayer(scene, startT = 0) {
     if (!embed) { 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(); }
+  let looping = false;   // the frame loop runs only while something plays (an embedded preview that ended is idle)
+  function setPlaying(p) { playing = p; playBtn.textContent = p ? '❚❚' : '▶'; last = performance.now(); if (p && !looping) { looping = true; requestAnimationFrame(tick); } }
 
+  // embedded, it draws at most 30 frames a second: a preview beside an editor, not the render
+  const step = embed ? 1000 / 30 - 2 : 0;
+  let drawn = 0;
   function tick(now) {
+    if (embed && now - drawn < step) { requestAnimationFrame(tick); return; }
+    drawn = now;
     if (playing && !busy) {
-      let nt = t + (now - last) / 1000;
-      if (nt >= duration) { if (loop) nt %= duration; else { nt = duration; setPlaying(false); } }
+      let nt = t + ((now - last) / 1000) * rate;
+      if (nt >= duration) { if (loop) nt %= duration; else { nt = duration - 1 / fps; setPlaying(false); if (embed) { try { parent.postMessage({ pm: 'ended' }, '*'); } catch { /* no parent */ } } } }
       show(nt);
     }
     last = now;
+    if (embed && !playing) { looping = false; return; }
     requestAnimationFrame(tick);
   }
-  requestAnimationFrame(tick);
+  looping = true; requestAnimationFrame(tick);
 
   playBtn.onclick = () => setPlaying(!playing);
+  if (embed) addEventListener('click', () => { if (!playing) show(0); setPlaying(true); });
   loopBtn.onclick = () => { loop = !loop; loopBtn.classList.toggle('on', loop); };
   range.oninput = () => { setPlaying(false); show(Number(range.value)); };
   addEventListener('keydown', (e) => {