@intility/bifrost-experimental 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,7 +1,17 @@
 # @intility/bifrost-experimental
 
-## 0.1.0
+## 0.2.0
 
 ### Minor Changes
 
-- 2b88573: New package for experimental, AI-generated components. Adds `TwinkleBackground`, an animated dot-grid background in the Bifrost theme color, `Backdrop`, a soft shaded area that keeps text readable on a busy background, and `FrontpageHeader`, a logo, title and subtitle for the front page of a Platform Manager module.
+- d272c33: `TwinkleBackground` has a new `fill` prop for using it inside a `Box` or a card. The dots then cover the whole container, evenly, with no fade. The dot grid is now also centered with a margin to the edges, so the edge of the container no longer cuts a dot in half.
+
+### Patch Changes
+
+- 75f2bf7: `Backdrop` no longer uses `filter: blur()` for its soft edges. Safari on some Macs drew a dark or light halo around the shade when switching between light and dark mode. The edges now fade with a gradient mask instead.
+
+## 0.1.0 - 2026-10-27
+
+### First release
+
+- 2b88573: New package for experimental, AI-generated components. Adds `TwinkleBackground`, an animated dot-grid background in the Bifrost theme color, `Backdrop`, a soft shaded area that keeps text readable on a busy background, and `FrontpageHeader`, a logo, title and subtitle for the front page of a Platform Manager module. #998

package/dist/bifrost-experimental.css

@@ -17,14 +17,48 @@ span.bfx-backdrop {
   z-index: -1;
   pointer-events: none;
 
-  /* Larger than the content without changing the layout, but no wider than the
-  page padding, so it can't reach past the screen edge on small screens */
-  inset: calc(-1 * var(--bfs12))
-    calc(-1 * min(var(--bfs24), var(--bfl-page-padding)));
-  opacity: 0.85;
+  /* How far the shade reaches past the content, which is also the width of its
+  fade. The horizontal reach is no wider than the page padding, so the shade
+  can't reach past the screen edge on small screens. */
+  --bfx-backdrop-x: min(var(--bfs32), var(--bfl-page-padding));
+  --bfx-backdrop-y: var(--bfs24);
 
-  /* Soft edges, so it doesn't look like a box */
-  filter: blur(10px);
+  /* Larger than the content without changing the layout */
+  inset: calc(-1 * var(--bfx-backdrop-y)) calc(-1 * var(--bfx-backdrop-x));
+  opacity: 0.7;
+
+  /* Soft edges, so it doesn't look like a box. Each edge eases out over the
+  reach, like the tail of a blur, and the two masks are multiplied so the
+  corners fade too. A mask rather than filter: blur(), which Safari renders
+  with a dark or light halo on some Macs. */
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent,
+      rgba(0, 0, 0, 0.1) calc(var(--bfx-backdrop-y) * 0.25),
+      rgba(0, 0, 0, 0.5) calc(var(--bfx-backdrop-y) * 0.5),
+      rgba(0, 0, 0, 0.9) calc(var(--bfx-backdrop-y) * 0.75),
+      #000 var(--bfx-backdrop-y),
+      #000 calc(100% - var(--bfx-backdrop-y)),
+      rgba(0, 0, 0, 0.9) calc(100% - var(--bfx-backdrop-y) * 0.75),
+      rgba(0, 0, 0, 0.5) calc(100% - var(--bfx-backdrop-y) * 0.5),
+      rgba(0, 0, 0, 0.1) calc(100% - var(--bfx-backdrop-y) * 0.25),
+      transparent
+    ),
+    linear-gradient(
+      to right,
+      transparent,
+      rgba(0, 0, 0, 0.1) calc(var(--bfx-backdrop-x) * 0.25),
+      rgba(0, 0, 0, 0.5) calc(var(--bfx-backdrop-x) * 0.5),
+      rgba(0, 0, 0, 0.9) calc(var(--bfx-backdrop-x) * 0.75),
+      #000 var(--bfx-backdrop-x),
+      #000 calc(100% - var(--bfx-backdrop-x)),
+      rgba(0, 0, 0, 0.9) calc(100% - var(--bfx-backdrop-x) * 0.75),
+      rgba(0, 0, 0, 0.5) calc(100% - var(--bfx-backdrop-x) * 0.5),
+      rgba(0, 0, 0, 0.1) calc(100% - var(--bfx-backdrop-x) * 0.25),
+      transparent
+    );
+  mask-composite: intersect;
 }
 
 /* A stacking context, so the title's and subtitle's backdrops sit behind both
@@ -76,6 +110,10 @@ overlap the title. */
   );
 }
 
+.bfx-twinkle-background-fill {
+  height: 100%;
+}
+
 /* Red and green aren't themes. The theme colors have a lightness of 46% to
 55% in light mode and 71% to 90% in dark mode, so the lightness is moved
 into that range where alert (55% dark) and success (85% light) are far off. */

package/dist/components/TwinkleBackground/TwinkleBackground.d.ts

@@ -5,13 +5,21 @@ export type TwinkleBackgroundProps = {
      * @default "theme"
      */
     color?: "theme" | "teal" | "purple" | "pink" | "yellow" | "red" | "green";
+    /**
+     * Fills the whole container with evenly spread dots, with no fade, for a
+     * background inside a card or a `Box`. By default the dots cover the top 40%
+     * of the container and fade out down the page.
+     * @default false
+     */
+    fill?: boolean;
 };
 /**
  * Animated dot grid in the Bifrost theme color, for the front page of a
  * Platform Manager module. It fades out down the page and reacts to hover and
  * clicks. Render it as the first child of a container with
  * `position: relative` and `isolation: isolate`; it fills the top 40% of that
- * container, behind its content. Experimental: AI-generated, not reviewed line
+ * container, behind its content, or all of it with `fill`. No dot is cut off
+ * by the edge of the container. Experimental: AI-generated, not reviewed line
  * by line.
  *
  * @see https://bifrost.intility.com/react/experimental/twinkle-background
@@ -24,5 +32,5 @@ export type TwinkleBackgroundProps = {
  *   </Backdrop>
  * </div>
  */
-declare const TwinkleBackground: ({ color }: TwinkleBackgroundProps) => import("react").JSX.Element;
+declare const TwinkleBackground: ({ color, fill, }: TwinkleBackgroundProps) => import("react").JSX.Element;
 export default TwinkleBackground;

package/dist/components/TwinkleBackground/TwinkleBackground.js

@@ -48,7 +48,8 @@ const within = (rect, x, y) => x >= 0 && x <= rect.width && y >= 0 && y <= rect.
  * Platform Manager module. It fades out down the page and reacts to hover and
  * clicks. Render it as the first child of a container with
  * `position: relative` and `isolation: isolate`; it fills the top 40% of that
- * container, behind its content. Experimental: AI-generated, not reviewed line
+ * container, behind its content, or all of it with `fill`. No dot is cut off
+ * by the edge of the container. Experimental: AI-generated, not reviewed line
  * by line.
  *
  * @see https://bifrost.intility.com/react/experimental/twinkle-background
@@ -62,18 +63,20 @@ const within = (rect, x, y) => x >= 0 && x <= rect.width && y >= 0 && y <= rect.
  * </div>
  */
 const TwinkleBackground = t0 => {
-  const $ = _c(5);
+  const $ = _c(6);
   const {
-    color: t1
+    color: t1,
+    fill: t2
   } = t0;
   const color = t1 === undefined ? "theme" : t1;
+  const fill = t2 === undefined ? false : t2;
   const canvasRef = useRef(null);
   const still = useReducedMotion();
   const colorClass = color === "red" || color === "green" ? ` bfx-twinkle-background-${color}` : color === "theme" ? "" : ` bf-theme-${color}`;
-  let t2;
   let t3;
-  if ($[0] !== still) {
-    t2 = () => {
+  let t4;
+  if ($[0] !== fill || $[1] !== still) {
+    t3 = () => {
       const canvas = canvasRef.current;
       const ctx = canvas?.getContext("2d");
       if (!canvas || !ctx) {
@@ -93,7 +96,10 @@ const TwinkleBackground = t0 => {
       const clicks = [];
       let w = 0;
       let h = 0;
-      let cols = 0;
+      let cols = 1;
+      let offsetX = 0;
+      let offsetY = 0;
+      let span = 0;
       let rand = new Float32Array(0);
       const seed = Math.random() * 4294967296 | 0;
       const noise = (col, row, k) => {
@@ -106,12 +112,12 @@ const TwinkleBackground = t0 => {
       let last = 0;
       let raf = 0;
       let visible = false;
-      let fill = "";
+      let dotColor = "";
       let base = OPACITY.light;
       let styleAt = -Infinity;
       const readStyle = () => {
         const style = getComputedStyle(canvas);
-        fill = style.color;
+        dotColor = style.color;
         base = style.colorScheme.includes("dark") ? OPACITY.dark : OPACITY.light;
       };
       const batches = Array.from({
@@ -122,12 +128,12 @@ const TwinkleBackground = t0 => {
         if (forcedColors.matches || h <= 0) {
           return;
         }
-        ctx.fillStyle = fill;
+        ctx.fillStyle = dotColor;
         for (let i = 0; i < rand.length; i = i + 2, i) {
           const r1 = rand[i];
           const r2 = rand[i + 1];
-          const x = i / 2 % cols * SPACING;
-          const y = Math.floor(i / 2 / cols) * SPACING;
+          const x = offsetX + i / 2 % cols * SPACING;
+          const y = offsetY + Math.floor(i / 2 / cols) * SPACING;
           const tw = 0.5 + 0.5 * Math.sin(clock * 0.48 * (1 + r1 * 3) + r2 * TAU);
           let alpha = MIN_ALPHA + (1 - MIN_ALPHA) * tw * tw;
           let size = 1.4 * (1 - 0.3 * r2) * (0.8 + 0.4 * tw);
@@ -144,7 +150,7 @@ const TwinkleBackground = t0 => {
             alpha = alpha + ring * 2.6;
             size = size + ring * 1.4;
           }
-          const fade = y / h;
+          const fade = fill || span <= 0 ? 0 : (y - offsetY) / span;
           alpha = alpha * (1 - fade * fade) * base;
           const step = Math.round(Math.min(1, alpha) * ALPHA_STEPS);
           if (step < 1) {
@@ -221,9 +227,13 @@ const TwinkleBackground = t0 => {
         canvas.width = Math.round(w * dpr);
         canvas.height = Math.round(h * dpr);
         ctx.setTransform(w ? canvas.width / w : 1, 0, 0, h ? canvas.height / h : 1, 0, 0);
-        cols = Math.ceil(w / SPACING) + 1;
+        cols = Math.max(1, Math.floor(w / SPACING));
+        const rows = Math.max(1, Math.floor(h / SPACING));
+        span = (rows - 1) * SPACING;
+        offsetX = (w - (cols - 1) * SPACING) / 2;
+        offsetY = (h - span) / 2;
         rand = Float32Array.from({
-          length: cols * (Math.ceil(h / SPACING) + 1) * 2
+          length: cols * rows * 2
         }, (_, i_1) => noise((i_1 >> 1) % cols, Math.floor(i_1 / 2 / cols), i_1 & 1));
         redraw();
       };
@@ -299,8 +309,8 @@ const TwinkleBackground = t0 => {
           });
         }
       }
-      const visibility = new IntersectionObserver(t4 => {
-        const [entry] = t4;
+      const visibility = new IntersectionObserver(t5 => {
+        const [entry] = t5;
         visible = entry.isIntersecting;
         if (visible) {
           play();
@@ -341,29 +351,30 @@ const TwinkleBackground = t0 => {
         window.removeEventListener("blur", onLeave);
       };
     };
-    t3 = [still];
-    $[0] = still;
-    $[1] = t2;
+    t4 = [still, fill];
+    $[0] = fill;
+    $[1] = still;
     $[2] = t3;
+    $[3] = t4;
   } else {
-    t2 = $[1];
     t3 = $[2];
+    t4 = $[3];
   }
-  useEffect(t2, t3);
-  const t4 = `bfx-twinkle-background${colorClass}`;
-  let t5;
-  if ($[3] !== t4) {
-    t5 = /*#__PURE__*/_jsx("canvas", {
+  useEffect(t3, t4);
+  const t5 = `bfx-twinkle-background${fill ? " bfx-twinkle-background-fill" : ""}${colorClass}`;
+  let t6;
+  if ($[4] !== t5) {
+    t6 = /*#__PURE__*/_jsx("canvas", {
       ref: canvasRef,
       "aria-hidden": true,
-      className: t4
+      className: t5
     });
-    $[3] = t4;
     $[4] = t5;
+    $[5] = t6;
   } else {
-    t5 = $[4];
+    t6 = $[5];
   }
-  return t5;
+  return t6;
 };
 export default TwinkleBackground;
 function _temp() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-experimental",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Experimental, AI-generated React components for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/index.js",