@checkstack/ui 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @checkstack/ui
 
+## 1.3.1
+
+### Patch Changes
+
+- 765b764: Optimize AmbientBackground performance by replacing thousand-div grid with a single-element CSS mask and hardware-accelerated Aurora Mesh animations.
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/AmbientBackground.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React from "react";
 import { cn } from "../utils";
 
 interface AmbientBackgroundProps {
@@ -6,53 +6,15 @@ interface AmbientBackgroundProps {
   className?: string;
 }
 
-const TILE_SIZE = 48;
-
 /**
- * AmbientBackground - Animated checkerboard pattern
- * Features a chess-inspired grid where random tiles glow with the primary color.
- * Dynamically adapts to screen size.
+ * AmbientBackground - High-performance background pattern
+ * Features an "Inverse Glow Grid" where aurora effects shine through transparent grid lines.
+ * Provides a premium "glowing grid" aesthetic with minimal performance impact.
  */
 export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
   children,
   className,
 }) => {
-  const [dimensions, setDimensions] = useState({ cols: 40, rows: 25 });
-
-  // Calculate grid size based on viewport
-  useEffect(() => {
-    const updateDimensions = () => {
-      const cols = Math.ceil(globalThis.innerWidth / TILE_SIZE) + 2;
-      const rows = Math.ceil(globalThis.innerHeight / TILE_SIZE) + 2;
-      setDimensions({ cols, rows });
-    };
-
-    updateDimensions();
-    globalThis.addEventListener("resize", updateDimensions);
-    return () => globalThis.removeEventListener("resize", updateDimensions);
-  }, []);
-
-  // Generate tile grid with staggered animation delays
-  const tiles = useMemo(() => {
-    const { cols, rows } = dimensions;
-    const result: Array<{ key: string; delay: number; isLight: boolean }> = [];
-
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        const isLight = (row + col) % 2 === 0;
-        // Negative delay so tiles start at different points in their 12s cycle
-        // This creates a gentle, staggered breathing effect across the grid
-        const delay = -((row * 7 + col * 13 + row * col) % 24) * 0.5;
-        result.push({
-          key: `${row}-${col}`,
-          delay,
-          isLight,
-        });
-      }
-    }
-    return result;
-  }, [dimensions]);
-
   return (
     <div
       className={cn(
@@ -60,40 +22,49 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
         className
       )}
     >
-      {/* Checkerboard grid - covers full viewport */}
-      <div
-        className="pointer-events-none fixed inset-0 overflow-hidden"
-        style={{
-          display: "grid",
-          gridTemplateColumns: `repeat(${dimensions.cols}, ${TILE_SIZE}px)`,
-          gridTemplateRows: `repeat(${dimensions.rows}, ${TILE_SIZE}px)`,
-        }}
-      >
-        {tiles.map(({ key, delay, isLight }) => (
-          <div
-            key={key}
-            className="tile-glow"
-            style={
-              {
-                width: TILE_SIZE,
-                height: TILE_SIZE,
-                backgroundColor: isLight
-                  ? "hsl(var(--muted-foreground) / 0.12)"
-                  : "hsl(var(--muted-foreground) / 0.04)",
-                "--glow-delay": `${delay}s`,
-              } as React.CSSProperties
-            }
-          />
-        ))}
+      {/* Performance optimized background layers */}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden">
+        {/* Layer 1: Aurora Blobs (Bottom) - Hardware accelerated via transform/compositor */}
+        <div
+          className="aurora-blob absolute w-[50%] h-[50%] -top-[10%] -left-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--primary) / 0.8), transparent 60%)",
+            animation: "aurora-float-1 25s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[40%] h-[40%] bottom-[10%] right-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--chart-2) / 0.7), transparent 60%)",
+            animation: "aurora-float-2 20s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[35%] h-[35%] top-[30%] left-[40%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--primary) / 0.6), transparent 60%)",
+            animation: "aurora-float-3 30s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[45%] h-[45%] bottom-[20%] left-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--chart-1) / 0.5), transparent 60%)",
+            animation: "aurora-float-4 35s ease-in-out infinite",
+          }}
+        />
+
+        {/* Layer 2: Inverse Grid Mask (Top) - Transparent lines on a solid background */}
+        <div className="ambient-grid-inverse absolute inset-0 overflow-hidden" />
       </div>
 
-      {/* Edge vignette to fade out the grid smoothly */}
+      {/* Layer 3: Edge vignette to fade out the background smoothly */}
       <div
         className="pointer-events-none fixed inset-0"
         style={{
           background: `
-            linear-gradient(to right, hsl(var(--background)) 0%, transparent 5%, transparent 95%, hsl(var(--background)) 100%),
-            linear-gradient(to bottom, hsl(var(--background)) 0%, transparent 8%, transparent 92%, hsl(var(--background)) 100%)
+            linear-gradient(to right, hsl(var(--background)) 0%, transparent 15%, transparent 85%, hsl(var(--background)) 100%),
+            linear-gradient(to bottom, hsl(var(--background)) 0%, transparent 15%, transparent 85%, hsl(var(--background)) 100%)
           `,
         }}
       />

package/src/themes.css

@@ -143,41 +143,15 @@
 
 /* Custom animations */
 @keyframes bell-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  10% {
-    transform: rotate(15deg);
-  }
-
-  20% {
-    transform: rotate(-15deg);
-  }
-
-  30% {
-    transform: rotate(10deg);
-  }
-
-  40% {
-    transform: rotate(-10deg);
-  }
-
-  50% {
-    transform: rotate(5deg);
-  }
-
-  60% {
-    transform: rotate(-5deg);
-  }
-
-  70% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
+  0% { transform: rotate(0deg); }
+  10% { transform: rotate(15deg); }
+  20% { transform: rotate(-15deg); }
+  30% { transform: rotate(10deg); }
+  40% { transform: rotate(-10deg); }
+  50% { transform: rotate(5deg); }
+  60% { transform: rotate(-5deg); }
+  70% { transform: rotate(0deg); }
+  100% { transform: rotate(0deg); }
 }
 
 .animate-bell-ring {
@@ -185,20 +159,48 @@
   transform-origin: top center;
 }
 
-/* Subtle tile pulse animation - gentle breathing effect */
-@keyframes tile-pulse {
+/* High-performance ambient background styles */
+@keyframes aurora-float-1 {
+  0% { transform: translate(-15vw, -10vh) rotate(0deg); }
+  50% { transform: translate(35vw, 25vh) rotate(180deg); }
+  100% { transform: translate(-15vw, -10vh) rotate(360deg); }
+}
 
-  0%,
-  100% {
-    opacity: 1;
-  }
+@keyframes aurora-float-2 {
+  0% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-30vw, 25vh) scale(1.2); }
+  100% { transform: translate(0, 0) scale(1); }
+}
 
-  50% {
-    opacity: 0.4;
-  }
+@keyframes aurora-float-3 {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(25vw, -30vh) rotate(-180deg); }
+  100% { transform: translate(0, 0) rotate(-360deg); }
+}
+
+@keyframes aurora-float-4 {
+  0% { transform: translate(0, 0) scale(1.1); }
+  50% { transform: translate(-20vw, -20vh) scale(1); }
+  100% { transform: translate(0, 0) scale(1.1); }
+}
+
+.ambient-grid {
+  background-image:
+    linear-gradient(to right, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.ambient-grid-inverse {
+  background: hsl(var(--background));
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='47' height='47' fill='black'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='47' height='47' fill='black'/%3E%3C/svg%3E");
 }
 
-.tile-glow {
-  animation: tile-pulse 12s ease-in-out infinite;
-  animation-delay: var(--glow-delay, 0s);
+.aurora-blob {
+  position: absolute;
+  filter: blur(60px);
+  opacity: 0.6;
+  pointer-events: none;
+  will-change: transform;
 }