@supersuit/artifacts 0.4.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.4.2",
+  "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",