@wallarm-org/design-system 2.2.0 → 2.3.0

package/dist/components/AppShell/AppShell.d.ts

@@ -13,8 +13,9 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableP
     onRevealed?: () => void;
     appeared?: boolean;
     /**
-     * The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and
-     * rail. On by default; `false` leaves the flat Frame token fill.
+     * The Frame's ambient layer — drifting blooms, grain and a dot cluster behind the header and
+     * rail. On by default; `false` leaves the flat Frame token fill. Still under
+     * `prefers-reduced-motion: reduce`.
      */
     ambient?: boolean;
 }

package/dist/components/AppShell/AppShellAmbient.d.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 /**
  * The Frame's ambient layer. The Frame is the shell's gray zone — the header
  * bar plus the rail, everything around the canvas — and Ambient is the life in
- * it: soft blooms, grain and a dot cluster pooled bottom-left of the
+ * it: slow-drifting blooms, grain and a dot cluster pooled bottom-left of the
  * rail. Purely decorative, painted under every region (see
  * `theme/components/app-shell.css`). Internal to `AppShell`; toggled with its
  * `ambient` prop.

package/dist/components/AppShell/AppShellAmbient.js

@@ -12,7 +12,6 @@ const AppShellAmbient = ()=>{
     let t5;
     let t6;
     let t7;
-    let t8;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("div", {
             className: "app-shell-ambient-bloom app-shell-ambient-bloom-1"
@@ -38,9 +37,6 @@ const AppShellAmbient = ()=>{
         t7 = /*#__PURE__*/ jsx("div", {
             className: "app-shell-ambient-grain"
         });
-        t8 = /*#__PURE__*/ jsx("div", {
-            className: "app-shell-ambient-dots"
-        });
         $[0] = t0;
         $[1] = t1;
         $[2] = t2;
@@ -49,7 +45,6 @@ const AppShellAmbient = ()=>{
         $[5] = t5;
         $[6] = t6;
         $[7] = t7;
-        $[8] = t8;
     } else {
         t0 = $[0];
         t1 = $[1];
@@ -59,8 +54,23 @@ const AppShellAmbient = ()=>{
         t5 = $[5];
         t6 = $[6];
         t7 = $[7];
-        t8 = $[8];
     }
+    let t8;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = /*#__PURE__*/ jsx("div", {
+            className: "app-shell-ambient-dots",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-dots-noise-a",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "app-shell-ambient-dots-noise-b",
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: "app-shell-ambient-dots-grid"
+                    })
+                })
+            })
+        });
+        $[8] = t8;
+    } else t8 = $[8];
     let t9;
     if ($[9] !== testId) {
         t9 = /*#__PURE__*/ jsxs("div", {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.1.3",
-  "generatedAt": "2026-10-08T09:45:32.536Z",
+  "version": "2.2.0",
+  "generatedAt": "2026-10-08T10:17:05.571Z",
   "components": [
     {
       "name": "Accordion",
@@ -4236,7 +4236,7 @@
           "name": "ambient",
           "type": "boolean | undefined",
           "required": false,
-          "description": "The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and\nrail. On by default; `false` leaves the flat Frame token fill.",
+          "description": "The Frame's ambient layer — drifting blooms, grain and a dot cluster behind the header and\nrail. On by default; `false` leaves the flat Frame token fill. Still under\n`prefers-reduced-motion: reduce`.",
           "defaultValue": "true"
         },
         {

package/dist/theme/components/app-shell.css

@@ -8,19 +8,28 @@
  * Three stacked layers, all decorative, all under the regions:
  *   1. blooms  — seven large soft gray spots: four in the rail (two lifts, two
  *                shades) and three flat ellipses crossing
- *                the top edge so the header carries the same light. This is a
- *                still frame of the "mesh gradient" of the 21st.dev builder, in
- *                the shell's own tones.
+ *                the top edge so the header carries the same light. They wander
+ *                on 60–90 s loops, stretching as they move. This is the "mesh
+ *                gradient" of the 21st.dev builder, in the shell's own tones.
  *   2. grain   — desaturated fractal noise tiled as a background image, so it
  *                rasterises once.
  *   3. dots    — a 12px halftone raster (the auth-page scanner's grid) pooled
  *                in the bottom-left of the rail, fading upward to nothing;
- *                two noise masks break it into patches, so the grid is never
- *                fully there.
+ *                patches of it surface and dissolve under two drifting noise
+ *                masks, so the grid is never fully there.
  *
- * Nothing here animates (ENG-911): endless 60–150 s drift loops kept a CPU
- * core busy on every idle tab just to repaint a background nobody watches.
- * Softness is baked into the gradient stops rather than `filter: blur()`.
+ * Performance (ENG-911). Everything that moves animates `transform` /
+ * `opacity` only, so the compositor shifts already-rasterised layers and
+ * nothing is repainted. The dots used to animate `mask-position`, which Chrome
+ * repaints on the main thread every frame (about a third of the old idle CPU);
+ * the masks now ride on their own layers instead. Softness is baked into the
+ * gradient stops rather than `filter: blur()`: a blur on a moving layer is
+ * re-run by the GPU every frame, a gradient is rasterised once.
+ *
+ * Motion is opt-in: it runs only under `prefers-reduced-motion:
+ * no-preference`, set on each `bloom-N` itself (a shared rule would lose to
+ * the equally specific, later `bloom-N`). Otherwise the ambient is the
+ * still first frame.
  *
  * The canvas (`AppShellRemote`) sits on top, so none of this shows under page
  * content. Colours are theme tokens in semantic.css (light and dark), derived
@@ -61,7 +70,7 @@
 }
 
 /* One soft spot. Each `app-shell-ambient-bloom-N` only sets its colour (`--c`), shape,
-   size and position; the falloff below approximates a Gaussian so no
+   size, position and drift path; the falloff below approximates a Gaussian so no
    `filter: blur()` is needed. */
 @utility app-shell-ambient-bloom {
     --c: transparent;
@@ -84,6 +93,10 @@
     height: 760px;
     left: -280px;
     bottom: -240px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-1 60s ease-in-out infinite;
+    }
 }
 
 @utility app-shell-ambient-bloom-2 {
@@ -92,6 +105,10 @@
     height: 680px;
     left: -140px;
     top: 8%;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-2 74s ease-in-out infinite;
+    }
 }
 
 @utility app-shell-ambient-bloom-3 {
@@ -100,6 +117,10 @@
     height: 540px;
     left: -170px;
     top: 46%;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-3 66s ease-in-out infinite;
+    }
 }
 
 @utility app-shell-ambient-bloom-4 {
@@ -108,6 +129,10 @@
     height: 620px;
     left: 30px;
     bottom: -190px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-4 82s ease-in-out infinite;
+    }
 }
 
 /* Header strip: three wide, flat ellipses crossing the top edge so the bar
@@ -121,6 +146,10 @@
     height: 540px;
     left: 22%;
     top: -360px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-5 90s ease-in-out infinite;
+    }
 }
 
 @utility app-shell-ambient-bloom-6 {
@@ -130,6 +159,10 @@
     height: 580px;
     right: -300px;
     top: -390px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-6 78s ease-in-out infinite;
+    }
 }
 
 @utility app-shell-ambient-bloom-7 {
@@ -139,6 +172,141 @@
     height: 500px;
     left: 20px;
     top: -350px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-drift-7 70s ease-in-out infinite;
+    }
+}
+
+/* Drift paths. Each spot wanders through four waypoints instead of a straight
+   back-and-forth, stretching along the direction it moves (a liquid smearing
+   on a surface) and breathing a little in opacity. Transform + opacity only,
+   so the rasterised gradient is never repainted, just composited. */
+@keyframes app-shell-ambient-drift-1 {
+    0% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 1;
+    }
+    33% {
+        transform: translate(70px, -90px) rotate(6deg) scale(1.16, 0.92);
+        opacity: 0.9;
+    }
+    66% {
+        transform: translate(30px, -160px) rotate(-4deg) scale(0.94, 1.14);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 1;
+    }
+}
+@keyframes app-shell-ambient-drift-2 {
+    0% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 0.95;
+    }
+    33% {
+        transform: translate(-50px, 110px) rotate(-8deg) scale(0.9, 1.18);
+        opacity: 1;
+    }
+    66% {
+        transform: translate(40px, 170px) rotate(5deg) scale(1.2, 0.9);
+        opacity: 0.88;
+    }
+    100% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 0.95;
+    }
+}
+@keyframes app-shell-ambient-drift-3 {
+    0% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 1;
+    }
+    33% {
+        transform: translate(60px, -120px) rotate(10deg) scale(1.22, 0.88);
+        opacity: 0.85;
+    }
+    66% {
+        transform: translate(-30px, -200px) rotate(-6deg) scale(0.92, 1.16);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 1;
+    }
+}
+@keyframes app-shell-ambient-drift-4 {
+    0% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 0.9;
+    }
+    33% {
+        transform: translate(-80px, -60px) rotate(-7deg) scale(1.18, 0.9);
+        opacity: 1;
+    }
+    66% {
+        transform: translate(-40px, -140px) rotate(4deg) scale(0.9, 1.2);
+        opacity: 0.86;
+    }
+    100% {
+        transform: translate(0, 0) rotate(0deg) scale(1, 1);
+        opacity: 0.9;
+    }
+}
+@keyframes app-shell-ambient-drift-5 {
+    0% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 1;
+    }
+    33% {
+        transform: translate(160px, 40px) scale(1.14, 0.94);
+        opacity: 0.85;
+    }
+    66% {
+        transform: translate(260px, 10px) scale(0.96, 1.1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 1;
+    }
+}
+@keyframes app-shell-ambient-drift-6 {
+    0% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 0.95;
+    }
+    33% {
+        transform: translate(-200px, 30px) scale(1.12, 0.92);
+        opacity: 1;
+    }
+    66% {
+        transform: translate(-320px, 60px) scale(0.94, 1.12);
+        opacity: 0.85;
+    }
+    100% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 0.95;
+    }
+}
+@keyframes app-shell-ambient-drift-7 {
+    0% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 1;
+    }
+    33% {
+        transform: translate(120px, 50px) scale(1.16, 0.9);
+        opacity: 0.88;
+    }
+    66% {
+        transform: translate(200px, 20px) scale(0.92, 1.12);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(0, 0) scale(1, 1);
+        opacity: 1;
+    }
 }
 
 @utility app-shell-ambient-grain {
@@ -151,33 +319,82 @@
 }
 
 /* Dot cluster. Confined to the bottom-left of the Frame (the only place it is
-   ever visible). Three masks intersect: the vertical fade, and two tiles of
-   low-frequency noise. Dots show only where both noise tiles are open, so the
-   grid reads as scattered patches. */
+   ever visible). Three masks intersect: the vertical fade here, and two tiles
+   of low-frequency noise on the nested `dots-noise-*` layers. Dots show only
+   where both noise tiles are open, so patches surface and dissolve in place
+   over a couple of minutes instead of sliding across.
+
+   The noise tiles move by `transform`, not `mask-position`, so the compositor
+   slides them and nothing repaints. Each layer carries its mask with it, and
+   the grid counter-moves by the sum of the two, so the dots themselves stay
+   put. The noise layers overhang the box by 1200px (a multiple of both the
+   400px tile and the 12px grid) so their edges never show mid-loop. */
 @utility app-shell-ambient-dots {
     position: absolute;
     left: 0;
     bottom: 0;
     width: min(100%, 480px);
     height: min(560px, 64vh);
+    overflow: hidden;
+    mask-image: linear-gradient(
+        to top,
+        #000 0,
+        rgb(0 0 0 / 0.75) 22%,
+        rgb(0 0 0 / 0.4) 48%,
+        rgb(0 0 0 / 0.12) 74%,
+        transparent 94%
+    );
+}
+
+@utility app-shell-ambient-dots-noise-a {
+    position: absolute;
+    inset: -1200px;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mask-size: 400px 400px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-dots-noise-a 150s linear infinite;
+    }
+}
+
+@utility app-shell-ambient-dots-noise-b {
+    position: absolute;
+    inset: 0;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mask-size: 400px 400px;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-dots-noise-b 150s linear infinite;
+    }
+}
+
+@utility app-shell-ambient-dots-grid {
+    position: absolute;
+    inset: 0;
     background-image: radial-gradient(circle at center, var(--color-component-app-shell-ambient-dot) 0.9px, transparent 1.1px);
     background-size: 12px 12px;
     background-position: 6px 6px;
-    mask-image:
-        linear-gradient(
-            to top,
-            #000 0,
-            rgb(0 0 0 / 0.75) 22%,
-            rgb(0 0 0 / 0.4) 48%,
-            rgb(0 0 0 / 0.12) 74%,
-            transparent 94%
-        ),
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    mask-size:
-        100% 100%,
-        400px 400px,
-        400px 400px;
-    mask-repeat: no-repeat, repeat, repeat;
-    mask-composite: intersect;
+
+    @media (prefers-reduced-motion: no-preference) {
+        animation: app-shell-ambient-dots-grid 150s linear infinite;
+    }
+}
+
+/* Whole-tile offsets (multiples of 400px) so the loop is seamless. Noise A
+   travels (400, -400), noise B (-800, 400) in total — so (-1200, 800) relative
+   to A, which it sits inside — and the grid undoes B's total. */
+@keyframes app-shell-ambient-dots-noise-a {
+    to {
+        transform: translate(400px, -400px);
+    }
+}
+@keyframes app-shell-ambient-dots-noise-b {
+    to {
+        transform: translate(-1200px, 800px);
+    }
+}
+@keyframes app-shell-ambient-dots-grid {
+    to {
+        transform: translate(800px, -400px);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",