@intility/bifrost-experimental 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,7 +1,23 @@
 # @intility/bifrost-experimental
 
-## 0.1.0
+## 0.3.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.
+- 7ed86c6: `TwinkleBackground` now covers the top 35% of the viewport height instead of the top 40% of its container, so it looks the same on every front page, however tall the page is, but at least 240px. If the container is shorter than that, the dots cover the whole container. The first row of dots now always sits 8px from the top, where it before moved between 8px and 16px depending on the height. `fill` is unchanged. You can remove any CSS that overrides the height of the canvas.
+
+## 0.2.0 - 2026-10-28
+
+### Minor Changes
+
+- 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
@@ -63,7 +97,13 @@ overlap the title. */
 
   /* A canvas is a replaced element, so inset alone doesn't stretch it */
   width: 100%;
-  height: 40%;
+
+  /* 35% of the viewport, not of the container, so every front page looks the
+  same however tall it is. svh and not dvh: the dvh changes while a mobile
+  browser's toolbar shows and hides, which would lay the dots out again while
+  scrolling. At least 240px, so a short viewport still gets a fade that reads
+  as one. 100% keeps it inside a container shorter than that. */
+  height: min(max(35svh, 240px), 100%);
   z-index: -1;
   pointer-events: none;
 
@@ -76,6 +116,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,23 @@ 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 35%
+     * of the viewport height, at least 240px, or the whole container if that is
+     * shorter, 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
+ * `position: relative` and `isolation: isolate`; it covers the top 35% of the
+ * viewport height, at least 240px (the whole container if that is shorter),
+ * behind its content, or all of the container 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 +34,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

@@ -47,8 +47,10 @@ const within = (rect, x, y) => x >= 0 && x <= rect.width && y >= 0 && y <= rect.
  * 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
+ * `position: relative` and `isolation: isolate`; it covers the top 35% of the
+ * viewport height, at least 240px (the whole container if that is shorter),
+ * behind its content, or all of the container 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 +64,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 +97,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 +113,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 +129,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 +151,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 +228,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 = fill ? (h - span) / 2 : SPACING / 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 +310,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 +352,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.3.0",
   "description": "Experimental, AI-generated React components for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/index.js",