@intility/bifrost-experimental 0.0.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @intility/bifrost-experimental
+
+## 0.2.0
+
+### 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/README.md

@@ -0,0 +1,57 @@
+# @intility/bifrost-experimental
+
+Experimental, AI-generated React components for Intility's design system,
+Bifrost. See [Experimental](https://bifrost.intility.com/react/experimental)
+in the style guide.
+
+## What experimental means
+
+The components are built with AI and aren't reviewed line by line. They are
+front end only: they depend on nothing but React and Bifrost, and make no
+network calls. Lint rules and tests catch common mistakes, but they aren't a
+guarantee. Use the components in your apps, but expect them to change more
+often than the Bifrost packages.
+
+## Install
+
+```shell
+npm install @intility/bifrost-experimental
+```
+
+It needs `react`, `react-dom` and `@intility/bifrost-react`. Import the CSS
+once, after the Bifrost CSS:
+
+```tsx
+import "@intility/bifrost-react/bifrost-app.css";
+import "@intility/bifrost-experimental/bifrost-experimental.css";
+```
+
+Import each component from its own path:
+
+```tsx
+import TwinkleBackground from "@intility/bifrost-experimental/TwinkleBackground";
+```
+
+## Components
+
+- [`Backdrop`](https://bifrost.intility.com/react/experimental/backdrop):
+  a soft shaded area that keeps text readable on a busy background
+- [`FrontpageHeader`](https://bifrost.intility.com/react/experimental/frontpage-header):
+  logo, title and subtitle for the front page of a Platform Manager module
+- [`TwinkleBackground`](https://bifrost.intility.com/react/experimental/twinkle-background):
+  an animated dot grid in the theme color, for the front page of a Platform
+  Manager module
+
+## Contributing
+
+See
+[AGENTS.md](https://github.com/intility/bifrost/blob/main/packages/bifrost-experimental/AGENTS.md)
+for the rules and commands, whether you write the component yourself or with
+an AI agent.
+
+Members of the `bifrost-experimenters` team in the `intility` GitHub
+organization can approve changes to the components, their docs pages
+(`docs/app/react/experimental/`) and the Experimental sidebar group
+(`docs/utils/experimentalNavigation.ts`). Changes to the package configs, the
+guardrails and the rest of the docs need a Bifrost developer, as
+[CODEOWNERS](https://github.com/intility/bifrost/blob/main/CODEOWNERS) defines.

package/dist/bifrost-experimental.css

@@ -0,0 +1,132 @@
+/* No z-index or isolation: the shade has to join the stacking context around
+it, so it sits above what is behind it but below all the text */
+.bfx-backdrop {
+  display: block;
+  position: relative;
+  width: fit-content;
+}
+
+/* The wrapper only takes the text color from its bfc-*-bg class. The type
+selector outranks the class, whatever order the stylesheets load in. */
+span.bfx-backdrop {
+  background-color: transparent;
+}
+
+.bfx-backdrop-shade {
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+
+  /* 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);
+
+  /* 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
+lines and neither covers the other line */
+.bfx-frontpage-header {
+  display: flex;
+  align-items: center;
+  gap: var(--bfs16);
+  isolation: isolate;
+}
+
+.bfx-frontpage-header-logo {
+  display: flex;
+  flex-shrink: 0;
+  height: 72px;
+}
+
+/* Stretching from the slot isn't enough in Safari, which sizes the slot from
+the image's own width. An SVG with only a viewBox has none, so the logo would
+overlap the title. */
+.bfx-frontpage-header-logo > * {
+  height: 100%;
+  width: auto;
+}
+
+/* flex-start keeps each line only as wide as its text */
+.bfx-frontpage-header-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bfs8);
+}
+.bfx-twinkle-background {
+  position: absolute;
+  inset: 0 0 auto;
+
+  /* A canvas is a replaced element, so inset alone doesn't stretch it */
+  width: 100%;
+  height: 40%;
+  z-index: -1;
+  pointer-events: none;
+
+  /* The component reads this color back for the canvas. Light mode cuts the
+  chroma to a quarter, so the dots are only a hint of color. Browsers without
+  relative colors fall back to the text color. */
+  color: light-dark(
+    oklch(from var(--bfc-theme) l calc(c * 0.25) h),
+    var(--bfc-theme)
+  );
+}
+
+.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. */
+.bfx-twinkle-background-red {
+  color: light-dark(
+    oklch(from var(--bfc-alert) l calc(c * 0.25) h),
+    oklch(from var(--bfc-alert) 66% c h)
+  );
+}
+
+.bfx-twinkle-background-green {
+  color: light-dark(
+    oklch(from var(--bfc-success) 52% calc(c * 0.25) h),
+    var(--bfc-success)
+  );
+}

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,31 @@
+import type { BoxProps } from "@intility/bifrost-react/Box";
+import type { ReactNode } from "react";
+export type BackdropProps = {
+    children: ReactNode;
+    /**
+     * The background the backdrop sits on, which is the color it fades out to.
+     * Takes the same values as the `background` prop of Bifrost's Box, and also
+     * sets the matching text color.
+     * @example
+     * `"base"` is the page background, and the default.
+     * `true` and `"base-3"` match `.bfc-base-3-bg`.
+     * `"theme-fade"` matches `.bfc-theme-fade-bg`.
+     */
+    background?: BoxProps["background"];
+};
+/**
+ * Soft shaded area behind one line of text or one see-through control, so it
+ * stays readable on a busy background like the twinkle background. Wrap each
+ * line on its own, not a group of lines. Experimental: AI-generated, not
+ * reviewed line by line.
+ *
+ * @see https://bifrost.intility.com/react/experimental/backdrop
+ *
+ * @example
+ * <h1 className="bf-h1">
+ *   <Backdrop>Platform Manager</Backdrop>
+ * </h1>
+ * <Backdrop background="base-3">On a base-3 background</Backdrop>
+ */
+declare const Backdrop: ({ children, background }: BackdropProps) => import("react").JSX.Element;
+export default Backdrop;

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,53 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Soft shaded area behind one line of text or one see-through control, so it
+ * stays readable on a busy background like the twinkle background. Wrap each
+ * line on its own, not a group of lines. Experimental: AI-generated, not
+ * reviewed line by line.
+ *
+ * @see https://bifrost.intility.com/react/experimental/backdrop
+ *
+ * @example
+ * <h1 className="bf-h1">
+ *   <Backdrop>Platform Manager</Backdrop>
+ * </h1>
+ * <Backdrop background="base-3">On a base-3 background</Backdrop>
+ */
+const Backdrop = t0 => {
+  const $ = _c(6);
+  const {
+    children,
+    background: t1
+  } = t0;
+  const background = t1 === undefined ? "base" : t1;
+  const bg = `bfc-${background === true ? "base-3" : background || "base"}-bg`;
+  const t2 = `bfx-backdrop ${bg}`;
+  const t3 = `bfx-backdrop-shade ${bg}`;
+  let t4;
+  if ($[0] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: t3
+    });
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== children || $[3] !== t2 || $[4] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("span", {
+      className: t2,
+      children: [t4, children]
+    });
+    $[2] = children;
+    $[3] = t2;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+};
+export default Backdrop;

package/dist/components/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./Backdrop.js";
+export { default } from "./Backdrop.js";

package/dist/components/Backdrop/index.js

@@ -0,0 +1 @@
+export { default } from "./Backdrop.js";

package/dist/components/FrontpageHeader/FrontpageHeader.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export type FrontpageHeaderProps = {
+    /**
+     * The name of the app or module. Rendered as the page's `h1`, so use the
+     * component once per page.
+     */
+    title: ReactNode;
+    /** One line under the title */
+    subtitle?: ReactNode;
+    /**
+     * Image shown to the left of the title, like `<img src="/logo.svg" alt="" />`.
+     * It is shown 72px high and hidden on small screens. Use an empty `alt` when
+     * the title already names the app.
+     */
+    logo?: ReactNode;
+};
+/**
+ * Header for the front page of a Platform Manager module: logo, title and
+ * subtitle. The title is the page's `h1`. To keep the title and subtitle
+ * readable on the twinkle background, wrap each in a `Backdrop`.
+ * Experimental: AI-generated, not reviewed line by line.
+ *
+ * @see https://bifrost.intility.com/react/experimental/frontpage-header
+ *
+ * @example
+ * <FrontpageHeader
+ *   logo={<img src="/logo.svg" alt="" />}
+ *   title={<Backdrop>Platform Manager</Backdrop>}
+ *   subtitle={<Backdrop>An operational control plane</Backdrop>}
+ * />
+ */
+declare const FrontpageHeader: ({ title, subtitle, logo }: FrontpageHeaderProps) => import("react").JSX.Element;
+export default FrontpageHeader;

package/dist/components/FrontpageHeader/FrontpageHeader.js

@@ -0,0 +1,84 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header for the front page of a Platform Manager module: logo, title and
+ * subtitle. The title is the page's `h1`. To keep the title and subtitle
+ * readable on the twinkle background, wrap each in a `Backdrop`.
+ * Experimental: AI-generated, not reviewed line by line.
+ *
+ * @see https://bifrost.intility.com/react/experimental/frontpage-header
+ *
+ * @example
+ * <FrontpageHeader
+ *   logo={<img src="/logo.svg" alt="" />}
+ *   title={<Backdrop>Platform Manager</Backdrop>}
+ *   subtitle={<Backdrop>An operational control plane</Backdrop>}
+ * />
+ */
+const FrontpageHeader = t0 => {
+  const $ = _c(12);
+  const {
+    title,
+    subtitle,
+    logo
+  } = t0;
+  let t1;
+  if ($[0] !== logo) {
+    t1 = logo && /*#__PURE__*/_jsx("span", {
+      className: "bfx-frontpage-header-logo from-small",
+      children: logo
+    });
+    $[0] = logo;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== title) {
+    t2 = /*#__PURE__*/_jsx("h1", {
+      className: "bf-h1",
+      children: title
+    });
+    $[2] = title;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== subtitle) {
+    t3 = subtitle && /*#__PURE__*/_jsx("div", {
+      className: "bf-large",
+      children: subtitle
+    });
+    $[4] = subtitle;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "bfx-frontpage-header-text",
+      children: [t2, t3]
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t1 || $[10] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      className: "bfx-frontpage-header",
+      children: [t1, t4]
+    });
+    $[9] = t1;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+};
+export default FrontpageHeader;

package/dist/components/FrontpageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./FrontpageHeader.js";
+export { default } from "./FrontpageHeader.js";

package/dist/components/FrontpageHeader/index.js

@@ -0,0 +1 @@
+export { default } from "./FrontpageHeader.js";

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

@@ -0,0 +1,36 @@
+export type TwinkleBackgroundProps = {
+    /**
+     * The color of the dots. `"theme"` follows the Bifrost theme of the app, and
+     * the other values override it.
+     * @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, 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
+ *
+ * @example
+ * <div style={{ position: "relative", isolation: "isolate" }}>
+ *   <TwinkleBackground />
+ *   <Backdrop>
+ *     <h1 className="bf-h1">Platform Manager</h1>
+ *   </Backdrop>
+ * </div>
+ */
+declare const TwinkleBackground: ({ color, fill, }: TwinkleBackgroundProps) => import("react").JSX.Element;
+export default TwinkleBackground;

package/dist/components/TwinkleBackground/TwinkleBackground.js

@@ -0,0 +1,389 @@
+"use client";
+
+import { c as _c } from "react-compiler-runtime";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Not props, so every front page looks the same
+const SPACING = 16;
+// Opacity at the dimmest point of a twinkle
+const MIN_ALPHA = 0.2;
+// Hover glow reach in CSS pixels, ripple speed in CSS pixels per second and
+// ripple life in seconds
+const RADIUS = 240;
+const RIPPLE_SPEED = 620;
+const RIPPLE_LIFE = 1.8;
+const CLICK_STRENGTH = 0.5;
+// Resting opacity. Hover and ripples lift dots above it, up to fully opaque.
+const OPACITY = {
+  light: 0.4,
+  dark: 0.8
+};
+// Dots are filled in batches of equal opacity, one path per batch instead of
+// one per dot. The steps are too small to see.
+const ALPHA_STEPS = 48;
+// Reading the computed color forces a style recalculation, so not every frame
+const STYLE_INTERVAL = 250;
+// Caps the animation at about 60fps on high refresh rate screens
+const FRAME_INTERVAL = 1000 / 60 - 2;
+// Clicks on these don't start a ripple. tabindex="-1" is often set on a whole
+// container like <main>, so it doesn't count.
+const INTERACTIVE = 'a, button, input, select, textarea, label, summary, [tabindex]:not([tabindex="-1"]), [contenteditable],' + "[role=button], [role=link], [role=tab], [role=checkbox], [role=radio], [role=switch]," + "[role=menuitem], [role=option], [role=combobox], [role=slider]";
+const TAU = Math.PI * 2;
+
+// Reduced motion is the only way to stop the twinkle (WCAG 2.2.2), so it is
+// followed live
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = onChange => {
+  const query = window.matchMedia(REDUCED_MOTION);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+};
+const useReducedMotion = () => {
+  return useSyncExternalStore(subscribeReducedMotion, _temp, _temp2);
+};
+const within = (rect, x, y) => x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
+
+/**
+ * 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
+ * by line.
+ *
+ * @see https://bifrost.intility.com/react/experimental/twinkle-background
+ *
+ * @example
+ * <div style={{ position: "relative", isolation: "isolate" }}>
+ *   <TwinkleBackground />
+ *   <Backdrop>
+ *     <h1 className="bf-h1">Platform Manager</h1>
+ *   </Backdrop>
+ * </div>
+ */
+const TwinkleBackground = t0 => {
+  const $ = _c(6);
+  const {
+    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 t3;
+  let t4;
+  if ($[0] !== fill || $[1] !== still) {
+    t3 = () => {
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) {
+        return;
+      }
+      const forcedColors = window.matchMedia("(forced-colors: active)");
+      const pointer = {
+        x: 0,
+        y: 0,
+        on: 0
+      };
+      const cursor = {
+        x: 0,
+        y: 0,
+        over: false
+      };
+      const clicks = [];
+      let w = 0;
+      let h = 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) => {
+        let n = Math.imul(col + 1, 2654435761) ^ Math.imul(row + 1, 2246822507) ^ Math.imul(k + 1, 3266489909) ^ seed;
+        n = Math.imul(n ^ n >>> 15, 739982445);
+        n = Math.imul(n ^ n >>> 12, 695872825);
+        return ((n ^ n >>> 15) >>> 0) / 4294967296;
+      };
+      let clock = 0;
+      let last = 0;
+      let raf = 0;
+      let visible = false;
+      let dotColor = "";
+      let base = OPACITY.light;
+      let styleAt = -Infinity;
+      const readStyle = () => {
+        const style = getComputedStyle(canvas);
+        dotColor = style.color;
+        base = style.colorScheme.includes("dark") ? OPACITY.dark : OPACITY.light;
+      };
+      const batches = Array.from({
+        length: ALPHA_STEPS
+      }, _temp3);
+      const draw = () => {
+        ctx.clearRect(0, 0, w, h);
+        if (forcedColors.matches || h <= 0) {
+          return;
+        }
+        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 = 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);
+          if (pointer.on > 0.001) {
+            const d = Math.hypot(x - pointer.x, y - pointer.y);
+            const near = d < RADIUS ? 1 - d / RADIUS : 0;
+            alpha = alpha * (1 - 0.3 * pointer.on + near * near * 1.8 * pointer.on);
+          }
+          for (const c of clicks) {
+            const age = clock - c.t;
+            const life = 1 - age / RIPPLE_LIFE;
+            const d_0 = Math.hypot(x - c.x, y - c.y);
+            const ring = Math.exp(-((d_0 - age * RIPPLE_SPEED) ** 2) / 4232) * life * life * CLICK_STRENGTH;
+            alpha = alpha + ring * 2.6;
+            size = size + ring * 1.4;
+          }
+          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) {
+            continue;
+          }
+          batches[step - 1].push(x, y, size);
+        }
+        batches.forEach((dots, i_0) => {
+          if (!dots.length) {
+            return;
+          }
+          ctx.globalAlpha = (i_0 + 1) / ALPHA_STEPS;
+          ctx.beginPath();
+          for (let j = 0; j < dots.length; j = j + 3, j) {
+            ctx.moveTo(dots[j] + dots[j + 2], dots[j + 1]);
+            ctx.arc(dots[j], dots[j + 1], dots[j + 2], 0, TAU);
+          }
+          ctx.fill();
+          dots.length = 0;
+        });
+      };
+      const redraw = () => {
+        if (h <= 0) {
+          return;
+        }
+        readStyle();
+        draw();
+      };
+      const tick = now => {
+        if (forcedColors.matches) {
+          ctx.clearRect(0, 0, w, h);
+          return;
+        }
+        raf = requestAnimationFrame(tick);
+        if (last && now - last < FRAME_INTERVAL) {
+          return;
+        }
+        if (now - styleAt > STYLE_INTERVAL) {
+          readStyle();
+          styleAt = now;
+        }
+        clock = clock + (last ? Math.min(0.05, (now - last) / 1000) : 0);
+        clock;
+        last = now;
+        while (clicks.length && clock - clicks[0].t > RIPPLE_LIFE) {
+          clicks.shift();
+        }
+        let inside = false;
+        if (cursor.over) {
+          const rect = canvas.getBoundingClientRect();
+          const x_0 = cursor.x - rect.left;
+          const y_0 = cursor.y - rect.top;
+          inside = within(rect, x_0, y_0);
+          if (pointer.on < 0.01) {
+            pointer.x = x_0;
+            pointer.y = y_0;
+          }
+          pointer.x = pointer.x + (x_0 - pointer.x) * 0.18;
+          pointer.y = pointer.y + (y_0 - pointer.y) * 0.18;
+        }
+        pointer.on = pointer.on + ((inside ? 1 : 0) - pointer.on) * 0.08;
+        draw();
+      };
+      const play = () => {
+        cancelAnimationFrame(raf);
+        last = 0;
+        raf = requestAnimationFrame(tick);
+      };
+      const resize = () => {
+        const rect_0 = canvas.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        w = rect_0.width;
+        h = rect_0.height;
+        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.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 * rows * 2
+        }, (_, i_1) => noise((i_1 >> 1) % cols, Math.floor(i_1 / 2 / cols), i_1 & 1));
+        redraw();
+      };
+      let unwatchDensity = _temp4;
+      const watchDensity = () => {
+        const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const onChange = () => {
+          resize();
+          watchDensity();
+        };
+        query.addEventListener("change", onChange, {
+          once: true
+        });
+        unwatchDensity = () => query.removeEventListener("change", onChange);
+      };
+      const onMove = e => {
+        cursor.x = e.clientX;
+        cursor.y = e.clientY;
+        cursor.over = true;
+      };
+      const onLeave = () => {
+        cursor.over = false;
+      };
+      const onRelease = e_0 => {
+        if (e_0.pointerType !== "mouse") {
+          onLeave();
+        }
+      };
+      const onDown = e_1 => {
+        const el = e_1.target;
+        if (e_1.button !== 0 || !(el instanceof Element)) {
+          return;
+        }
+        if (!canvas.parentElement?.contains(el) || el.closest(INTERACTIVE)) {
+          return;
+        }
+        const rect_1 = canvas.getBoundingClientRect();
+        const x_1 = e_1.clientX - rect_1.left;
+        const y_1 = e_1.clientY - rect_1.top;
+        if (!within(rect_1, x_1, y_1)) {
+          return;
+        }
+        if (clicks.length >= 8) {
+          clicks.shift();
+        }
+        clicks.push({
+          x: x_1,
+          y: y_1,
+          t: clock
+        });
+      };
+      const resizeObserver = new ResizeObserver(resize);
+      resizeObserver.observe(canvas);
+      watchDensity();
+      const systemMode = window.matchMedia("(prefers-color-scheme: dark)");
+      const attributes = new MutationObserver(redraw);
+      const onForcedColors = () => {
+        if (still) {
+          redraw();
+        } else {
+          if (visible) {
+            play();
+          }
+        }
+      };
+      forcedColors.addEventListener("change", onForcedColors);
+      if (still) {
+        systemMode.addEventListener("change", redraw);
+        for (let el_0 = canvas; el_0; el_0 = el_0.parentElement) {
+          attributes.observe(el_0, {
+            attributes: true,
+            attributeFilter: ["class", "style", "data-bf-color-mode"]
+          });
+        }
+      }
+      const visibility = new IntersectionObserver(t5 => {
+        const [entry] = t5;
+        visible = entry.isIntersecting;
+        if (visible) {
+          play();
+        } else {
+          cancelAnimationFrame(raf);
+        }
+      });
+      if (!still) {
+        visibility.observe(canvas);
+        window.addEventListener("pointermove", onMove, {
+          passive: true
+        });
+        window.addEventListener("pointerdown", onDown, {
+          passive: true
+        });
+        window.addEventListener("pointerup", onRelease, {
+          passive: true
+        });
+        window.addEventListener("pointercancel", onLeave, {
+          passive: true
+        });
+        document.addEventListener("mouseleave", onLeave);
+        window.addEventListener("blur", onLeave);
+      }
+      return () => {
+        cancelAnimationFrame(raf);
+        resizeObserver.disconnect();
+        unwatchDensity();
+        systemMode.removeEventListener("change", redraw);
+        forcedColors.removeEventListener("change", onForcedColors);
+        attributes.disconnect();
+        visibility.disconnect();
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerdown", onDown);
+        window.removeEventListener("pointerup", onRelease);
+        window.removeEventListener("pointercancel", onLeave);
+        document.removeEventListener("mouseleave", onLeave);
+        window.removeEventListener("blur", onLeave);
+      };
+    };
+    t4 = [still, fill];
+    $[0] = fill;
+    $[1] = still;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t3 = $[2];
+    t4 = $[3];
+  }
+  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: t5
+    });
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  return t6;
+};
+export default TwinkleBackground;
+function _temp() {
+  return window.matchMedia(REDUCED_MOTION).matches;
+}
+function _temp2() {
+  return false;
+}
+function _temp3() {
+  return [];
+}
+function _temp4() {}

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

@@ -0,0 +1,2 @@
+export type * from "./TwinkleBackground.js";
+export { default } from "./TwinkleBackground.js";

package/dist/components/TwinkleBackground/index.js

@@ -0,0 +1 @@
+export { default } from "./TwinkleBackground.js";

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Backdrop } from "./components/Backdrop/index.js";
+export { default as FrontpageHeader } from "./components/FrontpageHeader/index.js";
+export { default as TwinkleBackground } from "./components/TwinkleBackground/index.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Backdrop } from "./components/Backdrop/index.js";
+export { default as FrontpageHeader } from "./components/FrontpageHeader/index.js";
+export { default as TwinkleBackground } from "./components/TwinkleBackground/index.js";

package/package.json

@@ -1,11 +1,61 @@
 {
   "name": "@intility/bifrost-experimental",
-  "version": "0.0.0",
-  "description": "",
-  "license": "MIT",
-  "author": "Intility AS",
+  "version": "0.2.0",
+  "description": "Experimental, AI-generated React components for Intility's design system, Bifrost.",
   "type": "module",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
-  }
+    "build:css": "postcss src/bifrost-experimental.css --dir dist --use postcss-import --no-map",
+    "build:module": "babel ./src -d dist --extensions .ts,.tsx --ignore '**/*.test.*,**/*.d.ts' --root-mode upward",
+    "build:types": "tsc --project tsconfig.build.json",
+    "watch:css": "npm run build:css -- --watch",
+    "watch:module": "npm run build:module -- --watch",
+    "watch:types": "npm run build:types -- --watch --preserveWatchOutput",
+    "clean": "rimraf dist",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\" && stylelint \"src/**/*.css\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./bifrost-experimental.css": "./dist/bifrost-experimental.css",
+    ".": "./dist/index.js",
+    "./*": "./dist/components/*/index.js"
+  },
+  "homepage": "https://bifrost.intility.com/react/experimental",
+  "keywords": [
+    "react",
+    "typescript",
+    "intility",
+    "design system",
+    "bifrost",
+    "experimental"
+  ],
+  "author": "Intility AS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intility/bifrost.git",
+    "directory": "packages/bifrost-experimental"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@intility/bifrost-react": "^6",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@intility/bifrost-react": "^6.23.0"
+  },
+  "dependencies": {
+    "react-compiler-runtime": "^1.0.0"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "README.md",
+    "dist/**/*",
+    "!dist/**/*.test.*"
+  ]
 }

package/index.js

@@ -1 +0,0 @@
-console.log("hey there");