@checkstack/ui 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @checkstack/ui
 
+## 1.3.3
+
+### Patch Changes
+
+- 594eecc: Implemented a manual "Low Power Mode" toggle in the user menu, allowing users to explicitly disable expensive visual effects. This replaces the previous automatic performance diagnostics with a more predictable, user-controlled system that persists to localStorage while still respecting OS-level "Reduced Motion" settings.
+
+## 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

package/package.json

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

package/src/components/AmbientBackground.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 interface AmbientBackgroundProps {
   children: React.ReactNode;
@@ -7,58 +8,78 @@ interface AmbientBackgroundProps {
 }
 
 /**
- * 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.
+ * 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,
 }) => {
-  return (
-    <div
-      className={cn(
-        "relative min-h-screen bg-background overflow-hidden",
-        className
-      )}
-    >
-      {/* Performance optimized background layers */}
-      <div className="pointer-events-none fixed inset-0 overflow-hidden">
-        {/* Layer 1: Aurora Blobs (Bottom) - Hardware accelerated via transform/compositor */}
+  const { isLowPower } = usePerformance();
+
+  // 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%)",
+            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%)",
+            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%)",
+            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%)",
+            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,
+      )}
+    >
+      <div className="pointer-events-none fixed inset-0 overflow-hidden">
+        {/* Layer 1: Aurora Blobs (Bottom) */}
+        {auroraBlobs}
 
-        {/* Layer 2: Inverse Grid Mask (Top) - Transparent lines on a solid background */}
-        <div className="ambient-grid-inverse absolute inset-0 overflow-hidden" />
+        {/* 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>
 
-      {/* Layer 3: Edge vignette to fade out the background smoothly */}
+      {/* Layer 3: Edge vignette fade */}
       <div
         className="pointer-events-none fixed inset-0"
         style={{
@@ -69,7 +90,6 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
         }}
       />
 
-      {/* 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,88 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+const STORAGE_KEY = "checkstack-low-power";
+
+interface PerformanceContextValue {
+  /** 
+   * Whether the application should run in low-power mode.
+   * Derived from (manualLowPower || prefersReducedMotion).
+   */
+  isLowPower: boolean;
+  /** Whether the performance state has been initialized from storage */
+  isLoaded: boolean;
+  /** The current state of the manual toggle */
+  manualLowPower: boolean;
+  /** Toggle the manual low power setting */
+  toggleManualLowPower: () => void;
+}
+
+const PerformanceContext = createContext<PerformanceContextValue>({
+  isLowPower: false,
+  isLoaded: false,
+  manualLowPower: false,
+  toggleManualLowPower: () => {},
+});
+
+/**
+ * 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 management of the application's performance tier.
+ * Supports manual override (persisted to localStorage) and respects OS-level
+ * Reduced Motion preferences.
+ */
+export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ children }) => {
+  const [manualLowPower, setManualLowPower] = useState<boolean>(false);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(false);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
+
+  useEffect(() => {
+    // 1. Initialize Manual Toggle from localStorage
+    const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (stored === "true") {
+      setManualLowPower(true);
+    }
+
+    // 2. Initialize Reduced Motion Detection
+    const mediaQuery = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    // 3. Listen for changes in OS-level settings
+    const listener = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", listener);
+
+    setIsLoaded(true);
+
+    return () => mediaQuery.removeEventListener("change", listener);
+  }, []);
+
+  const toggleManualLowPower = () => {
+    setManualLowPower((prev) => {
+      const next = !prev;
+      globalThis.localStorage?.setItem(STORAGE_KEY, String(next));
+      return next;
+    });
+  };
+
+  const isLowPower = manualLowPower || prefersReducedMotion;
+
+  const value = {
+    isLowPower,
+    isLoaded,
+    manualLowPower,
+    toggleManualLowPower,
+  };
+
+  return (
+    <PerformanceContext.Provider value={value}>
+      {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";