@intility/bifrost-experimental 0.2.0 → 0.3.1-next.0

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 # @intility/bifrost-experimental
 
-## 0.2.0
+## 0.3.1-next.0
+
+### Patch Changes
+
+- Updated dependencies [6ea3508]
+- Updated dependencies [71b282c]
+- Updated dependencies [a9ac56c]
+- Updated dependencies [9918e2b]
+- Updated dependencies [d434618]
+  - @intility/bifrost-react@7.0.0-next.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 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
 

package/dist/bifrost-experimental.css

@@ -97,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;
 

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

@@ -7,8 +7,9 @@ export type TwinkleBackgroundProps = {
     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.
+     * 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;
@@ -17,9 +18,10 @@ export type TwinkleBackgroundProps = {
  * 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, or all of it with `fill`. No dot is cut off
- * by the edge of the container. 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

package/dist/components/TwinkleBackground/TwinkleBackground.js

@@ -47,9 +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, or all of it with `fill`. No dot is cut off
- * by the edge of the container. 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
@@ -231,7 +232,7 @@ const TwinkleBackground = t0 => {
         const rows = Math.max(1, Math.floor(h / SPACING));
         span = (rows - 1) * SPACING;
         offsetX = (w - (cols - 1) * SPACING) / 2;
-        offsetY = (h - span) / 2;
+        offsetY = fill ? (h - span) / 2 : SPACING / 2;
         rand = Float32Array.from({
           length: cols * rows * 2
         }, (_, i_1) => noise((i_1 >> 1) % cols, Math.floor(i_1 / 2 / cols), i_1 & 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-experimental",
-  "version": "0.2.0",
+  "version": "0.3.1-next.0",
   "description": "Experimental, AI-generated React components for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/index.js",
@@ -42,12 +42,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@intility/bifrost-react": "^6",
+    "@intility/bifrost-react": "^7.0.0-next.0",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^6.23.0"
+    "@intility/bifrost-react": "^7.0.0-next.0"
   },
   "dependencies": {
     "react-compiler-runtime": "^1.0.0"