@checkstack/ui 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @checkstack/ui
 
+## 1.3.2
+
+### Patch Changes
+
+- 0388000: Implemented a global performance-aware UI infrastructure that detects hardware capabilities (using heuristics and frame-budget benchmarks) to automatically disable expensive CSS animations, backdrop-blurs, and glassmorphism effects on low-power or non-hardware-accelerated devices.
+
+## 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.2",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/AmbientBackground.tsx

@@ -1,104 +1,95 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React, { useMemo } from "react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 interface AmbientBackgroundProps {
   children: React.ReactNode;
   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 - Premium background with performance-aware fallbacks.
+ * Features an "Inverse Glow Grid" where aurora effects shine through transparency.
+ * Automatically downgrades to a static grid on devices that struggle with CSS blurs.
  */
 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 }> = [];
+  const { isLowPower } = usePerformance();
 
-    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]);
+  // Optimized Aurora Layers - only render if not in low power mode
+  const auroraBlobs = useMemo(() => {
+    if (isLowPower) return;
+    return (
+      <>
+        <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",
+          }}
+        />
+      </>
+    );
+  }, [isLowPower]);
 
   return (
     <div
       className={cn(
         "relative min-h-screen bg-background overflow-hidden",
-        className
+        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
-            }
-          />
-        ))}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden">
+        {/* Layer 1: Aurora Blobs (Bottom) */}
+        {auroraBlobs}
+
+        {/* Layer 2: Grid Mask - Switches mode based on performance capability */}
+        <div
+          className={cn(
+            isLowPower ? "ambient-grid" : "ambient-grid-inverse",
+            "absolute inset-0 overflow-hidden",
+          )}
+        />
       </div>
 
-      {/* Edge vignette to fade out the grid smoothly */}
+      {/* Layer 3: Edge vignette fade */}
       <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%)
           `,
         }}
       />
 
-      {/* Content */}
       <div className="relative z-10">{children}</div>
     </div>
   );

package/src/components/AnimatedCounter.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
+import { usePerformance } from "./PerformanceProvider";
 
 interface AnimatedCounterProps {
   value: number;
@@ -20,15 +21,17 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
   const [displayValue, setDisplayValue] = useState(0);
   const displayValueRef = useRef(displayValue);
   displayValueRef.current = displayValue;
+  
+  const { isLowPower } = usePerformance();
 
   useEffect(() => {
-    // Skip animation if value is 0 or duration is 0
-    if (value === 0 || duration === 0) {
+    // Skip animation if value is 0, duration is 0, or in low-power mode
+    if (value === 0 || duration === 0 || isLowPower) {
       setDisplayValue(value);
       return;
     }
 
-    const startTime = performance.now();
+    const startTime = globalThis.performance.now();
     const startValue = displayValueRef.current;
     const diff = value - startValue;
 
@@ -48,7 +51,7 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
     };
 
     requestAnimationFrame(animate);
-  }, [value, duration]);
+  }, [value, duration, isLowPower]);
 
   return <span className={className}>{formatter(displayValue)}</span>;
 };

package/src/components/CommandPalette.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { cn } from "../utils";
 import { Command } from "lucide-react";
+import { usePerformance } from "./PerformanceProvider";
 
 interface CommandPaletteProps {
   onClick?: () => void;
@@ -17,6 +18,8 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
   placeholder = "Search systems, incidents, or run commands...",
   className,
 }) => {
+  const { isLowPower } = usePerformance();
+
   return (
     <button
       onClick={onClick}
@@ -24,18 +27,20 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
         // Base styles
         "w-full flex items-center gap-3 px-4 py-3 rounded-xl",
         // Glassmorphism effect
-        "bg-card/50 backdrop-blur-sm border border-border/50",
+        isLowPower ? "bg-card" : "bg-card/50 backdrop-blur-sm",
+        "border border-border/50",
         // Glow and shadow
         "shadow-lg shadow-primary/5 hover:shadow-xl hover:shadow-primary/10",
         // Hover state
         "hover:border-primary/30 hover:bg-card/70",
         // Transition
-        "transition-all duration-300 ease-out",
+        "transition-all",
+        !isLowPower && "duration-300 ease-out",
         // Focus ring
         "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background",
         // Cursor
         "cursor-text",
-        className
+        className,
       )}
     >
       {/* Search icon */}
@@ -63,7 +68,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
         className={cn(
           "hidden sm:flex items-center gap-1 px-2 py-1 rounded-md",
           "bg-muted/50 border border-border/50",
-          "text-xs text-muted-foreground font-mono"
+          "text-xs text-muted-foreground font-mono",
         )}
       >
         <Command className="w-3 h-3" />

package/src/components/Dialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -14,20 +15,24 @@ const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50",
+        !isLowPower && "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-auto overflow-x-visible",
+  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg sm:rounded-lg max-h-[85vh] overflow-y-auto overflow-x-visible",
   {
     variants: {
       size: {
@@ -52,19 +57,26 @@ interface DialogContentProps
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, size, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(dialogContentVariants({ size }), className)}
-      {...props}
-    >
+>(({ className, children, size, ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          dialogContentVariants({ size }),
+          !isLowPower && "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          className
+        )}
+        {...props}
+      >
       {/* Wrapper with negative margin and positive padding to allow focus rings to extend */}
       <div className="-mx-2 px-2">{children}</div>
     </DialogPrimitive.Content>
-  </DialogPortal>
-));
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

package/src/components/DropdownMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 export const DropdownMenu: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -25,6 +26,7 @@ export const DropdownMenuContent: React.FC<{
   onClose: () => void;
   className?: string;
 }> = ({ children, isOpen, onClose, className }) => {
+  const { isLowPower } = usePerformance();
   const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -51,7 +53,8 @@ export const DropdownMenuContent: React.FC<{
     <div
       ref={contentRef}
       className={cn(
-        "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100] animate-in fade-in zoom-in-95 duration-100",
+        "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100]",
+        !isLowPower && "animate-in fade-in zoom-in-95 duration-100",
         className
       )}
     >

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Loader2, ChevronDown } from "lucide-react";
+import { cn } from "../../utils";
 
 import {
   Input,
@@ -9,6 +10,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  usePerformance,
 } from "../../index";
 
 import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
@@ -33,6 +35,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
   optionsResolvers,
   onChange,
 }) => {
+  const { isLowPower } = usePerformance();
   const [options, setOptions] = React.useState<ResolverOption[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | undefined>();
@@ -72,9 +75,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       })
       .catch((error_) => {
         if (!cancelled) {
-          setError(
-            extractErrorMessage(error_, "Failed to load options"),
-          );
+          setError(extractErrorMessage(error_, "Failed to load options"));
           setLoading(false);
         }
       });
@@ -199,7 +200,12 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       <div className="relative">
         {loading ? (
           <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-muted/50">
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <Loader2
+              className={cn(
+                "h-4 w-4 text-muted-foreground",
+                !isLowPower && "animate-spin",
+              )}
+            />
             <span className="text-sm text-muted-foreground">
               Loading options...
             </span>

package/src/components/LoadingSpinner.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
@@ -10,6 +11,8 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   className,
   ...props
 }) => {
+  const { isLowPower } = usePerformance();
+
   const sizeClasses = {
     sm: "w-4 h-4 border-2",
     md: "w-8 h-8 border-4",
@@ -20,7 +23,8 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
     <div className={cn("flex justify-center py-12", className)} {...props}>
       <div
         className={cn(
-          "border-indigo-200 border-t-indigo-500 rounded-full animate-spin",
+          "border-indigo-200 border-t-indigo-500 rounded-full",
+          !isLowPower && "animate-spin",
           sizeClasses[size]
         )}
       />

package/src/components/NavItem.tsx

@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
 import { cn } from "../utils";
 import { useApi, accessApiRef } from "@checkstack/frontend-api";
 import type { AccessRule } from "@checkstack/common";
+import { usePerformance } from "./PerformanceProvider";
 
 export interface NavItemProps {
   to?: string;
@@ -25,6 +26,7 @@ export const NavItem: React.FC<NavItemProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const { isLowPower } = usePerformance();
 
   // Always call hooks at top level
   const accessApi = useApi(accessApiRef);
@@ -66,10 +68,6 @@ export const NavItem: React.FC<NavItemProps> = ({
 
   // Dropdown / Parent Item
   if (children) {
-    // Check if any child is active to highlight parent
-    // This is naive; normally we'd check paths.
-    // For now, let's just rely on click state or strict path matching if 'to' is present on parent.
-
     return (
       <div className="relative group" ref={containerRef}>
         <button
@@ -88,7 +86,10 @@ export const NavItem: React.FC<NavItemProps> = ({
         </button>
 
         {isOpen && (
-          <div className="absolute left-0 mt-1 w-48 rounded-md shadow-lg bg-popover ring-1 ring-border z-50 animate-in fade-in zoom-in-95 duration-100">
+          <div className={cn(
+            "absolute left-0 mt-1 w-48 rounded-md shadow-lg bg-popover ring-1 ring-border z-50",
+            !isLowPower && "animate-in fade-in zoom-in-95 duration-100"
+          )}>
             <div className="py-1 flex flex-col p-1 gap-1">{children}</div>
           </div>
         )}

package/src/components/PerformanceProvider.tsx

@@ -0,0 +1,125 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface PerformanceContextValue {
+  /** 
+   * Whether the device is considered low-power or lacks hardware acceleration.
+   * If true, expensive animations, blurs, and transitions should be disabled.
+   */
+  isLowPower: boolean;
+  /** Whether the performance detection has completed */
+  isLoaded: boolean;
+}
+
+const PerformanceContext = createContext<PerformanceContextValue>({
+  isLowPower: false,
+  isLoaded: false,
+});
+
+/**
+ * usePerformance - Hook to access the global hardware performance state.
+ * Use this to conditionally disable heavy visual effects.
+ */
+export const usePerformance = () => useContext(PerformanceContext);
+
+interface PerformanceProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * PerformanceProvider - Centralizes detection of hardware capabilities and user preferences.
+ * Runs a suite of heuristics (Media Queries, WebGL Audit, and Canvas Benchmarks) 
+ * once on mount and provides the result to the entire application.
+ */
+export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ children }) => {
+  const [state, setState] = useState<PerformanceContextValue>({
+    isLowPower: false,
+    isLoaded: false,
+  });
+
+  useEffect(() => {
+    const runPerformanceChecks = () => {
+      // 1. Accessibility Override (Reduced Motion)
+      const prefersReducedMotion = globalThis.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+
+      // 2. Hardware Hint Check (Low RAM or CPU Cores)
+      const nav = globalThis.navigator as Navigator & { deviceMemory?: number };
+      const isLowEndHardware =
+        (nav.deviceMemory !== undefined && nav.deviceMemory < 4) ||
+        nav.hardwareConcurrency <= 2;
+
+      // 3. Renderer Audit (Detecting Software Rasterizers)
+      let isSoftwareRenderer = false;
+      try {
+        const canvas = document.createElement("canvas");
+        const gl =
+          canvas.getContext("webgl") ||
+          canvas.getContext("experimental-webgl");
+        
+        if (gl instanceof WebGLRenderingContext) {
+          const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+          const renderer = (
+            debugInfo
+              ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
+              : gl.getParameter(gl.RENDERER)
+          ).toLowerCase();
+
+          isSoftwareRenderer = [
+            "software",
+            "swiftshader",
+            "llvmpipe",
+            "softpipe",
+            "swrast",
+            "osmesa",
+            "mesa off-screen",
+            "basic render",
+            "warp",
+          ].some((id) => renderer.includes(id));
+        } else {
+          // No WebGL support at all usually implies old/stripped browser
+          isSoftwareRenderer = true;
+        }
+      } catch {
+        isSoftwareRenderer = true;
+      }
+
+      // 4. Empirical Benchmark (Stress Test)
+      let isSlow = false;
+      try {
+        const benchCanvas = document.createElement("canvas");
+        benchCanvas.width = 100;
+        benchCanvas.height = 100;
+        const ctx = benchCanvas.getContext("2d");
+        if (ctx) {
+          const t0 = globalThis.performance.now();
+          ctx.filter = "blur(20px)";
+          for (let i = 0; i < 50; i++) {
+            ctx.fillRect(i, i, 5, 5);
+          }
+          // Force pipeline sync to measure actual drawing time
+          ctx.getImageData(0, 0, 1, 1);
+          const t1 = globalThis.performance.now();
+          isSlow = t1 - t0 > 4; // Threshold for CPU-based rasterization
+        }
+      } catch {
+        isSlow = true;
+      }
+
+      const isLowPowerVerdict = prefersReducedMotion || isLowEndHardware || isSoftwareRenderer || isSlow;
+      
+      setState({
+        isLowPower: isLowPowerVerdict,
+        isLoaded: true,
+      });
+    };
+
+    runPerformanceChecks();
+  }, []);
+
+  return (
+    <PerformanceContext.Provider value={state}>
+      {children}
+    </PerformanceContext.Provider>
+  );
+};

package/src/components/Select.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 const Select = SelectPrimitive.Root;
 
@@ -67,19 +68,22 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-[100] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
+>(({ className, children, position = "popper", ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          "relative z-[100] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+          !isLowPower && "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
@@ -92,8 +96,9 @@ const SelectContent = React.forwardRef<
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<

package/src/components/SubscribeButton.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Button } from "./Button";
 import { Bell } from "lucide-react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 export interface SubscribeButtonProps {
   /**
@@ -43,15 +44,16 @@ export const SubscribeButton: React.FC<SubscribeButtonProps> = ({
   className,
 }) => {
   const [animating, setAnimating] = useState(false);
+  const { isLowPower } = usePerformance();
 
   // Trigger animation when subscription state changes
   useEffect(() => {
-    if (!loading) {
+    if (!loading && !isLowPower) {
       setAnimating(true);
       const timer = setTimeout(() => setAnimating(false), 500);
       return () => clearTimeout(timer);
     }
-  }, [isSubscribed, loading]);
+  }, [isSubscribed, loading, isLowPower]);
 
   const handleClick = () => {
     if (loading) return;
@@ -94,7 +96,10 @@ export const SubscribeButton: React.FC<SubscribeButtonProps> = ({
         <span
           role="status"
           aria-label="Loading"
-          className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          className={cn(
+            "h-4 w-4 rounded-full border-2 border-current border-t-transparent",
+            !isLowPower && "animate-spin"
+          )}
         />
       ) : (
         <Bell
@@ -102,7 +107,7 @@ export const SubscribeButton: React.FC<SubscribeButtonProps> = ({
           className={cn(
             "h-4 w-4 transition-all duration-300",
             isSubscribed && "fill-current",
-            animating && "animate-bell-ring"
+            animating && !isLowPower && "animate-bell-ring"
           )}
         />
       )}

package/src/components/TerminalFeed.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 export interface TerminalEntry {
   id: string;
@@ -65,6 +66,7 @@ export const TerminalFeed: React.FC<TerminalFeedProps> = ({
   title = "terminal",
   className,
 }) => {
+  const { isLowPower } = usePerformance();
   const contentRef = useRef<HTMLDivElement>(null);
   const [isHovering, setIsHovering] = useState(false);
 
@@ -107,7 +109,7 @@ export const TerminalFeed: React.FC<TerminalFeedProps> = ({
         onMouseLeave={() => setIsHovering(false)}
       >
         {displayEntries.length === 0 ? (
-          <div className="text-gray-500 animate-pulse">
+          <div className={cn("text-gray-500", !isLowPower && "animate-pulse")}>
             Waiting for events...
           </div>
         ) : (
@@ -141,10 +143,13 @@ export const TerminalFeed: React.FC<TerminalFeedProps> = ({
           })
         )}
 
-        {/* Blinking cursor */}
+        {/* Blinking cursor - animation disabled in low power mode */}
         <div className="flex items-center gap-1 mt-2">
           <span className="text-emerald-400">$</span>
-          <span className="w-2 h-4 bg-emerald-400 animate-pulse" />
+          <span className={cn(
+            "w-2 h-4 bg-emerald-400",
+            !isLowPower && "animate-pulse"
+          )} />
         </div>
       </div>
     </div>

package/src/components/Toast.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 const toastVariants = cva(
   "relative flex items-start gap-3 w-full max-w-md rounded-lg p-4 transition-all",
@@ -55,6 +56,7 @@ export const Toast: React.FC<ToastProps> = ({
   duration = 4000,
   onDismiss,
 }) => {
+  const { isLowPower } = usePerformance();
   const Icon = iconMap[variant || "default"];
   const iconColor = iconColorMap[variant || "default"];
   const [isHovered, setIsHovered] = React.useState(false);
@@ -97,7 +99,7 @@ export const Toast: React.FC<ToastProps> = ({
     <div
       className={cn(
         toastVariants({ variant }),
-        "animate-in slide-in-from-right fade-in zoom-in-95 duration-300 hover:-translate-y-1 hover:shadow-2xl cursor-default"
+        !isLowPower && "animate-in slide-in-from-right fade-in zoom-in-95 duration-300 hover:-translate-y-1 hover:shadow-2xl cursor-default"
       )}
       role="alert"
       aria-live="polite"

package/src/index.ts

@@ -49,6 +49,7 @@ export * from "./components/ColorPicker";
 export * from "./components/AnimatedCounter";
 export * from "./components/CommandPalette";
 export * from "./components/TerminalFeed";
+export * from "./components/PerformanceProvider";
 export * from "./components/AmbientBackground";
 export * from "./components/CodeEditor";
 export * from "./components/AnimatedNumber";

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;
 }