@supersuit/artifacts 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 `@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.5 (2026-09-27)
+
+**The bubble ground looks as it did in 0.4.2, and stays smooth.**
+
+- The palette and layout changes of 0.4.3 and 0.4.4 are reverted: the six original pastels, the
+  original stacking and gradient. What stays is the performance fix, done differently: each bubble
+  carries its own `filter: blur(40px)` on its own layer (`will-change: transform`), so it is
+  rasterised once and slid, instead of one blur over the whole screen re-rasterised every frame.
+  The hard-light blend stays off; side by side the render is indistinguishable.
+- **DETECTOR:** the ground shows saturated magenta, teal or pink bubbles (0.4.3/0.4.4).
+- **REMEDY:** update the dependency.
+- **Tests:** the blur sits on the bubble, never on a full-screen wrapper; no blend; one bubble per
+  default colour.
+
 ## 0.4.4 (2026-09-26)
 
 **The glow stays on the cool-to-magenta arc.**

package/lib/brand/backdrop.d.ts

@@ -1,7 +1,6 @@
 import type { Backdrop } from './pack.js';
-/** The Freedom Glow: blue light moving through the cool-to-magenta arc, one bubble per colour.
- *  Never the warm half (no red, orange, yellow or green), so no frame can read as a rainbow.
- *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
+/** 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 declare const GLOW_PASTELS: string[];
 export declare function Bubbles({ backdrop }: {
     backdrop: Backdrop;

package/lib/brand/backdrop.js

@@ -1,19 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The Freedom Glow: blue light moving through the cool-to-magenta arc, one bubble per colour.
- *  Never the warm half (no red, orange, yellow or green), so no frame can read as a rainbow.
- *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
-export const GLOW_PASTELS = [
-    '31,107,255', // brand blue
-    '224,82,196', // magenta
-    '25,181,201', // teal
-    '156,92,240', // purple
-    '255,111,174', // pink
-    '34,195,230', // cyan
-    '123,107,230', // violet
-    '90,162,255', // sky
-    '199,125,255', // lavender
-];
-// [animation, duration s, transform-origin] per bubble, after animate-ui's six plus three more.
+/** 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.
 const MOTION = [
     ['a-bubble-v', 30, 'center center'],
     ['a-bubble-c', 20, 'calc(50% - 400px) center'],
@@ -21,24 +10,17 @@ 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.
+// Each bubble is blurred on its OWN layer and only `transform` animates, so the browser rasterises
+// it once and slides the bitmap. The first version blurred a full-screen parent and hard-light
+// blended every bubble, which re-rasterised the whole viewport each frame and stuttered on a
+// phone (2026-09-26). The colours and layout are unchanged from that version on purpose: an
+// attempt to also widen the palette was reverted the same night ("really not a fan").
 const CSS = `
 @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: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}
+[data-artifact-backdrop] .a-bubble{position:absolute;width:80%;height:80%;top:10%;left:10%;border-radius:9999px;filter:blur(40px);will-change:transform;backface-visibility:hidden;animation-timing-function:ease;animation-iteration-count:infinite}
 @media (prefers-reduced-motion: reduce){[data-artifact-backdrop] .a-bubble{animation:none!important}}
 `;
 export function Bubbles({ backdrop }) {
@@ -47,13 +29,11 @@ export function Bubbles({ backdrop }) {
     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(closest-side, rgba(${c},0.9) 0%, rgba(${c},0.6) 35%, rgba(${c},0.2) 70%, rgba(${c},0) 100%)`,
+                            background: `radial-gradient(circle at center, rgba(${c},0.8) 0, rgba(${c},0) 50%)`,
                             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.4",
+  "version": "0.4.5",
   "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",