@wallarm-org/design-system 2.1.0 → 2.1.1

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

@@ -13,7 +13,7 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableP
     onRevealed?: () => void;
     appeared?: boolean;
     /**
-     * The Frame's ambient layer — drifting blooms, grain and a dot cluster behind the header and
+     * 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.
      */
     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: slow-drifting blooms, grain and a dot cluster pooled bottom-left of the
+ * it: soft 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/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.0.0",
-  "generatedAt": "2026-10-07T13:55:02.346Z",
+  "version": "2.1.0",
+  "generatedAt": "2026-10-07T16:30:13.387Z",
   "components": [
     {
       "name": "Accordion",
@@ -4236,7 +4236,7 @@
           "name": "ambient",
           "type": "boolean | undefined",
           "required": false,
-          "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.",
+          "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.",
           "defaultValue": "true"
         },
         {

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

@@ -8,19 +8,19 @@
  * 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. 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.
+ *                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.
  *   2. grain   — desaturated fractal noise tiled as a background image, so it
- *                rasterises once and never repaints with the blooms.
+ *                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;
- *                patches of it surface and dissolve under two drifting noise
- *                masks, so the grid is never fully there.
+ *                two noise masks break it into patches, so the grid is never
+ *                fully there.
  *
- * Softness is baked into the gradient stops rather than `filter: blur()`:
- * a blur on a transform-animated layer is re-run by the GPU every frame, a
- * gradient is rasterised once and then only composited.
+ * 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()`.
  *
  * 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,14 +61,13 @@
 }
 
 /* One soft spot. Each `app-shell-ambient-bloom-N` only sets its colour (`--c`), shape,
-   size, position and drift path; the falloff below approximates a Gaussian so no
+   size and position; the falloff below approximates a Gaussian so no
    `filter: blur()` is needed. */
 @utility app-shell-ambient-bloom {
     --c: transparent;
     --shape: circle;
     position: absolute;
     border-radius: 50%;
-    will-change: transform;
     background: radial-gradient(
         var(--shape),
         var(--c) 0%,
@@ -77,10 +76,6 @@
         color-mix(in srgb, var(--c) 12%, transparent) 64%,
         transparent 78%
     );
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
 }
 
 @utility app-shell-ambient-bloom-1 {
@@ -89,7 +84,6 @@
     height: 760px;
     left: -280px;
     bottom: -240px;
-    animation: app-shell-ambient-drift-1 60s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-2 {
@@ -98,7 +92,6 @@
     height: 680px;
     left: -140px;
     top: 8%;
-    animation: app-shell-ambient-drift-2 74s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-3 {
@@ -107,7 +100,6 @@
     height: 540px;
     left: -170px;
     top: 46%;
-    animation: app-shell-ambient-drift-3 66s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-4 {
@@ -116,7 +108,6 @@
     height: 620px;
     left: 30px;
     bottom: -190px;
-    animation: app-shell-ambient-drift-4 82s ease-in-out infinite;
 }
 
 /* Header strip: three wide, flat ellipses crossing the top edge so the bar
@@ -130,7 +121,6 @@
     height: 540px;
     left: 22%;
     top: -360px;
-    animation: app-shell-ambient-drift-5 90s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-6 {
@@ -140,7 +130,6 @@
     height: 580px;
     right: -300px;
     top: -390px;
-    animation: app-shell-ambient-drift-6 78s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-7 {
@@ -150,138 +139,6 @@
     height: 500px;
     left: 20px;
     top: -350px;
-    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 {
@@ -294,11 +151,9 @@
 }
 
 /* Dot cluster. Confined to the bottom-left of the Frame (the only place it is
-   ever visible) so the animated masks repaint a small box, not the viewport.
-   Three masks intersect: the vertical fade, and two tiles of low-frequency
-   noise drifting in opposite directions. Dots show only where both noise
-   tiles are open, so patches of dots surface and dissolve in place over a
-   couple of minutes instead of sliding across. */
+   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. */
 @utility app-shell-ambient-dots {
     position: absolute;
     left: 0;
@@ -325,23 +180,4 @@
         400px 400px;
     mask-repeat: no-repeat, repeat, repeat;
     mask-composite: intersect;
-    mask-position:
-        0 0,
-        0 0,
-        0 0;
-    animation: app-shell-ambient-dots-shift 150s linear infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
-}
-
-/* Whole-tile offsets (multiples of 400px) so the loop is seamless. */
-@keyframes app-shell-ambient-dots-shift {
-    to {
-        mask-position:
-            0 0,
-            400px -400px,
-            -800px 400px;
-    }
 }

package/package.json

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