@supersuit/artifacts 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.4.3 (2026-09-26)
+
+**The bubble ground runs smooth on a phone, and the glow runs the whole spectrum.**
+
+- The backdrop blurred the whole viewport (`filter: blur(40px)`) and hard-light blended every
+  bubble, so each frame re-rasterised the full screen and stuttered on a phone. Both are gone:
+  only `transform` animates, on its own layer (`will-change`, `translate3d`). The softness now
+  comes from the gradient itself (`closest-side`, fading to zero inside the bubble), which also
+  stops the gradients showing hard edges without the blur.
+- `GLOW_PASTELS` grows from six washed pastels to nine saturated hues (blue, violet, magenta,
+  rose, coral, amber, lime, mint, cyan), one bubble each, spread over the page so neighbours
+  overlap at their edges instead of averaging to grey in the middle.
+- **DETECTOR:** the animated ground stutters on a phone, or reads as grey-beige rather than colour.
+- **REMEDY:** update the dependency. A pack that passes its own `backdrop.colors` keeps them.
+- **Tests:** no full-screen blur or blend in the backdrop and `will-change:transform` present; the
+  default palette has at least nine colours and renders one bubble per colour.
+
+## 0.4.2 (2026-09-26)
+
+**The read-along highlight waits for play.**
+
+- The first word's timing starts at 0, so an untouched page sat with its first word lit before
+  anything played. `ArtifactReader` now lights nothing until the first play or seek. The word
+  choice is exported as `litWordIndex(words, now, started)`.
+- **DETECTOR:** a narrated page shows its first word highlighted at 0:00 before play.
+- **REMEDY:** update the dependency; no host change.
+- **Tests:** nothing lit before start; the word under the playhead once started; nothing in a
+  gap after a word ends.
+
 ## 0.4.1 (2026-09-26)
 
 **Big files upload straight to the bucket.**

package/lib/brand/backdrop.d.ts

@@ -1,6 +1,6 @@
 import type { Backdrop } from './pack.js';
-/** The Freedom Glow's colours (a blue core and the spectrum it separates into), mixed most of
- *  the way to cream so a light page still reads as light. */
+/** The Freedom Glow: a blue core and the full spectrum it separates into, one bubble per colour.
+ *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
 export declare const GLOW_PASTELS: string[];
 export declare function Bubbles({ backdrop }: {
     backdrop: Backdrop;

package/lib/brand/backdrop.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The Freedom Glow's colours (a blue core and the spectrum it separates into), mixed most of
- *  the way to cream so a light page still reads as light. */
-export const GLOW_PASTELS = ['150,190,255', '215,185,240', '160,225,220', '250,195,180', '250,215,160', '190,210,255'];
-// [animation, duration s, transform-origin] per bubble, after the original's six.
+/** The Freedom Glow: a blue core and the full spectrum it separates into, one bubble per colour.
+ *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
+export const GLOW_PASTELS = [
+    '90,150,255', // blue
+    '165,120,245', // violet
+    '235,110,210', // magenta
+    '255,120,150', // rose
+    '255,150,110', // coral
+    '255,195,90', // amber
+    '170,225,100', // lime
+    '90,215,170', // mint
+    '80,200,240', // cyan
+];
+// [animation, duration s, transform-origin] per bubble, after animate-ui's six plus three more.
 const MOTION = [
     ['a-bubble-v', 30, 'center center'],
     ['a-bubble-c', 20, 'calc(50% - 400px) center'],
@@ -10,25 +20,39 @@ const MOTION = [
     ['a-bubble-h', 40, 'calc(50% - 200px) center'],
     ['a-bubble-c', 20, 'calc(50% - 800px) calc(50% + 200px)'],
     ['a-bubble-v', 35, 'calc(50% + 300px) calc(50% - 200px)'],
+    ['a-bubble-h', 45, 'calc(50% + 200px) calc(50% + 300px)'],
+    ['a-bubble-c', 30, 'calc(50% + 600px) calc(50% - 300px)'],
+    ['a-bubble-v', 25, 'calc(50% - 300px) calc(50% + 400px)'],
+];
+// [top %, left %] per bubble: spread over the page so neighbours overlap at their edges only.
+// Stacked in the middle, nine translucent hues average to grey.
+const HOME = [
+    [-10, -15], [-15, 45], [15, 20], [30, -20], [35, 50], [55, 10], [65, 45], [80, -15], [85, 35],
 ];
+// Only `transform` animates, on its own layer, so the browser moves finished bitmaps and never
+// repaints. The first version put a 40px blur over the whole viewport and hard-light blended every
+// bubble, which re-rasterised the full screen each frame and stuttered on a phone; the radial
+// gradients already fade to nothing, so neither was buying softness.
 const CSS = `
-@keyframes a-bubble-v{0%,100%{transform:translateY(-50%)}50%{transform:translateY(50%)}}
+@keyframes a-bubble-v{0%,100%{transform:translate3d(0,-50%,0)}50%{transform:translate3d(0,50%,0)}}
 @keyframes a-bubble-c{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
-@keyframes a-bubble-h{0%,100%{transform:translateX(-50%) translateY(-10%)}50%{transform:translateX(50%) translateY(10%)}}
-[data-artifact-backdrop] .a-bubble{position:absolute;width:80%;height:80%;top:10%;left:10%;border-radius:9999px;mix-blend-mode:hard-light;animation-timing-function:ease;animation-iteration-count:infinite}
+@keyframes a-bubble-h{0%,100%{transform:translate3d(-50%,-10%,0)}50%{transform:translate3d(50%,10%,0)}}
+[data-artifact-backdrop] .a-bubble{position:absolute;width:70%;height:60%;border-radius:9999px;will-change:transform;backface-visibility:hidden;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
 @media (prefers-reduced-motion: reduce){[data-artifact-backdrop] .a-bubble{animation:none!important}}
 `;
 export function Bubbles({ backdrop }) {
     const colors = backdrop.colors?.length ? backdrop.colors : GLOW_PASTELS;
     const veil = Math.round((backdrop.veil ?? 0.4) * 100);
-    return (_jsxs("div", { "data-artifact-backdrop": "bubbles", "aria-hidden": true, style: { position: 'fixed', inset: 0, zIndex: -1, overflow: 'hidden', background: 'var(--a-ground)', pointerEvents: 'none' }, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: CSS } }), _jsx("div", { style: { position: 'absolute', inset: 0, filter: 'blur(40px)' }, children: colors.map((c, i) => {
+    return (_jsxs("div", { "data-artifact-backdrop": "bubbles", "aria-hidden": true, style: { position: 'fixed', inset: 0, zIndex: -1, overflow: 'hidden', background: 'var(--a-ground)', pointerEvents: 'none' }, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: CSS } }), _jsx("div", { style: { position: 'absolute', inset: 0 }, children: colors.map((c, i) => {
                     const [name, secs, origin] = MOTION[i % MOTION.length];
                     return (_jsx("div", { className: "a-bubble", style: {
-                            background: `radial-gradient(circle at center, rgba(${c},0.8) 0, rgba(${c},0) 50%)`,
+                            background: `radial-gradient(closest-side, rgba(${c},0.9) 0%, rgba(${c},0.6) 35%, rgba(${c},0.2) 70%, rgba(${c},0) 100%)`,
                             animationName: name,
                             animationDuration: `${secs}s`,
                             animationDirection: i % 2 ? 'reverse' : 'normal',
                             transformOrigin: origin,
+                            top: `${HOME[i % HOME.length][0]}%`,
+                            left: `${HOME[i % HOME.length][1]}%`,
                         } }, i));
                 }) }), _jsx("div", { style: { position: 'absolute', inset: 0, background: `color-mix(in srgb, var(--a-ground) ${veil}%, transparent)` } })] }));
 }

package/lib/reader/artifact-reader.d.ts

@@ -3,6 +3,9 @@ export type WordTiming = {
     s: number;
     e: number;
 };
+/** The word to light at `now`, or -1. Nothing lights until narration has started: the first
+ *  word begins at 0, so an untouched page would otherwise sit with its first word highlighted. */
+export declare function litWordIndex(words: WordTiming[], now: number, started: boolean): number;
 export declare function ArtifactReader({ src, words, rootId, label, accent, ground, }: {
     src: string;
     words: WordTiming[];

package/lib/reader/artifact-reader.js

@@ -70,6 +70,25 @@ function align(spans, words) {
     }
     return out;
 }
+/** The word to light at `now`, or -1. Nothing lights until narration has started: the first
+ *  word begins at 0, so an untouched page would otherwise sit with its first word highlighted. */
+export function litWordIndex(words, now, started) {
+    if (!started)
+        return -1;
+    let lo = 0;
+    let hi = words.length - 1;
+    let idx = -1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (words[mid].s <= now) {
+            idx = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return idx >= 0 && now <= words[idx].e + 0.25 ? idx : -1;
+}
 function fmt(t) {
     const m = Math.floor(t / 60);
     const s = Math.floor(t % 60);
@@ -80,6 +99,8 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
     const audioRef = useRef(null);
     const mapRef = useRef([]);
     const litRef = useRef(null);
+    // Set on the first play or seek; the highlight stays off until then.
+    const startedRef = useRef(false);
     const [playing, setPlaying] = useState(false);
     const [t, setT] = useState(0);
     const [dur, setDur] = useState(0);
@@ -111,20 +132,8 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
         const tick = () => {
             const now = a.currentTime;
             setT(now);
-            // Binary search the word at `now`.
-            let lo = 0;
-            let hi = words.length - 1;
-            let idx = -1;
-            while (lo <= hi) {
-                const mid = (lo + hi) >> 1;
-                if (words[mid].s <= now) {
-                    idx = mid;
-                    lo = mid + 1;
-                }
-                else
-                    hi = mid - 1;
-            }
-            const el = idx >= 0 && now <= words[idx].e + 0.25 ? mapRef.current[idx] : null;
+            const idx = litWordIndex(words, now, startedRef.current);
+            const el = idx >= 0 ? mapRef.current[idx] : null;
             if (el !== litRef.current) {
                 litRef.current?.classList.remove('artifact-word-lit');
                 el?.classList.add('artifact-word-lit');
@@ -154,7 +163,12 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
         .artifact-word { border-radius: 3px; transition: background-color 120ms; }
         .artifact-word:hover { background: var(--a-surface-strong, rgba(255,255,255,0.08)); cursor: pointer; }
         .artifact-word-lit { background: color-mix(in srgb, ${accent} 35%, transparent); color: var(--a-strong, #fff); }
-      ` }), _jsx("audio", { ref: audioRef, src: src, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), _jsx("div", { className: "fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--a-line)] backdrop-blur", style: { background: `color-mix(in srgb, ${ground} 90%, transparent)` }, children: _jsxs("div", { className: "mx-auto flex max-w-2xl items-center gap-4 px-6 py-3", children: [_jsx("button", { type: "button", onClick: toggle, "aria-label": playing ? 'Pause narration' : 'Play narration', className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full", style: { background: accent, color: ground }, children: playing ? (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("rect", { x: "6", y: "5", width: "4", height: "14" }), _jsx("rect", { x: "14", y: "5", width: "4", height: "14" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: narrator }), _jsx("input", { type: "range", min: 0, max: dur || 0, step: 0.1, value: Math.min(t, dur || 0), onChange: (e) => {
+      ` }), _jsx("audio", { ref: audioRef, src: src, preload: "metadata", onPlay: () => {
+                    startedRef.current = true;
+                    setPlaying(true);
+                }, onSeeking: () => {
+                    startedRef.current = true;
+                }, onPause: () => setPlaying(false), onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), _jsx("div", { className: "fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--a-line)] backdrop-blur", style: { background: `color-mix(in srgb, ${ground} 90%, transparent)` }, children: _jsxs("div", { className: "mx-auto flex max-w-2xl items-center gap-4 px-6 py-3", children: [_jsx("button", { type: "button", onClick: toggle, "aria-label": playing ? 'Pause narration' : 'Play narration', className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full", style: { background: accent, color: ground }, children: playing ? (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("rect", { x: "6", y: "5", width: "4", height: "14" }), _jsx("rect", { x: "14", y: "5", width: "4", height: "14" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: narrator }), _jsx("input", { type: "range", min: 0, max: dur || 0, step: 0.1, value: Math.min(t, dur || 0), onChange: (e) => {
                                         if (audioRef.current)
                                             audioRef.current.currentTime = Number(e.target.value);
                                     }, "aria-label": "Seek", className: "mt-1 w-full", style: { accentColor: accent } })] }), _jsxs("div", { className: "w-16 shrink-0 text-right text-xs tabular-nums text-[color:var(--a-muted)]", children: [fmt(t), " / ", fmt(dur)] }), _jsxs("button", { type: "button", onClick: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",