# Lightswind UI — Full LLM Reference

> Website: https://lightswind.com
> Website: https://lightswind.com
> This reference documents Free components, Pro components, and Pro blocks.
> Source code is provided for Free components only. Premium components/blocks contain metadata and usage specs.

--- INSTALLATION ---
1. `npm install framer-motion lucide-react clsx tailwind-merge class-variance-authority`
2. Setup `lib/utils.ts` with `cn` helper.

--- PREMIUM ACCESS & LICENSING ---
To access the source code for any Pro component or Block marked with (Source code excluded):
1. Visit the pricing page: https://lightswind.com/pricing
2. Purchase a lifetime or developer license.
3. Log in to your account at https://lightswind.com/profile.
4. Copy the component/block code directly from the interactive preview dashboards.

--- FREE COMPONENTS (WITH SOURCE CODE) (213) ---

## CATEGORY (FREE): Utilities (2)

### COMPONENT: cool-theme-toggle
Category: Utilities
Description: A professional and beautiful theme toggle with smooth spring animations, sun/moon icons, and day/night scenery background.
URL: https://lightswind.com/components/cool-theme-toggle
Import: import { CoolThemeToggle } from "@/components/lightswind/cool-theme-toggle"
Registry URL: https://lightswind.com/r/cool-theme-toggle.json
Install Command: npx lightswind@latest add cool-theme-toggle

Usage:
```tsx
import { CoolThemeToggle } from "@/components/lightswind/cool-theme-toggle";

export function CoolThemeToggleDemo() {
  return (
    <div className="flex flex-col items-center gap-4 py-8">
      <CoolThemeToggle size="lg" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Sun, Moon, Cloud, Star } from "lucide-react";
import { cn } from "@/components/lib/utils";

interface CoolThemeToggleProps {
  className?: string;
  size?: "sm" | "md" | "lg";
}

export function CoolThemeToggle({ className, size = "md" }: CoolThemeToggleProps) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    const isDark = document.documentElement.classList.contains("dark");
    setTheme(isDark ? "dark" : "light");
    
    const observer = new MutationObserver(() => {
      setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
    });
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    
    if (newTheme === "dark") {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  };

  if (!mounted) return <div className={cn("inline-flex rounded-full bg-muted", size === "sm" ? "h-6 w-12" : size === "md" ? "h-8 w-16" : "h-10 w-20")} />;

  const sizes = {
    sm: { button: "w-12 h-6", thumb: "w-4 h-4", icon: "w-2.5 h-2.5", padding: "p-1", translateX: "translateX(24px)", cloudSize: "w-3 h-3" },
    md: { button: "w-16 h-8", thumb: "w-6 h-6", icon: "w-4 h-4", padding: "p-1", translateX: "translateX(32px)", cloudSize: "w-5 h-5" },
    lg: { button: "w-20 h-10", thumb: "w-8 h-8", icon: "w-5 h-5", padding: "p-1", translateX: "translateX(40px)", cloudSize: "w-6 h-6" }
  };

  const currentSize = sizes[size];

  return (
    <button
      onClick={toggleTheme}
      className={cn(
        "relative rounded-full transition-colors duration-500 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 overflow-hidden",
        theme === "dark" ? "bg-slate-900" : "bg-sky-300",
        currentSize.button,
        currentSize.padding,
        className
      )}
      aria-label="Toggle theme"
    >
      {/* Background elements */}
      <div className="absolute inset-0 z-0 overflow-hidden rounded-full">
        <motion.div
          initial={false}
          animate={{
            opacity: theme === "light" ? 1 : 0,
            y: theme === "light" ? 0 : 10,
          }}
          transition={{ duration: 0.4 }}
          className="absolute inset-0 flex items-center justify-end pr-2 text-white"
        >
          <Cloud className={cn("text-white/80 fill-white/80", currentSize.cloudSize)} />
        </motion.div>
        
        <motion.div
          initial={false}
          animate={{
            opacity: theme === "dark" ? 1 : 0,
            y: theme === "dark" ? 0 : -10,
          }}
          transition={{ duration: 0.4 }}
          className="absolute inset-0 flex items-center justify-start pl-2"
        >
          <div className="relative w-full h-full">
            <Star className={cn("absolute top-1 left-2 text-yellow-100 fill-yellow-100 opacity-70", size === "lg" ? "w-2 h-2" : "w-1 h-1")} />
            <Star className={cn("absolute bottom-2 left-4 text-yellow-100 fill-yellow-100 opacity-50", size === "lg" ? "w-3 h-3" : "w-1.5 h-1.5")} />
            <Star className={cn("absolute top-3 left-6 text-yellow-100 fill-yellow-100 opacity-90", size === "lg" ? "w-1.5 h-1.5" : "w-1 h-1")} />
          </div>
        </motion.div>
      </div>

      {/* Toggle Thumb */}
      <motion.div
        layout
        transition={{
          type: "spring",
          stiffness: 500,
          damping: 30,
        }}
        className={cn(
          "relative z-10 flex items-center justify-center rounded-full shadow-md",
          theme === "dark" ? "bg-slate-800" : "bg-yellow-400",
          currentSize.thumb
        )}
        animate={{
          x: theme === "dark" ? parseInt(currentSize.translateX.replace("translateX(", "").replace("px)", "")) : 0
        }}
      >
        <div className="relative flex items-center justify-center w-full h-full">
          {/* Sun */}
          <motion.div
            initial={false}
            animate={{
              rotate: theme === "dark" ? 180 : 0,
              scale: theme === "dark" ? 0 : 1,
              opacity: theme === "dark" ? 0 : 1,
            }}
            transition={{ duration: 0.4 }}
            className="absolute"
          >
            <Sun className={cn("text-white fill-white/20", currentSize.icon)} />
          </motion.div>

          {/* Moon */}
          <motion.div
            initial={false}
            animate={{
              rotate: theme === "dark" ? 0 : -180,
              scale: theme === "dark" ? 1 : 0,
              opacity: theme === "dark" ? 1 : 0,
            }}
            transition={{ duration: 0.4 }}
            className="absolute flex items-center justify-center"
          >
            <Moon className={cn("text-yellow-200 fill-yellow-200", currentSize.icon)} />
          </motion.div>
        </div>
      </motion.div>
    </button>
  );
}

```
--------------------------------------------------

### COMPONENT: toggle-theme
Category: Utilities
Description: An accessible button component that toggles between light and dark themes, utilizing the modern View Transition API for smooth, customizable full-page animations.
URL: https://lightswind.com/components/toggle-theme
Import: import { ToggleTheme } from "@/components/lightswind/toggle-theme";
Registry URL: https://lightswind.com/r/toggle-theme.json
Install Command: npx lightswind@latest add toggle-theme

Usage:
```tsx
// 1. Simple usage with default 'circle-spread' animation
<ToggleTheme />

// 2. Controlled duration and custom animation
<ToggleTheme
  duration={600}
  animationType="diag-down-right"
  className="bg-gray-100 dark:bg-gray-700"
/>
```

Source Code:
```tsx
"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import { Moon, Sun } from "lucide-react"
import { flushSync } from "react-dom"

import { cn } from "@/components/lib/utils"

// 1. Define the possible animation types (UPDATED to include all demo types)
// NOTE: Type is renamed from 'AnimationType' to 'ThemeAnimationType' 
// to avoid conflicts if used with the demo file in the same scope, 
// though the original 'AnimationType' is kept for minimal change.
type AnimationType =
    | "none"
    | "circle-spread"
    | "round-morph"
    | "swipe-left"
    | "swipe-up"
    | "diag-down-right"
    | "fade-in-out"
    | "shrink-grow"
    | "flip-x-in"
    | "split-vertical"
    | "swipe-right"
    | "swipe-down"
    | "wave-ripple"

// 2. Interface is renamed
interface ToggleThemeProps
    extends React.ComponentPropsWithoutRef<"button"> {
    duration?: number
    animationType?: AnimationType
}

// 3. Component and export are renamed
export const ToggleTheme = ({
    className,
    duration = 400,
    animationType = "circle-spread",
    ...props
}: ToggleThemeProps) => {
    const [isDark, setIsDark] = useState(false)
    const buttonRef = useRef<HTMLButtonElement>(null)

    useEffect(() => {
        const updateTheme = () => {
            setIsDark(document.documentElement.classList.contains("dark"))
        }

        updateTheme()

        const observer = new MutationObserver(updateTheme)
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ["class"],
        })

        return () => observer.disconnect()
    }, [])

    useEffect(() => {
        if (animationType === 'flip-x-in') return

        let styleElement = document.getElementById("toggle-theme-vt-override") as HTMLStyleElement
        if (!styleElement) {
            styleElement = document.createElement("style")
            styleElement.id = "toggle-theme-vt-override"
            styleElement.textContent = `
                ::view-transition-old(root),
                ::view-transition-new(root) {
                    animation: none;
                    mix-blend-mode: normal;
                }
            `
            document.head.appendChild(styleElement)
        }
    }, [animationType])

    const toggleTheme = useCallback(async () => {
        if (!buttonRef.current) return

        // Wait for the DOM update to complete within the View Transition
        await document.startViewTransition(() => {
            flushSync(() => {
                const newTheme = !isDark
                setIsDark(newTheme)
                document.documentElement.classList.toggle("dark")
                localStorage.setItem("theme", newTheme ? "dark" : "light")
            })
        }).ready

        // Calculate coordinates and dimensions for spatial animations
        const { top, left, width, height } =
            buttonRef.current.getBoundingClientRect()
        const x = left + width / 2
        const y = top + height / 2
        const maxRadius = Math.hypot(
            Math.max(left, window.innerWidth - left),
            Math.max(top, window.innerHeight - top)
        )
        const viewportWidth = window.innerWidth
        const viewportHeight = window.innerHeight


        // 4. Implement a switch to handle all animation types
        switch (animationType) {

            // --- Existing/Refined Types ---

            case "circle-spread":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `circle(0px at ${x}px ${y}px)`,
                            `circle(${maxRadius}px at ${x}px ${y}px)`,
                        ],
                    },
                    {
                        duration,
                        easing: "ease-in-out",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "round-morph":
                document.documentElement.animate(
                    [
                        { opacity: 0, transform: "scale(0.8) rotate(5deg)" },
                        { opacity: 1, transform: "scale(1) rotate(0deg)" },
                    ],
                    {
                        duration: duration * 1.2,
                        easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "swipe-left":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `inset(0 0 0 ${viewportWidth}px)`,
                            `inset(0 0 0 0)`,
                        ],
                    },
                    {
                        duration,
                        easing: "cubic-bezier(0.2, 0, 0, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "swipe-up":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `inset(${viewportHeight}px 0 0 0)`,
                            `inset(0 0 0 0)`,
                        ],
                    },
                    {
                        duration,
                        easing: "cubic-bezier(0.2, 0, 0, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break


            // --- New Advanced Types ---

            case "diag-down-right":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `polygon(0 0, 0 0, 0 0, 0 0)`,
                            `polygon(0 0, 100% 0, 100% 100%, 0 100%)`,
                        ],
                    },
                    {
                        duration: duration * 1.5,
                        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "fade-in-out":
                document.documentElement.animate(
                    {
                        opacity: [0, 1],
                    },
                    {
                        duration: duration * 0.5,
                        easing: "ease-in-out",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "shrink-grow":
                document.documentElement.animate(
                    [
                        { transform: "scale(0.9)", opacity: 0 },
                        { transform: "scale(1)", opacity: 1 },
                    ],
                    {
                        duration: duration * 1.2,
                        easing: "cubic-bezier(0.19, 1, 0.22, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                document.documentElement.animate(
                    [
                        { transform: "scale(1)", opacity: 1 },
                        { transform: "scale(1.05)", opacity: 0 },
                    ],
                    {
                        duration: duration * 1.2,
                        easing: "cubic-bezier(0.19, 1, 0.22, 1)",
                        pseudoElement: "::view-transition-old(root)",
                    }
                )
                break

            case "flip-x-in":
                const styleElement = document.createElement('style');
                styleElement.textContent = `
                    ::view-transition-group(root) { perspective: 1000px; }
                    ::view-transition-old(root) { transform-origin: center; animation: flip-out 400ms forwards; }
                    ::view-transition-new(root) { transform-origin: center; animation: flip-in 400ms forwards; }
                    
                    @keyframes flip-out { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-90deg); opacity: 0; } }
                    @keyframes flip-in { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
                `;
                document.head.appendChild(styleElement);
                break

            case "split-vertical":
                document.documentElement.animate(
                    [{ opacity: 0 }, { opacity: 1 }],
                    {
                        duration: duration * 0.75,
                        easing: "ease-in",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                document.documentElement.animate(
                    [
                        { clipPath: 'inset(0 0 0 0)', transform: 'none' },
                        { clipPath: 'inset(0 40% 0 40%)', transform: 'scale(1.2)' },
                        { clipPath: 'inset(0 50% 0 50%)', transform: 'scale(1)' },
                    ],
                    {
                        duration: duration * 1.5,
                        easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                        pseudoElement: "::view-transition-old(root)",
                    }
                )
                break

            // --- IMPLEMENTATION FOR MISSING TYPES ---

            case "swipe-right":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `inset(0 ${viewportWidth}px 0 0)`,
                            `inset(0 0 0 0)`,
                        ],
                    },
                    {
                        duration,
                        easing: "cubic-bezier(0.2, 0, 0, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "swipe-down":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `inset(0 0 ${viewportHeight}px 0)`,
                            `inset(0 0 0 0)`,
                        ],
                    },
                    {
                        duration,
                        easing: "cubic-bezier(0.2, 0, 0, 1)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "wave-ripple":
                document.documentElement.animate(
                    {
                        clipPath: [
                            `circle(0% at 50% 50%)`,
                            `circle(${maxRadius}px at 50% 50%)`,
                        ],
                    },
                    {
                        duration: duration * 1.5,
                        easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                        pseudoElement: "::view-transition-new(root)",
                    }
                )
                break

            case "none":
            default:
                // No custom animation runs
                break
        }

    }, [isDark, duration, animationType])

    return (
        <button
            ref={buttonRef}
            onClick={toggleTheme}
            className={cn(
                "p-2 rounded-full transition-colors duration-300",
                isDark ? "hover:text-amber-400" : "hover:text-primarylw",
                className
            )}
            {...props}
        >
            {isDark ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
        </button>
    )
}
```
--------------------------------------------------

## CATEGORY (FREE): 3D Elements (25)

### COMPONENT: 3d-image-ring
Category: 3D Elements
Description: A stunning 3D image carousel arranged in a circular ring that users can drag to rotate. Features smooth GSAP animations, parallax effects, and responsive touch controls.
URL: https://lightswind.com/components/3d-image-ring
Import: import { ThreeDImageRing } from "@/components/lightswind/draggable-3d-image-ring";
Registry URL: https://lightswind.com/r/3d-image-ring.json
Install Command: npx lightswind@latest add 3d-image-ring

Usage:
```tsx

      const imageUrls = [
    "https://images.pexels.com/photos/1704120/pexels-photo-1704120.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/114979/pexels-photo-114979.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/698808/pexels-photo-698808.jpeg?auto=compress&cs=tinysrgb&w=1200",
    "https://images.pexels.com/photos/2449540/pexels-photo-2449540.jpeg?auto=compress&cs=tinysrgb&w=1200",
  ];
    <ThreeDImageRing images={imageUrls} />
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState, useMemo } from "react";
import { motion, AnimatePresence, useMotionValue, easeOut } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming you have this utility for class names
import { animate } from "framer-motion";

export interface ThreeDImageRingProps {
  /** Array of image URLs to display in the ring */
  images: string[];
  /** Container width in pixels (will be scaled) */
  width?: number;
  /** 3D perspective value */
  perspective?: number;
  /** Distance of images from center (z-depth) */
  imageDistance?: number;
  /** Initial rotation of the ring */
  initialRotation?: number;
  /** Animation duration for entrance */
  animationDuration?: number;
  /** Stagger delay between images */
  staggerDelay?: number;
  /** Hover opacity for non-hovered images */
  hoverOpacity?: number;
  /** Custom container className */
  containerClassName?: string;
  /** Custom ring className */
  ringClassName?: string;
  /** Custom image className */
  imageClassName?: string;
  /** Background color of the stage */
  backgroundColor?: string;
  /** Enable/disable drag functionality */
  draggable?: boolean;
  /** Animation ease for entrance */
  ease?: string;
  /** Breakpoint for mobile responsiveness (e.g., 768 for iPad mini) */
  mobileBreakpoint?: number;
  /** Scale factor for mobile (e.g., 0.7 for 70% size) */
  mobileScaleFactor?: number;
  /** Power for the drag end inertia animation (higher means faster stop) */
  inertiaPower?: number;
  /** Time constant for the drag end inertia animation (duration of deceleration in ms) */
  inertiaTimeConstant?: number;
  /** Multiplier for initial velocity when drag ends (influences initial "spin") */
  inertiaVelocityMultiplier?: number;
}

export function ThreeDImageRing({
  images = [
    "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?q=80&w=2940&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=2938&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1506744626753-1fa7604d459a?q=80&w=2940&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1470071131384-001b85755536?q=80&w=2940&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=2940&auto=format&fit=crop",
  ],
  width = 300,
  perspective = 2000,
  imageDistance = 500,
  initialRotation = 180,
  animationDuration = 1.5,
  staggerDelay = 0.1,
  hoverOpacity = 0.5,
  containerClassName,
  ringClassName,
  imageClassName,
  backgroundColor,
  draggable = true,
  ease = "easeOut",
  mobileBreakpoint = 768,
  mobileScaleFactor = 0.8,
  inertiaPower = 0.8, // Default power for inertia
  inertiaTimeConstant = 300, // Default time constant for inertia
  inertiaVelocityMultiplier = 20, // Default multiplier for initial spin
}: ThreeDImageRingProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);

  const rotationY = useMotionValue(initialRotation);
  const startX = useRef<number>(0);
  const currentRotationY = useRef<number>(initialRotation);
  const isDragging = useRef<boolean>(false);
  const velocity = useRef<number>(0); // To track drag velocity

  const [currentScale, setCurrentScale] = useState(1);
  const [showImages, setShowImages] = useState(false);

  const angle = useMemo(() => 360 / images.length, [images.length]);

  const getBgPos = (imageIndex: number, currentRot: number, scale: number) => {
    const scaledImageDistance = imageDistance * scale;
    const effectiveRotation = currentRot - 180 - imageIndex * angle;
    const parallaxOffset = ((effectiveRotation % 360 + 360) % 360) / 360;
    return `${-(parallaxOffset * (scaledImageDistance / 1.5))}px 0px`;
  };

  useEffect(() => {
    const unsubscribe = rotationY.on("change", (latestRotation) => {
      if (ringRef.current) {
        Array.from(ringRef.current.children).forEach((imgElement, i) => {
          (imgElement as HTMLElement).style.backgroundPosition = getBgPos(
            i,
            latestRotation,
            currentScale
          );
        });
      }
      currentRotationY.current = latestRotation;
    });
    return () => unsubscribe();
  }, [rotationY, images.length, imageDistance, currentScale, angle]);

  useEffect(() => {
    const handleResize = () => {
      const viewportWidth = window.innerWidth;
      const newScale = viewportWidth <= mobileBreakpoint ? mobileScaleFactor : 1;
      setCurrentScale(newScale);
    };

    window.addEventListener("resize", handleResize);
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, [mobileBreakpoint, mobileScaleFactor]);

  useEffect(() => {
    setShowImages(true);
  }, []);

  const handleDragStart = (event: React.MouseEvent | React.TouchEvent) => {
    if (!draggable) return;
    isDragging.current = true;
    const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
    startX.current = clientX;
    // Stop any ongoing animation instantly when drag starts
    rotationY.stop();
    velocity.current = 0; // Reset velocity
    if (ringRef.current) {
      (ringRef.current as HTMLElement).style.cursor = "grabbing";
    }
    // Attach global move and end listeners to document when dragging starts
    document.addEventListener("mousemove", handleDrag);
    document.addEventListener("mouseup", handleDragEnd);
    document.addEventListener("touchmove", handleDrag);
    document.addEventListener("touchend", handleDragEnd);
  };

  const handleDrag = (event: MouseEvent | TouchEvent) => {
    // Only proceed if dragging is active
    if (!draggable || !isDragging.current) return;

    const clientX = "touches" in event ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX;
    const deltaX = clientX - startX.current;

    // Update velocity based on deltaX
    velocity.current = -deltaX * 0.5; // Factor of 0.5 to control sensitivity

    rotationY.set(currentRotationY.current + velocity.current);

    startX.current = clientX;
  };

const handleDragEnd = () => {
  isDragging.current = false;
  if (ringRef.current) {
    ringRef.current.style.cursor = "grab";
    currentRotationY.current = rotationY.get();
  }

  document.removeEventListener("mousemove", handleDrag);
  document.removeEventListener("mouseup", handleDragEnd);
  document.removeEventListener("touchmove", handleDrag);
  document.removeEventListener("touchend", handleDragEnd);

  const initial = rotationY.get();
  const velocityBoost = velocity.current * inertiaVelocityMultiplier;
  const target = initial + velocityBoost;

  // Animate with inertia manually using `animate()`
  animate(initial, target, {
    type: "inertia",
    velocity: velocityBoost,
    power: inertiaPower,
    timeConstant: inertiaTimeConstant,
    restDelta: 0.5,
    modifyTarget: (target) => Math.round(target / angle) * angle,
    onUpdate: (latest) => {
      rotationY.set(latest);
    },
  });

  velocity.current = 0;
};


  // Corrected imageVariants: no function for 'visible' state
  const imageVariants = {
    hidden: { y: 200, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      // Transition properties will be defined directly on the motion.div using `custom` prop
    },
  };

  return (
    <div
      ref={containerRef}
      className={cn(
        "w-full h-full overflow-hidden select-none relative",
        containerClassName
      )}
      style={{
        backgroundColor,
        transform: `scale(${currentScale})`,
        transformOrigin: "center center",
      }}
      // Attach initial drag start listeners only
      onMouseDown={draggable ? handleDragStart : undefined}
      onTouchStart={draggable ? handleDragStart : undefined}
    >
      <div
        style={{
          perspective: `${perspective}px`,
          width: `${width}px`,
          height: `${width * 1.33}px`,
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <motion.div
          ref={ringRef}
          className={cn(
            "w-full h-full absolute",
            ringClassName
          )}
          style={{
            transformStyle: "preserve-3d",
            rotateY: rotationY,
            cursor: draggable ? "grab" : "default",
          }}
        >
          <AnimatePresence>
            {showImages && images.map((imageUrl, index) => (
              <motion.div
                key={index}
                className={cn(
                  "w-full h-full absolute",
                  imageClassName
                )}
                style={{
                  transformStyle: "preserve-3d",
                  backgroundImage: `url(${imageUrl})`,
                  backgroundSize: "cover",
                  backgroundRepeat: "no-repeat",
                  backfaceVisibility: "hidden",
                  willChange: "transform",
                  rotateY: index * -angle,
                  z: -imageDistance * currentScale,
                  transformOrigin: `50% 50% ${imageDistance * currentScale}px`,
                  backgroundPosition: getBgPos(index, currentRotationY.current, currentScale),
                }}
                initial="hidden"
                animate="visible"
                exit="hidden"
                variants={imageVariants} // Use the simplified variants object
                custom={index} // Pass the index as a custom prop
                transition={{
                  delay: index * staggerDelay, // Use index directly in transition
                  duration: animationDuration,
                  ease: easeOut, // Apply ease for entrance animation
                }}
                whileHover={{ opacity: 1, transition: { duration: 0.15 } }}
                onHoverStart={() => {
                  // Prevent hover effects while dragging
                  if (isDragging.current) return;
                  if (ringRef.current) {
                    Array.from(ringRef.current.children).forEach((imgEl, i) => {
                      if (i !== index) {
                        (imgEl as HTMLElement).style.opacity = `${hoverOpacity}`;
                      }
                    });
                  }
                }}
                onHoverEnd={() => {
                  // Prevent hover effects while dragging
                  if (isDragging.current) return;
                  if (ringRef.current) {
                    Array.from(ringRef.current.children).forEach((imgEl) => {
                      (imgEl as HTMLElement).style.opacity = `1`;
                    });
                  }
                }}
              />
            ))}
          </AnimatePresence>
        </motion.div>
      </div>
    </div>
  );
}

export default ThreeDImageRing;
```
--------------------------------------------------

### COMPONENT: ascii-wave
Category: 3D Elements
Description: A retro-style, text-based animation using ASCII characters to simulate fluids, fire, or data streams on HTML Canvas.
URL: https://lightswind.com/components/ascii-wave
Import: import AsciiWave from "@/components/lightswind/ascii-wave"
Registry URL: https://lightswind.com/r/ascii-wave.json
Install Command: npx lightswind@latest add ascii-wave

Usage:
```tsx
import AsciiWave from "@/components/lightswind/ascii-wave";

export function AsciiWaveDemo() {
  return (
    <div className="relative w-full h-[300px] bg-black overflow-hidden rounded-lg">
      <AsciiWave 
        color="#f97316" 
        speed={1} 
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect } from "react";
import { useTheme } from "next-themes";

interface AsciiWaveProps {
    className?: string;
    color?: string; // Hex or generic color
    speed?: number;
}

const AsciiWave: React.FC<AsciiWaveProps> = ({
    className,
    color = "#FF4500",  // Default Firecrawl Orange
    speed = 1
}) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);
    const { theme } = useTheme() || {};

    useEffect(() => {
        const canvas = canvasRef.current;
        const container = containerRef.current;
        if (!canvas || !container) return;

        const ctx = canvas.getContext("2d");
        if (!ctx) return;

        let animationId: number;
        let time = 0;

        const resize = () => {
            if (!container || !canvas) return;
            const dpr = window.devicePixelRatio || 1;
            canvas.width = container.clientWidth * dpr;
            canvas.height = container.clientHeight * dpr;
            ctx.scale(dpr, dpr);
        };

        const observer = new ResizeObserver(resize);
        observer.observe(container);
        resize();

        // ASCII Characters sorted by density (light to dark)
        const chars = " .:+x*#".split("");
        const fontSize = 12;
        const columnWidth = 10;

        const draw = () => {
            // Clean clear for crisp pixels.
            const width = container.clientWidth;
            const height = container.clientHeight;

            ctx.clearRect(0, 0, width, height);

            ctx.font = `${fontSize}px monospace`;
            ctx.fillStyle = color;

            const columns = Math.ceil(width / columnWidth);
            const rows = Math.ceil(height / fontSize);

            // "Fire" Logic: Pure Vertical Ascent
            for (let x = 0; x < columns; x++) {
                // FIXED GEOMETRY (No traveling waves!)
                // Amplitude modulation only (Standing Wave)
                // x * 0.1 gives the mountain shape.
                // We do NOT add 'time' to 'x' here.
                const shapeBase = Math.sin(x * 0.1) * 0.6 + Math.cos(x * 0.25) * 0.4;

                // Breath: Global pulsing to make it feel alive
                const breath = Math.sin(time * 0.002 * speed) * 0.1;

                // Flicker: High frequency jitter that does NOT travel
                const flicker = Math.sin(time * 0.008 * speed + x * 100) * 0.05;

                // Height calculation
                const noise = shapeBase + breath + flicker;
                const columnHeightNormal = Math.max(0.15, (noise + 1) / 2 * 0.6 + 0.15);
                const activeRows = Math.floor(columnHeightNormal * rows);

                for (let y = rows - 1; y > rows - activeRows; y--) {
                    // PURE VERTICAL FLOW
                    // No horizontal phase mixing (x * k) in the time component
                    const flowShift = time * 0.005 * speed;

                    // Independent column noise
                    // y moves up over time (y - flowShift). 
                    // x acts only as a static seed/offset for variety between columns.
                    const charNoise = Math.sin((y * 0.2) - flowShift + x * 10);

                    // Top fade
                    const distFromTop = (y - (rows - activeRows));
                    const fade = Math.min(1, distFromTop / 6);

                    // Char selection
                    const normalizedNoise = (charNoise + 1) / 2;
                    const charIndex = Math.floor(normalizedNoise * chars.length);
                    const char = chars[Math.min(charIndex, chars.length - 1)];

                    const posX = x * columnWidth;
                    const posY = y * fontSize;

                    // Glitch dropouts (holes in the flame)
                    if (Math.random() > 0.95) continue;

                    ctx.globalAlpha = fade;
                    ctx.fillText(char, posX, posY);
                }
            }

            ctx.globalAlpha = 1.0;
            time += 16;
            animationId = requestAnimationFrame(draw);
        };

        animationId = requestAnimationFrame(draw);

        return () => {
            observer.disconnect();
            cancelAnimationFrame(animationId);
        };
    }, [color, speed, theme]);

    return (
        <div ref={containerRef} className={`w-full h-full overflow-hidden ${className}`}>
            <canvas ref={canvasRef} className="block w-full h-full" />
        </div>
    );
};

export default AsciiWave;

```
--------------------------------------------------

### COMPONENT: 3d-image-carousel
Category: 3D Elements
Description: A responsive, 3D-styled image slider with a cascade effect that smoothly transitions between slides. Supports drag, touch, and autoplay interactions, while remaining fully Tailwind-compatible for design customization. Only minimal embedded CSS is used to maintain the 3D stacking and positioning logic.
URL: https://lightswind.com/components/3d-image-carousel
Import: import ThreeDImageCarousel from "@/components/lightswind/ThreeDImageCarousel";
Registry URL: https://lightswind.com/r/3d-image-carousel.json
Install Command: npx lightswind@latest add 3d-image-carousel

Usage:
```tsx
// 1. Default Usage (5 visible items, no autoplay)
const slides = [
  { id: 1, src: "/images/slide1.jpg", href: "/product/1" },
  { id: 2, src: "/images/slide2.jpg", href: "/product/2" },
  { id: 3, src: "/images/slide3.jpg", href: "/product/3" },
  { id: 4, src: "/images/slide4.jpg", href: "/product/4" },
  { id: 5, src: "/images/slide5.jpg", href: "/product/5" },
];

<ThreeDImageCarousel slides={slides} className="my-12" />

// 2. Autoplay enabled with 4-second delay
<ThreeDImageCarousel 
  slides={slides} 
  autoplay={true} 
  delay={4} 
/>

// 3. Show only 3 visible items (center-focused layout)
<ThreeDImageCarousel 
  slides={slides} 
  itemCount={3}
/>

// 4. Disable pause on hover (continuous autoplay)
<ThreeDImageCarousel 
  slides={slides} 
  autoplay={true} 
  pauseOnHover={false}
/>

// 5. Custom styled container using Tailwind utilities
<ThreeDImageCarousel 
  slides={slides} 
  autoplay={true} 
  className="max-w-6xl mx-auto bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-6"
/>
```

Source Code:
```tsx
'use client'
import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
import React, { useState, useEffect, useRef, useCallback } from 'react';

// --- Type Definitions ---
interface Slide {
    id: number;
    src: string;
    href: string;
}

interface ThreeDImageCarouselProps {
    /** The array of image data for the slider. */
    slides: Slide[];
    /** Number of visible items in the slider (3 or 5). Default is 5. */
    itemCount?: 3 | 5;
    /** Enables/Disables automatic sliding. Default is false. */
    autoplay?: boolean;
    /** Delay in seconds for autoplay. Default is 3. */
    delay?: number;
    /** Pauses autoplay when the mouse hovers over the slider. Default is true. */
    pauseOnHover?: boolean;
    /** Tailwind class for the main container (e.g., margins, padding). */
    className?: string;
}

// --- MINIMIZED CSS Styles (Only core 3D positioning and responsiveness remain) ---
const EMBEDDED_CSS = `
/* --- Cascade Slider Styles --- */

.cascade-slider_container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 20; 
    user-select: none;
    -webkit-user-select: none; 
    touch-action: pan-y;
}

.cascade-slider_slides {
    position: relative;
    height: 100%; 
}

.cascade-slider_item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.3); 
    transition: all 1s ease; 
    opacity: 0;
    z-index: 1; 
    cursor: grab; 
}
.cascade-slider_item.now {
    cursor: default;
}
.cascade-slider_item:active {
    cursor: grabbing;
}

/* Slide Positioning Classes (Core 3D Logic - MUST REMAIN IN CSS) */
.cascade-slider_item.next {
    left: 50%;
    transform: translateY(-50%) translateX(-120%) scale(0.6);
    opacity: 1;
    z-index: 4; 
}
.cascade-slider_item.prev {
    left: 50%;
    transform: translateY(-50%) translateX(20%) scale(0.6);
    opacity: 1;
    z-index: 4; 
}
.cascade-slider_item.now {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(1);
    opacity: 1;
    z-index: 5; 
}

/* Arrows - Structural CSS remains for positioning/size */
.cascade-slider_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 6; 
    transform: translate(0, -50%);
    width: 40px; 
    height: 40px; 
    transition: all 0.3s ease;
    /* Tailwind will handle color/bg */
}

/* Arrow Positioning Fix (Responsive CSS) */
@media screen and (max-width: 575px) {
    .cascade-slider_arrow-left { 
        left: 5px; 
    }
    .cascade-slider_arrow-right { 
        right: 5px; 
    }
}
@media screen and (min-width: 576px) {
    .cascade-slider_arrow-left { left: -4%; }
    .cascade-slider_arrow-right { right: -4%; }
}

/* Images */
.cascade-slider_slides img {
    max-width: 150px;
    height: auto; 
    border-radius: 35px;
    display: block;
    transition: filter 1s ease;
}
/* Tailwind handles the grayscale filter on hover if desired, but keeping the state-based one is better */
.cascade-slider_item:not(.now) img {
    filter: grayscale(0.95);
}

/* --- Media Queries (Minimized to only include structural layout changes) --- */
@media screen and (min-width: 414px) {
    .cascade-slider_container { height: 40vh; }
    .cascade-slider_slides img { max-width: 200px; }
}
@media screen and (min-width: 576px) {
    .cascade-slider_container { height: 60vh; }
    .cascade-slider_slides img { max-width: 270px; }
}
@media screen and (min-width: 768px) {
    .cascade-slider_item.next { transform: translateY(-50%) translateX(-125%) scale(0.6); }
    .cascade-slider_item.prev { transform: translateY(-50%) translateX(25%) scale(0.6); }
    .cascade-slider_slides img { max-width: 250px; }
}
@media screen and (min-width: 991px) {
    .cascade-slider_item.next { transform: translateY(-50%) translateX(-115%) scale(0.55); z-index: 4; }
    .cascade-slider_item.prev { transform: translateY(-50%) translateX(15%) scale(0.55); z-index: 4; }
    .cascade-slider_item.next2 { transform: translateY(-50%) translateX(-150%) scale(0.37); z-index: 1; }
    .cascade-slider_item.prev2 { transform: translateY(-50%) translateX(50%) scale(0.37); z-index: 2; }
    .cascade-slider_slides img { max-width: 300px; }
    .cascade-slider_container { height: 37vh; }
}
@media screen and (min-width: 1100px) {
    .cascade-slider_item.next { transform: translateY(-50%) translateX(-130%) scale(0.55); }
    .cascade-slider_item.prev { transform: translateY(-50%) translateX(30%) scale(0.55); }
    .cascade-slider_item.next2 { transform: translateY(-50%) translateX(-180%) scale(0.37); }
    .cascade-slider_item.prev2 { transform: translateY(-50%) translateX(80%) scale(0.37); }
    .cascade-slider_slides img { max-width: 350px; }
}
`;


// --- Helper Function: Get Slide Classes ---
const getSlideClasses = (index: number, activeIndex: number, total: number, visibleCount: 3 | 5): string => {
    const diff = index - activeIndex;
    if (diff === 0) return 'now';
    if (diff === 1 || diff === -total + 1) return 'next';
    if (visibleCount === 5 && (diff === 2 || diff === -total + 2)) return 'next2';
    if (diff === -1 || diff === total - 1) return 'prev';
    if (visibleCount === 5 && (diff === -2 || diff === total - 2)) return 'prev2';
    return '';
};


// --- ThreeDImageCarousel Component Logic ---
export const ThreeDImageCarousel: React.FC<ThreeDImageCarouselProps> = ({
    slides,
    itemCount = 5,
    autoplay = false,
    delay = 3,
    pauseOnHover = true,
    className = '',
}) => {
    const [activeIndex, setActiveIndex] = useState(0);
    const autoplayIntervalRef = useRef<number | null>(null);
    const total = slides.length;

    const [isDragging, setIsDragging] = useState(false);
    const [startX, setStartX] = useState(0);
    const swipeThreshold = 50;

    const navigate = useCallback((direction: 'next' | 'prev') => {
        setActiveIndex(current => {
            if (direction === 'next') {
                return (current + 1) % total;
            } else {
                return (current - 1 + total) % total;
            }
        });
    }, [total]);

    const startAutoplay = useCallback(() => {
        if (autoplay && total > 1) {
            if (autoplayIntervalRef.current) {
                clearInterval(autoplayIntervalRef.current);
            }
            autoplayIntervalRef.current = window.setInterval(() => {
                navigate('next');
            }, delay * 1000);
        }
    }, [autoplay, delay, navigate, total]);

    const stopAutoplay = useCallback(() => {
        if (autoplayIntervalRef.current) {
            clearInterval(autoplayIntervalRef.current);
            autoplayIntervalRef.current = null;
        }
    }, []);

    useEffect(() => {
        startAutoplay();
        return () => { stopAutoplay(); };
    }, [startAutoplay, stopAutoplay]);

    // Handler to stop autoplay on hover
    const handleMouseEnter = () => {
        if (autoplay && pauseOnHover) {
            stopAutoplay();
        }
    };

    // Handler to start autoplay on mouse exit AND handle drag cancellation
    const handleExit = (e: React.MouseEvent) => {
        // 1. Autoplay resume logic
        if (autoplay && pauseOnHover) {
            startAutoplay();
        }

        // 2. Drag cancellation logic (Equivalent to the removed onMouseLeaveDrag)
        if (isDragging) {
            handleEnd(e.clientX);
        }
    };

    // --- Touch/Mouse Drag Logic ---
    const handleStart = (clientX: number) => {
        setIsDragging(true);
        setStartX(clientX);
        stopAutoplay();
    };

    const handleEnd = (clientX: number) => {
        if (!isDragging) return;

        const distance = clientX - startX;

        if (Math.abs(distance) > swipeThreshold) {
            if (distance < 0) {
                navigate('next'); // Swipe left (negative distance) -> show next slide
            } else {
                navigate('prev'); // Swipe right (positive distance) -> show previous slide
            }
        }

        setIsDragging(false);
        setStartX(0);
        // Autoplay is resumed by the useEffect on state change or by handleExit/onMouseUp
    };

    const onMouseDown = (e: React.MouseEvent) => handleStart(e.clientX);
    const onMouseUp = (e: React.MouseEvent) => {
        handleEnd(e.clientX);
        startAutoplay(); // Resume autoplay when mouse button is released
    };

    const onTouchStart = (e: React.TouchEvent) => handleStart(e.touches[0].clientX);
    const onTouchEnd = (e: React.TouchEvent) => {
        handleEnd(e.changedTouches[0].clientX);
        startAutoplay(); // Resume autoplay after touch interaction
    };

    return (
        <>
            {/* 1. EMBEDDED CSS with mobile arrow fix and minimal styling */}
            <style dangerouslySetInnerHTML={{ __html: EMBEDDED_CSS }} />

            {/* 2. SLIDER HTML STRUCTURE */}
            <div
                className={`cascade-slider_container ${className} bg-transparent 
                min-w-[600px]`}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleExit}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
                onTouchStart={onTouchStart}
                onTouchEnd={onTouchEnd}
            >
                <div className="cascade-slider_slides">
                    {slides.map((slide, index) => (
                        <div
                            key={slide.id}
                            className={`cascade-slider_item ${getSlideClasses(index, activeIndex, total, itemCount)}`}
                            data-slide-number={index}
                        >
                            <a href={slide.href}>
                                <img src={slide.src} alt={`Slide ${index + 1}`}
                                    // Fallback for image loading
                                    onError={(e) => {
                                        e.currentTarget.onerror = null;
                                        e.currentTarget.src = `https://placehold.co/350x200/4F46E5/ffffff?text=Slide%20${index + 1}`;
                                    }}
                                />
                            </a>
                        </div>
                    ))}
                </div>

                {/* Navigation Arrows (Fully Tailwind-styled) */}
                {total > 1 && (
                    <>
                        <span
                            className="cascade-slider_arrow cascade-slider_arrow-left rounded-full bg-black/30 text-white p-2 hover:bg-black/60 transition-colors"
                            onClick={(e) => { e.stopPropagation(); navigate('prev'); }}
                            data-action="prev"
                        >
                            <ArrowLeftCircle size={30} />
                        </span>
                        <span
                            className="cascade-slider_arrow cascade-slider_arrow-right rounded-full bg-black/30 text-white p-2 hover:bg-black/60 transition-colors"
                            onClick={(e) => { e.stopPropagation(); navigate('next'); }}
                            data-action="next"
                        >
                            <ArrowRightCircle size={30} />
                        </span>
                    </>
                )}
            </div>
        </>
    );
};

export default ThreeDImageCarousel;
```
--------------------------------------------------

### COMPONENT: 3d-carousel
Category: 3D Elements
Description: An immersive 3D carousel component with flippable cards arranged in a circular layout. Features drag navigation, keyboard controls, auto-rotation, and smooth animations with full theme support.
URL: https://lightswind.com/components/3d-carousel
Import: import ThreeDCarousel, { ThreeDCarouselItem } from "@/components/ThreeDCarousel";
Registry URL: https://lightswind.com/r/3d-carousel.json
Install Command: npx lightswind@latest add 3d-carousel

Usage:
```tsx
const items: ThreeDCarouselItem[] = [
  {
    id: 1,
    title: "6th SENSE Safety System",
    brand: "FireCat Group",
    description: "AI-driven smart uniform tech for law enforcement, military & firefighters.",
    tags: ["Safety", "Military", "AI Sensors", "Monitoring"],
    imageUrl: "/img/firecat.jpg",
    link: "/projects/firecat"
  }
];

<ThreeDCarousel 
  items={items}
  autoRotate={true}
  rotateInterval={4000}
  cardHeight={500}
/>
```

Source Code:
```tsx
// components/ThreeDCarousel.tsx
"use client";

import React, {
  useRef,
  useEffect,
  useState,
  TouchEvent,
} from "react";
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
import { Card, CardContent } from "./card";
import { useIsMobile } from "@/components/hooks/use-mobile";

export interface ThreeDCarouselItem {
  id: number;
  title: string;
  brand: string;
  description: string;
  tags: string[];
  imageUrl: string;
  link: string;
}

interface ThreeDCarouselProps {
  items: ThreeDCarouselItem[];
  autoRotate?: boolean;
  rotateInterval?: number;
  cardHeight?: number;
  title?: string;
  subtitle?: string;
  tagline?: string;
  isMobileSwipe?: boolean;
}

const ThreeDCarousel = ({
  items = [
    {
      id: 1,
      title: "Active Wear Innovation",
      brand: "Nike",
      description: "Integrating flexible sensors into performance gear to monitor muscle fatigue and heart rate in real-time.",
      tags: ["Sports", "Health", "IoT"],
      imageUrl: "https://images.unsplash.com/photo-1515243061678-14fc18b93935?q=80&w=2940&auto=format&fit=crop",
      link: "#",
    },
    {
      id: 2,
      title: "Smart Ergonomics",
      brand: "Herman Miller",
      description: "Pressure-sensitive fabrics in office chairs that analyze posture and suggest adjustments for optimal health.",
      tags: ["Office", "Health", "Furniture"],
      imageUrl: "https://images.unsplash.com/photo-1505843490538-5133c6c7d0e1?q=80&w=2938&auto=format&fit=crop",
      link: "#",
    },
    {
      id: 3,
      title: "Automotive Comfort",
      brand: "Tesla",
      description: "Intelligent car seats that adapt to passenger position and monitor vital signs for enhanced safety.",
      tags: ["Auto", "Safety", "Smart"],
      imageUrl: "https://images.unsplash.com/photo-1561580125-028ce3bfcb25?q=80&w=2940&auto=format&fit=crop",
      link: "#",
    },
  ],
  autoRotate = true,
  rotateInterval = 4000,
  cardHeight = 500,
  title = "From Textile to Intelligence",
  subtitle = "Customer Cases",
  tagline = "Explore how our textile sensor technology is revolutionizing multiple industries with intelligent fabric solutions tailored to specific needs.",
  isMobileSwipe = true,
}: ThreeDCarouselProps) => {
  const [active, setActive] = useState(0);
  const carouselRef = useRef<HTMLDivElement>(null);
  const [isInView, setIsInView] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const [touchStart, setTouchStart] = useState<number | null>(null);
  const [touchEnd, setTouchEnd] = useState<number | null>(null);
  const isMobile = useIsMobile();
  const minSwipeDistance = 50;

  useEffect(() => {
    if (autoRotate && isInView && !isHovering) {
      const interval = setInterval(() => {
        setActive((prev) => (prev + 1) % items.length);
      }, rotateInterval);
      return () => clearInterval(interval);
    }
  }, [isInView, isHovering, autoRotate, rotateInterval, items.length]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIsInView(entry.isIntersecting),
      { threshold: 0.2 }
    );
    return () => observer.disconnect();
  }, []);

  const onTouchStart = (e: TouchEvent) => {
    setTouchStart(e.targetTouches[0].clientX);
    setTouchEnd(null);
  };

  const onTouchMove = (e: TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    const distance = touchStart - touchEnd;
    if (distance > minSwipeDistance) {
      setActive((prev) => (prev + 1) % items.length);
    } else if (distance < -minSwipeDistance) {
      setActive((prev) => (prev - 1 + items.length) % items.length);
    }
  };

  const getCardAnimationClass = (index: number) => {
    if (index === active) return "scale-100 opacity-100 z-20";
    if (index === (active + 1) % items.length)
      return "translate-x-[40%] scale-95 opacity-60 z-10";
    if (index === (active - 1 + items.length) % items.length)
      return "translate-x-[-40%] scale-95 opacity-60 z-10";
    return "scale-90 opacity-0";
  };

  return (
    <section
      id="ThreeDCarousel"
      className="bg-transparent min-w-full mx-aut 
    flex items-center justify-center"
    >
      <div
        className="w-full px-4 sm:px-6 lg:px-8 
      min-w-[350px] md:min-w-[1000px] max-w-7xl  "
      >
        <div
          className="relative overflow-hidden h-[550px] "
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
          onTouchStart={onTouchStart}
          onTouchMove={onTouchMove}
          onTouchEnd={onTouchEnd}
          ref={carouselRef}
        >
          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center ">
            {items.map((item, index) => (
              <div
                key={item.id}
                className={`absolute top-0 w-full max-w-md transform transition-all duration-500 ${getCardAnimationClass(
                  index
                )}`}
              >
                <Card
                  className={`overflow-hidden bg-background h-[${cardHeight}px] border shadow-sm 
                hover:shadow-md flex flex-col`}
                >
                  <div
                    className="relative bg-black p-6 flex items-center justify-center h-48 overflow-hidden"
                    style={{
                      backgroundImage: `url(${item.imageUrl})`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                    }}
                  >
                    <div className="absolute inset-0 bg-black/50" />
                    <div className="relative z-10 text-center text-white">
                      <h3 className="text-2xl font-bold mb-2">
                        {item.brand.toUpperCase()}
                      </h3>
                      <div className="w-12 h-1 bg-white mx-auto mb-2" />
                      <p className="text-sm ">{item.title}</p>
                    </div>
                  </div>

                  <CardContent className="p-6 flex flex-col flex-grow">
                    <h3 className="text-xl font-bold mb-1 text-foreground">
                      {item.title}
                    </h3>
                    <p className="text-gray-500 text-sm font-medium mb-2">
                      {item.brand}
                    </p>
                    <p className="text-gray-600 text-sm flex-grow">
                      {item.description}
                    </p>

                    <div className="mt-4">
                      <div className="flex flex-wrap gap-2 mb-4">
                        {item.tags.map((tag, idx) => (
                          <span
                            key={idx}
                            className="px-2 py-1 bg-gray-50 text-gray-600 rounded-full text-xs animate-pulse-slow"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>

                      <a
                        href={item.link}
                        className="text-gray-500 flex items-center hover:underline relative group"
                        onClick={() => {
                          if (item.link.startsWith("/")) {
                            window.scrollTo(0, 0);
                          }
                        }}
                      >
                        <span className="relative z-10">Learn more</span>
                        <ArrowRight className="ml-2 w-4 h-4 relative z-10 transition-transform group-hover:translate-x-1" />
                        <span className="absolute left-0 bottom-0 w-0 h-0.5 bg-gray-500 transition-all duration-300 group-hover:w-full"></span>
                      </a>
                    </div>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>

          {!isMobile && (
            <>
              <button
                className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110"
                onClick={() =>
                  setActive((prev) => (prev - 1 + items.length) % items.length)
                }
                aria-label="Previous"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button
                className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110"
                onClick={() => setActive((prev) => (prev + 1) % items.length)}
                aria-label="Next"
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </>
          )}

          <div className="absolute bottom-6 left-0 right-0 flex justify-center items-center space-x-3 z-30">
            {items.map((_, idx) => (
              <button
                key={idx}
                className={`w-2 h-2 rounded-full transition-all duration-300 ${
                  active === idx
                    ? "bg-gray-500 w-5"
                    : "bg-gray-200 hover:bg-gray-300"
                }`}
                onClick={() => setActive(idx)}
                aria-label={`Go to item ${idx + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ThreeDCarousel;

```
--------------------------------------------------

### COMPONENT: 3d-glass-coin-carousel
Category: 3D Elements
Description: Procedural WebGL 2 raymarching of glass-morphic coins rotating in a tilted 3D orbit with fresnel edge highlights, refraction, and specular lighting around center text.
URL: https://lightswind.com/components/3d-glass-coin-carousel
Import: import GlassCoinCarousel from "@/components/lightswind/3d-glass-coin-carousel";
Registry URL: https://lightswind.com/r/3d-glass-coin-carousel.json
Install Command: npx lightswind@latest add 3d-glass-coin-carousel

Usage:
```tsx
import GlassCoinCarousel from "@/components/lightswind/3d-glass-coin-carousel";

export function Demo() {
  return (
    <div className="relative w-full h-[500px]">
      <GlassCoinCarousel
        color1="#6366f1"
        color2="#a855f7"
        centerText="WANNATHIS.ONE"
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useTheme } from "next-themes";
import { Color } from "ogl";

export interface GlassCoinCarouselProps {
  className?: string;
  /** Number of coins in the carousel (default: 9) */
  coinsCount?: number;
  /** Orbit radius of the carousel (default: 2.3) */
  radius?: number;
  /** Radius of each individual coin (default: 0.65) */
  coinRadius?: number;
  /** Thickness of each individual coin (default: 0.12) */
  coinThickness?: number;
  /** Rotation speed multiplier (default: 0.8) */
  speed?: number;
  /** Primary gradient color 1 (default: "#3b82f6" - Blue) */
  color1?: string;
  /** Primary gradient color 2 (default: "#a855f7" - Purple) */
  color2?: string;
  /** Maximum opacity level of the glass coins (default: 0.85) */
  maxOpacity?: number;
  /** Center overlay text */
  centerText?: string;
  /** Custom class name for center text overlay styling */
  centerTextClassName?: string;
}

const VERTEX_SHADER_SOURCE = `#version 300 es
in vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}`;

const FRAGMENT_SHADER_SOURCE = `#version 300 es
precision highp float;

uniform float uTime;
uniform vec2 uResolution;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uRadius;
uniform float uCoinRadius;
uniform float uCoinThickness;
uniform float uSpeed;
uniform int uCoinsCount;
uniform float uMaxOpacity;
uniform float uDarkTheme; // 1.0 for dark mode, 0.0 for light mode

out vec4 fragColor;

// Ellipsoid SDF from Inigo Quilez
float sdEllipsoid(vec3 p, vec3 r) {
  float k0 = length(p / r);
  float k1 = length(p / (r * r));
  return k0 * (k0 - 1.0) / k1;
}

// Global scene map function
float map(vec3 p, out int hitId, out vec3 localP, out float hitAngle, out float wobbleVal) {
  float d = 1e10;
  hitId = -1;
  
  // Dynamically loop over coins
  for (int i = 0; i < 9; i++) {
    float angle = float(i) * 6.2831853 / 9.0 + uTime * uSpeed;
    
    // Position on XZ plane
    vec3 center = vec3(uRadius * cos(angle), 0.0, uRadius * sin(angle));
    vec3 lp = p - center;
    
    // Tangent orientation vectors
    vec3 N = vec3(cos(angle), 0.0, sin(angle)); // radial
    vec3 B = vec3(0.0, 1.0, 0.0);               // vertical
    vec3 T = vec3(-sin(angle), 0.0, cos(angle)); // tangent
    
    // Project ray coordinates to local coin space
    vec3 localCoord = vec3(
      dot(lp, N),
      dot(lp, B),
      dot(lp, T)
    );
    
    // Add local wobble tilt for organic movement
    float wobble = sin(uTime * 1.5 + float(i) * 0.8) * 0.12;
    float cosW = cos(wobble);
    float sinW = sin(wobble);
    
    float ly = localCoord.y * cosW - localCoord.z * sinW;
    float lz = localCoord.y * sinW + localCoord.z * cosW;
    localCoord.y = ly;
    localCoord.z = lz;
    
    // Compute distance to ellipsoid
    float distCoin = sdEllipsoid(localCoord, vec3(uCoinRadius, uCoinRadius, uCoinThickness));
    
    if (distCoin < d) {
      d = distCoin;
      hitId = i;
      localP = localCoord;
      hitAngle = angle;
      wobbleVal = wobble;
    }
  }
  return d;
}

void main() {
  vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution) / min(uResolution.x, uResolution.y);
  
  // Tilted orbit camera path (downward angle)
  vec3 ro = vec3(0.0, 2.3, 4.8);
  vec3 ta = vec3(0.0, -0.15, 0.0);
  
  // Camera transform setup
  vec3 cw = normalize(ta - ro);
  vec3 cp = vec3(0.0, 1.0, 0.0);
  vec3 cu = normalize(cross(cw, cp));
  vec3 cv = cross(cu, cw);
  vec3 rd = normalize(uv.x * cu + uv.y * cv + 2.0 * cw);
  
  // Raymarch path
  float t = 0.0;
  int hitId = -1;
  vec3 localP;
  float hitAngle = 0.0;
  float wobbleVal = 0.0;
  
  for (int i = 0; i < 64; i++) {
    vec3 p = ro + rd * t;
    int currHitId;
    vec3 currLocalP;
    float currHitAngle;
    float currWobble;
    float d = map(p, currHitId, currLocalP, currHitAngle, currWobble);
    if (d < 0.001) {
      hitId = currHitId;
      localP = currLocalP;
      hitAngle = currHitAngle;
      wobbleVal = currWobble;
      break;
    }
    t += d;
    if (t > 10.0) break;
  }
  
  if (hitId != -1) {
    vec3 p = ro + rd * t;
    
    // Calculate 100% accurate analytical normals for the ellipsoid
    vec3 r = vec3(uCoinRadius, uCoinRadius, uCoinThickness);
    vec3 localNormal = localP / (r * r);
    localNormal = normalize(localNormal);
    
    // Reconstruct world-space normal using the wobbled orthogonal frame vectors
    vec3 N = vec3(cos(hitAngle), 0.0, sin(hitAngle)); // radial
    vec3 B = vec3(0.0, 1.0, 0.0);                    // vertical
    vec3 T = vec3(-sin(hitAngle), 0.0, cos(hitAngle)); // tangent
    
    // Apply local wobble rotation to the frame vectors
    float cosW = cos(wobbleVal);
    float sinW = sin(wobbleVal);
    vec3 B_wobbled = B * cosW + T * sinW;
    vec3 T_wobbled = -B * sinW + T * cosW;
    
    // Transform local normal to world space
    vec3 normal = localNormal.x * N + localNormal.y * B_wobbled + localNormal.z * T_wobbled;
    normal = normalize(normal);
    
    // Gradient coloring based on the orbit angle and local position
    vec3 baseColor = mix(uColor1, uColor2, sin(hitAngle) * 0.5 + 0.5);
    float localGrad = localP.x / uCoinRadius * 0.5 + 0.5;
    baseColor = mix(baseColor, mix(uColor2, uColor1, sin(hitAngle) * 0.5 + 0.5), localGrad);
    
    // Fresnel glass reflection mapping (power 2.5 for thicker edge visibility)
    vec3 viewDir = -rd;
    float fresnel = pow(1.0 - max(0.0, dot(normal, viewDir)), 2.5);
    
    // Dual Light Sources (key light from top-right-front, fill light from bottom-left)
    vec3 keyLightDir = normalize(vec3(1.5, 3.0, 2.0));
    vec3 fillLightDir = normalize(vec3(-1.0, -1.0, -1.0));
    
    // Deeper shadows inside the coin for better contrast against white backgrounds in Light theme
    float shadowMin = mix(0.18, 0.35, uDarkTheme);
    float keyDiffuse = max(0.0, dot(normal, keyLightDir));
    float fillDiffuse = max(0.0, dot(normal, fillLightDir));
    float shadow = mix(shadowMin, 1.0, keyDiffuse);
    
    // In light mode, glass edges refract less light towards the eye, creating a dark boundary
    // In dark mode, they catch light and glow
    float edgeOcclusion = mix(1.0 - fresnel * 0.55, 1.0, uDarkTheme);
    
    // Specular highlights (sharp high-gloss + soft ambient specular)
    // Softened slightly in light mode to prevent blending with white background
    float specIntensity = mix(0.6, 1.0, uDarkTheme);
    vec3 keyHalfDir = normalize(keyLightDir + viewDir);
    float specSharp = pow(max(0.0, dot(normal, keyHalfDir)), 64.0) * 1.6 * specIntensity;
    float specSoft = pow(max(0.0, dot(normal, keyHalfDir)), 8.0) * 0.35 * specIntensity;
    float specular = specSharp + specSoft;
    
    // Rim glow: bright in dark mode, subdued in light mode
    float rimIntensity = mix(0.25, 0.85, uDarkTheme);
    vec3 rimColor = mix(vec3(0.3, 0.75, 1.0), vec3(0.85, 0.4, 1.0), sin(hitAngle) * 0.5 + 0.5);
    vec3 rimGlow = rimColor * fresnel * rimIntensity;
    
    // Internal light transmission
    vec3 glassColor = baseColor * (shadow * edgeOcclusion + 0.15 * fillDiffuse) + rimGlow + vec3(1.0) * specular;
    
    // Render glass transparency (Light mode is less transparent/higher body opacity to remain visible against white)
    float minAlpha = mix(0.55, 0.42, uDarkTheme);
    float alpha = mix(minAlpha, 0.96, fresnel) * uMaxOpacity;
    alpha = max(alpha, specSharp * 0.6); // keep specular reflections opaque
    
    fragColor = vec4(glassColor, alpha);
  } else {
    // Transparent background
    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
  }
}`;

export default function GlassCoinCarousel({
  className = "",
  coinsCount = 9,
  radius = 2.3,
  coinRadius = 0.65,
  coinThickness = 0.12,
  speed = 0.8,
  color1 = "#3b82f6",
  color2 = "#a855f7",
  maxOpacity = 0.85,
  centerText = "WANNATHIS.ONE",
  centerTextClassName = "",
}: GlassCoinCarouselProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const { resolvedTheme } = useTheme();

  useEffect(() => {
    const container = containerRef.current;
    const canvas = canvasRef.current;
    if (!container || !canvas) return;

    const gl = canvas.getContext("webgl2", { alpha: true, antialias: true });
    if (!gl) {
      console.error("WebGL 2 context not available.");
      return;
    }

    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    // Dynamic full viewport geometry
    const positions = new Float32Array([
      -1, -1,
       1, -1,
      -1,  1,
      -1,  1,
       1, -1,
       1,  1,
    ]);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    // Compile shaders
    const compileShader = (type: number, source: string) => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation failed: ", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, VERTEX_SHADER_SOURCE);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking failed: ", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionLoc = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(positionLoc);
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

    // Get uniforms
    const uTimeLoc = gl.getUniformLocation(program, "uTime");
    const uResolutionLoc = gl.getUniformLocation(program, "uResolution");
    const uColor1Loc = gl.getUniformLocation(program, "uColor1");
    const uColor2Loc = gl.getUniformLocation(program, "uColor2");
    const uRadiusLoc = gl.getUniformLocation(program, "uRadius");
    const uCoinRadiusLoc = gl.getUniformLocation(program, "uCoinRadius");
    const uCoinThicknessLoc = gl.getUniformLocation(program, "uCoinThickness");
    const uSpeedLoc = gl.getUniformLocation(program, "uSpeed");
    const uCoinsCountLoc = gl.getUniformLocation(program, "uCoinsCount");
    const uMaxOpacityLoc = gl.getUniformLocation(program, "uMaxOpacity");
    const uDarkThemeLoc = gl.getUniformLocation(program, "uDarkTheme");

    const resize = () => {
      const w = container.offsetWidth;
      const h = container.offsetHeight;
      canvas.width = w;
      canvas.height = h;
      gl.viewport(0, 0, w, h);
    };
    window.addEventListener("resize", resize);
    resize();

    let animationId: number;
    const render = (time: number) => {
      animationId = requestAnimationFrame(render);

      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.useProgram(program);

      // Pass uniforms
      gl.uniform1f(uTimeLoc, time * 0.001);
      gl.uniform2f(uResolutionLoc, canvas.width, canvas.height);
      
      const c1 = new Color(color1);
      const c2 = new Color(color2);
      gl.uniform3f(uColor1Loc, c1.r, c1.g, c1.b);
      gl.uniform3f(uColor2Loc, c2.r, c2.g, c2.b);

      gl.uniform1f(uRadiusLoc, radius);
      gl.uniform1f(uCoinRadiusLoc, coinRadius);
      gl.uniform1f(uCoinThicknessLoc, coinThickness);
      gl.uniform1f(uSpeedLoc, speed);
      gl.uniform1i(uCoinsCountLoc, coinsCount);
      gl.uniform1f(uMaxOpacityLoc, maxOpacity);
      
      // Determine if active theme is dark
      const isDark = resolvedTheme !== "light";
      gl.uniform1f(uDarkThemeLoc, isDark ? 1.0 : 0.0);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
    };
    render(0);

    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener("resize", resize);
      gl.deleteBuffer(positionBuffer);
      gl.deleteProgram(program);
      gl.deleteShader(vertexShader);
      gl.deleteShader(fragmentShader);
    };
  }, [coinsCount, radius, coinRadius, coinThickness, speed, color1, color2, maxOpacity, resolvedTheme]);

  return (
    <div
      ref={containerRef}
      className={`relative w-full h-full min-h-[500px] flex items-center justify-center overflow-hidden bg-transparent ${className}`}
    >
      {/* WebGL Render Canvas */}
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full z-0 block pointer-events-none" />

      {/* Center Text Overlay */}
      {centerText && (
        <div
          className={`absolute z-10 pointer-events-auto text-center font-black select-none tracking-tight font-sans text-neutral-900 dark:text-white filter drop-shadow-md transition-all duration-300 ${centerTextClassName}`}
        >
          {centerText}
        </div>
      )}
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: 3d-image-slider
Category: 3D Elements
Description: A professional responsive 3D image slider component using Framer Motion and Tailwind CSS. Features smooth rotation, customizable perspective, and CSS 3D transforms.
URL: https://lightswind.com/components/3d-image-slider
Import: import ImageSlider3D from "@/components/lightswind/3d-image-slider"
Registry URL: https://lightswind.com/r/3d-image-slider.json
Install Command: npx lightswind@latest add 3d-image-slider

Usage:
```tsx
import ImageSlider3D from "@/components/lightswind/3d-image-slider";

export function ThreeDImageSliderDemo() {
  return (
    <div className="w-full h-[600px] flex items-center justify-center bg-[#fff3ed] dark:bg-black rounded-xl overflow-hidden relative">
      <ImageSlider3D duration={32} cardWidth="15em" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef } from "react";
import { motion, useReducedMotion, useInView } from "framer-motion";

const DEFAULT_DATA = [
  "https://images.unsplash.com/photo-1540968221243-29f5d70540bf?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1596135187959-562c650d98bc?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1628944682084-831f35256163?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1590013330451-3946e83e0392?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1590421959604-741d0eec0a2e?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1572613000712-eadc57acbecd?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1570097192570-4b49a6736f9f?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1620789550663-2b10e0080354?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1617775623669-20bff4ffaa5c?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1573824969595-a76d4365a2e6?w=800&auto=format&fit=crop&q=60",
  "https://images.unsplash.com/photo-1633936929709-59991b5fdd72?w=800&auto=format&fit=crop&q=60",
];

interface Slider3DProps {
  /** Array of image URLs to display */
  images?: string[];
  /** Duration of one full 360-degree rotation (in seconds) */
  duration?: number;
  /** Width of each card. Can be px, rem, em, etc. */
  cardWidth?: string;
  /** CSS aspect ratio of the cards */
  cardAspectRatio?: string;
  /** CSS perspective value for the 3D container */
  perspective?: string;
  /** Additional classes for the outermost container */
  containerClassName?: string;
  /** Additional classes for the individual image elements */
  imageClassName?: string;
  /** Direction of the rotation */
  rotationDirection?: "left" | "right";
  /** Whether to apply a gradient fade mask on the edges */
  withMask?: boolean;
}

export default function ImageSlider3D({
  images = DEFAULT_DATA,
  duration = 32,
  cardWidth = "17.5em",
  cardAspectRatio = "7/10",
  perspective = "35em",
  containerClassName = "",
  imageClassName = "",
  rotationDirection = "left",
  withMask = true,
}: Slider3DProps) {
  const n = images.length;
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef, { margin: "200px" });
  const prefersReducedMotion = useReducedMotion();
  const animationDuration = prefersReducedMotion ? duration * 4 : duration;

  // rotation angles based on direction
  const rotationValues = rotationDirection === "left" ? [0, 360] : [360, 0];

  const maskStyles = withMask
    ? {
      WebkitMask:
        "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
      mask: "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
    }
    : {};

  return (
    <div
      ref={containerRef}
      className={`grid w-full h-full min-h-[500px] overflow-hidden place-items-center ${containerClassName}`}
      style={{
        perspective: perspective,
        ...maskStyles,
      }}
    >
      <motion.div
        className="grid place-self-center pointer-events-auto will-change-transform"
        style={{
          transformStyle: "preserve-3d",
        }}
        animate={isInView ? { rotateY: rotationValues } : false}
        transition={{
          duration: animationDuration,
          ease: "linear",
          repeat: Infinity,
        }}
      >
        {images.map((src, i) => (
          <img
            key={i}
            src={src}
            alt={`Slide ${i}`}
            loading="lazy"
            decoding="async"
            className={`col-start-1 row-start-1 object-cover rounded-[1.5em] ${imageClassName}`}
            style={{
              width: cardWidth,
              aspectRatio: cardAspectRatio,
              backfaceVisibility: "hidden",
              WebkitBackfaceVisibility: "hidden",
              transform: `rotateY(calc(${i} * (1turn / ${n}))) translateZ(calc(-1 * (0.5 * ${cardWidth} + 0.5em) / tan(0.5 * (1turn / ${n}))))`,
            }}
          />
        ))}
      </motion.div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: 3d-hover-gallery
Category: 3D Elements
Description: A stunning 3D hover gallery with perspective effects, smooth transitions, and responsive design. Features keyboard navigation, auto-play mode, and extensive customization options.
URL: https://lightswind.com/components/3d-hover-gallery
Import: import ThreeDHoverGallery from "@/components/lightswind/3d-hover-gallery"
Registry URL: https://lightswind.com/r/3d-hover-gallery.json
Install Command: npx lightswind@latest add 3d-hover-gallery

Usage:
```tsx
import ThreeDHoverGallery from "@/components/lightswind/3d-hover-gallery";

// Basic usage
<ThreeDHoverGallery />

// With custom images
<ThreeDHoverGallery
  images={[
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg"
  ]}
  onImageClick={(index, image) => console.log(`Clicked image ${index + 1}`)}
/>

// Advanced configuration
<ThreeDHoverGallery
  itemWidth={4}
  itemHeight={15}
  gap={0.6}
  perspective={40}
  hoverScale={12}
  transitionDuration={1.5}
  backgroundColor="#0a0a0a"
  grayscaleStrength={0.8}
  brightnessLevel={0.6}
  activeWidth={35}
  enableKeyboardNavigation={true}
  autoPlay={true}
  autoPlayDelay={4000}
  onImageClick={(index, image) => handleImageClick(index, image)}
  onImageHover={(index, image) => handleImageHover(index, image)}
/>
```

Source Code:
```tsx
import React, { useRef, useEffect, useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowRight } from "lucide-react";

const cn = (...classes: any[]) => classes.filter(Boolean).join(" ");

export interface GalleryItem {
  url: string;
  title: string;
  category: string;
  description: string;
  color?: string;
  glow?: string;
}

export interface ThreeDHoverGalleryProps {
  images?: string[];
  items?: GalleryItem[];
  itemHeight?: string | number;
  gap?: number;
  perspective?: number;
  hoverScale?: number;
  transitionDuration?: number;
  enableKeyboardNavigation?: boolean;
  autoPlay?: boolean;
  autoPlayDelay?: number;
  className?: string;
  style?: React.CSSProperties;
  onImageClick?: (index: number, item: GalleryItem) => void;
  onImageHover?: (index: number, item: GalleryItem) => void;
}

const DEFAULT_ITEMS: GalleryItem[] = [
  {
    url: "https://images.unsplash.com/photo-1509198397868-475647b2a1e5?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Neo Tokyo",
    category: "Cyberpunk",
    description: "Immersive neon skylines and futuristic streets glowing in the rain.",
    glow: "rgba(236,72,153,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Ethereal Flow",
    category: "Abstract Art",
    description: "Sleek flowing shapes with high-contrast pastel fluid textures.",
    glow: "rgba(6,182,212,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Quantum Nexus",
    category: "Sci-Fi",
    description: "Interstellar data nodes mapping out the universe's connections.",
    glow: "rgba(139,92,246,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Surreal Oasis",
    category: "Digital Art",
    description: "Floating islands and dreamlike columns rising from serene oceans.",
    glow: "rgba(245,158,11,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1617788138017-80ad40651399?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Apex Horizon",
    category: "Automotive",
    description: "Aerodynamic lines of a futuristic hypercar glowing in carbon fibers.",
    glow: "rgba(239,68,68,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1511556532299-8f662fc26c06?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Carbon Monolith",
    category: "Architecture",
    description: "Minimalist brutalist angles playing with architectural shadows.",
    glow: "rgba(16,185,129,0.35)"
  },
  {
    url: "https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?auto=compress&cs=tinysrgb&w=800&q=80",
    title: "Cosmic Cradle",
    category: "Astronomy",
    description: "Deep violet stellar nurseries dust clouds lightyears across.",
    glow: "rgba(168,85,247,0.35)"
  }
];

const ThreeDHoverGallery: React.FC<ThreeDHoverGalleryProps> = ({
  images,
  items,
  itemHeight = 500,
  gap = 10,
  perspective = 1000,
  hoverScale = 1.05,
  transitionDuration = 0.5,
  enableKeyboardNavigation = true,
  autoPlay = false,
  autoPlayDelay = 4000,
  className,
  style,
  onImageClick,
  onImageHover,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
  const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);

  // Normalize data sources
  const galleryItems = useMemo(() => {
    if (items && items.length > 0) return items;
    if (images && images.length > 0) {
      return images.map((url, index) => {
        const fallback = DEFAULT_ITEMS[index % DEFAULT_ITEMS.length];
        return {
          url,
          title: fallback.title,
          category: fallback.category,
          description: fallback.description,
          glow: fallback.glow
        };
      });
    }
    return DEFAULT_ITEMS;
  }, [images, items]);

  // Handle Autoplay Loop
  useEffect(() => {
    if (autoPlay && galleryItems.length > 0) {
      if (autoPlayTimerRef.current) clearInterval(autoPlayTimerRef.current);
      autoPlayTimerRef.current = setInterval(() => {
        setActiveIndex((prev) => {
          const nextIndex = prev === null ? 0 : (prev + 1) % galleryItems.length;
          return nextIndex;
        });
      }, autoPlayDelay);

      return () => {
        if (autoPlayTimerRef.current) clearInterval(autoPlayTimerRef.current);
      };
    }
  }, [autoPlay, autoPlayDelay, galleryItems.length]);

  const handleImageClick = (index: number, item: GalleryItem) => {
    setActiveIndex(activeIndex === index ? null : index);
    onImageClick?.(index, item);
  };

  const handleImageHover = (index: number, item: GalleryItem) => {
    if (!autoPlay) {
      setActiveIndex(index);
    }
    onImageHover?.(index, item);
  };

  const handleImageLeave = () => {
    if (!autoPlay) {
      setActiveIndex(null);
    }
  };

  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
    if (!enableKeyboardNavigation) return;

    switch (event.key) {
      case "Enter":
      case " ":
        event.preventDefault();
        handleImageClick(index, galleryItems[index]);
        break;
      case "ArrowLeft":
        event.preventDefault();
        const prevIndex = index > 0 ? index - 1 : galleryItems.length - 1;
        (containerRef.current?.children[prevIndex] as HTMLElement)?.focus();
        break;
      case "ArrowRight":
        event.preventDefault();
        const nextIndex = index < galleryItems.length - 1 ? index + 1 : 0;
        (containerRef.current?.children[nextIndex] as HTMLElement)?.focus();
        break;
      case "Escape":
        setActiveIndex(null);
        break;
    }
  };

  return (
    <div
      className={cn(
        "w-full flex items-center justify-center overflow-hidden py-4",
        className
      )}
      style={style}
      onMouseLeave={handleImageLeave}
    >
      <div
        ref={containerRef}
        className="flex justify-center items-center w-full"
        style={{
          perspective: `${perspective}px`,
          transformStyle: "preserve-3d",
          gap: `${gap}px`,
        }}
      >
        {galleryItems.map((item, index) => {
          const isActive = activeIndex === index;
          const isFocused = focusedIndex === index;

          return (
            <motion.div
              key={index}
              role="button"
              tabIndex={enableKeyboardNavigation ? 0 : -1}
              onClick={() => handleImageClick(index, item)}
              onMouseEnter={() => handleImageHover(index, item)}
              onFocus={() => setFocusedIndex(index)}
              onBlur={() => setFocusedIndex(null)}
              onKeyDown={(e) => handleKeyDown(e, index)}
              aria-label={item.title}
              aria-pressed={isActive}
              layout
              animate={{
                rotateY: activeIndex === null ? 0 : index < activeIndex ? 24 : index > activeIndex ? -24 : 0,
              }}
              transition={{
                layout: { type: "spring", stiffness: 100, damping: 17 },
                rotateY: { type: "spring", stiffness: 90, damping: 15 },
                filter: { duration: 0.3 }
              }}
              style={{
                height: typeof itemHeight === "number" ? `${itemHeight}px` : itemHeight,
                zIndex: isActive ? 20 : 10,
                flex: isActive ? 5.8 : 1,
                minWidth: isActive ? "280px" : "60px",
                transformStyle: "preserve-3d",
              }}
              className={cn(
                "relative cursor-pointer select-none overflow-hidden rounded-2xl border transition-all duration-300",
                isActive
                  ? "border-zinc-300/80 dark:border-zinc-700/60"
                  : activeIndex === null
                    ? "grayscale-[0.25] brightness-[0.8] dark:brightness-[0.7] border-zinc-200/50 dark:border-zinc-800/40 hover:border-zinc-300 dark:hover:border-zinc-700/60"
                    : "grayscale brightness-[0.4] dark:brightness-[0.3] border-zinc-200/30 dark:border-zinc-800/20",
                isFocused
                  ? "ring-2 ring-primarylw ring-offset-2 dark:ring-offset-zinc-950 scale-[1.01] border-primarylw/50"
                  : "",
                "bg-zinc-100 dark:bg-zinc-900 shadow-sm"
              )}
            >
              {/* Outer Neon Shadow Glow when Active */}
              {isActive && item.glow && (
                <div
                  className="absolute inset-0 pointer-events-none rounded-2xl transition-all duration-500 z-10"
                  style={{
                    boxShadow: `inset 0 0 20px ${item.glow}, 0 0 15px ${item.glow}`,
                  }}
                />
              )}

              {/* Background Image Container with parallax scale */}
              <motion.div
                animate={{ scale: isActive ? hoverScale : 1.0 }}
                transition={{ duration: transitionDuration, ease: [0.1, 0.7, 0, 1] }}
                className="absolute inset-0 w-full h-full"
                style={{
                  backgroundImage: `url(${item.url})`,
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                }}
              />

              {/* Text Readable Gradient Overlay */}
              <div
                className={cn(
                  "absolute inset-0 bg-gradient-to-t transition-opacity duration-300 z-[2]",
                  isActive
                    ? "from-black/90 via-black/40 to-black/10 opacity-100"
                    : "from-black/60 via-transparent to-transparent opacity-40"
                )}
              />

              {/* Dynamic Overlay Content (shown only on active card) */}
              <div className="absolute inset-0 flex flex-col justify-end p-5 z-[4] text-white overflow-hidden">
                <AnimatePresence>
                  {isActive && (
                    <div className="flex flex-col items-start w-full">
                      {/* Category */}
                      <motion.span
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 0.9, y: 0 }}
                        exit={{ opacity: 0, y: 5 }}
                        transition={{ duration: 0.3, delay: 0.05 }}
                        className="text-[9px] font-black tracking-widest uppercase text-primarylw-2 mb-1"
                      >
                        {item.category}
                      </motion.span>

                      {/* Title */}
                      <motion.h4
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 5 }}
                        transition={{ duration: 0.3, delay: 0.1 }}
                        className="text-base md:text-lg lg:text-xl font-bold leading-tight tracking-tight mb-1 text-zinc-50"
                      >
                        {item.title}
                      </motion.h4>

                      {/* Description */}
                      <motion.p
                        initial={{ opacity: 0, y: 15 }}
                        animate={{ opacity: 0.7, y: 0 }}
                        exit={{ opacity: 0, y: 10 }}
                        transition={{ duration: 0.3, delay: 0.15 }}
                        className="text-[11px] md:text-xs font-medium leading-relaxed tracking-wide text-zinc-300 mb-3 max-w-[280px] sm:max-w-sm"
                      >
                        {item.description}
                      </motion.p>

                      {/* Explore Arrow button */}
                      <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: -5 }}
                        transition={{ duration: 0.3, delay: 0.2 }}
                        className="flex items-center gap-1 text-[9px] font-bold tracking-widest uppercase text-zinc-100 hover:text-primarylw-2 group/btn"
                      >
                        <span>Explore</span>
                        <ArrowRight className="w-3 h-3 transition-transform duration-200 group-hover/btn:translate-x-1" />
                      </motion.div>
                    </div>
                  )}
                </AnimatePresence>
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
};

export default ThreeDHoverGallery;

```
--------------------------------------------------

### COMPONENT: 3d-marquee
Category: 3D Elements
Description: A stunning 3D animated image gallery with customizable rotation, scaling, and interactive features. Perfect for showcasing portfolios, products, or any visual content with an engaging 3D perspective.
URL: https://lightswind.com/components/3d-marquee
Import: import { ThreeDMarquee, MarqueeImage } from "@/components/lightswind/3d-marquee"
Registry URL: https://lightswind.com/r/3d-marquee.json
Install Command: npx lightswind@latest add 3d-marquee

Usage:
```tsx
import { ThreeDMarquee, MarqueeImage } from "@/components/lightswind/3d-marquee";

// Basic usage
const images: MarqueeImage[] = [
  {
    src: "/path/to/image1.jpg",
    alt: "Description 1"
  },
  {
    src: "/path/to/image2.jpg", 
    alt: "Description 2"
  }
];

<ThreeDMarquee images={images} />

// With clickable images
const clickableImages: MarqueeImage[] = [
  {
    src: "/path/to/image1.jpg",
    alt: "Portfolio Item 1",
    href: "https://example.com/project1",
    target: "_blank"
  }
];
 
<ThreeDMarquee 
  images={clickableImages}
  onImageClick={(image, index) => {
    console.log('Clicked:', image.alt, 'at index:', index);
  }}
/>
```

Source Code:
```tsx
"use client";

import { motion } from "framer-motion";
import React from "react";

export interface MarqueeImage {
  src: string;
  alt: string;
  href?: string;
  target?: "_blank" | "_self" | "_parent" | "_top";
}

export interface ThreeDMarqueeProps {
  images: MarqueeImage[];
  className?: string;
  cols?: number; // default is 4
  onImageClick?: (image: MarqueeImage, index: number) => void;
}

export const ThreeDMarquee: React.FC<ThreeDMarqueeProps> = ({
  images,
  className = "",
  cols = 4,
  onImageClick,
}) => {
  // Clone the image list twice
  const duplicatedImages = [...images, ...images];

  const groupSize = Math.ceil(duplicatedImages.length / cols);
  const imageGroups = Array.from({ length: cols }, (_, index) =>
    duplicatedImages.slice(index * groupSize, (index + 1) * groupSize)
  );

  const handleImageClick = (image: MarqueeImage, globalIndex: number) => {
    if (onImageClick) {
      onImageClick(image, globalIndex);
    } else if (image.href) {
      window.open(image.href, image.target || "_self");
    }
  };

  return (
    <section
      className={`mx-auto block h-[600px] max-sm:h-[400px] 
        overflow-hidden rounded-2xl bg-white dark:bg-black ${className}`}
    >
      <div
        className="flex w-full h-full items-center justify-center"
        style={{
          transform: "rotateX(55deg) rotateY(0deg) rotateZ(45deg)",
        }}
      >
        <div className="w-full overflow-hidden scale-90 sm:scale-100">
          <div
            className={`relative grid h-full w-full origin-center 
              grid-cols-2 sm:grid-cols-${cols} gap-4 transform 
              `}
          >
            {imageGroups.map((imagesInGroup, idx) => (
              <motion.div
                key={`column-${idx}`}
                animate={{ y: idx % 2 === 0 ? 100 : -100 }}
                transition={{
                  duration: idx % 2 === 0 ? 10 : 15,
                  repeat: Infinity,
                  repeatType: "reverse",
                }}
                className="flex flex-col items-center gap-6 relative"
              >
                <div className="absolute left-0 top-0 h-full w-0.5 bg-gray-200 dark:bg-gray-700" />
                {imagesInGroup.map((image, imgIdx) => {
                  const globalIndex = idx * groupSize + imgIdx;
                  const isClickable = image.href || onImageClick;

                  return (
                    <div key={`img-${imgIdx}`} className="relative">
                      <div className="absolute top-0 left-0 w-full h-0.5 bg-gray-200 dark:bg-gray-700" />
                      <motion.img
                        whileHover={{ y: -10 }}
                        transition={{ duration: 0.3, ease: "easeInOut" }}
                        src={image.src}
                        alt={image.alt}
                        width={970}
                        height={700}
                        className={`aspect-[970/700] w-full max-w-[200px] rounded-lg object-cover ring ring-gray-300/30 dark:ring-gray-800/50 shadow-xl hover:shadow-2xl transition-shadow duration-300 ${
                          isClickable ? "cursor-pointer" : ""
                        }`}
                        onClick={() => handleImageClick(image, globalIndex)}
                      />
                    </div>
                  );
                })}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

```
--------------------------------------------------

### COMPONENT: 3d-model-viewer
Category: 3D Elements
Description: An interactive 3D model viewer component for a variety of file formats including GLTF, GLB, FBX, and OBJ. It features dynamic lighting, environmental presets, and full user control over rotation and zoom. It's a versatile component for displaying 3D assets in web applications.
URL: https://lightswind.com/components/3d-model-viewer
Import:  import ModelViewer from '@/components/lightswind/ModelViewer';
Registry URL: https://lightswind.com/r/3d-model-viewer.json
Install Command: npx lightswind@latest add 3d-model-viewer

Usage:
```tsx
import ModelViewer from '@/components/lightswind/ModelViewer';

<ModelViewer
  url="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/FlightHelmet/glTF/FlightHelmet.gltf"
  autoRotate={true}
  autoRotateSpeed={1.0}
  environmentPreset="studio"
/>
```

Source Code:
```tsx
import { FC, Suspense, useRef, useLayoutEffect, useEffect } from "react";
import { Canvas, useFrame, useLoader } from "@react-three/fiber";
import { OrbitControls, useGLTF, useFBX, Environment, ContactShadows, Center } from "@react-three/drei";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import * as THREE from "three";

// ---
// Types and Constants
// ---

export interface ViewerProps {
  url: string;
  width?: number | string;
  height?: number | string;
  defaultZoom?: number;
  minZoomDistance?: number;
  maxZoomDistance?: number;
  enableManualRotation?: boolean;
  enableManualZoom?: boolean;
  ambientIntensity?: number;
  keyLightIntensity?: number;
  fillLightIntensity?: number;
  rimLightIntensity?: number;
  environmentPreset?:
    | "city"
    | "sunset"
    | "night"
    | "dawn"
    | "studio"
    | "apartment"
    | "forest"
    | "park"
    | "none";
  autoRotate?: boolean;
  autoRotateSpeed?: number;
  onModelLoaded?: () => void;
}

const isTouch =
  typeof window !== "undefined" &&
  ("ontouchstart" in window || navigator.maxTouchPoints > 0);

const deg2rad = (d: number) => (d * Math.PI) / 180;

// ---
// Reusable Components
// ---

const Loader: FC = () => {
  return null;
};

// Component for handling GLTF/GLB models
const GltfContent: FC<{ url: string; onLoaded: () => void }> = ({
  url,
  onLoaded,
}) => {
  const { scene } = useGLTF(url);
  useLayoutEffect(() => {
    if (scene) {
      scene.traverse((o) => {
        if ((o as THREE.Mesh).isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
      });
      onLoaded();
    }
  }, [scene, onLoaded]);
  return <primitive object={scene} />;
};

// Component for handling FBX models
const FbxContent: FC<{ url: string; onLoaded: () => void }> = ({
  url,
  onLoaded,
}) => {
  const fbx = useFBX(url);
  useLayoutEffect(() => {
    if (fbx) {
      fbx.traverse((o) => {
        if ((o as THREE.Mesh).isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
      });
      onLoaded();
    }
  }, [fbx, onLoaded]);
  return <primitive object={fbx} />;
};

// Component for handling OBJ models
const ObjContent: FC<{ url: string; onLoaded: () => void }> = ({
  url,
  onLoaded,
}) => {
  const obj = useLoader(OBJLoader as unknown as any, url);
  useLayoutEffect(() => {
    if (obj) {
      obj.traverse((o) => {
        if ((o as THREE.Mesh).isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
      });
      onLoaded();
    }
  }, [obj, onLoaded]);
  return <primitive object={obj} />;
};

const SceneContent: FC<{
  url: string;
  autoRotate?: boolean;
  autoRotateSpeed?: number;
  onLoaded?: () => void;
}> = ({ url, autoRotate, autoRotateSpeed, onLoaded }) => {
  const modelRef = useRef<THREE.Group>(null!);
  const ext = url.split(".").pop()?.toLowerCase();

  useFrame((state, delta) => {
    if (autoRotate && modelRef.current) {
      modelRef.current.rotation.y += (autoRotateSpeed || 1) * delta;
    }
  });

  const onLoadedHandler = () => {
    onLoaded?.();
  };

  const ModelComponent = () => {
    switch (ext) {
      case "glb":
      case "gltf":
        return <GltfContent url={url} onLoaded={onLoadedHandler} />;
      case "fbx":
        return <FbxContent url={url} onLoaded={onLoadedHandler} />;
      case "obj":
        return <ObjContent url={url} onLoaded={onLoadedHandler} />;
      default:
        return null;
    }
  };

  return (
    <Center>
      <group ref={modelRef}>
        <ModelComponent />
      </group>
    </Center>
  );
};

// ---
// Main Viewer Component
// ---

const ModelViewer: FC<ViewerProps> = ({
  url,
  width = "100%",
  height = "100%",
  defaultZoom = 2,
  minZoomDistance = 0.5,
  maxZoomDistance = 10,
  enableManualRotation = true,
  enableManualZoom = true,
  ambientIntensity = 0.3,
  keyLightIntensity = 1,
  fillLightIntensity = 0.5,
  rimLightIntensity = 0.8,
  environmentPreset = "forest",
  autoRotate = false,
  autoRotateSpeed = 0.35,
  onModelLoaded,
}) => {
  useEffect(() => void useGLTF.preload(url), [url]);

  return (
    <div style={{ width, height }} className="relative">
      <Canvas
        shadows
        camera={{
          fov: 50,
          position: [0, 0, defaultZoom],
          near: 0.01,
          far: 100,
        }}
        gl={{
          toneMapping: THREE.ACESFilmicToneMapping,
          outputColorSpace: THREE.SRGBColorSpace,
        }}
      >
        <Suspense fallback={<Loader />}>
          <SceneContent
            url={url}
            autoRotate={autoRotate}
            autoRotateSpeed={deg2rad(autoRotateSpeed)}
            onLoaded={onModelLoaded}
          />
        </Suspense>

        {environmentPreset !== "none" && (
          <Environment preset={environmentPreset as any} />
        )}

        <ambientLight intensity={ambientIntensity} />
        <directionalLight
          position={[5, 5, 5]}
          intensity={keyLightIntensity}
          castShadow
        />
        <directionalLight
          position={[-5, 2, 5]}
          intensity={fillLightIntensity}
        />
        <directionalLight position={[0, 4, -5]} intensity={rimLightIntensity} />

        <ContactShadows
          position={[0, -0.5, 0]}
          opacity={0.35}
          scale={10}
          blur={2}
        />

        <OrbitControls
          makeDefault
          enablePan={false}
          enableDamping={false}
          enableRotate={enableManualRotation}
          enableZoom={enableManualZoom}
          minDistance={minZoomDistance}
          maxDistance={maxZoomDistance}
          autoRotate={isTouch ? false : autoRotate}
          autoRotateSpeed={autoRotateSpeed}
        />
      </Canvas>
    </div>
  );
};

export default ModelViewer;

```
--------------------------------------------------

### COMPONENT: 3d-perspective-card
Category: 3D Elements
Description: A modern interactive 3D card component with dynamic lighting and depth effects based on mouse movement. Ideal for portfolios, product showcases, or visually engaging UI elements. Built with React and CSS.
URL: https://lightswind.com/components/3d-perspective-card
Import:  import { ThreeDPerspectiveCard } from '@/components/lightswind/ThreeDPerspectiveCard';
Registry URL: https://lightswind.com/r/3d-perspective-card.json
Install Command: npx lightswind@latest add 3d-perspective-card

Usage:
```tsx
import { ThreeDPerspectiveCard } from '@/components/lightswind/ThreeDPerspectiveCard';

<ThreeDPerspectiveCard
  image="/images/sample.jpg"
  title="Explore 3D"
  width="300px"
  height="350px"
  titleFontSize="35px"
/> 
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect } from "react";

interface ThreeDPerspectiveCardProps {
  /** The URL for the background image of the card. */
  image: string;
  /** Optional width of the card (e.g., "300px"). Defaults to "300px". */
  width?: string;
  /** Optional height of the card (e.g., "350px"). Defaults to "350px". */
  height?: string;
}

const ThreeDPerspectiveCard: React.FC<ThreeDPerspectiveCardProps> = ({
  image,
  width = "300px",
  height = "350px",
}) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const shineRef = useRef<HTMLDivElement>(null);
  const shadowRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // This is an optimization: the mouse move listener should only be
    // added if the client is ready and references exist.
    if (!cardRef.current || !shineRef.current || !shadowRef.current) {
      return;
    }

    const handleMouseMove = (event: MouseEvent) => {
      if (!cardRef.current || !shineRef.current || !shadowRef.current) {
        return;
      }

      // Get window dimensions
      const wHeight = window.innerHeight;
      const wWidth = window.innerWidth;

      const currentMousePos = { x: event.pageX, y: event.pageY };
      const mouseFromCenter = {
        x: currentMousePos.x - wWidth / 2,
        y: currentMousePos.y - wHeight / 2,
      };

      // 1. Calculate Rotation for Card (3D Perspective)
      const maxRotation = 10; // Max rotation angle in degrees
      const mouseXRatio = (currentMousePos.x / wWidth) * 2 - 1; // Range from -1 to 1
      const mouseYRatio = (currentMousePos.y / wHeight) * 2 - 1; // Range from -1 to 1

      // around1 (RotateX) is inversely proportional to mouse Y
      const rotateXDeg = -1 * (mouseYRatio * maxRotation);
      // around2 (RotateY) is proportional to mouse X
      const rotateYDeg = mouseXRatio * maxRotation;

      // 2. Calculate Translation for Floating Effect
      const maxTranslate = 20; // Max translation in pixels
      const transX = mouseXRatio * maxTranslate;
      const transY = mouseYRatio * maxTranslate;

      // 3. Calculate Shine Angle (for linear-gradient)
      const dy = event.pageY - wHeight / 2;
      const dx = event.pageX - wWidth / 2;
      // Math.atan2 gives angle in radians, convert to degrees, and adjust
      const theta = Math.atan2(dy, dx);
      const angle = (theta * 180) / Math.PI - 90;

      // 4. Calculate Background Position (Parallax Effect)
      const backgroundPositionX = (currentMousePos.x / wWidth) * 100; // 0% to 100%
      const backgroundPositionY = (currentMousePos.y / wHeight) * 50; // 0% to 50%

      // Apply styles to Shine
      shineRef.current!.style.background = `linear-gradient(${angle}deg, rgba(255,255,255,${
        (currentMousePos.y / wHeight) * 0.7 // Intensity based on Y position
      }) 0%, rgba(255,255,255, 0) 80%)`;

      // Apply styles to Card (3D Rotation, Float, and Parallax)
      cardRef.current!.style.transform = `translate3d(${transX}px, ${transY}px, 0) scale(1) rotateX(${rotateXDeg}deg) rotateY(${rotateYDeg}deg)`;
      cardRef.current!.style.backgroundPosition = `${backgroundPositionX}% ${backgroundPositionY}%`;

      // Apply styles to Shadow
      // This creates a subtle opposite movement and rotation for a deeper shadow effect
      shadowRef.current!.style.transform = `scale(.9,.9) translateX(${
        mouseFromCenter.x * -0.02 + 12
      }px) translateY(${mouseFromCenter.y * -0.02 + 12}px) rotateY(${
        (mouseFromCenter.x / 25) * 0.5
      }deg) rotateX(${mouseFromCenter.y / -25}deg)`;
    };

    // Attach listener to the whole document
    document.addEventListener("mousemove", handleMouseMove);
    return () => document.removeEventListener("mousemove", handleMouseMove);
  }, []);

  // The rendering logic remains the same
  return (
    <div className="parent-container">
      <div className="wrap">
        <div className="card-shadow" ref={shadowRef}></div>
        <div
          className="card"
          ref={cardRef}
          style={{
            width,
            height,
            backgroundImage: `url(${image})`,
            // Background size is large to allow for parallax scrolling effect
            backgroundSize: "450%", 
          }}
        >
          <div className="card-front">
            <div className="card-shine" ref={shineRef}></div>
          </div>
        </div>
      </div>

      {/* The styled-jsx block (THIS IS WHERE THE TS ERROR OCCURRED) */}
      <style jsx>{`
        .parent-container {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 400px;
          position: relative;
          width: 100%;
          padding: 40px;
        }

        .wrap {
          perspective: 1000px; 
          position: relative;
          width: ${width};
          height: ${height};
        }

        .card-shadow,
        .card {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          transition: transform 0.15s ease-out, background-position 0.15s ease-out;
          will-change: transform, background-position;
        }

        .card {
          background: #fff 50% 50%;
          z-index: 2;
        }
        
        .card-shadow {
          background: rgba(0, 0, 0, 0.5); 
          filter: blur(25px);
          opacity: 0.8;
          z-index: 1;
          transform: scale(0.9) translateY(10px);
          transition: transform 0.15s ease-out;
        }

        .card-front {
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 10px;
          width: 100%;
          height: 100%;
          position: relative;
          border: 1px solid rgba(255, 255, 255, 0.2); 
        }

        .card-shine {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          z-index: 10;
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 60%
          );
        }
      `}</style>
    </div>
  );
};

export default ThreeDPerspectiveCard;
```
--------------------------------------------------

### COMPONENT: 3d-scroll-trigger
Category: 3D Elements
Description: A high-performance horizontal scroll component with smooth, velocity-based animation. Automatically repeats its children for an infinite 3D-like scrolling effect, ideal for galleries, tickers, or interactive carousels.
URL: https://lightswind.com/components/3d-scroll-trigger
Import: import { 
    ThreeDScrollTriggerContainer, 
    ThreeDScrollTriggerRow 
  } from '@/components/lightswind/ThreeDScrollTrigger';
Registry URL: https://lightswind.com/r/3d-scroll-trigger.json
Install Command: npx lightswind@latest add 3d-scroll-trigger

Usage:
```tsx
import { 
    ThreeDScrollTriggerContainer, 
    ThreeDScrollTriggerRow 
  } from '@/components/lightswind/ThreeDScrollTrigger';

<ThreeDScrollTriggerContainer>
  <ThreeDScrollTriggerRow baseVelocity={5} direction={1}>
    <div className="px-4 py-2 bg-primarylw text-white rounded-lg">
      Item 1
    </div>
    <div className="px-4 py-2 bg-green-500 text-white rounded-lg">
      Item 2
    </div>
    <div className="px-4 py-2 bg-red-500 text-white rounded-lg">
      Item 3
    </div>
  </ThreeDScrollTriggerRow>
</ThreeDScrollTriggerContainer>
```

Source Code:
```tsx
// ThreeDScrollTrigger.tsx
"use client";

import React, {
  useRef,
  useEffect,
  useMemo,
  useContext,
} from "react";
import { cn } from "@/components/lib/utils";

/* -------------------------
   Utility: wrap (backward compatibility)
   ------------------------- */
export const wrap = (min: number, max: number, v: number) => {
  const rangeSize = max - min;
  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};

/* -----------------------------------
   Context for passive scroll velocity
   ----------------------------------- */
interface ScrollVelocityContextType {
  getVelocity: () => number;
}

const ThreeDScrollTriggerContext =
  React.createContext<ScrollVelocityContextType>({
    getVelocity: () => 0,
  });

/* --------------------------
   Container that tracks scroll velocity passively without re-renders
   -------------------------- */
export function ThreeDScrollTriggerContainer({
  children,
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  const targetVelocityRef = useRef(0);
  const lastScrollY = useRef(0);
  const lastTime = useRef(0);
  const decayTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    lastScrollY.current = window.scrollY;
    lastTime.current = performance.now();

    const handleScroll = () => {
      const now = performance.now();
      const dt = now - lastTime.current;
      if (dt <= 0) return;

      const currentScrollY = window.scrollY;
      const deltaY = currentScrollY - lastScrollY.current;

      // Calculate instant velocity in px/second (clamped to realistic range [-2500, 2500])
      const instantVelocity = (deltaY / Math.max(6, dt)) * 1000;
      targetVelocityRef.current = Math.max(-2500, Math.min(2500, instantVelocity));

      lastScrollY.current = currentScrollY;
      lastTime.current = now;

      // When active continuous scrolling ceases, decay target velocity to zero
      if (decayTimeoutRef.current) clearTimeout(decayTimeoutRef.current);
      decayTimeoutRef.current = setTimeout(() => {
        targetVelocityRef.current = 0;
      }, 50);
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", handleScroll);
      if (decayTimeoutRef.current) clearTimeout(decayTimeoutRef.current);
    };
  }, []);

  const contextValue = useMemo(
    () => ({
      getVelocity: () => targetVelocityRef.current,
    }),
    []
  );

  return (
    <ThreeDScrollTriggerContext.Provider value={contextValue}>
      <div
        className={cn(
          "relative w-full overflow-hidden [perspective:1200px]",
          className
        )}
        {...props}
      >
        {children}
      </div>
    </ThreeDScrollTriggerContext.Provider>
  );
}

/* --------------------------
   Props
   -------------------------- */
export interface ThreeDScrollTriggerRowProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  baseVelocity?: number; // Speed multiplier (e.g. 5, 6)
  direction?: 1 | -1;
  resetIntervalMs?: number;
  tiltEffect?: boolean; // Dynamic 3D card tilt angle during scroll
}

/* --------------------------
   High-FPS GPU-Accelerated 3D Row
   -------------------------- */
export function ThreeDScrollTriggerRow({
  children,
  baseVelocity = 5,
  direction = 1,
  tiltEffect = true,
  className,
  ...props
}: ThreeDScrollTriggerRowProps) {
  const context = useContext(ThreeDScrollTriggerContext);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const trackRef = useRef<HTMLDivElement | null>(null);
  const singleBlockRef = useRef<HTMLDivElement | null>(null);

  const xRef = useRef(0);
  const unitWidthRef = useRef(0);
  const smoothVelocityRef = useRef(0);
  const smoothTiltRef = useRef(0);
  const isInViewRef = useRef(false);
  const rafIdRef = useRef<number | null>(null);
  const startAnimationRef = useRef<(() => void) | null>(null);

  // Measure single block width with ResizeObserver & sub-pixel precision
  useEffect(() => {
    const measure = () => {
      if (singleBlockRef.current) {
        const rect = singleBlockRef.current.getBoundingClientRect();
        unitWidthRef.current = rect.width || singleBlockRef.current.offsetWidth || 0;
      }
    };
    measure();

    let ro: ResizeObserver | null = null;
    if (typeof ResizeObserver !== "undefined" && singleBlockRef.current) {
      ro = new ResizeObserver(measure);
      ro.observe(singleBlockRef.current);
    }
    window.addEventListener("resize", measure, { passive: true });
    return () => {
      ro?.disconnect();
      window.removeEventListener("resize", measure);
    };
  }, [children]);

  // Viewport intersection observer: completely halt rAF when scrolled away
  useEffect(() => {
    const el = containerRef.current;
    if (!el || typeof IntersectionObserver === "undefined") {
      isInViewRef.current = true;
      return;
    }

    const io = new IntersectionObserver(
      ([entry]) => {
        const wasInView = isInViewRef.current;
        isInViewRef.current = entry && entry.isIntersecting;
        if (isInViewRef.current && !wasInView && startAnimationRef.current) {
          startAnimationRef.current();
        }
      },
      { rootMargin: "250px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Ultra-Smooth Direct-GPU Animation Loop (120 FPS, 0 React re-renders)
  useEffect(() => {
    let lastTime = performance.now();

    const animate = (now: number) => {
      if (!isInViewRef.current) {
        // Completely halt rAF scheduling when not in view
        return;
      }

      // Safe delta time clamped to avoid jumps after tab switch / pause
      const dt = Math.min(0.04, Math.max(0.001, (now - lastTime) / 1000));
      lastTime = now;

      // 1. Smoothly interpolate velocity using exponential damping (frame-rate independent)
      const targetVelocity = context?.getVelocity() || 0;
      const lerpFactor = 1 - Math.exp(-12 * dt);
      smoothVelocityRef.current += (targetVelocity - smoothVelocityRef.current) * lerpFactor;

      const unitWidth = unitWidthRef.current;
      if (unitWidth > 0) {
        // 2. Base cruising speed (~26px/sec per baseVelocity unit)
        const baseSpeed = Math.abs(baseVelocity) * 26;

        // 3. Dynamic scroll velocity boost
        const scrollBoost = Math.abs(smoothVelocityRef.current) * 0.45;

        // 4. Direction handling:
        // When scrolling down (velocity >= 0): row cruises and accelerates in its configured direction
        // When scrolling up towards top (velocity < 0): row smoothly reverses and accelerates backwards
        const isScrollingUp = smoothVelocityRef.current < -30;
        const scrollDirection = isScrollingUp ? -1 : 1;
        const effectiveDirection = direction * scrollDirection;

        // 5. Compute net frame movement
        const currentSpeed = effectiveDirection * (baseSpeed + scrollBoost);
        const moveDelta = currentSpeed * dt;
        xRef.current += moveDelta;

        // 6. Seamless continuous modulo wrapping (works flawlessly for positive and negative values)
        xRef.current = ((xRef.current % unitWidth) + unitWidth) % unitWidth;

        // 7. Dynamic 3D card tilt angle (reacts smoothly to scroll velocity & direction)
        let tiltTransform = "";
        if (tiltEffect) {
          const targetTilt = Math.max(-4.5, Math.min(4.5, (currentSpeed / 200) * 1.8));
          const tiltLerp = 1 - Math.exp(-14 * dt);
          smoothTiltRef.current += (targetTilt - smoothTiltRef.current) * tiltLerp;
          tiltTransform = ` skewX(${-smoothTiltRef.current}deg)`;
        }

        // 8. Direct hardware-accelerated transform on GPU compositor
        if (trackRef.current) {
          trackRef.current.style.transform = `translate3d(${-xRef.current}px, 0, 0)${tiltTransform}`;
        }
      }

      rafIdRef.current = requestAnimationFrame(animate);
    };

    startAnimationRef.current = () => {
      lastTime = performance.now();
      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
      rafIdRef.current = requestAnimationFrame(animate);
    };

    if (isInViewRef.current) {
      startAnimationRef.current();
    }

    return () => {
      startAnimationRef.current = null;
      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
    };
  }, [baseVelocity, direction, tiltEffect, context]);

  const childrenArray = useMemo(
    () => React.Children.toArray(children),
    [children]
  );

  return (
    <div
      ref={containerRef}
      className={cn(
        "w-full overflow-hidden whitespace-nowrap [perspective:1200px]",
        className
      )}
      {...props}
    >
      <div
        ref={trackRef}
        className="inline-flex will-change-transform transform-gpu select-none"
        style={{
          transform: "translate3d(0, 0, 0)",
          contain: "layout paint",
        }}
      >
        {/* Set 1: Measured Reference Block */}
        <div ref={singleBlockRef} className="inline-flex shrink-0">
          {childrenArray}
        </div>
        {/* Set 2: Seamless Clone */}
        <div className="inline-flex shrink-0" aria-hidden="true">
          {childrenArray}
        </div>
        {/* Set 3: Seamless Clone */}
        <div className="inline-flex shrink-0" aria-hidden="true">
          {childrenArray}
        </div>
        {/* Set 4: Seamless Clone for ultra-wide displays */}
        <div className="inline-flex shrink-0" aria-hidden="true">
          {childrenArray}
        </div>
      </div>
    </div>
  );
}

export default ThreeDScrollTriggerRow;
```
--------------------------------------------------

### COMPONENT: 3d-smokey-frame
Category: 3D Elements
Description: An interactive WebGL volumetric noise smokey frame shader featuring customizable frame width, wave propagation speed, color palettes, atmospheric glow, and cursor-reactive turbulence displacement.
URL: https://lightswind.com/components/3d-smokey-frame
Import: import ThreeDSmokeyFrame from "@/components/lightswind/3d-smokey-frame";
Registry URL: https://lightswind.com/r/3d-smokey-frame.json
Install Command: npx lightswind@latest add 3d-smokey-frame

Usage:
```tsx
import ThreeDSmokeyFrame from "@/components/lightswind/3d-smokey-frame";

export default function Example() {
  return (
    <div className="w-full h-[520px] rounded-2xl overflow-hidden relative bg-black">
      <ThreeDSmokeyFrame
        frameColor="#00F5FF"
        frameWidth={0.30}
        speed={0.15}
        falloff={6.0}
        noiseScale={3.0}
        transparentBg={true}
        interactive={true}
        className="w-full h-full"
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect, useCallback, PropsWithChildren, CSSProperties, forwardRef, useImperativeHandle } from "react";
import { useTheme } from "next-themes";
import { cn } from "@/components/lib/utils";

export interface ThreeDSmokeyFrameProps extends PropsWithChildren {
    /** Color of the animated smokey frame (Hex or RGB/RGBA, default: "#00F5FF" Cosmic Cyan) */
    frameColor?: string;
    /** Background interior base color (used when transparentBg is false) */
    frameBgColor?: string;
    /** Whether the interior background is completely transparent (default: true) */
    transparentBg?: boolean;
    /** Normalized frame width from edge toward center (0.01 - 0.50, default: 0.30) */
    frameWidth?: number;
    /** Animation wave and smoke propagation speed multiplier (default: 0.15) */
    speed?: number;
    /** Edge falloff curve exponent (higher values make the frame edge sharper, default: 6.0) */
    falloff?: number;
    /** Granularity and density of the procedural noise smoke (default: 3.0) */
    noiseScale?: number;
    /** Amount of noise turbulence modulating the frame (0.0 - 1.0, default: 1.0) */
    noiseStrength?: number;
    /** Brightness and emission intensity of the smoke (default: 1.2) */
    intensity?: number;
    /** Gamma curve contrast adjustment (default: 2.0) */
    gamma?: number;
    /** Overall canvas opacity (0.0 - 1.0, default: 1.0) */
    opacity?: number;
    /** Whether cursor movement dynamically displaces the smokey field (default: true) */
    interactive?: boolean;
    /** Enable external atmospheric colored glow behind the frame container (default: true) */
    glow?: boolean;
    /** Blur radius for external atmospheric glow in pixels (default: 36) */
    glowBlur?: number;
    /** Opacity for external ambient glow (default: 0.45) */
    glowOpacity?: number;
    /** Border radius for the frame container (default: "16px") */
    radius?: string | number;
    /** Optional class name for the outer container */
    className?: string;
    /** Optional class name for the canvas element */
    canvasClassName?: string;
    /** Optional inline styles */
    style?: CSSProperties;
    /** Maximum device pixel ratio to use for rendering (default: 2) */
    dpr?: number;
}

export interface ThreeDSmokeyFrameHandle {
    getCanvas: () => HTMLCanvasElement | null;
    getGL: () => WebGLRenderingContext | null;
}

/** Utility to parse Hex or RGB strings to normalized [r, g, b] float vectors */
function parseColorToRgb(color: string, fallback: [number, number, number] = [0, 0.96, 1]): [number, number, number] {
    if (!color) return fallback;
    const clean = color.trim();
    if (clean.startsWith("#")) {
        let hex = clean.replace("#", "");
        if (hex.length === 3) {
            hex = hex.split("").map((c) => c + c).join("");
        }
        const num = parseInt(hex, 16);
        if (isNaN(num)) return fallback;
        return [
            ((num >> 16) & 255) / 255,
            ((num >> 8) & 255) / 255,
            (num & 255) / 255,
        ];
    }
    const match = clean.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
    if (match) {
        return [
            parseInt(match[1], 10) / 255,
            parseInt(match[2], 10) / 255,
            parseInt(match[3], 10) / 255,
        ];
    }
    return fallback;
}

const VERTEX_SHADER = `
  attribute vec2 a_position;
  varying vec2 v_uv;
  void main() {
    v_uv = (a_position + 1.0) * 0.5;
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

const FRAGMENT_SHADER = `
  precision highp float;
  varying vec2 v_uv;

  uniform vec2 u_resolution;
  uniform float u_time;
  uniform float u_speed;
  uniform float u_frameWidth;
  uniform float u_falloff;
  uniform float u_noiseScale;
  uniform float u_noiseStrength;
  uniform float u_intensity;
  uniform float u_gamma;
  uniform float u_opacity;
  uniform vec3 u_frameColor;
  uniform vec3 u_frameBgColor;
  uniform float u_transparentBg;
  uniform vec2 u_mouse;
  uniform float u_isHovered;

  // Simplex 2D noise generator
  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }

  float snoise(vec2 v){
    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                       -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy) );
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod(i, 289.0);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
          + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }

  // 5-Octave Fractional Brownian Motion for lush smoke tendrils
  float fbm(vec2 p) {
    float total = 0.0;
    float amp = 0.5;
    float freq = 1.0;
    for(int i = 0; i < 5; i++) {
      total += snoise(p * freq) * amp;
      freq *= 2.02;
      amp *= 0.5;
    }
    return total;
  }

  void main() {
    vec2 uv = v_uv;
    float aspect = u_resolution.x / u_resolution.y;

    // Aspect ratio correction for noise sampling
    vec2 noiseUV = uv;
    if (aspect > 1.0) {
      noiseUV.x *= aspect;
    } else {
      noiseUV.y /= aspect;
    }

    // Interactive mouse turbulence displacement
    if (u_isHovered > 0.0) {
      vec2 mouseUV = u_mouse;
      if (aspect > 1.0) mouseUV.x *= aspect; else mouseUV.y /= aspect;
      float dMouse = distance(noiseUV, mouseUV);
      float mouseInfluence = smoothstep(0.6, 0.0, dMouse);
      noiseUV += (noiseUV - mouseUV) * mouseInfluence * 0.12 * u_isHovered;
    }

    // Animated volumetric noise field
    float t = u_time * u_speed;
    float noise1 = fbm(noiseUV * u_noiseScale + vec2(t * 0.45, t * 0.28));
    float noise2 = fbm(noiseUV * (u_noiseScale * 1.5) - vec2(t * 0.32, -t * 0.4));
    float combinedNoise = (noise1 * 0.65 + noise2 * 0.35 + 1.0) * 0.5;

    // Distance calculation from all 4 boundaries (0 at boundary, 0.5 at center)
    vec2 distToEdge = min(uv, 1.0 - uv);
    float minAxisDist = min(distToEdge.x, distToEdge.y);

    // Normalize distance based on the frameWidth parameter
    float frameDist = clamp(minAxisDist / max(u_frameWidth, 0.0001), 0.0, 1.0);

    // Invert so frame edge = 1.0, interior core = 0.0
    float edgeStrength = 1.0 - frameDist;
    edgeStrength = pow(edgeStrength, u_falloff);

    // Modulate edge with procedural smoke noise
    float modulatedFrame = mix(edgeStrength, edgeStrength * combinedNoise, u_noiseStrength);

    // Apply intensity multiplier and gamma curve for rich contrast
    float finalGlow = pow(modulatedFrame * u_intensity, u_gamma);
    finalGlow = clamp(finalGlow, 0.0, 1.0);

    // Render with transparent background or blended solid background
    if (u_transparentBg > 0.5) {
      float alpha = finalGlow * u_opacity;
      gl_FragColor = vec4(u_frameColor, alpha);
    } else {
      vec3 finalColor = mix(u_frameBgColor, u_frameColor, finalGlow);
      gl_FragColor = vec4(finalColor, u_opacity);
    }
  }
`;

function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
    const shader = gl.createShader(type);
    if (!shader) return null;
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compile error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

export const ThreeDSmokeyFrame = forwardRef<ThreeDSmokeyFrameHandle, ThreeDSmokeyFrameProps>(({
    children,
    frameColor = "#00F5FF",
    frameBgColor,
    transparentBg = true,
    frameWidth = 0.30,
    speed = 0.15,
    falloff = 6.0,
    noiseScale = 3.0,
    noiseStrength = 1.0,
    intensity = 1.2,
    gamma = 2.0,
    opacity = 1.0,
    interactive = true,
    glow = true,
    glowBlur = 36,
    glowOpacity = 0.45,
    radius = "16px",
    className,
    canvasClassName,
    style,
    dpr = 2,
}, ref) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const glRef = useRef<WebGLRenderingContext | null>(null);
    const animFrameRef = useRef<number | null>(null);
    const isVisibleRef = useRef<boolean>(true);

    const { resolvedTheme, theme } = useTheme();
    const isLightMode = resolvedTheme === "light" || theme === "light";
    const effectiveBgColor = frameBgColor ?? (isLightMode ? "#ffffff" : "#08080a");

    const mousePosRef = useRef<{ x: number; y: number }>({ x: 0.5, y: 0.5 });
    const isHoveredRef = useRef<number>(0);
    const startTimeRef = useRef<number>(performance.now());

    const parsedRadius = typeof radius === "number" ? `${radius}px` : radius;

    useImperativeHandle(ref, () => ({
        getCanvas: () => canvasRef.current,
        getGL: () => glRef.current,
    }));

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const gl = canvas.getContext("webgl", {
            alpha: true,
            antialias: true,
            depth: false,
            preserveDrawingBuffer: false,
        });

        if (!gl) {
            console.warn("WebGL not supported for ThreeDSmokeyFrame");
            return;
        }

        glRef.current = gl;
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        const vs = createShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
        const fs = createShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
        if (!vs || !fs) return;

        const program = gl.createProgram();
        if (!program) return;
        gl.attachShader(program, vs);
        gl.attachShader(program, fs);
        gl.linkProgram(program);

        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.error("Program link error:", gl.getProgramInfoLog(program));
            return;
        }

        gl.useProgram(program);

        // Quad Geometry Buffers
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([
                -1, -1,
                 1, -1,
                -1,  1,
                -1,  1,
                 1, -1,
                 1,  1,
            ]),
            gl.STATIC_DRAW
        );

        const positionLocation = gl.getAttribLocation(program, "a_position");
        gl.enableVertexAttribArray(positionLocation);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

        // Uniform Locations
        const uniforms = {
            resolution: gl.getUniformLocation(program, "u_resolution"),
            time: gl.getUniformLocation(program, "u_time"),
            speed: gl.getUniformLocation(program, "u_speed"),
            frameWidth: gl.getUniformLocation(program, "u_frameWidth"),
            falloff: gl.getUniformLocation(program, "u_falloff"),
            noiseScale: gl.getUniformLocation(program, "u_noiseScale"),
            noiseStrength: gl.getUniformLocation(program, "u_noiseStrength"),
            intensity: gl.getUniformLocation(program, "u_intensity"),
            gamma: gl.getUniformLocation(program, "u_gamma"),
            opacity: gl.getUniformLocation(program, "u_opacity"),
            frameColor: gl.getUniformLocation(program, "u_frameColor"),
            frameBgColor: gl.getUniformLocation(program, "u_frameBgColor"),
            transparentBg: gl.getUniformLocation(program, "u_transparentBg"),
            mouse: gl.getUniformLocation(program, "u_mouse"),
            isHovered: gl.getUniformLocation(program, "u_isHovered"),
        };

        const handleResize = () => {
            if (!canvas || !gl) return;
            const targetDpr = Math.min(window.devicePixelRatio || 1, dpr);
            const displayWidth = Math.round(canvas.clientWidth * targetDpr);
            const displayHeight = Math.round(canvas.clientHeight * targetDpr);

            if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                canvas.width = Math.max(1, displayWidth);
                canvas.height = Math.max(1, displayHeight);
                gl.viewport(0, 0, canvas.width, canvas.height);
            }
        };

        handleResize();

        const resizeObserver = new ResizeObserver(() => {
            handleResize();
        });
        resizeObserver.observe(canvas);

        const intersectionObserver = new IntersectionObserver(
            ([entry]) => {
                isVisibleRef.current = entry.isIntersecting;
            },
            { threshold: 0.05 }
        );
        intersectionObserver.observe(canvas);

        let currentHover = 0;

        const render = () => {
            if (isVisibleRef.current && gl && canvas) {
                handleResize();

                const time = (performance.now() - startTimeRef.current) * 0.001;
                const fColor = parseColorToRgb(frameColor, [0, 0.96, 1]);
                const bColor = parseColorToRgb(effectiveBgColor, [0.04, 0.04, 0.04]);

                // Smooth hover transition
                const targetHover = isHoveredRef.current;
                currentHover += (targetHover - currentHover) * 0.1;

                gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
                gl.uniform1f(uniforms.time, time);
                gl.uniform1f(uniforms.speed, speed);
                gl.uniform1f(uniforms.frameWidth, frameWidth);
                gl.uniform1f(uniforms.falloff, falloff);
                gl.uniform1f(uniforms.noiseScale, noiseScale);
                gl.uniform1f(uniforms.noiseStrength, noiseStrength);
                gl.uniform1f(uniforms.intensity, intensity);
                gl.uniform1f(uniforms.gamma, gamma);
                gl.uniform1f(uniforms.opacity, opacity);
                gl.uniform3f(uniforms.frameColor, fColor[0], fColor[1], fColor[2]);
                gl.uniform3f(uniforms.frameBgColor, bColor[0], bColor[1], bColor[2]);
                gl.uniform1f(uniforms.transparentBg, transparentBg ? 1.0 : 0.0);
                gl.uniform2f(uniforms.mouse, mousePosRef.current.x, mousePosRef.current.y);
                gl.uniform1f(uniforms.isHovered, currentHover);

                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }

            animFrameRef.current = requestAnimationFrame(render);
        };

        animFrameRef.current = requestAnimationFrame(render);

        return () => {
            if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
            resizeObserver.disconnect();
            intersectionObserver.disconnect();
            if (gl) {
                gl.deleteProgram(program);
                gl.deleteShader(vs);
                gl.deleteShader(fs);
                gl.deleteBuffer(positionBuffer);
            }
        };
    }, [
        frameColor,
        effectiveBgColor,
        transparentBg,
        frameWidth,
        speed,
        falloff,
        noiseScale,
        noiseStrength,
        intensity,
        gamma,
        opacity,
        dpr,
    ]);

    const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        if (!interactive || !containerRef.current) return;
        const rect = containerRef.current.getBoundingClientRect();
        const x = (e.clientX - rect.left) / rect.width;
        const y = 1.0 - (e.clientY - rect.top) / rect.height; // Invert for WebGL UV coords
        mousePosRef.current = { x, y };
    }, [interactive]);

    const handleMouseEnter = useCallback(() => {
        if (interactive) isHoveredRef.current = 1.0;
    }, [interactive]);

    const handleMouseLeave = useCallback(() => {
        if (interactive) isHoveredRef.current = 0.0;
    }, [interactive]);

    return (
        <div
            ref={containerRef}
            onMouseMove={handleMouseMove}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            className={cn("relative w-full h-full min-h-[300px] overflow-hidden select-none", className)}
            style={{
                borderRadius: parsedRadius,
                ...style,
            }}
        >
            {/* Ambient Atmosphere Glow Backdrop */}
            {glow && (
                <div
                    className="absolute inset-0 pointer-events-none -z-10 scale-105 transition-opacity duration-300"
                    style={{
                        borderRadius: parsedRadius,
                        filter: `blur(${glowBlur}px)`,
                        background: `radial-gradient(ellipse at center, ${frameColor} 0%, transparent 75%)`,
                        opacity: glowOpacity,
                    }}
                />
            )}

            {/* WebGL Canvas Shader Output */}
            <canvas
                ref={canvasRef}
                className={cn("w-full h-full block pointer-events-none absolute inset-0", canvasClassName)}
                style={{
                    borderRadius: parsedRadius,
                }}
            />

            {/* Slotted Children Content Layer */}
            {children && (
                <div
                    className="relative z-10 w-full h-full flex flex-col justify-center items-center pointer-events-auto"
                    style={{
                        borderRadius: parsedRadius,
                    }}
                >
                    {children}
                </div>
            )}
        </div>
    );
});

ThreeDSmokeyFrame.displayName = "ThreeDSmokeyFrame";

export default ThreeDSmokeyFrame;

```
--------------------------------------------------

### COMPONENT: 3d-image-pageflip
Category: 3D Elements
Description: An interactive 3D book and magazine page flip component featuring dynamic spine shifting, realistic lighting crease shadows, hover peeking, and leaf stacking.
URL: https://lightswind.com/components/3d-image-pageflip
Import: import ThreeDImagePageflip, { PageFlipLeaf } from "@/components/lightswind/3d-image-pageflip";
Registry URL: https://lightswind.com/r/3d-image-pageflip.json
Install Command: npx lightswind@latest add 3d-image-pageflip

Usage:
```tsx
import ThreeDImagePageflip, { PageFlipLeaf } from "@/components/lightswind/3d-image-pageflip";

const pages: PageFlipLeaf[] = [
  {
    frontImage: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
    backImage: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80",
    frontTitle: "Villa Solarium",
    frontSubtitle: "Horizon Pool & Architecture",
    frontBadge: "Cover",
    backTitle: "Minimal Horizon",
    backSubtitle: "Geometric Water Pavilion",
    backBadge: "Plate 01",
  },
  {
    frontImage: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=800&q=80",
    backImage: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80",
    frontTitle: "Apex Structure",
    frontSubtitle: "Parametric Glass Facade",
    frontBadge: "Plate 02",
    backTitle: "Glass Skyline",
    backSubtitle: "Monolith Tower",
    backBadge: "Plate 03",
  },
];

export default function Example() {
  return (
    <div className="w-full min-h-[500px] flex items-center justify-center">
      <ThreeDImagePageflip
        pages={pages}
        pageWidth={230}
        pageHeight={330}
        perspective={1300}
        duration={0.65}
        peekAngle={14}
        spineShift={true}
        showPageNumbers={true}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useCallback, CSSProperties, forwardRef, useImperativeHandle } from "react";
import { cn } from "@/components/lib/utils";
import { ChevronLeft, ChevronRight, RotateCcw } from "lucide-react";

export interface PageFlipLeaf {
    id?: string | number;
    frontImage: string;
    backImage: string;
    frontTitle?: string;
    backTitle?: string;
    frontSubtitle?: string;
    backSubtitle?: string;
    frontBadge?: string;
    backBadge?: string;
}

export interface ThreeDImagePageflipProps {
    /** Array of page leaves, each containing front and back images & metadata */
    pages?: PageFlipLeaf[];
    /** Default turned page count (0 = closed book on cover) */
    defaultTurnedIndex?: number;
    /** Controlled turned page count */
    turnedIndex?: number;
    /** Callback fired when page flip changes */
    onPageChange?: (turnedCount: number, totalLeaves: number) => void;
    /** Width of a single page in pixels (default: 230) */
    pageWidth?: number;
    /** Height of a single page in pixels (default: 330) */
    pageHeight?: number;
    /** 3D perspective depth in pixels (default: 1300) */
    perspective?: number;
    /** Maximum hover peek angle in degrees (default: 14) */
    peekAngle?: number;
    /** Total turn angle in degrees (default: 180) */
    turnAngle?: number;
    /** Transition flip animation duration in seconds (default: 0.65) */
    duration?: number;
    /** Easing curve for flip animation (default: "cubic-bezier(0.4, 0, 0.2, 1)") */
    easing?: string;
    /** Shadow intensity factor (0.0 to 1.0, default: 0.45) */
    shadowIntensity?: number;
    /** Dynamically shift spine horizontally when book is open to center the 2-page spread (default: true) */
    spineShift?: boolean;
    /** Border radius for pages (default: "10px") */
    radius?: string | number;
    /** Enable page numbering tags (default: true) */
    showPageNumbers?: boolean;
    /** Enable outer book leather spine binding (default: true) */
    showSpineBinding?: boolean;
    /** Accent glow color for active elements (default: "#00F5FF") */
    accentColor?: string;
    /** Enable automatic page flipping (default: false) */
    autoplay?: boolean;
    /** Autoplay interval in milliseconds (default: 3500) */
    autoplayInterval?: number;
    /** Pause autoplay on hover (default: true) */
    pauseOnHover?: boolean;
    /** Enable interactive click on pages to flip (default: true) */
    interactive?: boolean;
    /** Enable navigation buttons (default: true) */
    showControls?: boolean;
    /** Optional container class name */
    className?: string;
    /** Optional container inline style */
    style?: CSSProperties;
}

export interface ThreeDImagePageflipHandle {
    next: () => void;
    prev: () => void;
    reset: () => void;
    goTo: (index: number) => void;
    getTurnedCount: () => number;
    getTotalLeaves: () => number;
}

const DEFAULT_PAGES: PageFlipLeaf[] = [
    {
        id: 1,
        frontImage: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
        backImage: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80",
        frontTitle: "Villa Solarium",
        frontSubtitle: "Horizon Pool & Architecture",
        frontBadge: "Cover",
        backTitle: "Minimal Horizon",
        backSubtitle: "Geometric Water Pavilion",
        backBadge: "Plate 01",
    },
    {
        id: 2,
        frontImage: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=800&q=80",
        backImage: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80",
        frontTitle: "Apex Structure",
        frontSubtitle: "Parametric Glass Facade",
        frontBadge: "Plate 02",
        backTitle: "Glass Skyline",
        backSubtitle: "Monolith Metropolitan Tower",
        backBadge: "Plate 03",
    },
    {
        id: 3,
        frontImage: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80",
        backImage: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=800&q=80",
        frontTitle: "Emerald Cascade",
        frontSubtitle: "Alpine Mist & Forest Ridge",
        frontBadge: "Plate 04",
        backTitle: "Nordic Pavilion",
        backSubtitle: "Natural Timber Canopy",
        backBadge: "Plate 05",
    },
    {
        id: 4,
        frontImage: "https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=800&q=80",
        backImage: "https://images.unsplash.com/photo-1507652313519-d4e9174996dd?auto=format&fit=crop&w=800&q=80",
        frontTitle: "Warm Solarium",
        frontSubtitle: "Sunlight & Interior Loft",
        frontBadge: "Plate 06",
        backTitle: "Zen Courtyard",
        backSubtitle: "Brutalist Stone Water Feature",
        backBadge: "Plate 07",
    },
    {
        id: 5,
        frontImage: "https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=800&q=80",
        backImage: "https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?auto=format&fit=crop&w=800&q=80",
        frontTitle: "Cyber Metropolis",
        frontSubtitle: "Urban Geometric Skyline",
        frontBadge: "Plate 08",
        backTitle: "Monolith Curve",
        backSubtitle: "Brutalist Concrete Finish",
        backBadge: "Endplate",
    },
];

export const ThreeDImagePageflip = forwardRef<ThreeDImagePageflipHandle, ThreeDImagePageflipProps>(({
    pages = DEFAULT_PAGES,
    defaultTurnedIndex = 0,
    turnedIndex: controlledTurnedIndex,
    onPageChange,
    pageWidth = 230,
    pageHeight = 330,
    perspective = 1300,
    peekAngle = 14,
    turnAngle = 180,
    duration = 0.65,
    easing = "cubic-bezier(0.4, 0, 0.2, 1)",
    shadowIntensity = 0.45,
    spineShift = true,
    radius = "10px",
    showPageNumbers = true,
    showSpineBinding = true,
    accentColor = "#00F5FF",
    autoplay = false,
    autoplayInterval = 3500,
    pauseOnHover = true,
    interactive = true,
    showControls = true,
    className,
    style,
}, ref) => {
    const [internalTurned, setInternalTurned] = useState<number>(defaultTurnedIndex);
    const [isHovered, setIsHovered] = useState<boolean>(false);
    const [peekingIndex, setPeekingIndex] = useState<number | null>(null);

    const totalLeaves = pages.length;
    const currentTurned = controlledTurnedIndex !== undefined ? controlledTurnedIndex : internalTurned;
    const isOpen = currentTurned > 0 && currentTurned < totalLeaves;

    const parsedRadius = typeof radius === "number" ? `${radius}px` : radius;

    const setTurned = useCallback((newCount: number) => {
        const clamped = Math.max(0, Math.min(newCount, totalLeaves));
        if (controlledTurnedIndex === undefined) {
            setInternalTurned(clamped);
        }
        if (onPageChange) {
            onPageChange(clamped, totalLeaves);
        }
    }, [controlledTurnedIndex, totalLeaves, onPageChange]);

    const flipNext = useCallback(() => {
        if (currentTurned < totalLeaves) {
            setTurned(currentTurned + 1);
        }
    }, [currentTurned, totalLeaves, setTurned]);

    const flipPrev = useCallback(() => {
        if (currentTurned > 0) {
            setTurned(currentTurned - 1);
        }
    }, [currentTurned, setTurned]);

    const resetBook = useCallback(() => {
        setTurned(0);
    }, [setTurned]);

    useImperativeHandle(ref, () => ({
        next: flipNext,
        prev: flipPrev,
        reset: resetBook,
        goTo: (idx) => setTurned(idx),
        getTurnedCount: () => currentTurned,
        getTotalLeaves: () => totalLeaves,
    }));

    // Autoplay Timer
    useEffect(() => {
        if (!autoplay || (pauseOnHover && isHovered) || totalLeaves <= 1) return;
        const timer = setInterval(() => {
            setInternalTurned((prev) => (prev >= totalLeaves ? 0 : prev + 1));
        }, autoplayInterval);
        return () => clearInterval(timer);
    }, [autoplay, autoplayInterval, pauseOnHover, isHovered, totalLeaves]);

    // Keyboard Navigation
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === "ArrowRight") flipNext();
            if (e.key === "ArrowLeft") flipPrev();
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [flipNext, flipPrev]);

    const handleLeafClick = (index: number) => {
        if (!interactive) return;
        if (index === currentTurned) {
            // Click unturned top page -> flip forward
            flipNext();
        } else if (index === currentTurned - 1) {
            // Click turned top left page -> flip backward
            flipPrev();
        }
    };

    return (
        <div
            className={cn("w-full flex flex-col items-center justify-center select-none py-6", className)}
            style={style}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => {
                setIsHovered(false);
                setPeekingIndex(null);
            }}
        >
            {/* 3D Book Viewport Stage */}
            <div
                className="relative flex items-center justify-center transition-all duration-500"
                style={{
                    perspective: `${perspective}px`,
                    width: `${pageWidth * 2 + 40}px`,
                    height: `${pageHeight + 40}px`,
                }}
            >
                {/* 3D Book Container */}
                <div
                    className="relative transition-transform"
                    style={{
                        width: `${pageWidth}px`,
                        height: `${pageHeight}px`,
                        transformStyle: "preserve-3d",
                        transition: `transform ${duration}s ${easing}`,
                        transform: spineShift && isOpen ? `translateX(${pageWidth / 2}px)` : "translateX(0)",
                    }}
                >
                    {/* Spine Shadow & Binding Crease */}
                    {showSpineBinding && (
                        <div
                            className="absolute top-0 bottom-0 left-[-4px] w-[8px] rounded-l-sm bg-gradient-to-r from-black/80 via-zinc-800 to-black/40 shadow-2xl z-30 pointer-events-none"
                            style={{
                                opacity: isOpen ? 0.95 : 0.6,
                                transition: `opacity ${duration}s ease`,
                            }}
                        />
                    )}

                    {/* Ground Ambience Drop Shadow underneath the book */}
                    <div
                        className="absolute -bottom-6 left-[-15%] w-[130%] h-8 bg-black/40 rounded-full blur-xl pointer-events-none transition-all duration-500"
                        style={{
                            opacity: isOpen ? 0.7 : 0.4,
                            transform: isOpen ? "scale(1.15)" : "scale(0.85)",
                        }}
                    />

                    {/* Book Leaves Stacking Loop */}
                    {pages.map((leaf, index) => {
                        const isTurned = index < currentTurned;
                        const isCanPeek = index === currentTurned;
                        const isPeeking = peekingIndex === index;

                        // Calculate Z-Index: turned leaves stack forward on left, unturned leaves stack backward on right
                        const zIndex = isTurned ? index + 1 : totalLeaves - index;

                        // Rotation Angle
                        let leafRotation = isTurned ? -turnAngle : 0;
                        if (!isTurned && isPeeking) {
                            leafRotation = -peekAngle;
                        }

                        return (
                            <div
                                key={leaf.id ?? index}
                                onClick={() => handleLeafClick(index)}
                                onMouseEnter={() => {
                                    if (isCanPeek) setPeekingIndex(index);
                                }}
                                onMouseLeave={() => {
                                    if (peekingIndex === index) setPeekingIndex(null);
                                }}
                                className={cn(
                                    "absolute inset-0 origin-left cursor-pointer",
                                    interactive ? "cursor-pointer" : "pointer-events-none"
                                )}
                                style={{
                                    transformStyle: "preserve-3d",
                                    transition: `transform ${duration}s ${easing}`,
                                    transform: `rotateY(${leafRotation}deg)`,
                                    zIndex,
                                    borderRadius: parsedRadius,
                                }}
                            >
                                {/* FRONT FACE (Visible when page is on the right) */}
                                <div
                                    className="absolute inset-0 w-full h-full bg-zinc-950 overflow-hidden"
                                    style={{
                                        backfaceVisibility: "hidden",
                                        WebkitBackfaceVisibility: "hidden",
                                        borderRadius: parsedRadius,
                                        boxShadow: `0 12px 28px rgba(0, 0, 0, ${shadowIntensity})`,
                                    }}
                                >
                                    <img
                                        src={leaf.frontImage}
                                        alt={leaf.frontTitle ?? `Page ${index * 2 + 1}`}
                                        className="w-full h-full object-cover pointer-events-none select-none"
                                        loading="lazy"
                                    />

                                    {/* Spine crease shadow overlay for 3D depth */}
                                    <div
                                        className="absolute inset-0 pointer-events-none transition-opacity duration-300"
                                        style={{
                                            background: "linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 14%, transparent 35%)",
                                            opacity: isTurned ? 0 : 1,
                                        }}
                                    />

                                    {/* Bottom Vignette & Metadata */}
                                    <div className="absolute inset-x-0 bottom-0 p-3.5 bg-gradient-to-t from-black/85 via-black/35 to-transparent text-white pointer-events-none">
                                        <div className="flex items-center justify-between gap-2 mb-1">
                                            {leaf.frontBadge && (
                                                <span
                                                    className="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider backdrop-blur-md border border-white/20"
                                                    style={{
                                                        color: accentColor,
                                                        backgroundColor: `${accentColor}20`,
                                                    }}
                                                >
                                                    {leaf.frontBadge}
                                                </span>
                                            )}
                                            {showPageNumbers && (
                                                <span className="text-[10px] font-mono text-zinc-300/80">
                                                    {index * 2 + 1}
                                                </span>
                                            )}
                                        </div>
                                        {leaf.frontTitle && (
                                            <h4 className="text-xs sm:text-sm font-bold tracking-tight text-white drop-shadow-sm line-clamp-1">
                                                {leaf.frontTitle}
                                            </h4>
                                        )}
                                        {leaf.frontSubtitle && (
                                            <p className="text-[10px] text-zinc-300/70 font-medium line-clamp-1">
                                                {leaf.frontSubtitle}
                                            </p>
                                        )}
                                    </div>
                                </div>

                                {/* BACK FACE (Visible when page is turned to the left) */}
                                <div
                                    className="absolute inset-0 w-full h-full bg-zinc-950 overflow-hidden"
                                    style={{
                                        backfaceVisibility: "hidden",
                                        WebkitBackfaceVisibility: "hidden",
                                        transform: "rotateY(180deg)",
                                        borderRadius: parsedRadius,
                                        boxShadow: `0 12px 28px rgba(0, 0, 0, ${shadowIntensity})`,
                                    }}
                                >
                                    <img
                                        src={leaf.backImage}
                                        alt={leaf.backTitle ?? `Page ${index * 2 + 2}`}
                                        className="w-full h-full object-cover pointer-events-none select-none"
                                        loading="lazy"
                                    />

                                    {/* Spine crease shadow overlay for turned back-face */}
                                    <div
                                        className="absolute inset-0 pointer-events-none transition-opacity duration-300"
                                        style={{
                                            background: "linear-gradient(to left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 14%, transparent 35%)",
                                            opacity: isTurned ? 1 : 0,
                                        }}
                                    />

                                    {/* Bottom Vignette & Metadata */}
                                    <div className="absolute inset-x-0 bottom-0 p-3.5 bg-gradient-to-t from-black/85 via-black/35 to-transparent text-white pointer-events-none">
                                        <div className="flex items-center justify-between gap-2 mb-1">
                                            {leaf.backBadge && (
                                                <span
                                                    className="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider backdrop-blur-md border border-white/20"
                                                    style={{
                                                        color: accentColor,
                                                        backgroundColor: `${accentColor}20`,
                                                    }}
                                                >
                                                    {leaf.backBadge}
                                                </span>
                                            )}
                                            {showPageNumbers && (
                                                <span className="text-[10px] font-mono text-zinc-300/80">
                                                    {index * 2 + 2}
                                                </span>
                                            )}
                                        </div>
                                        {leaf.backTitle && (
                                            <h4 className="text-xs sm:text-sm font-bold tracking-tight text-white drop-shadow-sm line-clamp-1">
                                                {leaf.backTitle}
                                            </h4>
                                        )}
                                        {leaf.backSubtitle && (
                                            <p className="text-[10px] text-zinc-300/70 font-medium line-clamp-1">
                                                {leaf.backSubtitle}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Book Controls & Page Progress Toolbar */}
            {showControls && (
                <div className="flex items-center justify-center gap-3 mt-4 select-none">
                    <button
                        onClick={flipPrev}
                        disabled={currentTurned === 0}
                        aria-label="Previous Page"
                        className="px-3.5 py-1.5 rounded-xl flex items-center gap-1 text-xs font-semibold bg-card border border-border text-foreground hover:bg-muted hover:scale-105 active:scale-95 disabled:opacity-30 disabled:pointer-events-none transition-all shadow-xs cursor-pointer"
                    >
                        <ChevronLeft className="w-3.5 h-3.5" />
                        <span>Prev</span>
                    </button>

                    <button
                        onClick={resetBook}
                        disabled={currentTurned === 0}
                        aria-label="Reset Book"
                        className="px-3 py-1.5 rounded-xl flex items-center gap-1 text-xs font-semibold bg-card border border-border text-foreground hover:bg-muted hover:scale-105 active:scale-95 disabled:opacity-30 disabled:pointer-events-none transition-all shadow-xs cursor-pointer"
                    >
                        <RotateCcw className="w-3 h-3" />
                        <span>Reset</span>
                    </button>

                    <div className="px-3 py-1.5 rounded-xl bg-card border border-border text-xs font-mono text-muted-foreground shadow-xs">
                        <span className="font-bold text-foreground">{currentTurned}</span>
                        <span className="opacity-50"> / </span>
                        <span>{totalLeaves} leaves</span>
                    </div>

                    <button
                        onClick={flipNext}
                        disabled={currentTurned === totalLeaves}
                        aria-label="Next Page"
                        className="px-3.5 py-1.5 rounded-xl flex items-center gap-1 text-xs font-semibold bg-card border border-border text-foreground hover:bg-muted hover:scale-105 active:scale-95 disabled:opacity-30 disabled:pointer-events-none transition-all shadow-xs cursor-pointer"
                    >
                        <span>Next</span>
                        <ChevronRight className="w-3.5 h-3.5" />
                    </button>
                </div>
            )}
        </div>
    );
});

ThreeDImagePageflip.displayName = "ThreeDImagePageflip";

export default ThreeDImagePageflip;

```
--------------------------------------------------

### COMPONENT: 3d-slider
Category: 3D Elements
Description: A responsive, 3D image/content slider with a smooth, cascaded stacking effect. It uses Framer Motion for the complex 3D transforms (translateX, translateY, rotate) and handles interactivity via global document event listeners for mouse wheel, drag, and touch gestures. The component is styled using Tailwind CSS and is fully self-contained.
URL: https://lightswind.com/components/3d-slider
Import: import ThreeDSlider from './ThreeDSlider'; // Adjust path as needed
Registry URL: https://lightswind.com/r/3d-slider.json
Install Command: npx lightswind@latest add 3d-slider

Usage:
```tsx
// 1. Define the items data
const sliderItems = [
  { title: "First Item", num: "01", imageUrl: "/images/image1.jpg", data: { id: 1 } },
  { title: "Second Item", num: "02", imageUrl: "/images/image2.jpg", data: { id: 2 } },
  { title: "Third Item", num: "03", imageUrl: "/images/image3.jpg", data: { id: 3 } },
  { title: "Fourth Item", num: "04", imageUrl: "/images/image4.jpg", data: { id: 4 } },
  { title: "Fifth Item", num: "05", imageUrl: "/images/image5.jpg", data: { id: 5 } },
];

// 2. Default Usage
<ThreeDSlider items={sliderItems} />

// 3. Custom Interaction Speeds and Click Handler
const handleItemClick = (item, index) => {
  console.log(`Clicked item ${item.num}: ${item.title} at index ${index}`);
};

<ThreeDSlider
  items={sliderItems}
  speedWheel={0.03} // Slightly faster wheel scroll
  speedDrag={-0.15} // Slightly more sensitive drag
  onItemClick={handleItemClick}
  containerStyle={{ background: '#333', height: '90vh' }}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, CSSProperties } from "react";

// --- Type Definitions ---
export interface SliderItemData {
  title: string;
  num: string;
  imageUrl: string;
  data?: any;
}

interface ThreeDSliderProps {
  items: SliderItemData[];
  speedWheel?: number;
  speedDrag?: number;
  containerStyle?: CSSProperties;
  className?: string;
  onItemClick?: (item: SliderItemData, index: number) => void;
}

// ─── Pure DOM card renderer (no React re-renders in the hot path) ────────────
function createCard(item: SliderItemData, index: number): HTMLDivElement {
  const card = document.createElement("div");
  card.className =
    "absolute top-1/2 left-1/2 cursor-pointer select-none rounded-2xl shadow-2xl bg-zinc-900 overflow-hidden border border-white/10";
  card.style.cssText = `
    --w: clamp(180px, 28vw, 280px);
    --h: clamp(240px, 36vw, 380px);
    width: var(--w); height: var(--h);
    margin-top: calc(var(--h) / -2);
    margin-left: calc(var(--w) / -2);
    will-change: transform, opacity;
    contain: layout style paint;
    transition: none;
    display: block;
  `;

  // inner wrapper
  const inner = document.createElement("div");
  inner.style.cssText = "position:absolute;inset:0;z-index:10;";
  inner.dataset.inner = "true";

  // gradient overlay
  const grad = document.createElement("div");
  grad.style.cssText =
    "position:absolute;inset:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 50%,rgba(0,0,0,.8) 100%);";

  // number
  const num = document.createElement("div");
  num.style.cssText =
    "position:absolute;z-index:20;color:rgba(255,255,255,.9);font-weight:900;top:12px;left:20px;font-size:clamp(28px,6vw,64px);letter-spacing:-0.04em;opacity:.8;";
  num.textContent = item.num;

  // title
  const title = document.createElement("div");
  title.style.cssText =
    "position:absolute;z-index:20;color:#fff;font-weight:700;bottom:20px;left:20px;font-size:clamp(18px,2.5vw,26px);letter-spacing:-0.02em;text-shadow:0 2px 8px rgba(0,0,0,.5);";
  title.textContent = item.title;

  // image
  const img = document.createElement("img");
  img.src = item.imageUrl;
  img.alt = item.title;
  img.loading = index < 3 ? "eager" : "lazy";
  img.decoding = "async";
  img.style.cssText =
    "width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;";

  inner.appendChild(grad);
  inner.appendChild(num);
  inner.appendChild(title);
  inner.appendChild(img);
  card.appendChild(inner);

  return card;
}

// ─── Main Component ───────────────────────────────────────────────────────────
const ThreeDSlider: React.FC<ThreeDSliderProps> = ({
  items,
  speedWheel = 0.04,
  speedDrag = -0.15,
  containerStyle = {},
  className = "",
  onItemClick,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  // Keep callback ref stable without causing re-renders
  const onItemClickRef = useRef(onItemClick);
  useEffect(() => { onItemClickRef.current = onItemClick; }, [onItemClick]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container || items.length === 0) return;

    const numItems = items.length;

    // ── State (all in plain refs, zero React state) ──
    let progress = 50;
    let targetProgress = 50;
    let isDown = false;
    let startX = 0;
    let rafId: number | null = null;
    let isAnimating = false;

    // ── Build DOM cards ──
    const cards: HTMLDivElement[] = items.map((item, i) => createCard(item, i));
    cards.forEach((card, i) => {
      card.addEventListener("click", () => {
        const denom = numItems > 1 ? numItems - 1 : 1;
        targetProgress = (i / denom) * 100;
        startLoop();
        onItemClickRef.current?.(items[i], i);
      }, { passive: true });
      container.appendChild(card);
    });

    // ── Transform cache to skip identical writes ──
    const cache: { tx: string; ty: string; rot: string; z: string; op: string }[] =
      items.map(() => ({ tx: "", ty: "", rot: "", z: "", op: "" }));

    // ── Core update — pure math, direct DOM writes ──
    function update() {
      // Responsive lerp: fast while dragging, smooth when releasing
      const lerpFactor = isDown ? 1 : 0.1;
      progress += (targetProgress - progress) * lerpFactor;

      const clamped = Math.max(0, Math.min(100, progress));
      const activeFloat = (clamped / 100) * (numItems - 1);
      const denom = numItems > 1 ? numItems - 1 : 1;

      for (let i = 0; i < numItems; i++) {
        const card = cards[i];
        if (!card) continue;

        const ratio = (i - activeFloat) / denom;
        const tx = (ratio * 750).toFixed(2);
        const ty = (ratio * 180).toFixed(2);
        const rot = (ratio * 110).toFixed(2);

        const dist = Math.abs(i - activeFloat);
        const z = numItems - dist;
        const op = Math.max(0, Math.min(1, (z / numItems) * 3 - 1.8)).toFixed(2);
        const zStr = Math.round(z * 10).toString();

        const c = cache[i];

        if (c.tx !== tx || c.ty !== ty || c.rot !== rot) {
          card.style.transform = `translate3d(${tx}%, ${ty}%, 0) rotate(${rot}deg)`;
          c.tx = tx; c.ty = ty; c.rot = rot;
        }
        if (c.z !== zStr) {
          card.style.zIndex = zStr;
          c.z = zStr;
        }
        if (c.op !== op) {
          card.style.opacity = op;
          c.op = op;
        }
      }
    }

    // ── Self-terminating RAF loop ──
    function loop() {
      update();
      const diff = Math.abs(targetProgress - progress);
      if (diff > 0.01 || isDown) {
        rafId = requestAnimationFrame(loop);
      } else {
        progress = targetProgress;
        update();
        isAnimating = false;
        rafId = null;
      }
    }

    function startLoop() {
      if (isAnimating) return;
      isAnimating = true;
      rafId = requestAnimationFrame(loop);
    }

    // ── Initial draw ──
    update();

    // ── Event helpers ──
    function getX(e: MouseEvent | TouchEvent): number | undefined {
      return "touches" in e ? e.touches[0]?.clientX : (e as MouseEvent).clientX;
    }

    // ── Wheel ──
    function onWheel(e: WheelEvent) {
      const delta = e.deltaY * speedWheel;
      const next = targetProgress + delta;
      if ((next <= 0 && e.deltaY < 0) || (next >= 100 && e.deltaY > 0)) return;
      e.preventDefault();
      targetProgress = Math.max(0, Math.min(100, next));
      startLoop();
    }

    // ── Drag ──
    function onDown(e: MouseEvent | TouchEvent) {
      isDown = true;
      const x = getX(e);
      if (x !== undefined) startX = x;
      // Keep loop alive during drag
      if (!isAnimating) { isAnimating = true; rafId = requestAnimationFrame(loop); }
    }

    function onMove(e: MouseEvent | TouchEvent) {
      if (!isDown) return;
      const x = getX(e);
      if (x === undefined) return;
      const diff = (x - startX) * speedDrag;
      targetProgress = Math.max(0, Math.min(100, targetProgress + diff));
      startX = x;
      // No startLoop() — already running, loop checks isDown
    }

    function onUp() {
      if (!isDown) return;
      isDown = false;
      // Don't stop loop; it will self-terminate after settling
    }

    container.addEventListener("wheel", onWheel, { passive: false });
    container.addEventListener("mousedown", onDown, { passive: true });
    container.addEventListener("touchstart", onDown, { passive: true });
    window.addEventListener("mousemove", onMove, { passive: true });
    window.addEventListener("mouseup", onUp, { passive: true });
    window.addEventListener("touchmove", onMove, { passive: true });
    window.addEventListener("touchend", onUp, { passive: true });

    return () => {
      container.removeEventListener("wheel", onWheel);
      container.removeEventListener("mousedown", onDown);
      container.removeEventListener("touchstart", onDown);
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
      if (rafId) cancelAnimationFrame(rafId);
      cards.forEach(c => c.remove());
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items, speedWheel, speedDrag]);

  return (
    <div
      ref={containerRef}
      className={`relative w-full h-[520px] sm:h-[620px] overflow-hidden bg-black/90 rounded-2xl ${className}`}
      style={{ ...containerStyle, touchAction: "pan-y" }}
    />
  );
};

export default ThreeDSlider;
```
--------------------------------------------------

### COMPONENT: angled-slider
Category: 3D Elements
Description: A 3D perspective infinite slider with reflection effects and hover interactions.
URL: https://lightswind.com/components/angled-slider
Import: import { AngledSlider } from "@/components/lightswind/angled-slider"
Registry URL: https://lightswind.com/r/angled-slider.json
Install Command: npx lightswind@latest add angled-slider

Usage:
```tsx
import { AngledSlider } from "@/components/lightswind/angled-slider";

export function AngledSliderDemo() {
  const images = [
    {
      id: 1,
      url: "https://images.unsplash.com/photo-1554080353-a576cf803bda?auto=format&fit=crop&w=1000&q=80",
      title: "Mountain View",
    },
    {
      id: 2,
      url: "https://images.unsplash.com/photo-1505144808419-1957a94ca61e?auto=format&fit=crop&w=1000&q=80",
      title: "Ocean Breeze",
    },
    {
      id: 3,
      url: "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?auto=format&fit=crop&w=1000&q=80",
      title: "Forest Mist",
    },
    {
      id: 4,
      url: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=1000&q=80",
      title: "Canyon Echo",
    },
     {
      id: 5,
      url: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=1000&q=80",
      title: "Canyon Echo",
    },
     {
      id: 6,
      url: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=1000&q=80",
      title: "Canyon Echo",
    },
  ];

  return <AngledSlider items={images} speed={30} />;
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect, useState } from "react";
import { motion, useMotionValue, animate, Variants } from "framer-motion";
import { cn } from "@/components/lib/utils";
import Image from "next/image";

interface AngledSliderProps {
    /**
     * Array of image objects or URLs
     */
    items: {
        id: string | number;
        url: string;
        alt?: string;
        title?: string;
    }[];
    /**
     * Speed of auto-scroll (seconds for full loop). Higher is slower.
     * @default 20
     */
    speed?: number;
    /**
     * Direction of scroll
     * @default "left"
     */
    direction?: "left" | "right";
    /**
     * Height of the slider container
     * @default "400px"
     */
    containerHeight?: string;
    /**
     * Width of each card
     * @default "300px"
     */
    cardWidth?: string;
    /**
     * Gap between cards
     * @default "40px"
     */
    gap?: string;
    /**
     * Angle of the 3D skew/rotation
     * @default 20
     */
    angle?: number;
    /**
     * Scale on hover
     * @default 1.05
     */
    hoverScale?: number;
    className?: string;
}

const cardVariants: Variants = {
    offHover: (angle: number) => ({
        rotateY: angle,
        z: 60, // Ensure card is in front of container plane (which blocks -Z events)
        opacity: 0.9,
        scale: 1,
        zIndex: 30, // Higher than potential overlays
        transition: {
            type: "spring",
            mass: 3,
            stiffness: 400,
            damping: 50
        }
    }),
    onHover: (hoverScale: number) => ({
        rotateY: 0,
        z: 120, // Pop out further
        opacity: 1,
        scale: hoverScale,
        zIndex: 50,
        transition: {
            type: "spring",
            mass: 3,
            stiffness: 400,
            damping: 50
        }
    })
};

const AngledCard = ({
    item,
    angle,
    hoverScale,
    cardWidth
}: {
    item: any;
    angle: number;
    hoverScale: number;
    cardWidth: string;
}) => {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <motion.div
            className="relative flex-shrink-0 group overflow-visible cursor-pointer"
            style={{
                width: cardWidth,
                height: "100%",
                transformStyle: "preserve-3d",
            }}
            custom={isHovered ? hoverScale : angle}
            variants={cardVariants}
            initial="offHover"
            animate={isHovered ? "onHover" : "offHover"}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            {/* The Image Card */}
            <div className="relative h-full w-full overflow-hidden border border-white/10 bg-muted 
            min-h-[300px] shadow-2xl">
                <Image
                    src={item.url}
                    alt={item.alt || "Slider Image"}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
                {/* Optional Overlay/Title */}
                {item.title && (
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                        <h3 className="text-lg font-bold">{item.title}</h3>
                    </div>
                )}
            </div>
        </motion.div>
    );
};

export const AngledSlider = ({
    items,
    speed = 40,
    direction = "left",
    containerHeight = "400px",
    cardWidth = "300px",
    gap = "40px",
    angle = 20,
    hoverScale = 1.05,
    className,
}: AngledSliderProps) => {
    const [width, setWidth] = useState(0);
    const containerRef = useRef<HTMLDivElement>(null);

    const x = useMotionValue(0);
    const [isHovered, setIsHovered] = useState(false);

    // Duplicate items for infinite loop effect
    // We need enough duplicates to fill the screen + buffer
    const duplicatedItems = [...items, ...items, ...items];

    useEffect(() => {
        const calculateWidth = () => {
            // Fallback to prop-based calculation if ref is not quite ready or layout is shifting
            // This is generally safer for known fixed-width items
            const numWidth = parseInt(cardWidth?.toString().replace("px", "") || "300");
            const numGap = parseInt(gap?.toString().replace("px", "") || "40");

            if (!isNaN(numWidth) && !isNaN(numGap)) {
                const calculatedWidth = (numWidth + numGap) * items.length;
                setWidth(calculatedWidth);
            } else if (containerRef.current) {
                const scrollWidth = containerRef.current.scrollWidth;
                setWidth(scrollWidth / 3);
            }
        };

        calculateWidth();
        window.addEventListener('resize', calculateWidth);
        return () => window.removeEventListener('resize', calculateWidth);
    }, [items, cardWidth, gap]);

    useEffect(() => {
        if (width <= 0) return;

        const startX = direction === "left" ? 0 : -width;
        const endX = direction === "left" ? -width : 0;

        if (isHovered) return;

        const runAnimation = () => {
            const currentX = x.get();
            const totalDist = width;
            const dist = Math.abs(endX - currentX);
            const duration = speed * (dist / totalDist);

            const controls = animate(x, endX, {
                duration: duration,
                ease: "linear",
                onComplete: () => {
                    x.set(startX);
                    runAnimation();
                }
            });
            return controls;
        };

        const animation = runAnimation();

        return () => {
            animation.stop();
        };
    }, [width, speed, direction, isHovered, x]);

    return (
        <div
            className={cn(
                "relative w-full overflow-hidden bg-background py-10 perspective-1000",
                className
            )}
            style={{
                height: containerHeight,
                perspective: "1000px", // Essential for 3D effect
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >


            <motion.div
                ref={containerRef}
                className="flex items-center"
                style={{ x, gap, transformStyle: "preserve-3d" }}

            >
                {duplicatedItems.map((item, index) => (
                    <AngledCard
                        key={`${item.id}-${index}`}
                        item={item}
                        angle={angle}
                        hoverScale={hoverScale}
                        cardWidth={cardWidth}
                    />
                ))}
            </motion.div>
        </div>
    );
};

```
--------------------------------------------------

### COMPONENT: beam-circle
Category: 3D Elements
Description: A dynamic, orbit-based visual component where icons revolve around a customizable center element. It simulates rotating energy beams or planetary motion with full Framer Motion animation control. Perfect for loaders, dashboards, hero animations, or brand identity effects.
URL: https://lightswind.com/components/beam-circle
Import: import { BeamCircle } from "@/components/lightswind/beam-circle";
Registry URL: https://lightswind.com/r/beam-circle.json
Install Command: npx lightswind@latest add beam-circle

Usage:
```tsx
// 1. Default beam circle with animated orbits
<BeamCircle />

// 2. Custom size, center icon, orbit colors, and line thickness
<BeamCircle
  size={400}
  centerIcon={<Zap className="text-yellow-400" size={40} />}
  orbits={[
    {
      id: 1,
      radiusFactor: 0.25,
      speed: 10,
      icon: <MessageSquare className="text-primarylw" />,
      iconSize: 24,
      orbitColor: "rgba(0, 150, 255, 0.3)",
      orbitThickness: 3,
    },
    {
      id: 2,
      radiusFactor: 0.55,
      speed: 14,
      icon: <Briefcase className="text-green-400" />,
      iconSize: 30,
      orbitThickness: 2,
    },
  ]}
/>
```

Source Code:
```tsx
"use client";
import React, { useMemo } from "react";
import { motion, Transition } from "framer-motion";
import { Sun, Cloud, MessageSquare, Briefcase, Zap } from "lucide-react";

// --- Types ---
type OrbitConfig = {
  id: number;
  radiusFactor: number;
  speed: number; // seconds per rotation
  icon: React.ReactNode;
  iconSize: number;
  orbitColor?: string;
  orbitThickness?: number;
};

type BeamCircleProps = {
  size?: number;
  orbits?: OrbitConfig[];
  centerIcon?: React.ReactNode;
};

// --- Default Orbits ---
const defaultOrbits: OrbitConfig[] = [
  {
    id: 1,
    radiusFactor: 0.15,
    speed: 7,
    icon: <Zap className="text-yellow-400" />,
    iconSize: 20,
    orbitColor: "rgba(255, 193, 7, 0.4)",
    orbitThickness: 1.5,
  },
  {
    id: 2,
    radiusFactor: 0.35,
    speed: 12,
    icon: <MessageSquare className="text-sky-500" />,
    iconSize: 24,
    orbitThickness: 1.5,
  },
  {
    id: 3,
    radiusFactor: 0.55,
    speed: 9,
    icon: <Briefcase className="text-green-500" />,
    iconSize: 28,
    orbitColor: "rgba(76, 175, 80, 0.4)",
    orbitThickness: 2,
  },
  {
    id: 4,
    radiusFactor: 0.75,
    speed: 15,
    icon: <Cloud className="text-slate-400" />,
    iconSize: 32,
    orbitThickness: 1,
  },
];

// --- Component ---
const BeamCircle: React.FC<BeamCircleProps> = ({
  size = 300,
  orbits: customOrbits,
  centerIcon,
}) => {
  const orbitsData = useMemo(() => customOrbits || defaultOrbits, [customOrbits]);
  const halfSize = size / 2;

  // --- Define linear easing manually ---
  const linearEase = (t: number) => t;

  const rotationTransition = (duration: number): Transition => ({
    repeat: Infinity,
    duration,
    ease: linearEase, // ✅ Works properly now
  });

  // --- Center Icon ---
  const CenterIcon = useMemo(
    () => (
      <motion.div
        className="rounded-full shadow-lg bg-foreground grid place-content-center"
        style={{ width: halfSize * 0.2, height: halfSize * 0.2 }}
        animate={{ scale: [1, 1.1, 1] }}
        transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" as any }}
      >
        {centerIcon ? (
          centerIcon
        ) : (
          <Sun className="text-background" size={halfSize * 0.1} />
        )}
      </motion.div>
    ),
    [halfSize, centerIcon]
  );

  return (
    <div className="flex justify-center items-center p-4 bg-transparent">
      <div className="relative" style={{ width: size, height: size }}>
        {orbitsData.map((orbit) => {
          const orbitDiameter = size * orbit.radiusFactor;
          const orbitRadius = orbitDiameter / 2;
          const containerSize = size;

          return (
            <React.Fragment key={orbit.id}>
              {/* Orbit Line */}
              <div
                className={`absolute rounded-full border border-dashed ${
                  orbit.orbitColor ? "" : "border-foreground/30 dark:border-foreground/40"
                }`}
                style={{
                  width: orbitDiameter,
                  height: orbitDiameter,
                  top: halfSize - orbitRadius,
                  left: halfSize - orbitRadius,
                  borderColor: orbit.orbitColor || undefined,
                  borderWidth: orbit.orbitThickness || 1,
                }}
              />

              {/* Rotating Container */}
              <motion.div
                className="absolute inset-0"
                style={{ width: containerSize, height: containerSize }}
                animate={{ rotate: 360 }}
                transition={rotationTransition(orbit.speed)}
              >
                {/* Traveling Icon */}
                <div
                  className="absolute"
                  style={{
                    top: halfSize,
                    left: halfSize + orbitRadius,
                    transform: `translate(-50%, -50%)`,
                  }}
                >
                  <motion.div
                    className="rounded-full shadow-md grid place-content-center bg-foreground p-1"
                    style={{ width: orbit.iconSize, height: orbit.iconSize }}
                    animate={{ rotate: -360 }}
                    transition={rotationTransition(orbit.speed)}
                  >
                    {React.isValidElement(orbit.icon) ? (
                      React.cloneElement(orbit.icon as any, {
                        size: orbit.iconSize * 0.6,
                      })
                    ) : (
                      orbit.icon
                    )}
                  </motion.div>
                </div>
              </motion.div>
            </React.Fragment>
          );
        })}

        {/* Central Icon */}
        <div className="absolute inset-0 grid place-content-center z-10">{CenterIcon}</div>
      </div>

      <style jsx global>{`
        body {
          font-family: "Inter", sans-serif;
          margin: 0;
        }
      `}</style>
    </div>
  );
};

export default BeamCircle;

```
--------------------------------------------------

### COMPONENT: 3d-beam-circle
Category: 3D Elements
Description: A stunning 3D perspective orbital ring component where glowing boxes travel along concentric elliptical orbits. Each orbit is independently configurable with custom speed, direction (CW/CCW), color, glow, and traveler box size. Built with pure SVG + rAF — no external 3D library required. Perfect for loaders, hero sections, tech dashboards, or orbit/network visualizations.
URL: https://lightswind.com/components/3d-beam-circle
Import: import { ThreeDBeamCircle } from "@/components/lightswind/3d-beam-circle";
Registry URL: https://lightswind.com/r/3d-beam-circle.json
Install Command: npx lightswind@latest add 3d-beam-circle

Usage:
```tsx
// 1. Default 3D Beam Circle (4 orbits, auto-spaced, multicolor)
<ThreeDBeamCircle size={400} />

// 2. Custom tilt, orbits, and center node
<ThreeDBeamCircle
  size={520}
  tiltDeg={50}
  centerGlow
  centerContent={<Sparkles size={28} color="#a5b4fc" />}
  orbits={[
    {
      id: 0,
      radiusFactor: 0.18,
      speed: 7,
      direction: "cw",
      orbitColor: "rgba(99,102,241,0.4)",
      boxColor: "#6366f1",
      glowColor: "#a5b4fc",
      boxWidth: 24,
      boxHeight: 14,
      delay: 0,
      children: <Zap size={10} />,
    },
    {
      id: 1,
      radiusFactor: 0.38,
      speed: 14,
      direction: "ccw",
      orbitColor: "rgba(168,85,247,0.35)",
      boxColor: "#a855f7",
      glowColor: "#c084fc",
      boxWidth: 30,
      boxHeight: 16,
      delay: 0.5,
    },
  ]}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState, useMemo } from "react";
import { cn } from "@/components/lib/utils";

/* ------------------------------------------------------------------ */
/*  Types                                                               */
/* ------------------------------------------------------------------ */

export type BeamOrbitConfig = {
  /** Unique id per orbit */
  id: number;
  /** Orbit radius as fraction of viewBox width (0–0.5). Default auto-spaced. */
  radiusFactor?: number;
  /** Speed of travel along the arc in seconds. Default 10 */
  speed?: number;
  /** Custom stroke color of the orbit arc line (overrides theme currentColor) */
  orbitColor?: string;
  /** Stroke thickness of the orbit arc in px. Default uses global orbitThickness */
  orbitThickness?: number;
  /** Opacity of this orbit's arc line (0–1). Default uses global arcOpacity */
  orbitOpacity?: number;
  /** Badge background fill color */
  boxColor?: string;
  /** Badge border/glow accent color */
  glowColor?: string;
  /** Badge size (diameter) in px. Default 32 */
  size?: number;
  /** Initial position offset along the arc (0–1 fraction). Default 0 */
  delay?: number;
  /**
   * Direction of travel:
   * - "cw"  — clockwise (left → right on semi-circle)
   * - "ccw" — counter-clockwise (right → left)
   * Default inherits global `orbitDirection`
   */
  direction?: "cw" | "ccw";
  /** Optional element/flag/icon rendered inside the round badge */
  children?: React.ReactNode;
};

export type ThreeDBeamCircleProps = {
  /* ── Layout ─────────────────────────────────────────────── */
  /** CSS width of the root container. Default "100%" */
  width?: string | number;
  /** CSS height of the root container. Default "100%" */
  height?: string | number;
  /** SVG internal viewBox width. Default 800 */
  viewBoxWidth?: number;
  /** SVG internal viewBox height. Default 440 */
  viewBoxHeight?: number;

  /* ── Mode ───────────────────────────────────────────────── */
  /**
   * "semi-circle" — half-dome anchored at the bottom (default)
   * "full-circle" — full orbital rings centered in view
   */
  mode?: "semi-circle" | "full-circle";

  /* ── Orbits ─────────────────────────────────────────────── */
  /** Array of orbit ring configurations */
  orbits?: BeamOrbitConfig[];
  /**
   * Global default direction for all badges unless overridden per-orbit.
   * "cw" = clockwise (default), "ccw" = counter-clockwise
   */
  orbitDirection?: "cw" | "ccw";

  /* ── Arc Appearance ─────────────────────────────────────── */
  /** Global default stroke thickness for all orbit arcs. Default 1.5 */
  orbitThickness?: number;
  /**
   * Global arc line opacity (0–1). Each orbit can override via orbitOpacity.
   * Default 0.75
   */
  arcOpacity?: number;
  /**
   * Intensity of the gradient fade effect on arc edges (0–1).
   * 0 = solid line, 1 = maximum fade. Default 0.75
   */
  arcGlowIntensity?: number;
  /** Hide all arc lines and only show the traveling badges. Default false */
  showArcs?: boolean;

  /* ── Badge Appearance ───────────────────────────────────── */
  /**
   * Border width (px) for all traveler badges.
   * Default 1
   */
  badgeBorderWidth?: number;
  /**
   * Border color for all badges when no per-orbit glowColor is set.
   * Accepts any CSS color string. Default "currentColor" (theme foreground)
   */
  badgeBorderColor?: string;
  /**
   * Badge drop shadow size. "none" | "sm" | "md" | "lg" | "glow"
   * Default "md"
   */
  badgeShadow?: "none" | "sm" | "md" | "lg" | "glow";
  /**
   * Badge border radius override — useful for square/pill badges.
   * Default "9999px" (fully round)
   */
  badgeBorderRadius?: string;

  /* ── Center Node ─────────────────────────────────────────── */
  /** Content rendered at the center origin point */
  centerContent?: React.ReactNode;
  /**
   * Diameter of the center node foreignObject in px. Default 52
   */
  centerNodeSize?: number;
  /** Show subtle ambient glow at center origin. Default true */
  centerGlow?: boolean;

  /* ── Animation ──────────────────────────────────────────── */
  /** Pause all badge animations. Default false */
  animationPaused?: boolean;
  /**
   * Global speed multiplier applied to all orbits.
   * 0.5 = half speed, 2 = double speed. Default 1
   */
  speedMultiplier?: number;

  /* ── Misc ───────────────────────────────────────────────── */
  /** Extra class name for the root wrapper element */
  className?: string;
};

/* ------------------------------------------------------------------ */
/*  Default Orbits                                                     */
/* ------------------------------------------------------------------ */

const DEFAULT_SEMI_ORBITS: BeamOrbitConfig[] = [
  { id: 0, radiusFactor: 0.15, speed: 8,  size: 28, delay: 0.1  },
  { id: 1, radiusFactor: 0.26, speed: 12, size: 32, delay: 0.4  },
  { id: 2, radiusFactor: 0.37, speed: 16, size: 34, delay: 0.7  },
  { id: 3, radiusFactor: 0.46, speed: 22, size: 36, delay: 0.88 },
];

/* ------------------------------------------------------------------ */
/*  Shadow utility                                                     */
/* ------------------------------------------------------------------ */
function resolveShadow(
  shadow: ThreeDBeamCircleProps["badgeShadow"],
  glowColor?: string
): string {
  if (glowColor) return `0 0 16px ${glowColor}66, 0 2px 8px rgba(0,0,0,0.15)`;
  switch (shadow) {
    case "none": return "none";
    case "sm":   return "0 1px 4px rgba(0,0,0,0.10)";
    case "lg":   return "0 4px 20px rgba(0,0,0,0.22)";
    case "glow": return "0 0 24px rgba(0,0,0,0.30), 0 2px 12px rgba(0,0,0,0.18)";
    default:     return "0 2px 8px rgba(0,0,0,0.12)";  // "md"
  }
}

/* ------------------------------------------------------------------ */
/*  ArcTravelerBadge                                                   */
/* ------------------------------------------------------------------ */
function ArcTravelerBadge({
  cx, cy, radius,
  speed = 10,
  delay = 0,
  badgeSize = 32,
  boxColor,
  glowColor,
  isFullCircle = false,
  direction = "cw",
  paused = false,
  speedMultiplier = 1,
  borderWidth = 1,
  borderColor,
  shadow = "md",
  borderRadius = "9999px",
  children,
}: {
  cx: number; cy: number; radius: number;
  speed?: number; delay?: number; badgeSize?: number;
  boxColor?: string; glowColor?: string;
  isFullCircle?: boolean;
  direction?: "cw" | "ccw";
  paused?: boolean;
  speedMultiplier?: number;
  borderWidth?: number;
  borderColor?: string;
  shadow?: ThreeDBeamCircleProps["badgeShadow"];
  borderRadius?: string;
  children?: React.ReactNode;
}) {
  const frameRef = useRef<number | undefined>(undefined);
  const lastRef  = useRef<number>(0);
  const [pos, setPos] = useState({ x: cx - radius, y: cy });
  const tAccRef = useRef(delay * speed);

  useEffect(() => {
    const tick = (ts: number) => {
      const dt = lastRef.current ? (ts - lastRef.current) / 1000 : 0;
      lastRef.current = ts;

      if (!paused) {
        tAccRef.current += dt * speedMultiplier;
      }

      const t = tAccRef.current;
      let x: number, y: number;

      if (isFullCircle) {
        const angle = (t / speed) * 2 * Math.PI * (direction === "ccw" ? -1 : 1);
        x = cx + radius * Math.cos(angle);
        y = cy + radius * Math.sin(angle);
      } else {
        const progress = (Math.sin((t / speed) * Math.PI) + 1) / 2;
        const rawAngle = Math.PI - progress * Math.PI;
        const angle = direction === "ccw" ? Math.PI - rawAngle : rawAngle;
        x = cx + radius * Math.cos(angle);
        y = cy - radius * Math.sin(angle);
      }

      setPos({ x, y });
      frameRef.current = requestAnimationFrame(tick);
    };

    frameRef.current = requestAnimationFrame(tick);
    return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
  }, [cx, cy, radius, speed, delay, isFullCircle, direction, paused, speedMultiplier]);

  const resolvedBorder = glowColor ? `${glowColor}99` : (borderColor ?? "currentColor");

  return (
    <foreignObject
      x={pos.x - badgeSize / 2}
      y={pos.y - badgeSize / 2}
      width={badgeSize}
      height={badgeSize}
      style={{ overflow: "visible" }}
    >
      <div
        style={{
          width: "100%", height: "100%",
          display: "flex", alignItems: "center", justifyContent: "center",
          overflow: "hidden",
          borderRadius,
          borderStyle: "solid",
          borderWidth: `${borderWidth}px`,
          borderColor: resolvedBorder,
          backgroundColor: boxColor ?? "transparent",
          boxShadow: resolveShadow(shadow, glowColor),
          boxSizing: "border-box",
        }}
      >
        {children}
      </div>
    </foreignObject>
  );
}

/* ------------------------------------------------------------------ */
/*  Main Component                                                     */
/* ------------------------------------------------------------------ */
export const ThreeDBeamCircle: React.FC<ThreeDBeamCircleProps> = ({
  width = "100%",
  height = "100%",
  viewBoxWidth = 800,
  viewBoxHeight = 440,
  mode = "semi-circle",
  orbits: customOrbits,
  orbitDirection = "cw",
  orbitThickness = 1.5,
  arcOpacity = 0.75,
  arcGlowIntensity = 0.75,
  showArcs = true,
  badgeBorderWidth = 1,
  badgeBorderColor,
  badgeShadow = "md",
  badgeBorderRadius = "9999px",
  centerContent,
  centerNodeSize = 52,
  centerGlow = true,
  animationPaused = false,
  speedMultiplier = 1,
  className,
}) => {
  const orbits = useMemo(() => customOrbits ?? DEFAULT_SEMI_ORBITS, [customOrbits]);

  const cx = viewBoxWidth / 2;
  const cy = mode === "semi-circle" ? viewBoxHeight - 12 : viewBoxHeight / 2;

  // Arc gradient mid-opacity derived from arcOpacity × arcGlowIntensity
  const midOpacity   = arcOpacity * arcGlowIntensity;
  const edgeOpacity  = arcOpacity * arcGlowIntensity * 0.6;

  return (
    <div
      className={cn(
        "relative w-full h-full flex flex-col items-center justify-end select-none overflow-hidden transition-colors duration-300 text-foreground bg-transparent",
        className
      )}
      style={{ width, height }}
    >
      <svg
        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
        preserveAspectRatio="xMidYMax slice"
        style={{ width: "100%", height: "100%", display: "block" }}
      >
        <defs>
          {orbits.map((orbit) => {
            const rf    = orbit.radiusFactor ?? 0.3;
            const r     = viewBoxWidth * rf;
            const gradId = `arcGrad_${orbit.id}`;
            const x0    = cx - r;
            const x1    = cx + r;
            const oMid  = orbit.orbitOpacity !== undefined
              ? orbit.orbitOpacity * arcGlowIntensity
              : midOpacity;
            const oEdge = orbit.orbitOpacity !== undefined
              ? orbit.orbitOpacity * arcGlowIntensity * 0.6
              : edgeOpacity;
            return (
              <linearGradient key={gradId} id={gradId} x1={x0} y1={cy} x2={x1} y2={cy} gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor={orbit.orbitColor ?? "currentColor"} stopOpacity={0} />
                <stop offset="20%"  stopColor={orbit.orbitColor ?? "currentColor"} stopOpacity={oEdge} />
                <stop offset="50%"  stopColor={orbit.orbitColor ?? "currentColor"} stopOpacity={oMid} />
                <stop offset="80%"  stopColor={orbit.orbitColor ?? "currentColor"} stopOpacity={oEdge} />
                <stop offset="100%" stopColor={orbit.orbitColor ?? "currentColor"} stopOpacity={0} />
              </linearGradient>
            );
          })}
        </defs>

        {/* Orbit Arc Lines */}
        {showArcs && orbits.map((orbit) => {
          const rf        = orbit.radiusFactor ?? 0.3;
          const r         = viewBoxWidth * rf;
          const thickness = orbit.orbitThickness ?? orbitThickness;
          const gradId    = `arcGrad_${orbit.id}`;

          return (
            <g key={`arc_${orbit.id}`}>
              {mode === "semi-circle" ? (
                <path
                  d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`}
                  fill="none"
                  stroke={`url(#${gradId})`}
                  strokeWidth={thickness}
                  strokeLinecap="round"
                />
              ) : (
                <circle
                  cx={cx} cy={cy} r={r}
                  fill="none"
                  stroke={orbit.orbitColor ?? "currentColor"}
                  strokeWidth={thickness}
                  strokeOpacity={orbit.orbitOpacity ?? arcOpacity}
                />
              )}
            </g>
          );
        })}

        {/* Traveling Badges */}
        {orbits.map((orbit) => {
          const rf  = orbit.radiusFactor ?? 0.3;
          const r   = viewBoxWidth * rf;
          return (
            <ArcTravelerBadge
              key={`badge_${orbit.id}`}
              cx={cx}
              cy={cy}
              radius={r}
              speed={orbit.speed ?? 10}
              delay={orbit.delay ?? 0}
              badgeSize={orbit.size ?? 32}
              boxColor={orbit.boxColor}
              glowColor={orbit.glowColor}
              isFullCircle={mode === "full-circle"}
              direction={orbit.direction ?? orbitDirection}
              paused={animationPaused}
              speedMultiplier={speedMultiplier}
              borderWidth={badgeBorderWidth}
              borderColor={badgeBorderColor}
              shadow={badgeShadow}
              borderRadius={badgeBorderRadius}
            >
              {orbit.children}
            </ArcTravelerBadge>
          );
        })}

        {/* Center Origin Node */}
        {centerContent && (
          <foreignObject
            x={cx - centerNodeSize / 2}
            y={cy - centerNodeSize / 2}
            width={centerNodeSize}
            height={centerNodeSize}
            style={{ overflow: "visible" }}
          >
            <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
              {centerContent}
            </div>
          </foreignObject>
        )}
      </svg>
    </div>
  );
};

export default ThreeDBeamCircle;

```
--------------------------------------------------

### COMPONENT: chain-carousel
Category: 3D Elements
Description: A horizontally scrolling carousel component for displaying blockchain chains, tokens, or custom items. It features auto-scroll with smooth Framer Motion animations, center highlighting, left/right mirrored displays, and an interactive search dropdown for selecting and focusing on specific items. Perfect for dashboards, explorers, and interactive listings.
URL: https://lightswind.com/components/chain-carousel
Import: import ChainCarousel from "@/components/lightswind/chain-carousel";
Registry URL: https://lightswind.com/r/chain-carousel.json
Install Command: npx lightswind@latest add chain-carousel

Usage:
```tsx
// 1. Default carousel with auto-scroll
<ChainCarousel items={chainsList} />

// 2. Custom visible items, scroll speed, and selection callback
<ChainCarousel
  items={chainsList}
  visibleItemCount={7}
  scrollSpeedMs={2000}
  onChainSelect={(id, name) => console.log("Selected:", id, name)}
/>
```

Source Code:
```tsx
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { motion, useInView } from 'framer-motion';
import { LucideIcon, Search, DeleteIcon } from 'lucide-react';

// NOTE: Placeholder for your custom Input component
const Input = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
    <input {...props} />
);

// --- Core Data Interface ---
export interface ChainItem {
    id: string | number; // Unique ID
    name: string;
    icon: LucideIcon;
    /** A secondary string line for the item, e.g., a short description or a value. */
    details?: string;
    logo?: string; // Optional image URL
}

// --- Internal Animated Type ---
/** The specific type returned by getVisibleItems, extending the base ChainItem. */
type AnimatedChainItem = ChainItem & {
    distanceFromCenter: number;
    originalIndex: number;
};

// --- Component Props Interfaces ---

interface CarouselItemProps {
    chain: AnimatedChainItem;
    side: 'left' | 'right';
}

interface ChainCarouselProps {
    /** The list of items to display in the carousel. (REQUIRED) */
    items: ChainItem[];
    /** The speed of the auto-scroll rotation in milliseconds. */
    scrollSpeedMs?: number;
    /** The number of carousel items visible at once (must be an odd number). */
    visibleItemCount?: number;
    /** Custom class for the main container div. */
    className?: string;
    /** Function to call when a chain is selected from the search dropdown. */
    onChainSelect?: (chainId: ChainItem['id'], chainName: string) => void;
}

// --- Helper Components ---

/** A single item card for the carousel. */
const CarouselItemCard: React.FC<CarouselItemProps> = ({ chain, side }) => {
    const { distanceFromCenter, id, name, details, logo, icon: FallbackIcon } = chain;
    const distance = Math.abs(distanceFromCenter);
    // Visual effects based on distance from the center (0)
    const opacity = 1 - distance / 4;
    const scale = 1 - distance * 0.1;
    const yOffset = distanceFromCenter * 90;
    const xOffset = side === 'left' ? -distance * 50 : distance * 50;

    const IconOrLogo = (
        <div className="rounded-full border border-muted-foreground/60 
        dark:border-muted-foreground/40 p-2 bg-foreground">
            {logo ? (
                <img src={logo} alt={`${name} logo`} className="size-8 rounded-full object-cover" />
            ) : (
                <FallbackIcon className="size-8 text-background" />
            )}
        </div>
    );

    return (
        <motion.div
            key={id}
            className={`absolute flex items-center gap-4 text-background  px-6 py-3 
                ${side === 'left' ? 'flex-row-reverse' : 'flex-row'}`}
            animate={{
                opacity,
                scale,
                y: yOffset,
                x: xOffset,
            }}
            transition={{ duration: 0.4, ease: 'easeInOut' }}
        >
            {IconOrLogo}

            <div className={`flex flex-col mx-4 ${side === 'left' ? 'text-right' : 'text-left'}`}>
                {/* FIX: Added whitespace-nowrap to prevent the name from wrapping. */}
                <span className="text-md lg:text-lg font-semibold text-foreground whitespace-nowrap">{name}</span>
                {/* Display generic details/description */}
                <span className="text-xs lg:text-sm text-gray-500">{details}</span>
            </div>
        </motion.div>
    );
};

// --- Main Component ---

const ChainCarousel: React.FC<ChainCarouselProps> = ({
    items,

    scrollSpeedMs = 1500,
    visibleItemCount = 9,
    className = '',
    onChainSelect,
}) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [isPaused, setIsPaused] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [showDropdown, setShowDropdown] = useState(false);

    // References for Framer Motion scroll-based animation
    const rightSectionRef = useRef<HTMLDivElement>(null);
    const isInView = useInView(rightSectionRef, { margin: '-100px 0px -100px 0px' });
    const totalItems = items.length;

    // 1. Auto-scroll effect
    useEffect(() => {
        if (isPaused || totalItems === 0) return;

        const interval = setInterval(() => {
            setCurrentIndex((prev) => (prev + 1) % totalItems);
        }, scrollSpeedMs);

        return () => clearInterval(interval);
    }, [isPaused, totalItems, scrollSpeedMs]);

    // 2. Scroll listener to pause carousel on page scroll
    useEffect(() => {
        let timeoutId: NodeJS.Timeout;
        const handleScroll = () => {
            setIsPaused(true);
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                setIsPaused(false);
            }, 500); // Resume auto-scroll after 500ms of no scrolling
        };

        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => {
            window.removeEventListener('scroll', handleScroll);
            clearTimeout(timeoutId);
        };
    }, []);


    // Memoized function for carousel items
    const getVisibleItems = useCallback(
        (): AnimatedChainItem[] => { // Explicitly define return type
            const visibleItems: AnimatedChainItem[] = [];
            if (totalItems === 0) return [];

            // Ensure visibleItemCount is an odd number for a clear center item
            const itemsToShow = visibleItemCount % 2 === 0 ? visibleItemCount + 1 : visibleItemCount;
            const half = Math.floor(itemsToShow / 2);

            for (let i = -half; i <= half; i++) {
                let index = currentIndex + i;
                if (index < 0) index += totalItems;
                if (index >= totalItems) index -= totalItems;

                visibleItems.push({
                    ...items[index],
                    originalIndex: index,
                    distanceFromCenter: i,
                });
            }
            return visibleItems;
        },
        [currentIndex, items, totalItems, visibleItemCount]
    );

    // Filtered list for search dropdown
    const filteredItems = useMemo(() => {
        return items.filter((item) =>
            item.name.toLowerCase().includes(searchTerm.toLowerCase())
        );
    }, [items, searchTerm]);

    // Handler for selecting an item from the dropdown
    const handleSelectChain = (id: ChainItem['id'], name: string) => {
        const index = items.findIndex((c) => c.id === id);
        if (index !== -1) {
            setCurrentIndex(index); // Jump to the selected item
            setIsPaused(true);       // Pause to highlight the selection
            if (onChainSelect) {
            }
        }
        setSearchTerm(name); // Set search term to the selected item's name
        setShowDropdown(false);
    };

    // The current item displayed in the center
    const currentItem = items[currentIndex];

    // --- JSX Render ---
    return (
        <div id='explore-section' className={` space-y-20
            ${className}`}>
            <div className='flex flex-col xl:flex-row 
            max-w-7xl mx-auto px-4 md:px-8 gap-12 justify-center items-center'>


                {/* Left Section - Chain Carousel (Hidden on smaller screens) */}
                <motion.div
                    className="relative w-full max-w-md xl:max-w-2xl h-[450px] 
                flex items-center justify-center hidden xl:flex -left-14"
                    onMouseEnter={() => !searchTerm && setIsPaused(true)}
                    onMouseLeave={() => !searchTerm && setIsPaused(false)}
                    initial={{ x: '-100%', opacity: 0 }}
                    animate={isInView ? { x: 0, opacity: 1 } : {}}
                    transition={{ type: 'spring', stiffness: 80, damping: 20, duration: 0.8 }}
                >
                    {/* Fading overlay to mask items */}
                    <div className="absolute inset-0 z-10 pointer-events-none">
                        <div className="absolute top-0 h-1/4 w-full bg-transparent"></div>
                        <div className="absolute bottom-0 h-1/4 w-full bg-transparent "></div>
                    </div>

                    {getVisibleItems().map((chain) => (
                        <CarouselItemCard
                            key={chain.id}
                            chain={chain} // Renamed prop to 'chain' for this component's context
                            side="left"
                        />
                    ))}
                </motion.div>

                {/* Middle Section - Text and Search Input */}
                <div className="flex flex-col text-center 2xl:text-center xl:text-center
                 gap-4 max-w-md">

                    {/* Currently Selected Item Display */}
                    {currentItem && (
                        <div className="flex flex-col items-center justify-center gap-0 mt-4">
                            <div className='p-2 bg-foreground rounded-full'>
                                {currentItem.logo ? (
                                    <img src={currentItem.logo} alt={`${currentItem.name} logo`} className="size-12 rounded-full object-cover" />
                                ) : (
                                    <currentItem.icon className="size-8 text-background" />
                                )}
                            </div>
                            <h3 className="text-xl xl:text-2xl font-bold text-foreground mt-2">
                                {currentItem.name}
                            </h3>
                            <p className="text-sm xl:text-lg text-gray-400">{currentItem.details || 'View Details'}</p>
                        </div>
                    )}

                    {/* Search Bar */}
                    <div className="mt-6 relative max-w-lg mx-auto xl:mx-0">
                        <div className="px-3 flex items-center relative">
                            <Input
                                type="text"
                                value={searchTerm}
                                placeholder="Search Items..."
                                onChange={(e) => {
                                    const val = e.target.value;
                                    setSearchTerm(val);
                                    setShowDropdown(val.length > 0);
                                    if (val === '') setIsPaused(false);
                                }}
                                onFocus={() => {
                                    if (searchTerm.length > 0) setShowDropdown(true);
                                    setIsPaused(true);
                                }}
                                onBlur={() => {
                                    // Wait briefly before hiding to allow click on dropdown item
                                    setTimeout(() => setShowDropdown(false), 200);
                                }}
                                className="flex-grow outline-none text-foreground bg-background px-4 
                            !placeholder-gray-800 text-lg rounded-full border-gray-500 pr-10 
                            pl-10 py-2 cursor-pointer border"
                            />
                            <Search className="absolute text-foreground w-5 h-5 left-6 pointer-events-none" />
                            {searchTerm && (
                                <button
                                    onClick={() => {
                                        setSearchTerm('');
                                        setShowDropdown(false);
                                        setIsPaused(false);
                                    }}
                                    className="absolute right-6 text-foreground hover:text-gray-300"
                                >
                                    <DeleteIcon />
                                </button>
                            )}
                        </div>

                        {/* Dropdown for search results */}
                        {showDropdown && filteredItems.length > 0 && (
                            <div className="absolute left-0 right-0 mt-2 bg-background 
                        rounded-lg border z-20 max-h-60 overflow-y-auto shadow-xl">
                                {filteredItems.slice(0, 10).map((chain) => (
                                    <div
                                        key={chain.id}
                                        // FIX: Use e.preventDefault() to stop browser's form validation/alert
                                        onMouseDown={(e) => {
                                            e.preventDefault();
                                            handleSelectChain(chain.id, chain.name);
                                        }}
                                        className="flex items-center gap-3 px-4 py-3 cursor-pointer 
                                    hover:bg-gray-100/10 transition-colors rounded-lg m-2"
                                    >
                                        {chain.logo ? (
                                            <img src={chain.logo} alt={`${chain.name} logo`} className="size-6 rounded-full object-cover" />
                                        ) : (
                                            <chain.icon size={24} className="text-primary" />
                                        )}
                                        <span className="text-foreground font-medium">{chain.name}</span>
                                        <span className="ml-auto text-sm text-gray-500">{chain.details}</span>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>

                {/* Right Section - Chain Carousel */}
                <motion.div
                    ref={rightSectionRef}
                    className="relative w-full max-w-md  xl:max-w-2xl h-[450px] 
                flex items-center justify-center -right-14"
                    onMouseEnter={() => !searchTerm && setIsPaused(true)}
                    onMouseLeave={() => !searchTerm && setIsPaused(false)}
                    initial={{ x: '100%', opacity: 0 }}
                    animate={isInView ? { x: 0, opacity: 1 } : {}}
                    transition={{ type: 'spring', stiffness: 80, damping: 20, duration: 0.8 }}
                >
                    {/* Fading overlay to mask items */}
                    <div className="absolute inset-0 z-10 pointer-events-none">
                        <div className="absolute top-0 h-1/4 w-full bg-transparent "></div>
                        <div className="absolute bottom-0 h-1/4 w-full bg-transparent "></div>
                    </div>

                    {getVisibleItems().map((chain) => (
                        <CarouselItemCard
                            key={chain.id}
                            chain={chain}
                            side="right"
                        />
                    ))}
                </motion.div>



            </div>

        </div >
    );
};

export default ChainCarousel;
```
--------------------------------------------------

### COMPONENT: infinite-drift
Category: 3D Elements
Description: A high-performance Three.js based image marquee with independent horizontal bands, custom vertex shaders for curvature effects, and smooth inertial scrolling. Ideal for hero sections or premium galleries.
URL: https://lightswind.com/components/infinite-drift
Import: import { InfiniteDrift } from "@/components/lightswind/infinite-drift"
Registry URL: https://lightswind.com/r/infinite-drift.json
Install Command: npx lightswind@latest add infinite-drift

Usage:
```tsx
import { InfiniteDrift } from "@/components/lightswind/infinite-drift";

const bands = [
  {
    speed: 1.0,
    rotation: 7,
    curveAmount: 40.0,
    images: ["/img1.jpg", "/img2.jpg", "/img3.jpg"],
  },
  {
    speed: 1.3,
    offsetY: -100,
    images: ["/img4.jpg", "/img5.jpg", "/img6.jpg"],
  }
];

export function Gallery() {
  return (
    <InfiniteDrift bands={bands} height={600} />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect } from "react";
import { cn } from "../lib/utils";

export interface InfiniteDriftBand {
  images: string[];
  speed?: number;
  rotation?: number;
  offsetY?: number;
  curveAmount?: number;
  curveDirection?: 1 | -1;
  rotationType?: "fromLeft" | "fromCenter";
}

export interface InfiniteDriftProps {
  bands?: InfiniteDriftBand[];
  height?: string | number;
  gap?: number;
  imageHeight?: number;
  bandHeight?: number;
  maxImageWidth?: number;
  inertia?: number;
  preserveOriginalRatios?: boolean;
  className?: string;
  children?: React.ReactNode;
}

const DEFAULT_BANDS: InfiniteDriftBand[] = [
  { offsetY: -220, speed: 1.0, rotation: 7, rotationType: "fromLeft", curveAmount: 40.0, curveDirection: 1, images: ["https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=400","https://images.unsplash.com/photo-1550684399-3f0f745771d1?w=400","https://images.unsplash.com/photo-1550684847-75bdda21cc95?w=400","https://images.unsplash.com/photo-1563089145-599997674d42?w=400"] },
  { offsetY: -110, speed: 1.3, rotation: 7, rotationType: "fromCenter", curveAmount: 35.0, curveDirection: 1, images: ["https://images.unsplash.com/photo-1557683316-973673baf926?w=400","https://images.unsplash.com/photo-1557683311-eac922347aa1?w=400","https://images.unsplash.com/photo-1557683325-3ba8f0df79de?w=400","https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400"] },
  { offsetY: 0, speed: 0.7, rotation: 7, curveAmount: 40.0, curveDirection: 1, images: ["https://images.unsplash.com/photo-1511447333849-2b89ae13b002?w=400","https://images.unsplash.com/photo-1536431311719-398b6704d4cc?w=400","https://images.unsplash.com/photo-1543966888-7c1dc482a810?w=400","https://images.unsplash.com/photo-1561070791-36c11767b26a?w=400"] },
  { offsetY: 110, speed: 1.2, rotation: 7, curveAmount: 40.0, curveDirection: 1, images: ["https://images.unsplash.com/photo-1493246507139-91e8bef99c02?w=400","https://images.unsplash.com/photo-1477346611705-65d1883cee1e?w=400","https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400","https://images.unsplash.com/photo-1561070791-0626bcd0516e?w=400"] },
  { offsetY: 220, speed: 0.9, rotation: 7, curveAmount: 35.0, curveDirection: 1, images: ["https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?w=400","https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400","https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=400","https://images.unsplash.com/photo-1557683316-973673baf926?w=400"] },
];

// Replicate GLSL mod() – always positive remainder
const glslMod = (a: number, b: number) => ((a % b) + b) % b;

// Replicate GLSL rotate2d() – rotate point (px,py) around centre (cx,cy)
const rotate2dPt = (px: number, py: number, cx: number, cy: number, angle: number): [number, number] => {
  const dx = px - cx, dy = py - cy, c = Math.cos(angle), s = Math.sin(angle);
  return [cx + c * dx - s * dy, cy + s * dx + c * dy];
};

interface BandState {
  config: InfiniteDriftBand;
  stripCanvas: HTMLCanvasElement;
  sequenceWidth: number;
  ready: boolean;
}

export const InfiniteDrift: React.FC<InfiniteDriftProps> = ({
  bands = DEFAULT_BANDS,
  height = 600,
  gap = 20,
  imageHeight = 100,
  bandHeight = 120,
  maxImageWidth = 300,
  inertia = 0.92,
  preserveOriginalRatios = true,
  className,
  children,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef    = useRef<HTMLCanvasElement>(null);
  const scrollState  = useRef({
    scrollY: 0, targetScrollY: 0, scrollVelocity: 0, isDragging: false, lastMouseY: 0,
  });

  useEffect(() => {
    if (!containerRef.current || !canvasRef.current) return;
    const container = containerRef.current;
    const canvas    = canvasRef.current;
    const dpr       = Math.min(window.devicePixelRatio, 2);

    const resize = () => {
      canvas.width  = container.clientWidth  * dpr;
      canvas.height = container.clientHeight * dpr;
      // Re-apply DPR scale after every resize – resizing resets the transform
      const c = canvas.getContext("2d");
      if (c) c.scale(dpr, dpr);
    };
    resize();

    const ctx = canvas.getContext("2d");
    if (!ctx) return; // guard: stale WebGL context from HMR or SSR

    // ---- Build one offscreen strip per band (3-clone texture atlas) ----
    const bandStates: BandState[] = bands.map((config) => ({
      config,
      stripCanvas: document.createElement("canvas"),
      sequenceWidth: 0,
      ready: false,
    }));

    const loadBand = async (bs: BandState) => {
      const { config } = bs;
      const imgs = await Promise.all(config.images.map((url) =>
        new Promise<HTMLImageElement | HTMLCanvasElement>((resolve) => {
          const img = new Image();
          img.crossOrigin = "anonymous";
          img.onload  = () => resolve(img);
          img.onerror = () => {
            const fb = document.createElement("canvas");
            fb.width = 400; fb.height = 300;
            const fc = fb.getContext("2d")!;
            fc.fillStyle = `hsl(${Math.random() * 360},70%,60%)`;
            fc.fillRect(0, 0, 400, 300);
            resolve(fb);
          };
          img.src = url;
        })
      ));

      let seqW = 0;
      const infos = imgs.map((src) => {
        const nw = (src as HTMLImageElement).naturalWidth  || (src as HTMLCanvasElement).width;
        const nh = (src as HTMLImageElement).naturalHeight || (src as HTMLCanvasElement).height;
        const ratio = nw / nh || 1.5;
        let w: number, h: number;
        if (preserveOriginalRatios) {
          h = imageHeight; w = Math.round(h * ratio);
          if (w > maxImageWidth) { w = maxImageWidth; h = Math.round(w / ratio); }
        } else {
          h = imageHeight; w = Math.round(h * 1.5);
        }
        seqW += w + gap;
        return { src, w, h };
      });
      seqW -= gap; // remove trailing gap

      const CLONES = 3;
      const strip  = bs.stripCanvas;
      strip.width  = seqW * CLONES;
      strip.height = bandHeight;
      const sc     = strip.getContext("2d")!;
      let cx2 = 0;
      for (let c = 0; c < CLONES; c++) {
        for (const info of infos) {
          sc.drawImage(info.src, cx2, (bandHeight - info.h) / 2, info.w, info.h);
          cx2 += info.w + gap;
        }
      }
      bs.sequenceWidth = seqW;
      bs.ready = true;
    };

    void Promise.all(bandStates.map(loadBand));

    // ---- Render one band – exact GLSL shader math in Canvas 2D ----
    // Shader replication:
    //   curveOffset(x) = (0.5 - 4*(nx-0.5)^2) * curveAmount * curveDirection
    //   rotation: rotate point around pivot before texture lookup
    //   wrapping:  glslMod(srcX + scrollPos, sequenceWidth)
    const drawBand = (bs: BandState, W: number, H: number, scrollY: number) => {
      if (!bs.ready) return;
      const { config, stripCanvas, sequenceWidth } = bs;

      const rotRad      = ((config.rotation || 0) * Math.PI) / 180;
      const hasRot      = Math.abs(rotRad) > 0.0001;
      const curveAmount = config.curveAmount  ?? 0;
      const curveDir    = config.curveDirection ?? 1;
      const speed       = config.speed  ?? 1.0;
      const offsetY     = config.offsetY ?? 0;
      const fromLeft    = config.rotationType === "fromLeft";

      // Mirrors shader: bandTopBase = (uResolution.y - uBandHeight) * 0.5 + uOffsetY
      const bandTopBase = (H - bandHeight) * 0.5 + offsetY;
      const bandCenterY = bandTopBase + bandHeight * 0.5;
      const pivotX      = fromLeft ? 0 : W * 0.5;
      const pivotY      = bandCenterY;
      const scrollPos   = scrollY * speed;

      ctx.save();

      // Clip to band region (with curvature padding + rotation padding)
      ctx.beginPath();
      if (hasRot) {
        const pad = curveAmount + 4;
        const corners: [number, number][] = [
          [0,     bandTopBase - pad],
          [W,     bandTopBase - pad],
          [W,     bandTopBase + bandHeight + pad],
          [0,     bandTopBase + bandHeight + pad],
        ];
        corners.forEach(([cx_, cy_], i) => {
          const [rx, ry] = rotate2dPt(cx_, cy_, pivotX, pivotY, -rotRad);
          if (i === 0) ctx.moveTo(rx, ry); else ctx.lineTo(rx, ry);
        });
        ctx.closePath();
      } else {
        const pad = curveAmount + 4;
        ctx.rect(0, bandTopBase - pad, W, bandHeight + pad * 2);
      }
      ctx.clip();

      // Column-slice loop – replicates per-pixel shader logic
      for (let x = 0; x < W; x++) {
        // 1. Parabolic curvature: curveOffset = (0.5 - 4*(nx-0.5)^2) * amount * dir
        const nx          = x / W;
        const curveFactor = 4.0 * (nx - 0.5) * (nx - 0.5);
        const curveOffset = (0.5 - curveFactor) * curveAmount * curveDir;
        const bandTop     = bandTopBase + curveOffset;

        // 2. Rotation inverse – find source x in strip texture
        let srcX = x;
        if (hasRot) {
          const [rx] = rotate2dPt(x, bandCenterY, pivotX, pivotY, rotRad);
          srcX = rx;
        }

        // 3. Infinite wrapping via GLSL mod
        const wrappedX = glslMod(srcX + scrollPos, sequenceWidth);
        const texSrcX  = wrappedX + sequenceWidth; // use 2nd tile (of 3) for stability

        if (texSrcX < 0 || texSrcX >= stripCanvas.width) continue;

        // 4. Draw 1-px column from strip onto output at curved position
        ctx.drawImage(stripCanvas, texSrcX, 0, 1, bandHeight, x, bandTop, 1, bandHeight);
      }

      ctx.restore();
    };

    // ---- Animation loop ----
    let animId: number;
    const animate = () => {
      animId = requestAnimationFrame(animate);
      const W = container.clientWidth, H = container.clientHeight;
      const state = scrollState.current;

      if (!state.isDragging) {
        state.targetScrollY  += state.scrollVelocity;
        state.scrollVelocity *= inertia;
        if (Math.abs(state.scrollVelocity) < 0.1) state.scrollVelocity = 0;
      }
      state.scrollY += (state.targetScrollY - state.scrollY) * 0.1;

      ctx.clearRect(0, 0, W, H);
      for (const bs of bandStates) drawBand(bs, W, H, state.scrollY);
    };
    animate();

    // ---- Event handlers – identical to original ----
    const handleWheel = (e: WheelEvent) => {
      e.preventDefault();
      scrollState.current.targetScrollY  += e.deltaY;
      scrollState.current.scrollVelocity  = e.deltaY * 0.15;
    };

    let lastScrollTop = window.scrollY;
    const handleGlobalScroll = () => {
      const c = window.scrollY, d = c - lastScrollTop;
      lastScrollTop = c;
      scrollState.current.targetScrollY  += d * 2.5;
      scrollState.current.scrollVelocity  = d * 0.3;
    };

    const handleMouseDown = (e: MouseEvent) => {
      scrollState.current.isDragging    = true;
      scrollState.current.lastMouseY    = e.clientY;
      scrollState.current.scrollVelocity = 0;
    };

    const handleMouseMove = (e: MouseEvent) => {
      if (!scrollState.current.isDragging) return;
      const d = e.clientY - scrollState.current.lastMouseY;
      scrollState.current.targetScrollY  += d * 2.0;
      scrollState.current.lastMouseY      = e.clientY;
      scrollState.current.scrollVelocity  = d * 0.25;
    };

    const handleMouseUp = () => { scrollState.current.isDragging = false; };

    const handleResize = () => { resize(); }; // scale is re-applied inside resize()

    const handleTouchStart = (e: TouchEvent) => {
      scrollState.current.lastMouseY = e.touches[0].clientY;
      scrollState.current.isDragging = true;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (!scrollState.current.isDragging) return;
      const d = e.touches[0].clientY - scrollState.current.lastMouseY;
      scrollState.current.targetScrollY  += d * 2.5;
      scrollState.current.lastMouseY      = e.touches[0].clientY;
      scrollState.current.scrollVelocity  = d * 0.3;
    };

    container.addEventListener("wheel",      handleWheel,        { passive: false });
    container.addEventListener("mousedown",  handleMouseDown);
    window.addEventListener("mousemove",     handleMouseMove);
    window.addEventListener("mouseup",       handleMouseUp);
    window.addEventListener("resize",        handleResize);
    window.addEventListener("scroll",        handleGlobalScroll, { passive: true });
    container.addEventListener("touchstart", handleTouchStart,   { passive: false });
    container.addEventListener("touchmove",  handleTouchMove,    { passive: false });
    container.addEventListener("touchend",   handleMouseUp);

    return () => {
      cancelAnimationFrame(animId);
      container.removeEventListener("wheel",      handleWheel);
      container.removeEventListener("mousedown",  handleMouseDown);
      window.removeEventListener("mousemove",     handleMouseMove);
      window.removeEventListener("mouseup",       handleMouseUp);
      window.removeEventListener("resize",        handleResize);
      window.removeEventListener("scroll",        handleGlobalScroll);
      container.removeEventListener("touchstart", handleTouchStart);
      container.removeEventListener("touchmove",  handleTouchMove);
      container.removeEventListener("touchend",   handleMouseUp);
    };
  }, [bands, gap, imageHeight, bandHeight, maxImageWidth, inertia, preserveOriginalRatios]);

  return (
    <div
      ref={containerRef}
      className={cn("relative w-full overflow-hidden bg-background cursor-grab active:cursor-grabbing", className)}
      style={{ height }}
    >
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
      {children}
    </div>
  );
};

export default InfiniteDrift;

```
--------------------------------------------------

### COMPONENT: hanging-id-card
Category: 3D Elements
Description: A physics-based ID card component that hangs from a rope at the top. Features realistic pendulum physics with spring return, drag interaction, and gravity simulation. Click or drag the card left/right and watch it swing with authentic momentum before settling back to center.
URL: https://lightswind.com/components/hanging-id-card
Import: import { HangingIdCard } from "@/components/lightswind/hanging-id-card"
Registry URL: https://lightswind.com/r/hanging-id-card.json
Install Command: npx lightswind@latest add hanging-id-card

Usage:
```tsx
import { HangingIdCard } from "@/components/lightswind/hanging-id-card";

export default function App() {
  return (
    <div className="flex items-center justify-center p-20">
      <HangingIdCard
        name="John Lightswind"
        role="UI Developer"
        badgeId="LW-2025"
        accentColor="#173eff"
        ropeLength={90}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useEffect, useCallback, useState } from "react";
import { cn } from "@/components/lib/utils";

// ─── Physics constants ────────────────────────────────────────────────────────
const SPRING_K = 0;          // Real pendulum relies on gravity
const DAMPING  = 0.92;       // Air resistance for smooth natural swing
const GRAVITY  = 3000;       // Gravity scalar for snappy momentum
const MASS     = 1;

interface CardPhysicsState {
  angle:  number;   // radians from vertical
  vel:    number;   // angular velocity  rad/s
}

export interface HangingIdCardProps {
  children?: React.ReactNode;
  ropeLength?: number;
  ropeColor?: string;
  className?: string;
  name?: string;
  role?: string;
  badgeId?: string;
  accentColor?: string;
}

// ─── SVG Black Lanyard Rope & Metal Lock Clip ──────────────────────────────────
const Lanyard = ({ length, color }: { length: number; color: string }) => {
  const clampY = length;
  const ringY = length + 10;
  const hookY = length + 18;

  return (
    <svg
      width="44"
      height={length + 38}
      viewBox={`0 0 44 ${length + 38}`}
      style={{ display: "block", margin: "0 auto", overflow: "visible" }}
    >
      <defs>
        {/* Metal clamp & ring gradient */}
        <linearGradient id="metalDark" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#71717a" />
          <stop offset="35%" stopColor="#27272a" />
          <stop offset="70%" stopColor="#52525b" />
          <stop offset="100%" stopColor="#18181b" />
        </linearGradient>

        {/* Hook gradient */}
        <linearGradient id="hookDark" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#52525b" />
          <stop offset="40%" stopColor="#18181b" />
          <stop offset="100%" stopColor="#3f3f46" />
        </linearGradient>

        {/* Ribbon fabric texture shading */}
        <linearGradient id="strapHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#000000" stopOpacity="0.45" />
          <stop offset="25%" stopColor="#ffffff" stopOpacity="0.12" />
          <stop offset="75%" stopColor="#ffffff" stopOpacity="0.05" />
          <stop offset="100%" stopColor="#000000" stopOpacity="0.5" />
        </linearGradient>
      </defs>

      {/* Main Lanyard Ribbon Strap */}
      <rect
        x="12"
        y="0"
        width="20"
        height={clampY + 4}
        rx="2"
        fill={color || "#18181b"}
      />
      {/* Strap fabric depth shading */}
      <rect
        x="12"
        y="0"
        width="20"
        height={clampY + 4}
        rx="2"
        fill="url(#strapHighlight)"
      />

      {/* Strap side stitch lines */}
      <line
        x1="13.5"
        y1="0"
        x2="13.5"
        y2={clampY + 4}
        stroke="#ffffff"
        strokeOpacity="0.15"
        strokeWidth="0.75"
        strokeDasharray="3 2"
      />
      <line
        x1="30.5"
        y1="0"
        x2="30.5"
        y2={clampY + 4}
        stroke="#ffffff"
        strokeOpacity="0.15"
        strokeWidth="0.75"
        strokeDasharray="3 2"
      />

      {/* Metallic Ribbon Crimp Clamp (Base of Strap) */}
      <rect
        x="10"
        y={clampY}
        width="24"
        height="10"
        rx="2.5"
        fill="url(#metalDark)"
        stroke="#18181b"
        strokeWidth="0.8"
      />
      {/* Metallic Screws/Rivets on Clamp */}
      <circle cx="13.5" cy={clampY + 5} r="1.3" fill="#a1a1aa" />
      <circle cx="30.5" cy={clampY + 5} r="1.3" fill="#a1a1aa" />

      {/* Swivel Ring Loop */}
      <path
        d={`M 15 ${clampY + 9} C 15 ${ringY + 6}, 29 ${ringY + 6}, 29 ${clampY + 9}`}
        fill="none"
        stroke="url(#metalDark)"
        strokeWidth="3"
        strokeLinecap="round"
      />

      {/* Swivel Joint */}
      <rect
        x="19"
        y={ringY + 2}
        width="6"
        height="6"
        rx="1"
        fill="url(#metalDark)"
      />

      {/* Metal Snap Hook / Lock Clip */}
      <path
        d={`M 20 ${ringY + 7} 
           L 20 ${hookY + 6} 
           C 20 ${hookY + 15}, 24 ${hookY + 15}, 24 ${hookY + 6} 
           L 24 ${ringY + 7}`}
        fill="none"
        stroke="url(#hookDark)"
        strokeWidth="3.5"
        strokeLinecap="round"
      />
      
      {/* Spring Clip Latch Lever */}
      <line
        x1="20.5"
        y1={hookY + 1}
        x2="20.5"
        y2={hookY + 10}
        stroke="#d4d4d8"
        strokeWidth="1.2"
      />
    </svg>
  );
};

// ─── Main Component ───────────────────────────────────────────────────────────
export const HangingIdCard = ({
  children,
  ropeLength  = 140,
  ropeColor   = "#18181b",
  className,
  name        = "John Doe",
  role        = "Product Designer",
  badgeId     = "ID-84920",
  accentColor = "#2563eb",
}: HangingIdCardProps) => {
  const physRef      = useRef<CardPhysicsState>({ angle: 0, vel: 0 });
  const rafRef       = useRef<number | null>(null);
  const prevTimeRef  = useRef<number | null>(null);
  const prevAngleRef = useRef<number>(0);
  const isDraggingRef= useRef(false);

  const [angle, setAngle] = useState(0);
  const [, setIsDragState] = useState(false);
  const dragStartX   = useRef(0);
  const dragAngle0   = useRef(0);

  // ── Physics loop ────────────────────────────────────────────────────────────
  const tick = useCallback((now: number) => {
    if (prevTimeRef.current === null) { prevTimeRef.current = now; }
    const dt = Math.min((now - prevTimeRef.current) / 1000, 0.05); // cap at 50ms
    prevTimeRef.current = now;

    const s = physRef.current;
    if (!isDraggingRef.current) {
      // Realistic pendulum: L is approximate center of mass
      const L = ropeLength + 100; 
      const torque =
        -(GRAVITY / L)    * Math.sin(s.angle) -
        (DAMPING  / MASS) * s.vel             -
        (SPRING_K / MASS) * s.angle;

      s.vel   += torque * dt;
      s.angle += s.vel  * dt;

      setAngle(s.angle);

      if (Math.abs(s.angle) > 0.001 || Math.abs(s.vel) > 0.001) {
        rafRef.current = requestAnimationFrame(tick);
      } else {
        // settled perfectly at bottom
        s.angle = 0; s.vel = 0;
        setAngle(0);
      }
    } else {
      // Track velocity while dragging so we can "flick" it
      if (dt > 0) {
        s.vel = (s.angle - prevAngleRef.current) / dt;
      }
      prevAngleRef.current = s.angle;
      rafRef.current = requestAnimationFrame(tick);
    }
  }, [ropeLength]);

  const startPhysics = useCallback(() => {
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    prevTimeRef.current = null;
    rafRef.current = requestAnimationFrame(tick);
  }, [tick]);

  // ── Pointer events ──────────────────────────────────────────────────────────
  const onPointerDown = useCallback((e: React.PointerEvent) => {
    e.currentTarget.setPointerCapture(e.pointerId);
    isDraggingRef.current = true;
    setIsDragState(true);
    dragStartX.current   = e.clientX;
    dragAngle0.current   = physRef.current.angle;
    prevAngleRef.current = physRef.current.angle;
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    prevTimeRef.current = null;
    rafRef.current = requestAnimationFrame(tick);
  }, [tick]);

  const onPointerMove = useCallback((e: React.PointerEvent) => {
    if (!isDraggingRef.current) return;
    const dx = e.clientX - dragStartX.current;
    const L = ropeLength + 100; 
    const newAngle = dragAngle0.current - dx / L;
    const clamped  = Math.max(-1.4, Math.min(1.4, newAngle));
    physRef.current.angle = clamped;
    setAngle(clamped);
  }, [ropeLength]);

  const onPointerUp = useCallback((e: React.PointerEvent) => {
    e.currentTarget.releasePointerCapture(e.pointerId);
    isDraggingRef.current = false;
    setIsDragState(false);
  }, []);

  // ── Click impulse (tap) ─────────────────────────────────────────────────────
  const onCardClick = useCallback(() => {
    if (Math.abs(physRef.current.vel) < 0.1 && Math.abs(physRef.current.angle) < 0.05) {
      physRef.current.vel = 4.0; // Give it a satisfying push
      startPhysics();
    }
  }, [startPhysics]);

  useEffect(() => () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }, []);

  const cardRotateDeg = angle * (180 / Math.PI);

  return (
    <div
      className={cn("flex flex-col items-center select-none", className)}
      style={{ touchAction: "none" }}
    >
      {/* Ceiling anchor pin */}
      <div
        className="w-3.5 h-3.5 rounded-full shadow-md z-10 relative bg-zinc-900 border border-zinc-700"
      />

      {/* The Pendulum Assembly (Rope + Lock Clip + Card) */}
      <div 
        className="flex flex-col items-center cursor-grab active:cursor-grabbing"
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onClick={onCardClick}
        style={{
          transform: `rotate(${cardRotateDeg}deg)`,
          transformOrigin: "top center",
          willChange: "transform",
          marginTop: "-6px"
        }}
      >
        {/* Lanyard Rope with Lock Clip */}
        <div style={{ pointerEvents: "none" }}>
          <Lanyard length={ropeLength} color={ropeColor} />
        </div>

        {/* ID Card */}
        <div className="relative w-52 rounded-2xl overflow-hidden shadow-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-900 pointer-events-none mt-[-16px]">
          {/* Punched Slot Hole for Lanyard Clip */}
          <div className="flex justify-center pt-2.5 pb-1 bg-zinc-100 dark:bg-zinc-800/80 border-b border-zinc-200/80 dark:border-zinc-800">
            <div className="w-8 h-2.5 rounded-full bg-zinc-950 dark:bg-black border border-zinc-400/50 dark:border-zinc-700 shadow-inner flex items-center justify-center">
              <div className="w-6 h-1 rounded-full bg-zinc-900 dark:bg-zinc-950 opacity-90" />
            </div>
          </div>

          {children ?? (
            <div className="flex flex-col h-full">
              {/* Card Header Banner */}
              <div
                className="px-4 pt-3 pb-4 flex flex-col items-center gap-2 relative"
                style={{ background: `linear-gradient(135deg, ${accentColor} 0%, #1e1b4b 100%)` }}
              >
                {/* Security Chip Icon */}
                <div className="absolute top-2.5 left-3 w-6 h-5 rounded bg-amber-400/90 border border-amber-500/80 shadow-sm flex items-center justify-center">
                  <div className="w-4 h-3 border border-amber-700/40 rounded-[1px] grid grid-cols-2 gap-[1px] p-[1px]">
                    <div className="bg-amber-600/40" />
                    <div className="bg-amber-600/40" />
                    <div className="bg-amber-600/40" />
                    <div className="bg-amber-600/40" />
                  </div>
                </div>

                {/* User Profile Avatar (No Lightswind Logo) */}
                <div className="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 backdrop-blur-md mt-1 border border-white/30 shadow-md">
                  <svg className="w-8 h-8 text-white/90" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                  </svg>
                </div>
              </div>

              {/* Card Body */}
              <div className="bg-white dark:bg-zinc-900 px-4 py-4 flex flex-col items-center gap-1.5 flex-1">
                <p className="text-sm font-bold text-zinc-900 dark:text-white text-center leading-tight">
                  {name}
                </p>
                <p className="text-[11px] text-zinc-500 dark:text-zinc-400 font-medium">
                  {role}
                </p>

                <div className="my-1.5 w-full border-t border-zinc-100 dark:border-zinc-800" />

                {/* Barcode */}
                <div className="flex gap-[2px] items-end h-6 px-1">
                  {Array.from({ length: 26 }).map((_, i) => (
                    <div
                      key={i}
                      className="bg-zinc-800 dark:bg-zinc-200 rounded-[1px]"
                      style={{
                        width: i % 3 === 0 ? "3px" : "1.5px",
                        height: `${50 + Math.sin(i * 1.3) * 35}%`,
                      }}
                    />
                  ))}
                </div>

                <p
                  className="text-[10px] font-mono font-bold tracking-widest mt-0.5"
                  style={{ color: accentColor }}
                >
                  {badgeId}
                </p>

                {/* Status badge */}
                <div
                  className="mt-1 px-3 py-0.5 rounded-full text-[9px] font-bold text-white uppercase tracking-widest"
                  style={{ background: accentColor }}
                >
                  ACTIVE
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Drag hint */}
      <p className="mt-8 text-[11px] text-zinc-400 dark:text-zinc-600 font-medium select-none pointer-events-none">
        Drag or click the card
      </p>
    </div>
  );
};

export default HangingIdCard;


```
--------------------------------------------------

### COMPONENT: plasma-globe
Category: 3D Elements
Description: A dynamic and visually striking plasma globe background component built with React and OGL. It renders a fully animated plasma sphere with multiple filaments, supporting real-time mouse interaction, speed, and intensity control. The background is transparent by default, allowing users to overlay any custom background color.
URL: https://lightswind.com/components/plasma-globe
Import: import PlasmaGlobe from '@/components/PlasmaGlobe';
Registry URL: https://lightswind.com/r/plasma-globe.json
Install Command: npx lightswind@latest add plasma-globe

Usage:
```tsx
import PlasmaGlobe from '@/components/PlasmaGlobe';

<PlasmaGlobe 
  speed={1.2} 
  intensity={1.5} 
/>
```

Source Code:
```tsx
// PlasmaGlobe.tsx
"use client";

import React, { useEffect, useRef } from "react";
import { Renderer, Program, Mesh, Triangle } from "ogl";

interface PlasmaGlobeProps {
  speed?: number; // global time speed multiplier
  intensity?: number; // color intensity multiplier
}

const VERTEX_SHADER = `#version 300 es
in vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

/*
  Adapted & simplified plasma globe fragment shader (from Shadertoy-style code).
  Replaces texture-based noise with small procedural noise functions so it
  runs without external textures. Uses uniforms:
    - uTime (float)
    - uResolution (vec2)
    - uMouse (vec2)
    - uSpeed (float)
    - uIntensity (float)

  NOTE: keep an eye on precision and performance on low-end GPUs.
*/
const FRAGMENT_SHADER = `#version 300 es
precision highp float;
out vec4 fragColor;

uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;
uniform float uSpeed;
uniform float uIntensity;

#define NUM_RAYS 13.0
#define VOLUMETRIC_STEPS 19
#define MAX_ITER 35
#define FAR 6.0

// small 2x2 rotation matrix
mat2 mm2(float a){
  float c = cos(a), s = sin(a);
  return mat2(c, -s, s, c);
}

// simple hash-based random
float hash1(float n){ return fract(sin(n)*43758.5453); }
float hash2(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }

// value noise from vec3 -> float (cheap, not high quality but ok)
float noise3(vec3 p){
  // grid cell
  vec3 ip = floor(p);
  vec3 fp = fract(p);
  fp = fp*fp*(3.0-2.0*fp);

  float n000 = hash2(ip.xy + ip.z*7.0);
  float n100 = hash2(ip.xy + vec2(1.0,0.0) + ip.z*7.0);
  float n010 = hash2(ip.xy + vec2(0.0,1.0) + ip.z*7.0);
  float n110 = hash2(ip.xy + vec2(1.0,1.0) + ip.z*7.0);

  float nx0 = mix(n000, n100, fp.x);
  float nx1 = mix(n010, n110, fp.x);
  float nxy = mix(nx0, nx1, fp.y);

  // incorporate z as small modulation using hash
  float nz = mix(nxy, hash1(ip.z + 1.0), fp.z);
  return nz;
}

// light-weight fractal noise (based on noise3)
float flow(vec3 p, float t){
  float rz = 0.0;
  vec3 bp = p;
  float z = 2.0;
  // a few octaves
  for (int i = 1; i < 5; i++){
    p += t * 0.1;
    rz += (sin(noise3(p + t*0.8) * 6.0) * 0.5 + 0.5) / z;
    p = mix(bp, p, 0.6);
    z *= 2.0;
    p *= 2.01;
    p *= mat3(
      0.00,  0.80,  0.60,
     -0.80,  0.36, -0.48,
     -0.60, -0.48,  0.64
    );
  }
  return rz;
}

// helper used to create wavy variations (low-frequency)
float sins(float x, float t){
  float rz = 0.0;
  float z = 2.0;
  for (int i = 0; i < 3; i++){
    rz += abs(fract(x * 1.4) - 0.5) / z;
    x *= 1.3;
    z *= 1.15;
    x -= t * 0.65 * z;
  }
  return rz;
}

float segm(vec3 p, vec3 a, vec3 b){
  vec3 pa = p - a;
  vec3 ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h) * 0.5;
}

vec3 path(float i, float d, float t){
  // produce a pseudo-random endpoint on unit sphere influenced by i and d
  float sns2 = sins(d + i * 0.5, t) * 0.22;
  float sns = sins(d + i * 0.6, t) * 0.21;
  float a1 = (hash1(i * 10.569) - 0.5) * 6.2 + sns2;
  float a2 = (hash1(i * 4.732) - 0.5) * 6.2 + sns;
  vec3 en = vec3(0.0, 0.0, 1.0);
  en.xz *= mat2(cos(a1), -sin(a1), sin(a1), cos(a1));
  en.xy *= mat2(cos(a2), -sin(a2), sin(a2), cos(a2));
  return en;
}

vec2 map(vec3 p, float i, float t){
  float lp = length(p);
  vec3 bg = vec3(0.0);
  vec3 en = path(i, lp, t);
  float ins = smoothstep(0.11, 0.46, lp);
  float outs = 0.15 + smoothstep(0.0, 0.15, abs(lp - 1.0));
  p *= ins * outs;
  float id = ins * outs;
  float rz = segm(p, bg, en) - 0.011;
  return vec2(rz, id);
}

// sphere-ray intersection helper
vec2 iSphere2(vec3 ro, vec3 rd){
  vec3 oc = ro;
  float b = dot(oc, rd);
  float c = dot(oc, oc) - 1.0;
  float h = b*b - c;
  if (h < 0.0) return vec2(-1.0);
  return vec2((-b - sqrt(h)), (-b + sqrt(h)));
}

// volumetric march (accumulates light along a ray)
vec3 vmarch(vec3 ro, vec3 rd, float j, vec3 orig, float t){
  vec3 p = ro;
  vec3 sum = vec3(0.0);
  for (int i = 0; i < VOLUMETRIC_STEPS; i++){
    vec2 r = map(p, j, t);
    p += rd * 0.03;
    float lp = length(p);
    // create color base per-step
    vec3 col = sin(vec3(1.05, 2.5, 1.52) * 3.94 + r.y) * 0.85 + 0.4;
    col *= smoothstep(0.0, 0.015, -r.x);
    col *= smoothstep(0.04, 0.2, abs(lp - 1.1));
    col *= smoothstep(0.1, 0.34, lp);
    // noise modulation
    float n = noise3(vec3(lp * 2.0 + j * 13.0 + t * 5.0));
    // attenuate with distance from origin and add
    float denom = max(0.0001, log(max(0.0001, distance(p, orig) - 2.0)) + 0.75);
    sum += abs(col) * 5.0 * (1.2 - n * 1.1) / denom;
  }
  return sum;
}

// ray-marching distance estimator to sphere-like structures
float march(vec3 ro, vec3 rd, float startf, float maxd, float j, float t){
  float precis = 0.001;
  float h = 0.5;
  float d = startf;
  for (int i = 0; i < MAX_ITER; i++){
    if (abs(h) < precis || d > maxd) break;
    d += h * 1.2;
    float res = map(ro + rd * d, j, t).x;
    h = res;
  }
  return d;
}

void main(){
  // Normalized coords (-0.5..0.5)
  vec2 uv = (gl_FragCoord.xy / uResolution.xy) - 0.5;
  uv.x *= uResolution.x / uResolution.y;
  vec2 um = (uMouse.xy / uResolution.xy) - 0.5;

  // camera setup
  vec3 ro = vec3(0.0, 0.0, 5.0);
  vec3 rd = normalize(vec3(uv * 0.7, -1.5));
  mat2 mx = mm2(uTime * 0.4 + um.x * 6.0);
  mat2 my = mm2(uTime * 0.3 + um.y * 6.0);
  ro.xz *= mx; rd.xz *= mx;
  ro.xy *= my; rd.xy *= my;

  vec3 bro = ro;
  vec3 brd = rd;

  vec3 col = vec3(0.0);

  // multiple rays to create many filaments
  for (float j = 1.0; j < NUM_RAYS + 1.0; j++){
    ro = bro;
    rd = brd;
    mat2 mm = mm2((uTime * 0.1 + ((j + 1.0) * 5.1)) * j * 0.25);
    ro.xy *= mm; rd.xy *= mm;
    ro.xz *= mm; rd.xz *= mm;
    float rz = march(ro, rd, 2.5, FAR, j, uTime);
    if (rz >= FAR) continue;
    vec3 pos = ro + rz * rd;
    col = max(col, vmarch(pos, rd, j, bro, uTime));
  }

  ro = bro;
  rd = brd;
  vec2 sph = iSphere2(ro, rd);

  if (sph.x > 0.0){
    vec3 pos = ro + rd * sph.x;
    vec3 pos2 = ro + rd * sph.y;
    vec3 rf = reflect(rd, normalize(pos));
    vec3 rf2 = reflect(rd, normalize(pos2));
    float nz = (-log(abs(flow(rf * 1.2, uTime) - 0.01) + 0.00001));
    float nz2 = (-log(abs(flow(rf2 * 1.2, -uTime) - 0.01) + 0.00001));
    col += (0.1 * nz * nz * vec3(0.12, 0.12, 0.5) + 0.05 * nz2 * nz2 * vec3(0.55, 0.2, 0.55)) * 0.8;
  }

  // final tone mapping & intensity
  col *= (1.0 + uIntensity * 0.6);
  col = pow(clamp(col, 0.0, 10.0), vec3(1.5));
  float alpha = clamp(max(col.r, max(col.g, col.b)), 0.0, 1.0);
  fragColor = vec4(col * 1.3, alpha);
}
`;

export default function PlasmaGlobe({
  speed = 1.0,
  intensity = 1.0,
}: PlasmaGlobeProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const mouseRef = useRef({ x: 0, y: 0 });

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // create renderer
    const renderer = new Renderer({ alpha: true, antialias: true });
    const gl = renderer.gl;
    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    // geometry
    const geometry = new Triangle(gl);

    // program
    const program = new Program(gl, {
      vertex: VERTEX_SHADER,
      fragment: FRAGMENT_SHADER,
      uniforms: {
        uTime: { value: 0 },
        uResolution: { value: [container.offsetWidth, container.offsetHeight] },
        uMouse: { value: [0, 0] },
        uSpeed: { value: speed },
        uIntensity: { value: intensity },
      },
    });

    const mesh = new Mesh(gl, { geometry, program });
    container.appendChild(gl.canvas);

    // resize
    const resize = () => {
      const width = container.offsetWidth;
      const height = container.offsetHeight;
      renderer.setSize(width, height);
      program.uniforms.uResolution.value = [width, height];
    };
    window.addEventListener("resize", resize);
    resize();

    // mouse smoothing
    const onMouse = (e: MouseEvent) => {
      mouseRef.current.x += (e.clientX - mouseRef.current.x) * 0.08;
      mouseRef.current.y += (e.clientY - mouseRef.current.y) * 0.08;
    };
    window.addEventListener("mousemove", onMouse);

    let rafId = 0;
    const loop = (t: number) => {
      rafId = requestAnimationFrame(loop);
      // uTime passed in seconds, multiplied by speed
      program.uniforms.uTime.value = (t * 0.001) * speed;
      program.uniforms.uMouse.value = [mouseRef.current.x, mouseRef.current.y];
      program.uniforms.uIntensity.value = intensity;
      renderer.render({ scene: mesh });
    };
    rafId = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener("resize", resize);
      window.removeEventListener("mousemove", onMouse);
      if (gl.canvas.parentNode === container) container.removeChild(gl.canvas);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [speed, intensity]);

  return (
    <div
      ref={containerRef}
      className="w-full h-full absolute inset-0 pointer-events-none 
            !rounded-xl !bg-transparent"
      style={{ transform: "scale(0.50)", borderRadius: '50px' }} // 0.75 = 75%
    />

  );
}

```
--------------------------------------------------

### COMPONENT: stylish-carousel
Category: 3D Elements
Description: A visually stunning image carousel built with Framer Motion spring physics. Slides fan out in a rotating, scaled perspective giving a cinematic fan-out effect. Fully keyboard-accessible, swipe-enabled on touch devices, supports auto-play, click-to-navigate, dot indicators, directional arrow controls, and extensive prop customisation.
URL: https://lightswind.com/components/stylish-carousel
Import: import StylishCarousel from "@/components/lightswind/stylish-carousel"
Registry URL: https://lightswind.com/r/stylish-carousel.json
Install Command: npx lightswind@latest add stylish-carousel

Usage:
```tsx
import StylishCarousel from "@/components/lightswind/stylish-carousel";

const items = [
  { src: "https://images.unsplash.com/photo-1234...", title: "Mountain View" },
  { src: "https://images.unsplash.com/photo-5678...", title: "Seascape" },
  { src: "https://images.unsplash.com/photo-9012...", title: "City Lights" },
];

export function CarouselDemo() {
  return (
    <StylishCarousel
      items={items}
      initialIndex={1}
      showArrows
      showDots
      clickToNavigate
      autoPlay={4000}
      onIndexChange={(i) => console.log("Active:", i)}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useCallback, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";

// ─────────────────────────────────────────────────────────────────────────────
// Types
// ─────────────────────────────────────────────────────────────────────────────

export interface StylishCarouselItem {
  src: string;
  title?: string;
  alt?: string;
}

export interface StylishCarouselProps {
  /** Array of items to display in the carousel */
  items: StylishCarouselItem[];
  /** Starting active index (0-based) */
  initialIndex?: number;
  /** Size of each slide (CSS clamp value or fixed px). Defaults to responsive clamp. */
  slideSize?: string;
  /** Rotation angle (degrees) applied per offset position */
  rotationDegrees?: number;
  /** Scale of non-active slides (0–1). Defaults to 0.6 */
  inactiveScale?: number;
  /** Y-offset multiplier for perspective fan-out. Defaults to 50 */
  yOffsetPercent?: number;
  /** Spring animation bounce (0–1). Defaults to 0.15 */
  springBounce?: number;
  /** Spring animation duration in seconds. Defaults to 0.8 */
  springDuration?: number;
  /** Whether to show navigation arrows */
  showArrows?: boolean;
  /** Whether to show dot indicators */
  showDots?: boolean;
  /** Whether images are clickable to navigate to that slide */
  clickToNavigate?: boolean;
  /** Auto-advance interval in ms. 0 = disabled */
  autoPlay?: number;
  /** Additional className for the root wrapper */
  className?: string;
  /** Callback fired when the active index changes */
  onIndexChange?: (index: number) => void;
  /** Border radius of each slide image. Defaults to "1rem" */
  borderRadius?: string;
  /** Custom dot active color (Tailwind or CSS color) */
  dotActiveColor?: string;
  /** Custom dot inactive color */
  dotInactiveColor?: string;
  /** Custom arrow button class override */
  arrowClassName?: string;
}

// ─────────────────────────────────────────────────────────────────────────────
// Component
// ─────────────────────────────────────────────────────────────────────────────

const StylishCarousel = ({
  items = [],
  initialIndex = 0,
  slideSize = "clamp(140px, 75vmin, 320px)",
  rotationDegrees = 28,
  inactiveScale = 0.62,
  yOffsetPercent = 48,
  springBounce = 0.15,
  springDuration = 0.8,
  showArrows = true,
  showDots = true,
  clickToNavigate = true,
  autoPlay = 0,
  className,
  onIndexChange,
  borderRadius = "1rem",
  arrowClassName,
}: StylishCarouselProps) => {
  const clampedInitial = Math.max(0, Math.min(initialIndex, items.length - 1));
  const [activeIndex, setActiveIndex] = useState(clampedInitial);
  const autoPlayRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // ── helpers ──────────────────────────────────────────────────────────────
  const goTo = useCallback(
    (index: number) => {
      const clamped = Math.max(0, Math.min(index, items.length - 1));
      setActiveIndex(clamped);
      onIndexChange?.(clamped);
    },
    [items.length, onIndexChange]
  );

  const toPrev = useCallback(
    () => goTo(activeIndex - 1),
    [activeIndex, goTo]
  );

  const toNext = useCallback(
    () => goTo(activeIndex + 1),
    [activeIndex, goTo]
  );

  // ── keyboard navigation ───────────────────────────────────────────────────
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft") toPrev();
      if (e.key === "ArrowRight") toNext();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [toPrev, toNext]);

  // ── touch / swipe ─────────────────────────────────────────────────────────
  const touchStartX = useRef<number | null>(null);

  const handleTouchStart = (e: React.TouchEvent) => {
    touchStartX.current = e.touches[0].clientX;
  };

  const handleTouchEnd = (e: React.TouchEvent) => {
    if (touchStartX.current === null) return;
    const delta = touchStartX.current - e.changedTouches[0].clientX;
    if (Math.abs(delta) > 40) delta > 0 ? toNext() : toPrev();
    touchStartX.current = null;
  };

  // ── auto-play ─────────────────────────────────────────────────────────────
  useEffect(() => {
    if (!autoPlay) return;
    autoPlayRef.current = setInterval(() => {
      setActiveIndex((prev) => {
        const next = prev + 1 >= items.length ? 0 : prev + 1;
        onIndexChange?.(next);
        return next;
      });
    }, autoPlay);
    return () => {
      if (autoPlayRef.current) clearInterval(autoPlayRef.current);
    };
  }, [autoPlay, items.length, onIndexChange]);

  // ── spring transition ──────────────────────────────────────────────────────
  const spring = {
    type: "spring" as const,
    bounce: springBounce,
    duration: springDuration,
  };

  if (!items.length) return null;

  return (
    <div
      ref={containerRef}
      className={cn("relative flex flex-col items-center select-none", className)}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      aria-label="Stylish Carousel"
      role="region"
    >
      {/* ── SLIDES CONTAINER ─────────────────────────────────────────────── */}
      <div
        style={{ width: slideSize, aspectRatio: "1 / 1" }}
        className="relative mt-6"
      >
        {/* Horizontal sliding strip */}
        <motion.div
          className="flex w-fit"
          animate={{ x: `${(-activeIndex * 100) / items.length}%` }}
          transition={spring}
        >
          {items.map((item, i) => {
            const offset = i - activeIndex;
            const isActive = offset === 0;

            return (
              <motion.div
                key={i}
                style={{ width: slideSize, aspectRatio: "1 / 1" }}
                className="flex-shrink-0 flex flex-col items-center gap-2 will-change-transform"
                animate={{
                  rotate: offset * rotationDegrees,
                  scale: isActive ? 1 : inactiveScale,
                  y: `${offset * yOffsetPercent}%`,
                }}
                transition={spring}
              >
                {/* Title label */}
                <AnimatePresence>
                  {item.title && (
                    <motion.span
                      key={`title-${i}`}
                      initial={{ opacity: 0, y: -4 }}
                      animate={isActive ? { opacity: 1, y: 0 } : { opacity: 0, y: -4 }}
                      transition={{ duration: 0.3 }}
                      className="text-xs sm:text-sm font-semibold whitespace-nowrap text-foreground/80 tracking-wide"
                    >
                      {item.title}
                    </motion.span>
                  )}
                </AnimatePresence>

                {/* Image */}
                <div
                  className="relative w-full h-full overflow-hidden shadow-2xl"
                  style={{ borderRadius }}
                >
                  <img
                    src={item.src}
                    alt={item.alt ?? item.title ?? `Slide ${i + 1}`}
                    draggable={false}
                    onClick={() => clickToNavigate && goTo(i)}
                    className={cn(
                      "w-full h-full object-cover transition-[filter] duration-300 will-change-transform",
                      !isActive && "brightness-75",
                      clickToNavigate && !isActive && "cursor-pointer"
                    )}
                    loading="lazy"
                  />

                  {/* Active glow ring */}
                  {isActive && (
                    <motion.div
                      layoutId="glow-ring"
                      className="absolute inset-0 rounded-[inherit] pointer-events-none"
                      style={{
                        boxShadow: "0 0 0 3px hsl(var(--primary, 221 83% 53%) / 0.7)",
                        borderRadius,
                      }}
                      transition={spring}
                    />
                  )}
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>

      {/* ── CONTROLS ─────────────────────────────────────────────────────── */}
      <div className="mt-8 flex items-center gap-4 px-3 py-2 rounded-full bg-background/60 border border-border/60 backdrop-blur-md shadow-lg">
        {/* Prev */}
        {showArrows && (
          <button
            aria-label="Previous slide"
            onClick={toPrev}
            disabled={activeIndex === 0}
            className={cn(
              "p-2 rounded-full transition-all hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed",
              arrowClassName
            )}
          >
            <ChevronLeft className="w-4 h-4 text-foreground/80" />
          </button>
        )}

        {/* Dots */}
        {showDots && (
          <div className="flex items-center gap-1.5">
            {items.map((_, i) => (
              <motion.button
                key={i}
                aria-label={`Go to slide ${i + 1}`}
                onClick={() => goTo(i)}
                animate={{
                  width: activeIndex === i ? 28 : 8,
                  opacity: activeIndex === i ? 1 : 0.35,
                }}
                transition={{ type: "spring", bounce: 0.3, duration: 0.5 }}
                className="h-2 rounded-full bg-foreground cursor-pointer"
                style={{ minWidth: 8 }}
              />
            ))}
          </div>
        )}

        {/* Next */}
        {showArrows && (
          <button
            aria-label="Next slide"
            onClick={toNext}
            disabled={activeIndex === items.length - 1}
            className={cn(
              "p-2 rounded-full transition-all hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed",
              arrowClassName
            )}
          >
            <ChevronRight className="w-4 h-4 text-foreground/80" />
          </button>
        )}
      </div>

      {/* Counter */}
      <p className="mt-3 text-xs text-muted-foreground font-medium tabular-nums">
        {activeIndex + 1} / {items.length}
      </p>
    </div>
  );
};

export default StylishCarousel;

```
--------------------------------------------------

### COMPONENT: cool-slide-gallery
Category: 3D Elements
Description: A premium 3D coverflow-style image gallery built with Framer Motion. Cards fan out in a smooth perspective layout with configurable tilt, depth, scale, and rotation. Supports drag/swipe, keyboard navigation, autoplay, dot indicators, navigation arrows, title overlays with gradient veils, badge labels, slide counter, and extensive customisation. Fully transparent background with seamless light and dark mode support.
URL: https://lightswind.com/components/cool-slide-gallery
Import: import CoolSlideGallery from "@/components/lightswind/cool-slide-gallery"
Registry URL: https://lightswind.com/r/cool-slide-gallery.json
Install Command: npx lightswind@latest add cool-slide-gallery

Usage:
```tsx
import CoolSlideGallery from "@/components/lightswind/cool-slide-gallery";

const slides = [
  {
    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800",
    title: "Alpine Summit",
    subtitle: "Swiss Alps, 2024",
    badge: "Featured",
  },
  {
    src: "https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=800",
    title: "Forest Trail",
    subtitle: "Oregon, USA",
    badge: "Nature",
  },
];

export function Demo() {
  return (
    <div className="w-full h-[560px] flex items-center justify-center">
      <CoolSlideGallery
        slides={slides}
        cardWidth={360}
        cardHeight={420}
        showTitle
        showArrows
        showDots
        draggable
        autoplay={false}
        easing="smooth"
        onSlideChange={(i, slide) => console.log("Active:", slide.title)}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useCallback, useRef } from "react";
import { motion, useInView } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";

// ─────────────────────────────────────────────────────────────────────────────
// Types
// ─────────────────────────────────────────────────────────────────────────────

export interface CoolSlideGallerySlide {
  /** Image source URL */
  src: string;
  /** Optional alt text for accessibility */
  alt?: string;
  /** Optional title rendered as an overlay on the card */
  title?: string;
  /** Optional subtitle text shown below the title */
  subtitle?: string;
  /** Optional custom badge text */
  badge?: string;
}

export type TitlePosition = "bottom-left" | "bottom-right" | "top-left" | "top-right" | "center";
export type EasingPreset = "smooth" | "spring" | "bouncy" | "snappy";

export interface CoolSlideGalleryProps {
  /** Array of slides to display */
  slides: CoolSlideGallerySlide[];
  /** Card width in pixels */
  cardWidth?: number;
  /** Card height in pixels */
  cardHeight?: number;
  /** Border radius scale 0–20 (maps to pixel radius relative to card size) */
  radius?: number;
  /** Y-rotation angle (degrees) applied to side cards */
  tilt?: number;
  /** Z-rotation (degrees) applied to side cards for slight lean */
  sideTilt?: number;
  /** Horizontal gap multiplier between cards */
  gap?: number;
  /** Dim intensity (0–100) applied to non-active cards */
  dimOpacity?: number;
  /** Whether to enable autoplay */
  autoplay?: boolean;
  /** Direction of autoplay progression */
  autoplayDirection?: "left-to-right" | "right-to-left";
  /** Delay in seconds between autoplay slides */
  autoplayDelay?: number;
  /** Animation duration in seconds for slide transitions */
  animationDuration?: number;
  /** Easing preset for the slide animation */
  easing?: EasingPreset;
  /** Whether to show slide titles */
  showTitle?: boolean;
  /** Position of the title overlay */
  titlePosition?: TitlePosition;
  /** Whether to show navigation arrow buttons */
  showArrows?: boolean;
  /** Whether to show dot indicators */
  showDots?: boolean;
  /** Whether to show a slide counter */
  showCounter?: boolean;
  /** Whether to show badge labels */
  showBadge?: boolean;
  /** Whether click on side cards navigates to them */
  clickable?: boolean;
  /** Whether drag/swipe is enabled */
  draggable?: boolean;
  /** Minimum drag distance in px to trigger a slide change */
  dragThreshold?: number;
  /** Whether keyboard navigation is enabled */
  keyboardNavigation?: boolean;
  /** Number of side cards visible on each side */
  maxVisible?: number;
  /** Depth (z-translate in px) applied per offset position */
  depth?: number;
  /** Scale reduction per offset step from center */
  scaleStep?: number;
  /** Perspective value for the 3D scene */
  perspective?: number;
  /** Additional CSS classes on the root wrapper */
  className?: string;
  /** Callback fired when the active index changes */
  onSlideChange?: (index: number, slide: CoolSlideGallerySlide) => void;
}

// ─────────────────────────────────────────────────────────────────────────────
// Constants & Defaults
// ─────────────────────────────────────────────────────────────────────────────

const DEFAULT_SLIDES: CoolSlideGallerySlide[] = [
  {
    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop",
    alt: "Mountain peaks at golden hour",
    title: "Alpine Summit",
    subtitle: "Swiss Alps, 2024",
    badge: "Featured",
  },
  {
    src: "https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=800&auto=format&fit=crop",
    alt: "Misty forest trail",
    title: "Forest Trail",
    subtitle: "Oregon, USA",
    badge: "Nature",
  },
  {
    src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&auto=format&fit=crop",
    alt: "Starry night over mountains",
    title: "Midnight Sky",
    subtitle: "Patagonia, Chile",
    badge: "Astro",
  },
  {
    src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&auto=format&fit=crop",
    alt: "Desert dunes at sunset",
    title: "Sand Waves",
    subtitle: "Sahara Desert",
    badge: "Desert",
  },
  {
    src: "https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=800&auto=format&fit=crop",
    alt: "Tropical ocean shore",
    title: "Ocean Horizon",
    subtitle: "Maldives",
    badge: "Ocean",
  },
];

const EASING_MAP: Record<EasingPreset, [number, number, number, number]> = {
  smooth: [0.22, 1, 0.36, 1],
  spring: [0.34, 1.56, 0.64, 1],
  bouncy: [0.5, 1.7, 0.5, 1],
  snappy: [0.16, 1, 0.3, 1],
};

// ─────────────────────────────────────────────────────────────────────────────
// Utility: title position styles
// ─────────────────────────────────────────────────────────────────────────────

function getTitleStyles(position: TitlePosition): React.CSSProperties {
  const base: React.CSSProperties = {
    position: "absolute",
    pointerEvents: "none",
  };
  switch (position) {
    case "bottom-left":
      return { ...base, bottom: 0, left: 0, right: 0 };
    case "bottom-right":
      return { ...base, bottom: 0, right: 0, textAlign: "right" };
    case "top-left":
      return { ...base, top: 0, left: 0, right: 0 };
    case "top-right":
      return { ...base, top: 0, right: 0, textAlign: "right" };
    case "center":
      return {
        ...base,
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        textAlign: "center",
        width: "100%",
      };
    default:
      return { ...base, bottom: 0, left: 0, right: 0 };
  }
}

function getGradientForPosition(position: TitlePosition): string {
  switch (position) {
    case "top-left":
    case "top-right":
      return "linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%)";
    case "center":
      return "radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%)";
    case "bottom-left":
    case "bottom-right":
    default:
      return "linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%)";
  }
}

// ─────────────────────────────────────────────────────────────────────────────
// CoolSlideGallery Component
// ─────────────────────────────────────────────────────────────────────────────

const CoolSlideGallery: React.FC<CoolSlideGalleryProps> = ({
  slides: slidesProp,
  cardWidth = 380,
  cardHeight = 440,
  radius = 5,
  tilt = 14,
  sideTilt = 6,
  gap = 8,
  dimOpacity = 55,
  autoplay = false,
  autoplayDirection = "right-to-left",
  autoplayDelay = 2.8,
  animationDuration = 0.6,
  easing = "smooth",
  showTitle = true,
  titlePosition = "bottom-left",
  showArrows = true,
  showDots = true,
  showCounter = false,
  showBadge = true,
  clickable = true,
  draggable = true,
  dragThreshold = 45,
  keyboardNavigation = true,
  maxVisible = 2,
  depth = 230,
  scaleStep = 0.15,
  perspective = 1500,
  className,
  onSlideChange,
}) => {
  const slides = slidesProp && slidesProp.length > 0 ? slidesProp : DEFAULT_SLIDES;
  const n = slides.length;

  const [active, setActive] = useState(0);
  const lockRef = useRef(false);
  const dragStartX = useRef(0);
  const isDragging = useRef(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef, { margin: "200px" });

  // ── Locking ──────────────────────────────────────────────────────────────
  const lock = useCallback(() => {
    lockRef.current = true;
    window.setTimeout(() => {
      lockRef.current = false;
    }, Math.max(50, animationDuration * 1000));
  }, [animationDuration]);

  // ── Step ─────────────────────────────────────────────────────────────────
  const step = useCallback(
    (dir: 1 | -1) => {
      if (lockRef.current) return;
      lock();
      setActive((a) => {
        const next = (((a + dir) % n) + n) % n;
        onSlideChange?.(next, slides[next]);
        return next;
      });
    },
    [n, lock, onSlideChange, slides]
  );

  const goTo = useCallback(
    (i: number) => {
      if (lockRef.current || i === active) return;
      lock();
      setActive(i);
      onSlideChange?.(i, slides[i]);
    },
    [active, lock, onSlideChange, slides]
  );

  // ── Keyboard ─────────────────────────────────────────────────────────────
  useEffect(() => {
    if (!keyboardNavigation) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "ArrowRight") { e.preventDefault(); step(1); }
      if (e.key === "ArrowLeft")  { e.preventDefault(); step(-1); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [step, keyboardNavigation]);

  // ── Autoplay (pauses when out of view) ──────────────────────────────────
  useEffect(() => {
    if (!autoplay || n < 2 || !isInView) return;
    const ms = Math.max(300, autoplayDelay * 1000);
    const dir: 1 | -1 = autoplayDirection === "left-to-right" ? -1 : 1;
    const id = window.setInterval(() => step(dir), ms);
    return () => window.clearInterval(id);
  }, [autoplay, autoplayDirection, autoplayDelay, n, step, isInView]);

  // ── Pointer drag ─────────────────────────────────────────────────────────
  const handlePointerDown = (e: React.PointerEvent) => {
    if (!draggable || lockRef.current) return;
    isDragging.current = true;
    dragStartX.current = e.clientX;
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
  };

  const handlePointerUp = (e: React.PointerEvent) => {
    if (!isDragging.current) return;
    isDragging.current = false;
    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
    const delta = e.clientX - dragStartX.current;
    if (Math.abs(delta) > dragThreshold) {
      step(delta > 0 ? -1 : 1);
    }
  };

  // ── Touch ─────────────────────────────────────────────────────────────────
  const touchStartX = useRef<number | null>(null);
  const handleTouchStart = (e: React.TouchEvent) => {
    touchStartX.current = e.touches[0].clientX;
  };
  const handleTouchEnd = (e: React.TouchEvent) => {
    if (touchStartX.current === null) return;
    const delta = touchStartX.current - e.changedTouches[0].clientX;
    if (Math.abs(delta) > dragThreshold) step(delta > 0 ? 1 : -1);
    touchStartX.current = null;
  };

  // ── Animation bezier ─────────────────────────────────────────────────────
  const [x1, y1, x2, y2] = EASING_MAP[easing];
  const transition = {
    type: "tween" as const,
    duration: animationDuration,
    ease: [x1, y1, x2, y2] as [number, number, number, number],
  };

  // ── Derived values ────────────────────────────────────────────────────────
  const effectiveRadius =
    (Math.max(0, Math.min(20, radius)) / 20) * (Math.min(cardWidth, cardHeight) / 2);
  const dimValue = 1 - Math.max(0, Math.min(100, dimOpacity)) / 100;

  const isTopPosition = titlePosition === "top-left" || titlePosition === "top-right";

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative flex flex-col items-center justify-center select-none overflow-visible will-change-transform",
        className
      )}
      style={{
        minHeight: cardHeight + 80,
        perspective: `${perspective}px`,
        touchAction: "none",
        cursor: draggable ? "grab" : "default",
      }}
      tabIndex={keyboardNavigation ? 0 : undefined}
      role="region"
      aria-roledescription="carousel"
      aria-label="Cool Slide Gallery"
      onPointerDown={handlePointerDown}
      onPointerUp={handlePointerUp}
      onPointerCancel={handlePointerUp}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      {/* ── 3D Stage ───────────────────────────────────────────────────────── */}
      <div
        style={{
          position: "relative",
          width: cardWidth,
          height: cardHeight,
          transformStyle: "preserve-3d",
          pointerEvents: "none",
        }}
      >
        {slides.map((slide, i) => {
          let rel = i - active;
          // Wrap for infinite loop
          if (rel > n / 2) rel -= n;
          if (rel < -n / 2) rel += n;

          const ax = Math.abs(rel);
          const visible = ax <= maxVisible;
          const isActive = rel === 0;
          const sc = Math.max(0.3, 1 - ax * scaleStep);
          const tx = rel * (gap * 30);
          const tz = -ax * depth;
          const ry = -rel * tilt;
          const rz = rel * sideTilt;

          return (
            <motion.div
              key={i}
              style={{
                position: "absolute",
                left: "50%",
                top: "50%",
                width: cardWidth,
                height: cardHeight,
                borderRadius: effectiveRadius,
                overflow: "hidden",
                transformStyle: "preserve-3d",
                transformOrigin: "center center",
                pointerEvents: visible && !autoplay ? "auto" : "none",
                willChange: "transform, opacity",
                cursor: clickable && visible && !isActive ? "pointer" : "default",
              }}
              animate={{
                x: `calc(-50% + ${tx}px)`,
                y: "-50%",
                translateZ: tz,
                rotateY: ry,
                rotateZ: rz,
                scale: sc,
                opacity: visible ? 1 : 0,
              }}
              transition={transition}
              onClick={() => {
                if (clickable && !isDragging.current && !isActive && visible) {
                  goTo(i);
                }
              }}
              aria-label={slide.title ?? slide.alt ?? `Slide ${i + 1}`}
              aria-hidden={!visible}
            >
              {/* Image */}
              <img
                src={slide.src}
                alt={slide.alt ?? slide.title ?? `Slide ${i + 1}`}
                loading="lazy"
                decoding="async"
                draggable={false}
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                  userSelect: "none",
                  pointerEvents: "none",
                }}
              />

              {/* Title overlay */}
              {showTitle && (slide.title || slide.subtitle) && (
                <>
                  {/* Gradient veil */}
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      background: getGradientForPosition(titlePosition),
                      pointerEvents: "none",
                    }}
                  />

                  {/* Text content */}
                  <div
                    style={{
                      ...getTitleStyles(titlePosition),
                      padding: "20px 22px",
                    }}
                  >
                    {slide.badge && showBadge && (
                      <span
                        className={cn(
                          "inline-block px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest mb-2",
                          "bg-white/20 backdrop-blur-sm text-white border border-white/30"
                        )}
                      >
                        {slide.badge}
                      </span>
                    )}
                    {slide.title && (
                      <p
                        className="text-white font-bold leading-tight text-shadow"
                        style={{
                          fontSize: "clamp(18px, 2.5vw, 26px)",
                          letterSpacing: "-0.02em",
                          lineHeight: "1.15",
                          textShadow: "0 2px 12px rgba(0,0,0,0.5)",
                          whiteSpace: "pre-line",
                        }}
                      >
                        {slide.title}
                      </p>
                    )}
                    {slide.subtitle && (
                      <p
                        className="text-white/75 font-medium mt-1"
                        style={{
                          fontSize: "clamp(11px, 1.2vw, 14px)",
                          letterSpacing: "0.01em",
                          textShadow: "0 1px 6px rgba(0,0,0,0.4)",
                        }}
                      >
                        {slide.subtitle}
                      </p>
                    )}
                  </div>
                </>
              )}

              {/* Dim overlay on non-active cards */}
              <motion.div
                style={{
                  position: "absolute",
                  inset: 0,
                  background: "#000000",
                  pointerEvents: "none",
                }}
                animate={{ opacity: isActive ? 0 : dimValue }}
                transition={transition}
              />
            </motion.div>
          );
        })}
      </div>

      {/* ── Controls bar ───────────────────────────────────────────────────── */}
      <div
        className={cn(
          "flex items-center gap-3 mt-6 px-4 py-2 rounded-full",
          "bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10",
          "backdrop-blur-md"
        )}
        style={{ pointerEvents: "all" }}
        onPointerDown={(e) => e.stopPropagation()}
        onPointerUp={(e) => e.stopPropagation()}
        onTouchStart={(e) => e.stopPropagation()}
        onTouchEnd={(e) => e.stopPropagation()}
      >
        {/* Prev */}
        {showArrows && (
          <motion.button
            aria-label="Previous slide"
            onClick={(e) => { e.stopPropagation(); step(-1); }}
            className={cn(
              "p-2 rounded-full transition-colors",
              "text-foreground/60 hover:text-foreground hover:bg-foreground/10"
            )}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
          >
            <ChevronLeft className="w-4 h-4" />
          </motion.button>
        )}

        {/* Dots */}
        {showDots && (
          <div className="flex items-center gap-1.5">
            {slides.map((_, i) => (
              <motion.button
                key={i}
                aria-label={`Go to slide ${i + 1}`}
                onClick={(e) => { e.stopPropagation(); goTo(i); }}
                className="rounded-full bg-foreground/60 dark:bg-foreground/50 cursor-pointer transition-colors hover:bg-foreground"
                animate={{
                  width: active === i ? 24 : 6,
                  height: 6,
                  opacity: active === i ? 1 : 0.4,
                }}
                transition={{ type: "spring", bounce: 0.3, duration: 0.45 }}
                style={{ minWidth: 6 }}
              />
            ))}
          </div>
        )}

        {/* Counter */}
        {showCounter && (
          <span className="text-xs font-semibold tabular-nums text-foreground/50 px-1">
            {active + 1} / {n}
          </span>
        )}

        {/* Next */}
        {showArrows && (
          <motion.button
            aria-label="Next slide"
            onClick={(e) => { e.stopPropagation(); step(1); }}
            className={cn(
              "p-2 rounded-full transition-colors",
              "text-foreground/60 hover:text-foreground hover:bg-foreground/10"
            )}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
          >
            <ChevronRight className="w-4 h-4" />
          </motion.button>
        )}
      </div>
    </div>
  );
};

export default CoolSlideGallery;

```
--------------------------------------------------

### COMPONENT: scroll-carousel
Category: 3D Elements
Description: A responsive and animated scrollable carousel that displays feature cards. On desktop, it provides smooth horizontal scrolling with GSAP + ScrollTrigger pinning and progress tracking. On mobile, it animates cards vertically with fade-in and slide effects. Supports dynamic rows, custom max scroll height, and animated progress bar.
URL: https://lightswind.com/components/scroll-carousel
Import: import ScrollCarousel from '@/components/lightswind/scroll-carousel';
Registry URL: https://lightswind.com/r/scroll-carousel.json
Install Command: npx lightswind@latest add scroll-carousel

Usage:
```tsx
import ScrollCarousel from '@/components/lightswind/scroll-carousel';

const features = [
  {
    icon: Send,
    title: "Instant Payments",
    description: "Send money anywhere in the world instantly.",
    image: "https://images.pexels.com/photos/9934462/pexels-photo-9934462.jpeg",
  },
  {
    icon: Globe,
    title: "Global Access",
    description: "Access your wallet from any device worldwide.",
    image: "https://images.pexels.com/photos/6988085/pexels-photo-6988085.jpeg",
  },
  {
    icon: Shield,
    title: "Secure Transactions",
    description: "Your payments are protected with top-level security.",
    image: "https://images.pexels.com/photos/6863184/pexels-photo-6863184.jpeg",
  },
];

<ScrollCarousel
  features={features}
  className="my-20"
  maxScrollHeight={2000}
/>
```

Source Code:
```tsx
"use client";
import React, {
  useEffect,
  useRef,
  useState,
  useLayoutEffect,
  forwardRef,
} from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { LucideIcon } from "lucide-react";

// Assuming these are external, import them
import { cn } from "@/components/lib/utils";

gsap.registerPlugin(ScrollTrigger);

// --- Component Props and Types ---
// Define a type for a single feature object
export interface FeatureItem {
  icon: LucideIcon;
  title: string;
  description: string;
  image: string;
}

// Define the component's props interface
export interface ScrollCarouselProps {
  features: FeatureItem[];
  className?: string; // To allow external classes
  maxScrollHeight?: number; // New optional prop for max scroll height
}

// --- Custom Hook for Animations ---
const useFeatureAnimations = (
  containerRef: React.RefObject<HTMLDivElement | null>,
  scrollContainerRef: React.RefObject<HTMLDivElement | null>,
  scrollContainerRef2: React.RefObject<HTMLDivElement | null>,
  progressBarRef: React.RefObject<HTMLDivElement | null>,
  cardRefs: React.MutableRefObject<HTMLDivElement[]>,
  cardRefs2: React.MutableRefObject<HTMLDivElement[]>,
  isDesktop: boolean,
  maxScrollHeight?: number
) => {
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      // Desktop horizontal scroll logic
      if (isDesktop) {
        const scrollWidth1 = scrollContainerRef.current?.scrollWidth || 0;
        const scrollWidth2 = scrollContainerRef2.current?.scrollWidth || 0;
        const containerWidth = containerRef.current?.offsetWidth || 0;
        const cardWidth = cardRefs.current[0]?.offsetWidth || 0;
        const viewportOffset = (containerWidth - cardWidth) / 2;

        const finalOffset1 = scrollWidth1 - containerWidth + viewportOffset;
        const finalOffset2 = scrollWidth2 - containerWidth + viewportOffset;

        // Use the provided maxScrollHeight or the calculated offset as the scroll distance
        const scrollDistance = maxScrollHeight || finalOffset1;

        gsap.set(scrollContainerRef2.current, {
          x: -finalOffset2 + viewportOffset * 2,
        });

        gsap
          .timeline({
            scrollTrigger: {
              trigger: containerRef.current,
              start: "top top",
              end: () => `+=${scrollDistance}`,
              scrub: 1,
              pin: true,
            },
          })
          .fromTo(
            scrollContainerRef.current,
            { x: viewportOffset },
            { x: -finalOffset1 + viewportOffset, ease: "none" }
          );

        gsap
          .timeline({
            scrollTrigger: {
              trigger: containerRef.current,
              start: "top top",
              end: () => `+=${scrollDistance}`,
              scrub: 1,
            },
          })
          .to(scrollContainerRef2.current, { x: viewportOffset, ease: "none" });

        gsap.to(progressBarRef.current, {
          width: "100%",
          ease: "none",
          scrollTrigger: {
            trigger: containerRef.current,
            start: "top top",
            end: () => `+=${scrollDistance}`,
            scrub: true,
          },
        });
      } else {
        // Mobile vertical scroll logic
        const allCards = [...cardRefs.current, ...cardRefs2.current];
        allCards.forEach((card, index) => {
          if (card) {
            gsap.fromTo(
              card,
              {
                opacity: 0,
                x: index % 2 === 0 ? -200 : 200,
              },
              {
                opacity: 1,
                x: 0,
                duration: 1,
                ease: "power2.out",
                scrollTrigger: {
                  trigger: card,
                  start: "top 0%",
                  toggleActions: "play none none none",
                  once: true,
                },
              }
            );
          }
        });
      }
    }, containerRef);

    return () => {
      ctx.revert();
    };
  }, [isDesktop, maxScrollHeight]);
};

// --- Component Definition ---
export const ScrollCarousel = forwardRef<HTMLDivElement, ScrollCarouselProps>(
  ({ features, className, maxScrollHeight }, ref) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const scrollContainerRef = useRef<HTMLDivElement>(null);
    const scrollContainerRef2 = useRef<HTMLDivElement>(null);
    const progressBarRef = useRef<HTMLDivElement>(null);
    const cardRefs = useRef<HTMLDivElement[]>([]);
    const cardRefs2 = useRef<HTMLDivElement[]>([]);
    const [isDesktop, setIsDesktop] = useState(false);

    // Dynamic sorting for the second row of cards
    const features2 = [...features].sort(() => Math.random() - 0.5);

    useEffect(() => {
      const checkDesktop = () => {
        setIsDesktop(window.matchMedia("(min-width: 768px)").matches);
      };
      checkDesktop();
      window.addEventListener("resize", checkDesktop);
      return () => window.removeEventListener("resize", checkDesktop);
    }, []);

    useFeatureAnimations(
      containerRef,
      scrollContainerRef,
      scrollContainerRef2,
      progressBarRef,
      cardRefs,
      cardRefs2,
      isDesktop,
      maxScrollHeight
    );

    const renderFeatureCards = (
      featureSet: FeatureItem[],
      refs: React.MutableRefObject<HTMLDivElement[]>
    ) =>
      featureSet.map((feature, index) => (
        <div
          key={index}
          ref={(el: HTMLDivElement | null) => {
            if (el) refs.current[index] = el;
          }}
          className="feature-card flex-shrink-0 w-full md:w-full  h-full
          z-10 gap-4  group relative transition-all duration-300 ease-in-out"
        >
          <div
            className={cn(
              `relative h-full p-4 lg:p-8 rounded-3xl backdrop-blur-sm 
              flex items-center justify-center z-10 
              transition-all duration-300 my-4`,
              `backdrop-blur-lg border text-black dark:text-white`,
              "group-hover:scale-105 centered:scale-105"
            )}
          >
            <img
              src={
                feature.image ||
                "https://images.pexels.com/photos/9934462/pexels-photo-9934462.jpeg"
              }
              alt=""
              className="absolute inset-0 w-full h-full 
              object-cover z-[-1] rounded-3xl "
            />
            {/* <RippleLoader className="!absolute z-[-1]" icon={feature.icon} /> */}
            <div className="absolute bottom-4 z-10 w-full px-4">
              <div
                className={cn(
                  `flex flex-col justify-end h-full opacity-100 translate-y-4 transition-all duration-300 ease-out text-center`
                )}
              >
                <h3 className="text-2xl mb-0 font-bold text-white transition-all duration-300">
                  {feature.title}
                </h3>
                <p className="text-white text-xs mb-4 opacity-60">
                  {feature.description}
                </p>
                {/* <img
                  src={feature.image}
                  alt=""
                  className="absolute inset-0 w-full h-full object-cover z-[-1] rounded-3xl blur-[5px]"
                /> */}
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 transition-all duration-300 group-hover:bg-black/5 dark:group-hover:bg-white/5 centered:bg-black/5 dark:centered:bg-white/5 rounded-2xl group-hover:blur-md" />
          </div>
        </div>
      ));

    return (
      <section
        className={cn(
          "bg-transparent text-foreground relative overflow-hidden",
          className
        )}
        ref={ref}
      >
        <div
          ref={containerRef}
          className={`relative overflow-hidden md:h-screen md:py-20 
          flex flex-col gap-0 z-10 
          lg:[mask-image:_linear-gradient(to_right,transparent_0,_black_5%,_black_95%,transparent_100%)]`}
        >
          <div
            ref={scrollContainerRef}
            className={`flex flex-col md:flex-row gap-8 
            items-center h-full px-6 md:px-0`}
          >
            {renderFeatureCards(features, cardRefs)}
          </div>

          <div
            ref={scrollContainerRef2}
            className={`flex flex-col md:flex-row gap-8 items-center h-full px-6 md:px-0 hidden xl:flex`}
          >
            {renderFeatureCards(features2, cardRefs2)}
          </div>

          {isDesktop && (
            <div className="absolute bottom-10 left-1/2 -translate-x-1/2 w-64 h-2 bg-black/30 dark:bg-white/30 z-50 overflow-hidden rounded-full">
              <div
                ref={progressBarRef}
                className="h-full rounded-full relative overflow-hidden transition-all duration-100"
                style={{ width: "0%" }}
              >
                <div className="absolute inset-0 animated-water" />
              </div>
            </div>
          )}
        </div>
        <style jsx>{`
          .animated-water {
            background: repeating-linear-gradient(
              -45deg,
              rgba(0, 0, 0, 0.7) 0%,
              rgba(0, 0, 0, 0.5) 25%,
              rgba(0, 0, 0, 0.7) 50%
            );
            background-size: 40px 40px;
            animation: waveMove 2s linear infinite;
          }
          :global(.dark) .animated-water {
            background: repeating-linear-gradient(
              -45deg,
              rgba(255, 255, 255, 0.9) 0%,
              rgba(255, 255, 255, 0.6) 25%,
              rgba(255, 255, 255, 0.9) 50%
            );
          }
          @keyframes waveMove {
            from {
              background-position: 0 0;
            }
            to {
              background-position: 40px 40px;
            }
          }
        `}</style>
      </section>
    );
  }
);

ScrollCarousel.displayName = "ScrollCarousel";

export default ScrollCarousel;
```
--------------------------------------------------

### COMPONENT: sparkle-navbar
Category: 3D Elements
Description: A reusable, animated navigation menu component built with React, TypeScript, and GSAP. It features a dynamic active state indicator with a glowing strike-through effect, smooth transitions, and customizable colors. Ideal for modern websites needing interactive navigation with engaging micro-animations.
URL: https://lightswind.com/components/sparkle-navbar
Import: import SparkleNavbar from '@/components/lightswind/sparkle-navbar';
Registry URL: https://lightswind.com/r/sparkle-navbar.json
Install Command: npx lightswind@latest add sparkle-navbar

Usage:
```tsx
import SparkleNavbar from '@/components/lightswind/sparkle-navbar';

<SparkleNavbar
  items={['Home', 'About', 'Services', 'Contact']}
  color="#1E90FF"
/>
```

Source Code:
```tsx
import React, { useState, useRef, useLayoutEffect } from "react";
import { gsap } from "gsap";

// Define the props for the reusable component.
interface SparkleNavbarProps {
  /**
   * An array of strings representing the navigation menu items.
   * Each string will be the text for a button.
   * @example ['Home', 'About', 'Contact']
   */
  items: string[];
  /**
   * The color for the active state text shadow, box shadow, and other effects.
   * @example '#1E90FF' (a shade of blue)
   */
  color?: string;
}

/**
 * A reusable navigation menu component with a dynamic, animated active state indicator.
 * All CSS and animation logic are self-contained within this single TSX file.
 *
 * @param {SparkleNavbarProps} props - The component props.
 * @returns {JSX.Element} The rendered navigation menu.
 */
const SparkleNavbar: React.FC<SparkleNavbarProps> = ({
  items,
  color = "#00fffc",
}) => {
  const [activeIndex, setActiveIndex] = useState(0);

  // Refs to get direct access to DOM elements for animations.
  const navRef = useRef<HTMLDivElement>(null);
  const activeElementRef = useRef<HTMLDivElement>(null);
  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);

  // Function to create the SVG content for the active element.
  const createSVG = (element: HTMLDivElement) => {
    element.innerHTML = `
    <svg viewBox="0 0 116 5" preserveAspectRatio="none" class="beam">
      <path d="M0.5 2.5L113 0.534929C114.099 0.515738 115 1.40113 115 2.5C115 3.59887 114.099 4.48426 113 4.46507L0.5 2.5Z" fill="url(#gradient-beam)"/>
      <defs>
        <linearGradient id="gradient-beam" x1="2" y1="2.5" x2="115" y2="2.5" gradientUnits="userSpaceOnUse">
          <stop stop-color="${color}"/>
          <stop offset="1" stop-color="white"/>
        </linearGradient>
      </defs>
    </svg>
    <div class="strike">
      <svg viewBox="0 0 114 12" preserveAspectRatio="none">
        <g fill="none" stroke="white" stroke-width="0.75" stroke-linecap="round">
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
        </g>
      </svg>
      <svg viewBox="0 0 114 12" preserveAspectRatio="none">
        <g fill="none" stroke="white" stroke-width="0.75" stroke-linecap="round">
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
          <path d="M113.5 6.5L109.068 8.9621C109.023 8.98721 108.974 9.00516 108.923 9.01531L106.889 9.42219C106.661 9.46776 106.432 9.35034 106.336 9.1388L104.045 4.0986C104.015 4.03362 104 3.96307 104 3.8917V2.12268C104 1.6898 103.487 1.46145 103.166 1.75103L99.2887 5.24019C99.1188 5.39305 98.867 5.41132 98.6768 5.28457L95.0699 2.87996C94.7881 2.69205 94.4049 2.83291 94.3118 3.15862L92.6148 9.09827C92.5483 9.33084 92.3249 9.48249 92.0843 9.45843L87.7087 9.02087C87.5752 9.00752 87.4419 9.04839 87.3389 9.13428L84.9485 11.1263C84.7128 11.3227 84.3575 11.2625 84.1996 10.9994L81.7602 6.93359C81.617 6.69492 81.3064 6.61913 81.0694 6.76501L75.3165 10.3052C75.1286 10.4209 74.8871 10.3997 74.7223 10.2531L70.6678 6.64917C70.5611 6.55429 70.5 6.41829 70.5 6.27547V1.20711C70.5 1.0745 70.4473 0.947322 70.3536 0.853553L70.2185 0.718508C70.0846 0.584592 69.8865 0.537831 69.7068 0.59772L69.2675 0.744166C68.9149 0.861705 68.8092 1.30924 69.0721 1.57206L69.605 2.10499C69.8157 2.31571 69.7965 2.66281 69.5638 2.84897L67.5 4.5L65.2715 6.28282C65.1083 6.41338 64.8811 6.42866 64.7019 6.32113L60.3621 3.71725C60.153 3.59179 59.8839 3.63546 59.7252 3.8206L57.0401 6.95327C57.0135 6.9843 56.9908 7.01849 56.9725 7.05505L55.2533 10.4934C55.1188 10.7624 54.779 10.8526 54.5287 10.6858L50.7686 8.17907C50.6051 8.07006 50.3929 8.06694 50.2263 8.17109L46.7094 10.3691C46.5774 10.4516 46.4145 10.468 46.2688 10.4133L42.6586 9.05949C42.5558 9.02091 42.4684 8.94951 42.4102 8.85633L40.1248 5.1997C40.0458 5.07323 40.0273 4.91808 40.0745 4.77659L40.6374 3.08777C40.7755 2.67359 40.3536 2.29381 39.9562 2.47447L35.5 4.5L32.2657 5.88613C32.1013 5.95658 31.9118 5.93386 31.7687 5.82656L30.1904 4.64279C30.0699 4.55245 29.9152 4.5212 29.7691 4.55772L26.2009 5.44977C26.0723 5.48193 25.9617 5.56388 25.8934 5.67759L23.1949 10.1752C23.0796 10.3673 22.8507 10.4593 22.6346 10.4003L17.6887 9.05148C17.5674 9.01838 17.463 8.94076 17.3963 8.83409L15.3331 5.53299C15.1627 5.26032 14.7829 5.21707 14.5556 5.44443L12.1464 7.85355C12.0527 7.94732 11.9255 8 11.7929 8H8.15139C8.05268 8 7.95617 7.97078 7.87404 7.91603L3.74143 5.16095C3.59214 5.06142 3.40096 5.04952 3.24047 5.12976L0.5 6.5" />
        </g>
      </svg>
    </div>
    `;
  };

  // Helper function to calculate the horizontal offset for the active element.
  const getOffsetLeft = (element: HTMLButtonElement) => {
    if (!navRef.current || !activeElementRef.current) return 0;
    const elementRect = element.getBoundingClientRect();
    const navRect = navRef.current.getBoundingClientRect();
    const activeElementWidth = activeElementRef.current.offsetWidth;
    return (
      elementRect.left -
      navRect.left +
      (elementRect.width - activeElementWidth) / 2
    );
  };

  // useLayoutEffect runs synchronously after all DOM mutations, ensuring the
  // initial position of the active element is correct before the first paint.
  useLayoutEffect(() => {
    const activeButton = buttonRefs.current[activeIndex];
    if (navRef.current && activeElementRef.current && activeButton) {
      gsap.set(activeElementRef.current, {
        x: getOffsetLeft(activeButton),
      });
      gsap.to(activeElementRef.current, {
        "--active-element-show": "1",
        duration: 0.2,
      });
    }
  }, []);

  // Handler for button clicks, which triggers the animation.
  const handleClick = (index: number) => {
    const navElement = navRef.current;
    const activeElement = activeElementRef.current;
    const oldButton = buttonRefs.current[activeIndex];
    const newButton = buttonRefs.current[index];

    if (
      index === activeIndex ||
      !navElement ||
      !activeElement ||
      !oldButton ||
      !newButton
    ) {
      return;
    }

    const x = getOffsetLeft(newButton);
    const direction = index > activeIndex ? "after" : "before";
    const spacing = Math.abs(x - getOffsetLeft(oldButton));

    navElement.classList.add(direction);

    gsap.set(activeElement, {
      rotateY: direction === "before" ? "180deg" : "0deg",
    });

    gsap.to(activeElement, {
      keyframes: [
        {
          "--active-element-width": `${spacing > navElement.offsetWidth - 60 ? navElement.offsetWidth - 60 : spacing}px`,
          duration: 0.3,
          ease: "none",
          onStart: () => {
            createSVG(activeElement);
            gsap.to(activeElement, {
              "--active-element-opacity": 1,
              duration: 0.1,
            });
          },
        },
        {
          "--active-element-scale-x": "0",
          "--active-element-scale-y": ".25",
          "--active-element-width": "0px",
          duration: 0.3,
          onStart: () => {
            gsap.to(activeElement, {
              "--active-element-mask-position": "40%",
              duration: 0.5,
            });
            gsap.to(activeElement, {
              "--active-element-opacity": 0,
              delay: 0.45,
              duration: 0.25,
            });
          },
          onComplete: () => {
            activeElement.innerHTML = "";
            navElement.classList.remove("before", "after");
            gsap.set(activeElement, {
              x: getOffsetLeft(newButton),
              "--active-element-show": "1",
            });
            // Update the state after the animation completes to trigger a re-render
            // with the new active item.
            setActiveIndex(index);
          },
        },
      ],
    });

    gsap.to(activeElement, {
      x,
      "--active-element-strike-x": "-50%",
      duration: 0.6,
      ease: "none",
    });
  };

  return (
    <>
      <style>{`
        .navigation-menu {
          margin: 20px 0px;
          position: relative;
          z-index: 1;
        }

        .navigation-menu ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          gap: 40px;
        }

        .navigation-menu ul li button {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          border: none;
          cursor: pointer;
          background-color: transparent;
          padding: 0;
          margin: 0;
          list-style: 22px;
          transition: color 0.25s;
        }

        .navigation-menu ul li:not(.active):hover button {
          text-shadow: 0 0 10px ${color}, 0 0 20px ${color};
        }

        .navigation-menu .active-element {
          --active-element-scale-x: 1;
          --active-element-scale-y: 1;
          --active-element-show: 0;
          --active-element-opacity: 0;
          --active-element-width: 0px;
          --active-element-strike-x: 0%;
          --active-element-mask-position: 0%;
          position: absolute;
          left: 0;
          top: 34px;
          height: 3px;
          width: 36px;
          border-radius: 2px;
          background-color: ${color};
          opacity: var(--active-element-show);
        }

        .navigation-menu .active-element > svg,
        .navigation-menu .active-element .strike {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          opacity: var(--active-element-opacity);
          width: var(--active-element-width);
          mix-blend-mode: multiply;
        }

        .navigation-menu .active-element > svg {
          display: block;
          overflow: visible;
          height: 5px;
          filter: blur(0.5px) drop-shadow(2px 0px 8px ${color}40) drop-shadow(1px 0px 2px ${color}80) drop-shadow(0px 0px 3px ${color}40) drop-shadow(2px 0px 8px ${color}45) drop-shadow(8px 0px 16px ${color}50);
        }

        .navigation-menu .active-element .strike {
          padding: 24px 0;
          -webkit-mask-image: linear-gradient(to right, transparent calc(0% + var(--active-element-mask-position)), black calc(15% + var(--active-element-mask-position)), black 80%, transparent);
          mask-image: linear-gradient(to right, transparent calc(0% + var(--active-element-mask-position)), black calc(15% + var(--active-element-mask-position)), black 80%, transparent);
        }

        .navigation-menu .active-element .strike svg {
          display: block;
          overflow: visible;
          height: 12px;
          width: calc(var(--active-element-width) * 2);
          transform: translate(var(--active-element-strike-x), 30%) scale(var(--active-element-scale-x), var(--active-element-scale-y));
        }

        .navigation-menu .active-element .strike svg:last-child {
          transform: translate(var(--active-element-strike-x), -30%) scale(-1);
        }

        .navigation-menu .active-element .strike svg g path:nth-child(2) {
          filter: blur(2px);
        }

        .navigation-menu .active-element .strike svg g path:nth-child(3) {
          filter: blur(4px);
        }

        .navigation-menu.before .active-element {
          transform: rotateY(180deg);
        }
      `}</style>

      {/* The main container for the component, replicating the body styles. */}

      <nav className="navigation-menu" ref={navRef}>
        <ul>
          {items.map((item, index) => (
            <li key={item} className={index === activeIndex ? "active" : ""}>
              <button
                ref={(el) => {
                  buttonRefs.current[index] = el;
                }}
                onClick={() => handleClick(index)}
                className="text-foreground"
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
        <div className="active-element" ref={activeElementRef} />
      </nav>
    </>
  );
};

export default SparkleNavbar;

```
--------------------------------------------------

## CATEGORY (FREE): AI Components (2)

### COMPONENT: ai-gooey-blob
Category: AI Components
Description: A mesmerising SVG liquid metaball gooey blob loader and AI state visualizer. Uses SVG feGaussianBlur and feColorMatrix filters to fuse satellite liquid droplets into a central glowing nucleus. Features orbit, pulse morph, wave flow, and cursor-following interactive animation modes.
URL: https://lightswind.com/components/ai-gooey-blob
Import: import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob"
Registry URL: https://lightswind.com/r/ai-gooey-blob.json
Install Command: npx lightswind@latest add ai-gooey-blob

Usage:
```tsx
import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob";

export function Demo() {
  return (
    <div className="flex items-center justify-center p-8">
      <AiGooeyBlob
        size={240}
        variant="orbit"
        color="#6366f1"
        colorSecondary="#a855f7"
        label="AI Thinking..."
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useId } from "react";
import { motion } from "framer-motion";
import { MicOff } from "lucide-react";

export interface AiGooeyBlobProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Diameter of the AI Blob container in pixels (default: 220) */
  size?: number;
  /** Primary gradient color (default: "#6366f1") */
  color?: string;
  /** Secondary gradient color (default: "#ec4899") */
  colorSecondary?: string;
  /** Tertiary gradient color (default: "#06b6d4") */
  colorTertiary?: string;
  /** AI Assistant state mode: "listening" | "thinking" | "speaking" | "orbit" | "pulse" */
  variant?: "listening" | "thinking" | "speaking" | "orbit" | "pulse";
  /** Sensitivity scale modifier (default: 0.6) */
  audioLevel?: number;
  /** Active listening state toggle */
  isListening?: boolean;
  /** Click handler for central mic orb */
  onMicClick?: () => void;
  /** Custom icon or content inside the core nucleus */
  centerContent?: React.ReactNode;
}

export const AiGooeyBlob: React.FC<AiGooeyBlobProps> = ({
  size = 220,
  color = "#6366f1",
  colorSecondary = "#ec4899",
  colorTertiary = "#06b6d4",
  variant = "listening",
  audioLevel = 0.6,
  isListening = true,
  onMicClick,
  centerContent,
  className = "",
  style,
  ...props
}) => {
  const rawId = useId();
  const filterId = `gooey-filter-${rawId.replace(/:/g, "")}`;

  return (
    <div
      className={`relative inline-flex flex-col items-center justify-center select-none ${className}`}
      style={{ width: size, height: size, ...style }}
      {...props}
    >
      {/* ── SVG Crisp Gooey Liquid Filter Definition ── */}
      <svg className="absolute w-0 h-0 pointer-events-none" aria-hidden="true">
        <defs>
          {/* Sharp High-Definition Liquid Gooey Filter */}
          <filter id={filterId} colorInterpolationFilters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 32 -11"
              result="gooey"
            />
            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
          </filter>
        </defs>
      </svg>

      {/* ── Liquid Gooey Metaball Container ── */}
      <div
        className="relative w-full h-full flex items-center justify-center"
        style={{ filter: `url(#${filterId})` }}
      >
        {/* Central Core Liquid Nucleus - Pure Fluid Morphing (No Line Animations) */}
        <motion.div
          animate={
            variant === "listening"
              ? {
                  scale: [1, 1.22, 0.82, 1.15, 1],
                  borderRadius: [
                    "30% 70% 70% 30% / 30% 30% 70% 70%",
                    "70% 30% 30% 70% / 70% 70% 30% 30%",
                    "25% 75% 60% 40% / 55% 25% 75% 45%",
                    "65% 35% 40% 60% / 35% 65% 35% 65%",
                    "30% 70% 70% 30% / 30% 30% 70% 70%",
                  ],
                }
              : variant === "speaking"
              ? {
                  scale: [0.82, 1.3, 0.78, 1.25, 0.82],
                  borderRadius: [
                    "20% 80% 40% 60% / 70% 30% 70% 30%",
                    "80% 20% 60% 40% / 30% 70% 30% 70%",
                    "35% 65% 25% 75% / 65% 35% 75% 25%",
                    "20% 80% 40% 60% / 70% 30% 70% 30%",
                  ],
                }
              : variant === "pulse"
              ? {
                  scale: [0.8, 1.28, 0.8],
                  borderRadius: [
                    "25% 75% 75% 25% / 60% 40% 60% 40%",
                    "75% 25% 25% 75% / 40% 60% 40% 60%",
                    "25% 75% 75% 25% / 60% 40% 60% 40%",
                  ],
                }
              : {
                  scale: [0.9, 1.18, 0.9],
                  borderRadius: [
                    "35% 65% 60% 40% / 60% 40% 60% 40%",
                    "65% 35% 40% 60% / 40% 60% 40% 60%",
                    "35% 65% 60% 40% / 60% 40% 60% 40%",
                  ],
                }
          }
          transition={{
            duration: variant === "speaking" ? 1.8 : variant === "listening" ? 3 : 3.8,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute rounded-full flex items-center justify-center pointer-events-none"
          style={{
            width: size * 0.54,
            height: size * 0.54,
            background: `linear-gradient(135deg, ${color}, ${colorSecondary}, ${colorTertiary})`,
            boxShadow: `inset 0 2px 4px rgba(255,255,255,0.4), 0 8px 20px rgba(0,0,0,0.15)`,
          }}
        />

        {/* Orbiting Satellite Liquid Drops - Deep Fluid Fusion */}
        {[0, 1, 2, 3, 4].map((i) => {
          const angle = (i * 360) / 5;
          const orbitRadius = size * (0.24 + (i % 2) * 0.05);
          const dropSize = size * (0.2 + (i % 3) * 0.04);

          return (
            <motion.div
              key={i}
              animate={{
                rotate: variant === "speaking" ? [angle, angle - 360] : [angle, angle + 360],
              }}
              transition={{
                duration: variant === "speaking" ? 3.5 : 6 + i * 1.2,
                repeat: Infinity,
                ease: "linear",
              }}
              className="absolute rounded-full flex items-center justify-center pointer-events-none"
              style={{
                width: size * 0.72,
                height: size * 0.72,
                transformOrigin: "center center",
              }}
            >
              <motion.div
                animate={{
                  scale: [0.65, 1.45, 0.65],
                  borderRadius: [
                    "25% 75% 75% 25% / 60% 40% 60% 40%",
                    "75% 25% 25% 75% / 40% 60% 40% 60%",
                    "25% 75% 75% 25% / 60% 40% 60% 40%",
                  ],
                }}
                transition={{
                  duration: 2.2 + i * 0.4,
                  repeat: Infinity,
                  ease: "easeInOut",
                  delay: i * 0.25,
                }}
                className="rounded-full"
                style={{
                  width: dropSize,
                  height: dropSize,
                  background:
                    i % 2 === 0
                      ? `linear-gradient(135deg, ${color}, ${colorSecondary}, ${colorTertiary})`
                      : `linear-gradient(225deg, ${colorTertiary}, ${color}, ${colorSecondary})`,
                  boxShadow: `inset 0 1px 3px rgba(255,255,255,0.4)`,
                  transform: `translate(${orbitRadius * Math.cos((angle * Math.PI) / 180)}px, ${
                    orbitRadius * Math.sin((angle * Math.PI) / 180)
                  }px)`,
                }}
              />
            </motion.div>
          );
        })}
      </div>

      {/* ── Center Micro-Interactive Mic / Voice Orb with 5 Mode-Specific 3-Bar Equalizers ── */}
      <div className="absolute inset-0 flex items-center justify-center z-10">
        <motion.button
          whileHover={{ scale: 1.08 }}
          whileTap={{ scale: 0.92 }}
          onClick={onMicClick}
          className={`
            relative w-14 h-14 rounded-full bg-black/30 dark:bg-black/50 backdrop-blur-md
            border border-white/50 shadow-lg flex items-center justify-center
            text-white transition-all cursor-pointer group hover:bg-black/40
          `}
        >
          {centerContent ? (
            centerContent
          ) : isListening ? (
            <div className="flex items-center justify-center gap-1">
              {/* 1. LISTENING MODE: Dynamic Audio Mic Equalizer Bounce */}
              {variant === "listening" && (
                <>
                  <motion.span
                    animate={{ height: ["8px", "22px", "8px"] }}
                    transition={{ duration: 0.6, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["14px", "28px", "14px"] }}
                    transition={{ duration: 0.6, delay: 0.15, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["6px", "18px", "6px"] }}
                    transition={{ duration: 0.6, delay: 0.3, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 2. THINKING MODE: Floating Loading Wave Dots */}
              {variant === "thinking" && (
                <>
                  <motion.span
                    animate={{ y: [-4, 4, -4], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: 0.8, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ y: [-4, 4, -4], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: 0.8, delay: 0.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ y: [-4, 4, -4], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: 0.8, delay: 0.4, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-1.5 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 3. SPEAKING MODE: High Energy Rapid Speech Oscillation */}
              {variant === "speaking" && (
                <>
                  <motion.span
                    animate={{ height: ["4px", "26px", "10px", "24px", "4px"] }}
                    transition={{ duration: 0.4, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["24px", "8px", "28px", "6px", "24px"] }}
                    transition={{ duration: 0.4, delay: 0.1, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["10px", "22px", "4px", "26px", "10px"] }}
                    transition={{ duration: 0.4, delay: 0.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 4. ORBIT MODE: Rotating 3-Dot Orbital Loop */}
              {variant === "orbit" && (
                <motion.div
                  animate={{ rotate: 360 }}
                  transition={{ duration: 1.6, repeat: Infinity, ease: "linear" }}
                  className="flex items-center gap-1"
                >
                  <span className="w-1.5 h-1.5 bg-white rounded-full shadow-xs" />
                  <span className="w-1.5 h-1.5 bg-white/70 rounded-full shadow-xs" />
                  <span className="w-1.5 h-1.5 bg-white/30 rounded-full shadow-xs" />
                </motion.div>
              )}

              {/* 5. PULSE MODE: Synchronized Breathing Equalizer Pulse */}
              {variant === "pulse" && (
                <>
                  <motion.span
                    animate={{ scaleY: [0.5, 1.4, 0.5] }}
                    transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 h-5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ scaleY: [0.5, 1.4, 0.5] }}
                    transition={{ duration: 1.2, delay: 0.15, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 h-5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ scaleY: [0.5, 1.4, 0.5] }}
                    transition={{ duration: 1.2, delay: 0.3, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1 h-5 bg-white rounded-full shadow-xs"
                  />
                </>
              )}
            </div>
          ) : (
            <MicOff className="w-5 h-5 text-white/80" />
          )}
        </motion.button>
      </div>
    </div>
  );
};

export default AiGooeyBlob;

```
--------------------------------------------------

### COMPONENT: ai-aurora-blob
Category: AI Components
Description: A gorgeous WebGL OGL 3D Perlin noise Soft Aurora fluid wave sphere component with real-time mouse interaction and customizable cosine gradients for AI voice assistants.
URL: https://lightswind.com/components/ai-aurora-blob
Import: import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob"
Registry URL: https://lightswind.com/r/ai-aurora-blob.json
Install Command: npx lightswind@latest add ai-aurora-blob

Usage:
```tsx
import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob";

export function Demo() {
  return (
    <div className="flex items-center justify-center p-8">
      <AiAuroraBlob
        size={320}
        variant="listening"
        color1="#10b981"
        color2="#6366f1"
        enableMouseInteraction={true}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import { Renderer, Program, Mesh, Triangle } from "ogl";
import { motion } from "framer-motion";
import { MicOff } from "lucide-react";

function hexToVec3(hex: string): [number, number, number] {
  const h = hex.replace("#", "");
  return [
    parseInt(h.slice(0, 2), 16) / 255 || 0,
    parseInt(h.slice(2, 4), 16) / 255 || 0,
    parseInt(h.slice(4, 6), 16) / 255 || 0,
  ];
}

const vertexShader = `#version 300 es
in vec2 uv;
in vec2 position;
out vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 0, 1);
}
`;

const fragmentShader = `#version 300 es
precision highp float;

uniform float uTime;
uniform vec3 uResolution;
uniform float uSpeed;
uniform float uScale;
uniform float uBrightness;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uNoiseFreq;
uniform float uNoiseAmp;
uniform float uBandHeight;
uniform float uBandSpread;
uniform float uOctaveDecay;
uniform float uLayerOffset;
uniform float uColorSpeed;
uniform vec2 uMouse;
uniform float uMouseInfluence;
uniform bool uEnableMouse;
uniform bool uShowBorder;

out vec4 fragColor;

#define TAU 6.28318530718

vec3 gradientHash(vec3 p) {
  p = vec3(
    dot(p, vec3(127.1, 311.7, 234.6)),
    dot(p, vec3(269.5, 183.3, 198.3)),
    dot(p, vec3(169.5, 283.3, 156.9))
  );
  vec3 h = fract(sin(p) * 43758.5453123);
  float phi = acos(2.0 * h.x - 1.0);
  float theta = TAU * h.y;
  return vec3(cos(theta) * sin(phi), sin(theta) * cos(phi), cos(phi));
}

float quinticSmooth(float t) {
  float t2 = t * t;
  float t3 = t * t2;
  return 6.0 * t3 * t2 - 15.0 * t2 * t2 + 10.0 * t3;
}

vec3 cosineGradient(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
  return a + b * cos(TAU * (c * t + d));
}

float perlin3D(float amplitude, float frequency, float px, float py, float pz) {
  float x = px * frequency;
  float y = py * frequency;

  float fx = floor(x); float fy = floor(y); float fz = floor(pz);
  float cx = ceil(x);  float cy = ceil(y);  float cz = ceil(pz);

  vec3 g000 = gradientHash(vec3(fx, fy, fz));
  vec3 g100 = gradientHash(vec3(cx, fy, fz));
  vec3 g010 = gradientHash(vec3(fx, cy, fz));
  vec3 g110 = gradientHash(vec3(cx, cy, fz));
  vec3 g001 = gradientHash(vec3(fx, fy, cz));
  vec3 g101 = gradientHash(vec3(cx, fy, cz));
  vec3 g011 = gradientHash(vec3(fx, cy, cz));
  vec3 g111 = gradientHash(vec3(cx, cy, cz));

  float d000 = dot(g000, vec3(x - fx, y - fy, pz - fz));
  float d100 = dot(g100, vec3(x - cx, y - fy, pz - fz));
  float d010 = dot(g010, vec3(x - fx, y - cy, pz - fz));
  float d110 = dot(g110, vec3(x - cx, y - cy, pz - fz));
  float d001 = dot(g001, vec3(x - fx, y - fy, pz - cz));
  float d101 = dot(g101, vec3(x - cx, y - fy, pz - cz));
  float d011 = dot(g011, vec3(x - fx, y - cy, pz - cz));
  float d111 = dot(g111, vec3(x - cx, y - cy, pz - cz));

  float sx = quinticSmooth(x - fx);
  float sy = quinticSmooth(y - fy);
  float sz = quinticSmooth(pz - fz);

  float lx00 = mix(d000, d100, sx);
  float lx10 = mix(d010, d110, sx);
  float lx01 = mix(d001, d101, sx);
  float lx11 = mix(d011, d111, sx);

  float ly0 = mix(lx00, lx10, sy);
  float ly1 = mix(lx01, lx11, sy);

  return amplitude * mix(ly0, ly1, sz);
}

float auroraGlow(float t, vec2 shift) {
  vec2 uv = gl_FragCoord.xy / uResolution.y;
  uv += shift;

  float noiseVal = 0.0;
  float freq = uNoiseFreq;
  float amp = uNoiseAmp;
  vec2 samplePos = uv * uScale;

  for (float i = 0.0; i < 3.0; i += 1.0) {
    noiseVal += perlin3D(amp, freq, samplePos.x, samplePos.y, t);
    amp *= uOctaveDecay;
    freq *= 2.0;
  }

  float yBand = (uv.y - 0.5) * 5.0;
  return max(exp(-2.2 * abs(noiseVal + yBand * 0.45)), 0.0);
}

void main() {
  vec2 uv = gl_FragCoord.xy / uResolution.xy;
  float t = uSpeed * 0.4 * uTime;

  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution.xy) / uResolution.y;
  float dist = length(p);
  float radius = 0.36;
  float edge = fwidth(dist) * 1.5;
  float mask = 1.0 - smoothstep(radius - edge, radius + edge, dist);

  if (mask <= 0.0) {
    fragColor = vec4(0.0);
    return;
  }

  vec2 shift = vec2(0.0);
  if (uEnableMouse) {
    shift = (uMouse - 0.5) * uMouseInfluence;
  }

  // 1. Dynamic Aurora Waves Field
  vec3 auroraCol = vec3(0.0);
  auroraCol += 0.95 * auroraGlow(t, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.2 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.3, 0.20, 0.20)) * uColor1;
  auroraCol += 0.95 * auroraGlow(t + uLayerOffset, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.1 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(2.0, 1.0, 0.0), vec3(0.5, 0.20, 0.25)) * uColor2;

  // 2. Full Sphere Ambient Fill (renders whole circular ball filled with dynamic aurora glow)
  float normDist = clamp(dist / radius, 0.0, 1.0);
  float centerVol = sqrt(max(1.0 - normDist * normDist, 0.0));
  vec3 sphereBg = mix(uColor1, uColor2, sin(uv.x * 3.1415 + t * 0.5) * 0.5 + 0.5) * 0.45 * centerVol;

  vec3 col = sphereBg + auroraCol * uBrightness;

  // 3. Mild Frosted Glass Rim Reflection & Border Toggle (No dark shadow)
  if (uShowBorder) {
    float borderAngle = atan(p.y, p.x);
    vec3 glassTint = mix(uColor1, uColor2, sin(borderAngle * 2.0 + t * 1.2) * 0.5 + 0.5);
    vec3 glassHighlight = mix(vec3(1.0), glassTint * 1.2, 0.35);

    // Sleek mild frosted glass rim highlight along outer radius (0.91 - 0.99)
    float glassRim = sin(smoothstep(0.91, 0.99, normDist) * 3.14159);

    // Blend mild crystal glass rim highlight
    col = mix(col, glassHighlight, glassRim * 0.45);
  }

  // Soft spherical alpha falloff
  float alpha = (0.75 + 0.25 * centerVol) * mask;

  fragColor = vec4(col * alpha, alpha);
}
`;

export interface AiAuroraBlobProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Diameter of the AI Aurora Blob container in pixels (default: 260) */
  size?: number;
  /** Primary aurora gradient color (default: "#10b981") */
  color1?: string;
  /** Secondary aurora gradient color (default: "#6366f1") */
  color2?: string;
  /** AI Assistant state mode: "listening" | "thinking" | "speaking" | "orbit" | "pulse" */
  variant?: "listening" | "thinking" | "speaking" | "orbit" | "pulse";
  /** Aurora wave speed multiplier (default: 0.6) */
  speed?: number;
  /** Aurora wave scale (default: 1.5) */
  scale?: number;
  /** Aurora brightness (default: 1.2) */
  brightness?: number;
  /** Noise frequency (default: 2.5) */
  noiseFrequency?: number;
  /** Noise amplitude (default: 1.0) */
  noiseAmplitude?: number;
  /** Aurora band height position (default: 0.5) */
  bandHeight?: number;
  /** Aurora band spread (default: 1.0) */
  bandSpread?: number;
  /** Enable mouse interaction warping (default: true) */
  enableMouseInteraction?: boolean;
  /** Mouse warp influence factor (default: 0.25) */
  mouseInfluence?: number;
  /** Toggle outer glassmorphic border rim (default: true) */
  showBorder?: boolean;
  /** Active voice listening state */
  isListening?: boolean;
  /** Central mic click handler */
  onMicClick?: () => void;
  /** Custom content inside center orb */
  centerContent?: React.ReactNode;
}

export const AiAuroraBlob: React.FC<AiAuroraBlobProps> = ({
  size = 260,
  color1 = "#10b981",
  color2 = "#6366f1",
  variant = "listening",
  speed = 0.6,
  scale = 1.5,
  brightness = 1.2,
  noiseFrequency = 2.5,
  noiseAmplitude = 1.0,
  bandHeight = 0.5,
  bandSpread = 1.0,
  enableMouseInteraction = true,
  mouseInfluence = 0.25,
  showBorder = true,
  isListening = true,
  onMicClick,
  centerContent,
  className = "",
  style,
  onMouseEnter,
  onMouseLeave,
  ...props
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState<boolean>(false);

  // Dynamic state variations based on AI Voice Assistant mode
  const variantConfig = React.useMemo(() => {
    switch (variant) {
      case "listening":
        return { speedMult: 1.3, brightMult: 1.1, freqMult: 1.1 };
      case "thinking":
        return { speedMult: 1.9, brightMult: 1.3, freqMult: 1.8 };
      case "speaking":
        return { speedMult: 2.3, brightMult: 1.4, freqMult: 1.4 };
      case "orbit":
        return { speedMult: 0.8, brightMult: 1.0, freqMult: 0.9 };
      case "pulse":
        return { speedMult: 1.1, brightMult: 1.2, freqMult: 1.0 };
      default:
        return { speedMult: 1.0, brightMult: 1.0, freqMult: 1.0 };
    }
  }, [variant]);

  const hoverSpeedMult = isHovered ? 2.4 : 1.0;
  const hoverBrightMult = isHovered ? 1.25 : 1.0;

  const propsRef = useRef({
    speed: speed * variantConfig.speedMult * hoverSpeedMult,
    scale,
    brightness: brightness * variantConfig.brightMult * hoverBrightMult,
    color1,
    color2,
    noiseFrequency: noiseFrequency * variantConfig.freqMult,
    noiseAmplitude,
    bandHeight,
    bandSpread,
    enableMouseInteraction,
    mouseInfluence,
    showBorder,
  });

  propsRef.current = {
    speed: speed * variantConfig.speedMult * hoverSpeedMult,
    scale,
    brightness: brightness * variantConfig.brightMult * hoverBrightMult,
    color1,
    color2,
    noiseFrequency: noiseFrequency * variantConfig.freqMult,
    noiseAmplitude,
    bandHeight,
    bandSpread,
    enableMouseInteraction,
    mouseInfluence,
    showBorder,
  };

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let renderer: Renderer | null = null;
    try {
      renderer = new Renderer({ alpha: true, premultipliedAlpha: true });
    } catch (e) {
      console.warn("WebGL not supported for AiAuroraBlob", e);
      return;
    }

    const gl = renderer.gl;
    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    gl.canvas.style.backgroundColor = "transparent";

    let program: Program;
    let currentMouse = [0.5, 0.5];
    let targetMouse = [0.5, 0.5];

    function handleMouseMove(e: MouseEvent) {
      const rect = gl.canvas.getBoundingClientRect();
      targetMouse = [
        (e.clientX - rect.left) / (rect.width || 1),
        1.0 - (e.clientY - rect.top) / (rect.height || 1),
      ];
    }

    function handleMouseLeave() {
      targetMouse = [0.5, 0.5];
    }

    function resize() {
      if (!container || !renderer) return;
      const w = container.offsetWidth || size;
      const h = container.offsetHeight || size;
      renderer.setSize(w, h);
      if (program) {
        program.uniforms.uResolution.value = [w, h, w / h];
      }
    }

    const resizeObserver = new ResizeObserver(resize);
    resizeObserver.observe(container);
    resize();

    const geometry = new Triangle(gl);
    program = new Program(gl, {
      vertex: vertexShader,
      fragment: fragmentShader,
      uniforms: {
        uTime: { value: 0 },
        uResolution: { value: [container.offsetWidth || size, container.offsetHeight || size, 1.0] },
        uSpeed: { value: propsRef.current.speed },
        uScale: { value: propsRef.current.scale },
        uBrightness: { value: propsRef.current.brightness },
        uColor1: { value: hexToVec3(propsRef.current.color1) },
        uColor2: { value: hexToVec3(propsRef.current.color2) },
        uNoiseFreq: { value: propsRef.current.noiseFrequency },
        uNoiseAmp: { value: propsRef.current.noiseAmplitude },
        uBandHeight: { value: propsRef.current.bandHeight },
        uBandSpread: { value: propsRef.current.bandSpread },
        uOctaveDecay: { value: 0.1 },
        uLayerOffset: { value: 0.5 },
        uColorSpeed: { value: 1.0 },
        uMouse: { value: new Float32Array([0.5, 0.5]) },
        uMouseInfluence: { value: propsRef.current.mouseInfluence },
        uEnableMouse: { value: propsRef.current.enableMouseInteraction },
        uShowBorder: { value: propsRef.current.showBorder },
      },
    });

    const mesh = new Mesh(gl, { geometry, program });
    container.appendChild(gl.canvas);

    if (enableMouseInteraction) {
      gl.canvas.addEventListener("mousemove", handleMouseMove);
      gl.canvas.addEventListener("mouseleave", handleMouseLeave);
    }

    let animationFrameId: number;

    function update(time: number) {
      animationFrameId = requestAnimationFrame(update);
      if (!renderer) return;

      const current = propsRef.current;
      program.uniforms.uTime.value = time * 0.001;
      program.uniforms.uSpeed.value = current.speed;
      program.uniforms.uScale.value = current.scale;
      program.uniforms.uBrightness.value = current.brightness;
      program.uniforms.uColor1.value = hexToVec3(current.color1);
      program.uniforms.uColor2.value = hexToVec3(current.color2);
      program.uniforms.uNoiseFreq.value = current.noiseFrequency;
      program.uniforms.uNoiseAmp.value = current.noiseAmplitude;
      program.uniforms.uBandHeight.value = current.bandHeight;
      program.uniforms.uBandSpread.value = current.bandSpread;
      program.uniforms.uEnableMouse.value = current.enableMouseInteraction;
      program.uniforms.uMouseInfluence.value = current.mouseInfluence;
      program.uniforms.uShowBorder.value = current.showBorder;

      if (current.enableMouseInteraction) {
        currentMouse[0] += 0.08 * (targetMouse[0] - currentMouse[0]);
        currentMouse[1] += 0.08 * (targetMouse[1] - currentMouse[1]);
        program.uniforms.uMouse.value[0] = currentMouse[0];
        program.uniforms.uMouse.value[1] = currentMouse[1];
      } else {
        program.uniforms.uMouse.value[0] = 0.5;
        program.uniforms.uMouse.value[1] = 0.5;
      }

      renderer.render({ scene: mesh });
    }
    animationFrameId = requestAnimationFrame(update);

    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      if (enableMouseInteraction && gl.canvas) {
        gl.canvas.removeEventListener("mousemove", handleMouseMove);
        gl.canvas.removeEventListener("mouseleave", handleMouseLeave);
      }
      if (container && gl.canvas.parentNode === container) {
        container.removeChild(gl.canvas);
      }
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [size]);

  return (
    <div
      onMouseEnter={(e) => {
        setIsHovered(true);
        onMouseEnter?.(e);
      }}
      onMouseLeave={(e) => {
        setIsHovered(false);
        onMouseLeave?.(e);
      }}
      className={`relative inline-flex items-center justify-center select-none overflow-hidden cursor-pointer group ${className}`}
      style={{ width: size, height: size, ...style }}
      {...props}
    >
      {/* ── Background WebGL Procedural Soft Aurora Waves ── */}
      <div ref={containerRef} className="absolute inset-0 w-full h-full pointer-events-none" />

      {/* ── Center Frosted Glassmorphic Voice Button ── */}
      <div className="relative z-10 flex items-center justify-center">
        <motion.button
          whileHover={{ scale: 1.12 }}
          whileTap={{ scale: 0.92 }}
          onClick={onMicClick}
          className={`
            relative w-[84px] h-[84px] rounded-full
            bg-white/15 dark:bg-white/10 backdrop-blur-2xl
            border border-white/60 dark:border-white/40
            shadow-[0_8px_32px_rgba(0,0,0,0.25),inset_0_2px_8px_rgba(255,255,255,0.7)]
            flex items-center justify-center
            text-white transition-all cursor-pointer group-hover:bg-white/25
          `}
          style={{
            boxShadow: `0 8px 32px rgba(0,0,0,0.25), inset 0 2px 8px rgba(255,255,255,0.7), 0 0 24px ${color1}40`,
          }}
        >
          {centerContent ? (
            centerContent
          ) : isListening ? (
            <div className="flex items-center justify-center gap-1.5">
              {/* 1. LISTENING MODE: Dynamic Audio Equalizer Bounce */}
              {variant === "listening" && (
                <>
                  <motion.span
                    animate={{ height: isHovered ? ["14px", "36px", "14px"] : ["12px", "32px", "12px"] }}
                    transition={{ duration: isHovered ? 0.35 : 0.6, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: isHovered ? ["24px", "44px", "24px"] : ["20px", "40px", "20px"] }}
                    transition={{ duration: isHovered ? 0.35 : 0.6, delay: 0.1, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: isHovered ? ["12px", "30px", "12px"] : ["10px", "26px", "10px"] }}
                    transition={{ duration: isHovered ? 0.35 : 0.6, delay: 0.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 2. THINKING MODE: Floating Loading Wave Dots */}
              {variant === "thinking" && (
                <>
                  <motion.span
                    animate={{ y: [-6, 6, -6], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: isHovered ? 0.5 : 0.8, repeat: Infinity, ease: "easeInOut" }}
                    className="w-2.5 h-2.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ y: [-6, 6, -6], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: isHovered ? 0.5 : 0.8, delay: 0.15, repeat: Infinity, ease: "easeInOut" }}
                    className="w-2.5 h-2.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ y: [-6, 6, -6], opacity: [0.4, 1, 0.4] }}
                    transition={{ duration: isHovered ? 0.5 : 0.8, delay: 0.3, repeat: Infinity, ease: "easeInOut" }}
                    className="w-2.5 h-2.5 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 3. SPEAKING MODE: High Energy Rapid Speech Oscillation */}
              {variant === "speaking" && (
                <>
                  <motion.span
                    animate={{ height: ["8px", "36px", "14px", "30px", "8px"] }}
                    transition={{ duration: isHovered ? 0.22 : 0.35, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["32px", "12px", "38px", "10px", "32px"] }}
                    transition={{ duration: isHovered ? 0.22 : 0.35, delay: 0.08, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ height: ["14px", "30px", "8px", "34px", "14px"] }}
                    transition={{ duration: isHovered ? 0.22 : 0.35, delay: 0.15, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 bg-white rounded-full shadow-xs"
                  />
                </>
              )}

              {/* 4. ORBIT MODE: Rotating 3-Dot Orbital Loop */}
              {variant === "orbit" && (
                <motion.div
                  animate={{ rotate: 360 }}
                  transition={{ duration: isHovered ? 0.8 : 1.5, repeat: Infinity, ease: "linear" }}
                  className="flex items-center gap-2"
                >
                  <span className="w-2.5 h-2.5 bg-white rounded-full shadow-xs" />
                  <span className="w-2.5 h-2.5 bg-white/70 rounded-full shadow-xs" />
                  <span className="w-2.5 h-2.5 bg-white/30 rounded-full shadow-xs" />
                </motion.div>
              )}

              {/* 5. PULSE MODE: Synchronized Breathing Equalizer Pulse */}
              {variant === "pulse" && (
                <>
                  <motion.span
                    animate={{ scaleY: [0.5, 1.5, 0.5] }}
                    transition={{ duration: isHovered ? 0.7 : 1.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-7 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ scaleY: [0.5, 1.5, 0.5] }}
                    transition={{ duration: isHovered ? 0.7 : 1.2, delay: 0.1, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-7 bg-white rounded-full shadow-xs"
                  />
                  <motion.span
                    animate={{ scaleY: [0.5, 1.5, 0.5] }}
                    transition={{ duration: isHovered ? 0.7 : 1.2, delay: 0.2, repeat: Infinity, ease: "easeInOut" }}
                    className="w-1.5 h-7 bg-white rounded-full shadow-xs"
                  />
                </>
              )}
            </div>
          ) : (
            <MicOff className="w-7 h-7 text-white/80" />
          )}
        </motion.button>
      </div>
    </div>
  );
};

export default AiAuroraBlob;

```
--------------------------------------------------

## CATEGORY (FREE): Components (48)

### COMPONENT: animated-copy-button
Category: Components
Description: A highly interactive copy-to-clipboard button using Framer Motion with smooth success animations.
URL: https://lightswind.com/components/animated-copy-button
Import: import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button"
Registry URL: https://lightswind.com/r/animated-copy-button.json
Install Command: npx lightswind@latest add animated-copy-button

Usage:
```tsx
import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button";

export function AnimatedCopyButtonDemo() {
  return (
    <div className="flex flex-col items-center gap-4 py-8">
      <AnimatedCopyButton textToCopy="npm install lightswind-ui" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Check, Copy } from "lucide-react";
import { cn } from "@/components/lib/utils";

interface AnimatedCopyButtonProps {
  /** The text that will be copied to the clipboard */
  textToCopy: string;
  /** Optional classname for the button */
  className?: string;
  /** Size of the button */
  size?: "sm" | "md" | "lg";
  /** Optional callback fired when copied */
  onCopy?: () => void;
}

export function AnimatedCopyButton({
  textToCopy,
  className,
  size = "md",
  onCopy,
}: AnimatedCopyButtonProps) {
  const [isCopied, setIsCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(textToCopy);
      setIsCopied(true);
      if (onCopy) onCopy();

      // Reset after 2 seconds
      setTimeout(() => {
        setIsCopied(false);
      }, 2000);
    } catch (err) {
      console.error("Failed to copy text: ", err);
    }
  };

  const sizes = {
    sm: "h-8 w-8",
    md: "h-10 w-10",
    lg: "h-12 w-12",
  };

  const iconSizes = {
    sm: "h-4 w-4",
    md: "h-5 w-5",
    lg: "h-6 w-6",
  };

  return (
    <button
      onClick={handleCopy}
      className={cn(
        "relative flex items-center justify-center rounded-md border bg-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        sizes[size],
        className
      )}
      aria-label="Copy to clipboard"
    >
      <AnimatePresence initial={false}>
        {isCopied ? (
          <motion.div
            key="check"
            initial={{ opacity: 0, scale: 0.5, rotate: -45 }}
            animate={{ opacity: 1, scale: 1, rotate: 0 }}
            exit={{ opacity: 0, scale: 0.5, rotate: 45 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
            className="absolute flex items-center justify-center text-green-500"
          >
            <Check className={iconSizes[size]} />
          </motion.div>
        ) : (
          <motion.div
            key="copy"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
            className="absolute flex items-center justify-center text-foreground/70"
          >
            <Copy className={iconSizes[size]} />
          </motion.div>
        )}
      </AnimatePresence>
      
      {/* Background Ripple Effect on Copy */}
      {isCopied && (
        <motion.div
          initial={{ opacity: 0.5, scale: 1 }}
          animate={{ opacity: 0, scale: 2 }}
          transition={{ duration: 0.5 }}
          className="absolute inset-0 rounded-md bg-green-500/20"
        />
      )}
    </button>
  );
}

```
--------------------------------------------------

### COMPONENT: animated-notification
Category: Components
Description: A professional animated notification center with smooth transitions, blur effects, and customizable styling. Displays notifications one-by-one with beautiful entrance and exit animations.
URL: https://lightswind.com/components/animated-notification
Import: import AnimatedNotification from '@/components/lightswind/animated-notification';
Registry URL: https://lightswind.com/r/animated-notification.json
Install Command: npx lightswind@latest add animated-notification

Usage:
```tsx
<AnimatedNotification
  autoGenerate={true}
  maxNotifications={3}
  variant="glass"
  position="top-right"
  showAvatars={true}
  allowDismiss={true}
  customMessages={["Welcome!", "Task completed!"]}
  onNotificationClick={(notification) => console.log(notification)}
/>
```

Source Code:
```tsx
"use client";

import React, { useCallback, useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X } from "lucide-react";
import { cn } from "@/components/lib/utils";

export interface NotificationUser {
  avatarUrl?: string;
  name: string;
  initials?: string;
  color?: string;
}

export interface NotificationItem {
  id: string;
  user: NotificationUser;
  message: string;
  timestamp?: string;
  priority?: "low" | "medium" | "high";
  type?: "info" | "success" | "warning" | "error";
  fadingOut?: boolean;
}

export interface AnimatedNotificationProps {
  maxNotifications?: number;
  autoInterval?: number;
  autoGenerate?: boolean;
  notifications?: NotificationItem[];
  customMessages?: string[];
  animationDuration?: number;
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
  width?: number;
  showAvatars?: boolean;
  showTimestamps?: boolean;
  className?: string;
  onNotificationClick?: (notification: NotificationItem) => void;
  onNotificationDismiss?: (notification: NotificationItem) => void;
  allowDismiss?: boolean;
  autoDismissTimeout?: number;
  userApiEndpoint?: string;
  variant?: "default" | "minimal" | "glass" | "bordered";
  fixedUser?: NotificationUser;
}

const defaultMessages = [
  "Just completed a task! ✅",
  "New feature deployed 🚀",
  "Check out our latest update 📱",
  "Server responded with 200 OK ✨",
  "Background job finished 🔄",
  "Data synced successfully! 💾",
  "User logged in successfully 👋",
  "Payment processed 💳",
  "Email sent successfully 📧",
  "Backup completed 🛡️",
];

// Lightweight native ID generator with zero external dependencies
function generateId(): string {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return Math.random().toString(36).substring(2, 9) + Date.now().toString(36);
}

const Avatar: React.FC<{ user: NotificationUser; showAvatar: boolean }> = ({ user, showAvatar }) => {
  if (!showAvatar) return null;
  return (
    <div
      className="flex-shrink-0 w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-primary/20 to-primary/40 flex items-center justify-center transition-all duration-300 hover:scale-110 backdrop-blur-sm"
      style={{ backgroundColor: user.color }}
    >
      {user.avatarUrl ? (
        <img src={user.avatarUrl} alt={`${user.name} avatar`} className="w-full h-full object-cover" loading="lazy" decoding="async" />
      ) : (
        <span className="text-xs font-bold text-white drop-shadow-sm">
          {user.initials || user.name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()}
        </span>
      )}
    </div>
  );
};

const Notification: React.FC<{
  notification: NotificationItem;
  showAvatars: boolean;
  showTimestamps: boolean;
  variant: string;
  onDismiss?: () => void;
  onClick?: () => void;
  allowDismiss: boolean;
}> = ({ notification, showAvatars, showTimestamps, variant, onDismiss, onClick, allowDismiss }) => {
  const getVariantStyles = () => {
    switch (variant) {
      case "minimal":
        return "bg-background/95 border border-border/50 backdrop-blur-xl";
      case "glass":
        return "bg-background/30 backdrop-blur-2xl border border-white/20 dark:border-gray-800/20 shadow-2xl";
      case "bordered":
        return "bg-card/95 border-2 border-primary/30 backdrop-blur-lg shadow-xl";
      default:
        return "bg-background/30 backdrop-blur-2xl border border-white/20 shadow-2xl";
    }
  };

  const getPriorityStyles = () => {
    switch (notification.priority) {
      case "high":
        return "border-l-4 border-l-red-500 shadow-red-500/20 dark:border-l-red-500 dark:shadow-red-500/20";
      case "medium":
        return "border-l-4 border-l-yellow-500 shadow-yellow-500/20 dark:border-l-yellow-500 dark:shadow-yellow-500/20";
      case "low":
        return "border-l-4 border-l-blue-500 shadow-[0_4px_15px_color-mix(in_srgb,var(--primarylw)_20%,transparent)] dark:border-l-blue-500 dark:shadow-[0_4px_15px_color-mix(in_srgb,var(--primarylw)_20%,transparent)]";
      default:
        return "border-l-4 border-l-primary/50 shadow-primary/20 dark:border-l-primary/50 dark:shadow-primary/20";
    }
  };

  return (
    <div
      className={cn(
        "group relative transition-transform duration-300 ease-out hover:scale-[1.02] hover:-translate-y-0.5",
        "rounded-xl p-4 flex items-start gap-3 w-80 max-w-80 cursor-pointer select-none",
        getVariantStyles(),
        getPriorityStyles()
      )}
      onClick={onClick}
    >
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl pointer-events-none" />
      <Avatar user={notification.user} showAvatar={showAvatars} />
      <div className="flex-1 min-w-0 space-y-1">
        <div className="flex items-center justify-between">
          <h3 className="font-semibold text-sm text-foreground/90 truncate">{notification.user.name}</h3>
          {showTimestamps && notification.timestamp && (
            <span className="text-xs text-muted-foreground/70 font-mono">{notification.timestamp}</span>
          )}
        </div>
        <p className="text-sm text-muted-foreground/80 line-clamp-2 leading-relaxed">{notification.message}</p>
      </div>

      {allowDismiss && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onDismiss?.();
          }}
          className="flex-shrink-0 w-5 h-5 text-muted-foreground/50 hover:text-muted-foreground transition-all duration-200 hover:scale-110 opacity-0 group-hover:opacity-100"
          aria-label="dismiss notification"
        >
          <X className="w-4 h-4" />
        </button>
      )}
    </div>
  );
};

async function fetchRandomUser(apiEndpoint?: string): Promise<NotificationUser> {
  try {
    const endpoint = apiEndpoint || "https://randomuser.me/api/";
    const res = await fetch(endpoint);
    const data = await res.json();
    const user = data.results[0];
    return {
      avatarUrl: user.picture?.large,
      name: `${user.name.first} ${user.name.last}`,
      color: `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`,
    };
  } catch {
    const names = ["John Doe", "Jane Smith", "Alex Johnson", "Sarah Wilson", "Mike Brown"];
    const randomName = names[Math.floor(Math.random() * names.length)];
    return {
      name: randomName,
      color: `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`,
    };
  }
}

function getRandomMessage(customMessages?: string[]) {
  const messages = customMessages || defaultMessages;
  return messages[Math.floor(Math.random() * messages.length)];
}

async function generateNotification(
  customMessages?: string[],
  userApiEndpoint?: string,
  fixedUser?: NotificationUser
): Promise<NotificationItem> {
  const user = fixedUser || (await fetchRandomUser(userApiEndpoint));
  return {
    id: generateId(),
    user,
    message: getRandomMessage(customMessages),
    timestamp: new Date().toLocaleTimeString(),
    priority: (["low", "medium", "high"] as const)[Math.floor(Math.random() * 3)],
  };
}

export const AnimatedNotification: React.FC<AnimatedNotificationProps> = ({
  maxNotifications = 3,
  autoInterval = 3500,
  autoGenerate = true,
  notifications = [],
  customMessages,
  animationDuration = 400,
  position = "center",
  width = 320,
  showAvatars = true,
  showTimestamps = true,
  className,
  onNotificationClick,
  onNotificationDismiss,
  allowDismiss = true,
  autoDismissTimeout = 3000,
  userApiEndpoint,
  variant = "glass",
  fixedUser,
}) => {
  const [notes, setNotes] = useState<NotificationItem[]>(notifications);
  const intervalRef = useRef<number | null>(null);
  const dismissTimeouts = useRef<Map<string, number>>(new Map());
  const isGenerating = useRef(false);

  // Clear a specific note's auto-dismiss timer
  const clearNoteTimeout = useCallback((id: string) => {
    const t = dismissTimeouts.current.get(id);
    if (t) {
      window.clearTimeout(t);
      dismissTimeouts.current.delete(id);
    }
  }, []);

  // Dismiss a notification smoothly
  const dismissNotification = useCallback(
    (id: string) => {
      clearNoteTimeout(id);
      setNotes((prev) => {
        const note = prev.find((n) => n.id === id);
        if (note && onNotificationDismiss) {
          onNotificationDismiss(note);
        }
        return prev.filter((n) => n.id !== id);
      });
    },
    [clearNoteTimeout, onNotificationDismiss]
  );

  // Add a newly generated note
  const addGeneratedNote = useCallback(async () => {
    if (!autoGenerate || isGenerating.current) return;
    isGenerating.current = true;
    try {
      const newNote = await generateNotification(customMessages, userApiEndpoint, fixedUser);

      setNotes((prev) => {
        let updated = [...prev];
        // Prune: if at or exceeding maxNotifications, dismiss oldest
        if (updated.length >= maxNotifications) {
          const removed = updated.shift();
          if (removed) {
            clearNoteTimeout(removed.id);
            onNotificationDismiss?.(removed);
          }
        }
        updated.push(newNote);

        // Schedule auto-dismiss for new note if timeout > 0
        if (autoDismissTimeout > 0) {
          const timeoutId = window.setTimeout(() => {
            dismissNotification(newNote.id);
          }, autoDismissTimeout);
          dismissTimeouts.current.set(newNote.id, timeoutId);
        }
        return updated;
      });
    } finally {
      isGenerating.current = false;
    }
  }, [
    autoGenerate,
    customMessages,
    userApiEndpoint,
    fixedUser,
    maxNotifications,
    autoDismissTimeout,
    clearNoteTimeout,
    onNotificationDismiss,
    dismissNotification,
  ]);

  // Start interval generator
  useEffect(() => {
    if (autoGenerate) {
      intervalRef.current = window.setInterval(() => {
        void addGeneratedNote();
      }, autoInterval);

      const first = window.setTimeout(() => void addGeneratedNote(), 800);

      return () => {
        if (intervalRef.current) {
          window.clearInterval(intervalRef.current);
          intervalRef.current = null;
        }
        window.clearTimeout(first);
      };
    } else {
      if (intervalRef.current) {
        window.clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    }
  }, [autoGenerate, autoInterval, addGeneratedNote]);

  // Sync external notifications prop
  useEffect(() => {
    if (notifications && notifications.length > 0) {
      dismissTimeouts.current.forEach((t) => window.clearTimeout(t));
      dismissTimeouts.current.clear();
      setNotes(notifications);

      if (autoDismissTimeout > 0) {
        notifications.forEach((n) => {
          const id = window.setTimeout(() => dismissNotification(n.id), autoDismissTimeout);
          dismissTimeouts.current.set(n.id, id);
        });
      }
    }
  }, [notifications, autoDismissTimeout, dismissNotification]);

  // Cleanup all timers on unmount
  useEffect(() => {
    return () => {
      if (intervalRef.current) window.clearInterval(intervalRef.current);
      dismissTimeouts.current.forEach((t) => window.clearTimeout(t));
      dismissTimeouts.current.clear();
    };
  }, []);

  const getPositionStyles = () => {
    switch (position) {
      case "top-left":
        return "fixed top-6 left-6 z-50";
      case "top-right":
        return "fixed top-6 right-6 z-50";
      case "bottom-left":
        return "fixed bottom-6 left-6 z-50";
      case "bottom-right":
        return "fixed bottom-6 right-6 z-50";
      default:
        return "flex items-center justify-center min-h-auto p-6";
    }
  };

  const animDurationSec = animationDuration / 1000;

  return (
    <div className={cn(getPositionStyles(), className)}>
      <div className="flex flex-col gap-3 items-center" style={{ width }}>
        <AnimatePresence mode="popLayout" initial={false}>
          {notes.map((note) => (
            <motion.div
              key={note.id}
              layout
              initial={{ opacity: 0, y: 20, scale: 0.94, filter: "blur(4px)" }}
              animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
              exit={{ opacity: 0, y: -20, scale: 0.94, filter: "blur(4px)" }}
              transition={{
                duration: animDurationSec,
                ease: [0.22, 1, 0.36, 1],
                layout: { duration: 0.32, ease: [0.22, 1, 0.36, 1] },
              }}
              className="w-full flex justify-center will-change-transform"
            >
              <Notification
                notification={note}
                showAvatars={showAvatars}
                showTimestamps={showTimestamps}
                variant={variant}
                allowDismiss={allowDismiss}
                onClick={() => onNotificationClick?.(note)}
                onDismiss={() => dismissNotification(note.id)}
              />
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default AnimatedNotification;

```
--------------------------------------------------

### COMPONENT: code-hover-cards
Category: Components
Description: Interactive cards with dynamic character matrix effects on hover. Features customizable gradients, animations, and responsive layouts with professional styling and accessibility support.
URL: https://lightswind.com/components/code-hover-cards
Import: import ThreeDHoverGallery from "@/components/lightswind/3d-hover-gallery"
Registry URL: https://lightswind.com/r/code-hover-cards.json
Install Command: npx lightswind@latest add code-hover-cards

Usage:
```tsx
import CodeHoverCards from '@/components/lightswind/code-hover-cards';
import { Github, Code, Dices } from 'lucide-react';

// Basic usage with default cards
<CodeHoverCards />

// Custom cards with icons and links
const cards = [
  { id: '1', icon: Github, title: 'GitHub', href: 'https://github.com' },
  { id: '2', icon: Code, title: 'Code Editor' },
  { id: '3', icon: Dices, title: 'Games' },
];

<CodeHoverCards 
  cards={cards}
  onCardClick={(card) => console.log('Clicked:', card)}
/>

// Advanced configuration
<CodeHoverCards 
  cards={cards}
  gradientColors={['#1a1a2e', '#16213e', '#0f3460', '#e94560']}
  maskRadius={400}
  characterCount={3000}
  iconSize={64}
  borderRadius={20}
  backgroundColor="#0a0a0a"
  columns={4}
  enableTouch={true}
  onCardClick={(card) => handleCardClick(card)}
  onCardHover={(card) => handleCardHover(card)}
/>
```

Source Code:
```tsx
"use client";
import React, { useState, useRef } from 'react';
import { cn } from '@/components/lib/utils';
import {
  Github,
  Code,
  Dices,
  Terminal,
  Settings,
  Heart,
  Star,
  Zap,
  Trophy,
  Shield,
} from 'lucide-react';

export interface CardData {
  id: string;
  icon: React.ComponentType<any>;
  href?: string;
  title?: string;
  description?: string;
}

export interface CodeHoverCardsProps {
  cards?: CardData[];
  className?: string;
  cardClassName?: string;
  maskRadius?: number;
  characterCount?: number;
  characterSet?: string;
  animationDuration?: number;
  borderRadius?: number;
  cardGap?: string;
  iconSize?: number;
  enableTouch?: boolean;
  columns?: 1 | 2 | 3 | 4;
  minHeight?: number;
  onCardClick?: (card: CardData) => void;
  onCardHover?: (card: CardData) => void;
  disabled?: boolean;
  showBorder?: boolean;
  theme?: 'normal' | 'dark'; // retained for fallback
}

const DEFAULT_CARDS: CardData[] = [
  { id: '1', icon: Github, title: 'GitHub', description: 'Code repository' },
  { id: '2', icon: Code, title: 'Code', description: 'Development tools' },
  { id: '3', icon: Dices, title: 'Games', description: 'Interactive projects' },
];

const DEFAULT_ICONS = [Github, Code, Dices, Terminal, Settings, Heart, Star, Zap, Trophy, Shield];

const CodeHoverCards: React.FC<CodeHoverCardsProps> = ({
  cards = DEFAULT_CARDS,
  className,
  cardClassName,
  maskRadius = 300,
  characterCount = 2000,
  characterSet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
  animationDuration = 0.5,
  borderRadius = 26,
  cardGap = '1rem',
  iconSize = 48,
  enableTouch = true,
  columns = 3,
  minHeight = 399,
  onCardClick,
  onCardHover,
  disabled = false,
  showBorder = true,
  theme = 'normal',
}) => {
  const [mousePositions, setMousePositions] = useState<{ [key: string]: { x: number; y: number } }>({});
  const [randomTexts, setRandomTexts] = useState<{ [key: string]: string }>({});
  const cardRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});

  const generateRandomString = (length: number): string => {
    return Array.from({ length }, () => characterSet[Math.floor(Math.random() * characterSet.length)]).join('');
  };

  const handleMouseMove = (e: React.MouseEvent, cardId: string) => {
    if (disabled) return;
    const card = cardRefs.current[cardId];
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    setMousePositions(prev => ({ ...prev, [cardId]: { x, y } }));
    setRandomTexts(prev => ({ ...prev, [cardId]: generateRandomString(characterCount) }));
  };

  const handleTouchMove = (e: React.TouchEvent, cardId: string) => {
    if (disabled || !enableTouch) return;
    const card = cardRefs.current[cardId];
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const touch = e.touches[0];
    const x = touch.clientX - rect.left;
    const y = touch.clientY - rect.top;
    setMousePositions(prev => ({ ...prev, [cardId]: { x, y } }));
    setRandomTexts(prev => ({ ...prev, [cardId]: generateRandomString(characterCount) }));
  };

  const handleCardClick = (card: CardData) => {
    if (disabled) return;
    if (card.href) window.open(card.href, '_blank');
    onCardClick?.(card);
  };

  const handleCardHover = (card: CardData) => {
    if (disabled) return;
    onCardHover?.(card);
  };

  const getColumnClass = () => {
    const columnMap = {
      1: 'grid-cols-1',
      2: 'grid-cols-1 md:grid-cols-2',
      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
    };
    return columnMap[columns];
  };

  return (
    <div className={cn('w-full flex items-center justify-center px-0 py-4 bg-background text-foreground', className)}>
      <div className="container mx-auto">
        <div className={cn('grid', getColumnClass())} style={{ gap: cardGap }}>
          {cards.map((card) => {
            const IconComponent = card.icon;
            const position = mousePositions[card.id] || { x: 0, y: 0 };
            const randomText = randomTexts[card.id] || '';

            return (
              <div
                key={card.id}
                className={cn(
                  'group relative w-full',
                  disabled && 'pointer-events-none opacity-50',
                  cardClassName
                )}
              >
                <div
                  ref={(el) => { cardRefs.current[card.id] = el; }}
                  className={cn(
                    'relative w-full h-full flex items-center justify-center overflow-hidden cursor-pointer transition-all duration-200',
                    'hover:scale-105 active:scale-95',
                    showBorder && 'border'
                  )}
                  style={{
                    borderRadius: borderRadius + 'px',
                    minHeight: minHeight + 'px',
                    aspectRatio: '1',
                  }}
                  onMouseMove={(e) => handleMouseMove(e, card.id)}
                  onTouchMove={enableTouch ? (e) => handleTouchMove(e, card.id) : undefined}
                  onClick={() => handleCardClick(card)}
                  onMouseEnter={() => handleCardHover(card)}
                >
                  {/* Icon */}
                  <div className="relative z-10 text-foreground">
                    <IconComponent
                      size={iconSize}
                      className="transition-transform duration-200 group-hover:scale-110"
                    />
                  </div>

                  {/* Gradient overlay */}
                  <div className="absolute inset-0 pointer-events-none z-[5]" />

                  {/* Character background */}
                  <div
                    className="absolute inset-0 font-mono text-sm leading-tight opacity-0 group-hover:opacity-100 transition-opacity duration-500 overflow-hidden break-all text-foreground"
                    style={{
                      WebkitMaskImage:
                        'radial-gradient(' +
                        maskRadius +
                        'px circle at ' +
                        position.x +
                        'px ' +
                        position.y +
                        'px, #000 20%, rgba(0, 0, 0, 0.25), transparent)',
                      maskImage:
                        'radial-gradient(' +
                        maskRadius +
                        'px circle at ' +
                        position.x +
                        'px ' +
                        position.y +
                        'px, #000 20%, rgba(0, 0, 0, 0.25), transparent)',
                      transform: 'scale(1.025)',
                      transitionDuration: animationDuration + 's',
                    }}
                  >
                    {randomText}
                  </div>
                </div>

                {/* Card info */}
                {(card.title || card.description) && (
                  <div className="mt-4 text-center">
                    {card.title && (
                      <h3 className="text-lg font-semibold text-foreground">{card.title}</h3>
                    )}
                    {card.description && (
                      <p className="text-sm text-muted-foreground">{card.description}</p>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default CodeHoverCards;

```
--------------------------------------------------

### COMPONENT: count-up
Category: Components
Description: Animated counter that counts from zero to a target value with configurable effects.
URL: https://lightswind.com/components/count-up
Import: import { CountUp } from "@/components/lightswind/count-up"
Registry URL: https://lightswind.com/r/count-up.json
Install Command: npx lightswind@latest add count-up

Usage:
```tsx

import { CountUp } from "@/components/lightswind/count-up"

export function CountUpExample() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col items-center">
        <p className="text-muted-foreground mb-2">Basic Usage</p>
        <CountUp value={1234} />
      </div>
      
      <div className="flex flex-col items-center">
        <p className="text-muted-foreground mb-2">With Prefix and Suffix</p>
        <CountUp
          value={99.9}
          prefix="$"
          suffix="%"
          decimals={1}
          duration={3}
        />
      </div>
      
      <div className="flex flex-col items-center">
        <p className="text-muted-foreground mb-2">Custom Animation</p>
        <CountUp
          value={5000}
          duration={2.5}
          animationStyle="spring"
          colorScheme="gradient"
        />
      </div>
      
      <div className="flex flex-col items-center">
        <p className="text-muted-foreground mb-2">Interactive</p>
        <CountUp
          value={1500}
          interactive={true}
          colorScheme="primary"
          animationStyle="bounce"
        />
      </div>
    </div>
  )
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useRef } from "react";
import { motion, useMotionValue, useTransform, animate } from "framer-motion";
import { cn } from "@/components/lib/utils";

// Helper function to format the number
const formatValue = (val: number, precision: number, sep: string): string => {
  return val
    .toFixed(precision)
    .replace(/\B(?=(\d{3})+(?!\d))/g, sep);
};

export interface CountUpProps {
  value: number;
  duration?: number;
  decimals?: number;
  prefix?: string;
  suffix?: string;
  easing?: "linear" | "easeIn" | "easeOut" | "easeInOut";
  separator?: string;
  interactive?: boolean;
  triggerOnView?: boolean;
  className?: string;
  numberClassName?: string;
  animationStyle?: "default" | "bounce" | "spring" | "gentle" | "energetic";
  colorScheme?: "default" | "gradient" | "primary" | "secondary" | "custom";
  customColor?: string;
  onAnimationComplete?: () => void;
}

const easingFunctions = {
  linear: [0, 0, 1, 1],
  easeIn: [0.42, 0, 1, 1],
  easeOut: [0, 0, 0.58, 1],
  easeInOut: [0.42, 0, 0.58, 1],
};

const animationStyles = {
  default: { type: "tween" },
  bounce: { type: "spring", bounce: 0.25 },
  spring: { type: "spring", stiffness: 100, damping: 10 },
  gentle: { type: "spring", stiffness: 60, damping: 15 },
  energetic: { type: "spring", stiffness: 300, damping: 20 },
};

const colorSchemes = {
  default: "text-foreground",
  gradient: "bg-clip-text text-transparent bg-gradient-to-r from-primarylw to-purple-600",
  primary: "text-primary",
  secondary: "text-secondary",
  custom: "",
};

export function CountUp({
  value,
  duration = 2,
  decimals = 0,
  prefix = "",
  suffix = "",
  easing = "easeOut",
  separator = ",",
  interactive = false,
  triggerOnView = true,
  className,
  numberClassName,
  animationStyle = "default",
  colorScheme = "default",
  customColor,
  onAnimationComplete,
}: CountUpProps) {
  const [hasAnimated, setHasAnimated] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const count = useMotionValue(0);
  const rounded = useTransform(count, (latest) =>
    formatValue(latest, decimals, separator)
  );

  useEffect(() => {
    let controls: { stop: () => void } | null = null;

    const startAnimation = () => {
      controls = animate(count.get(), value, {
        ...(animationStyles[animationStyle] as any),
        ease: easingFunctions[easing],
        duration: animationStyle === "default" ? duration : undefined,
        onUpdate: (latest) => count.set(latest),
        onComplete: () => {
          setHasAnimated(true);
          onAnimationComplete?.();
        },
      });
    };

    if (!triggerOnView || hasAnimated) {
      startAnimation();
      return () => controls?.stop();
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !hasAnimated) {
          startAnimation();
        }
      },
      { threshold: 0.1 }
    );

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => {
      controls?.stop();
      observer.disconnect();
    };
  }, [value, duration, easing, animationStyle, triggerOnView, hasAnimated, onAnimationComplete, count]);

  const hasCustomTextColor = className?.includes("text-") || numberClassName?.includes("text-");
  const colorClass =
    colorScheme === "custom" && customColor
      ? ""
      : colorScheme !== "default"
      ? colorSchemes[colorScheme]
      : hasCustomTextColor
      ? ""
      : colorSchemes.default;

  const getHoverAnimation = () => {
    if (!interactive) return {};
    return {
      whileHover: {
        scale: 1.05,
        filter: "brightness(1.1)",
        transition: { duration: 0.2 },
      },
      whileTap: {
        scale: 0.95,
        filter: "brightness(0.95)",
        transition: { duration: 0.1 },
      },
    };
  };

  return (
    <div
      ref={containerRef}
      className={cn(
        "inline-flex items-center justify-center font-bold",
        !hasCustomTextColor && "text-foreground",
        !className?.includes("text-") && "text-4xl",
        className
      )}
    >
      <motion.div
        {...getHoverAnimation()}
        className={cn("flex items-center transition-all", colorClass, numberClassName)}
        style={colorScheme === "custom" && customColor ? { color: customColor } : undefined}
      >
        {prefix && <span className="mr-1">{prefix}</span>}
        <motion.span>{rounded}</motion.span>
        {suffix && <span className="ml-1">{suffix}</span>}
      </motion.div>
    </div>
  );
}

export default CountUp;
```
--------------------------------------------------

### COMPONENT: dock
Category: Components
Description: A customizable macOS-style dock component with proximity-based magnification, badges, frosted glass, separators, and full layout control.
URL: https://lightswind.com/components/dock
Import: import Dock from '@/components/lightswind/dock';
Registry URL: https://lightswind.com/r/dock.json
Install Command: npx lightswind@latest add dock

Usage:
```tsx
import Dock from '@/components/lightswind/dock';
import { Home, Settings, Mail, Calendar, Music, User } from 'lucide-react';

const dockItems = [
  { icon: <Home size={22} />, label: 'Home', onClick: () => console.log('Home') },
  { icon: <Mail size={22} />, label: 'Mail', onClick: () => console.log('Mail'), badgeCount: 4 },
  { icon: <Calendar size={22} />, label: 'Calendar', onClick: () => console.log('Calendar') },
  { icon: <Music size={22} />, label: 'Music', onClick: () => console.log('Music') },
  { icon: <Settings size={22} />, label: 'Settings', onClick: () => console.log('Settings') },
  { icon: <User size={22} />, label: 'Profile', onClick: () => console.log('Profile'), badgeCount: 1 },
];

<Dock
  items={dockItems}
  magnification={70}
  baseItemSize={50}
  distance={200}
  blurBackground
  labelPosition="top"
  badgeColor="bg-red-500"
/>
```

Source Code:
```tsx
"use client";

import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  AnimatePresence,
  MotionValue,
} from "framer-motion";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/components/lib/utils";

function useDockItemSize(
  mouseX: MotionValue<number>,
  baseItemSize: number,
  magnification: number,
  distance: number,
  ref: React.RefObject<HTMLDivElement | null>,
  spring: { mass: number; stiffness: number; damping: number }
) {
  const mouseDistance = useTransform(mouseX, (val) => {
    if (typeof val !== "number" || isNaN(val)) return 0;
    const rect = ref.current?.getBoundingClientRect() ?? {
      x: 0,
      width: baseItemSize,
    };
    return val - rect.x - baseItemSize / 2;
  });

  const targetSize = useTransform(
    mouseDistance,
    [-distance, 0, distance],
    [baseItemSize, magnification, baseItemSize]
  );

  return useSpring(targetSize, spring);
}

interface DockItemProps {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  mouseX: MotionValue<number>;
  baseItemSize: number;
  magnification: number;
  distance: number;
  spring: { mass: number; stiffness: number; damping: number };
  badgeCount?: number;
  badgeColor?: string;
  itemBackground?: string;
  itemBorderColor?: string;
  borderRadius?: string;
  hideLabels?: boolean;
  labelPosition?: "top" | "bottom";
  labelBackground?: string;
  labelTextColor?: string;
}

function DockItem({
  icon,
  label,
  onClick,
  mouseX,
  baseItemSize,
  magnification,
  distance,
  spring,
  badgeCount,
  badgeColor = "bg-red-500",
  itemBackground,
  itemBorderColor,
  borderRadius,
  hideLabels = false,
  labelPosition = "top",
  labelBackground,
  labelTextColor,
}: DockItemProps) {
  const ref = useRef<HTMLDivElement>(null);
  const isHovered = useMotionValue(0);
  const size = useDockItemSize(mouseX, baseItemSize, magnification, distance, ref, spring);
  const [showLabel, setShowLabel] = useState(false);

  useEffect(() => {
    const unsubscribe = isHovered.on("change", (value) =>
      setShowLabel(value === 1)
    );
    return () => unsubscribe();
  }, [isHovered]);

  const labelOffsetStyle =
    labelPosition === "bottom"
      ? { top: "calc(100% + 8px)", bottom: "auto" }
      : { bottom: "calc(100% + 8px)", top: "auto" };

  return (
    <motion.div
      ref={ref}
      style={{ width: size, height: size }}
      onHoverStart={() => isHovered.set(1)}
      onHoverEnd={() => isHovered.set(0)}
      onFocus={() => isHovered.set(1)}
      onBlur={() => isHovered.set(0)}
      onClick={onClick}
      className={cn(
        "relative inline-flex items-center justify-center shadow-md cursor-pointer",
        borderRadius ?? "rounded-full",
        itemBackground ?? "bg-background",
        itemBorderColor ? `border-2 ${itemBorderColor}` : ""
      )}
      tabIndex={0}
      role="button"
      aria-haspopup="true"
    >
      <div className="flex items-center justify-center">{icon}</div>

      {/* Badge */}
      {badgeCount !== undefined && badgeCount > 0 && (
        <span
          className={cn(
            "absolute -top-2 -right-2 flex items-center justify-center w-5 h-5 text-xs font-bold text-white rounded-full",
            badgeColor
          )}
        >
          {badgeCount > 99 ? "99+" : badgeCount}
        </span>
      )}

      {/* Tooltip Label */}
      {!hideLabels && (
        <AnimatePresence>
          {showLabel && (
            <motion.div
              initial={{ opacity: 0, y: labelPosition === "bottom" ? -4 : 4 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: labelPosition === "bottom" ? -4 : 4 }}
              transition={{ duration: 0.18 }}
              className={cn(
                "absolute left-1/2 w-fit whitespace-pre rounded-md border px-2 py-0.5 text-xs pointer-events-none z-50",
                labelBackground ?? "bg-[#060606]",
                labelTextColor ?? "text-white"
              )}
              style={{ x: "-50%", ...labelOffsetStyle }}
              role="tooltip"
            >
              {label}
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </motion.div>
  );
}

interface DockItemData {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  badgeCount?: number;
}

interface DockProps {
  /** Items to render inside the dock. Each needs an icon, label, and optional onClick + badgeCount. */
  items: DockItemData[];
  /** Extra CSS classes for the dock panel container. */
  className?: string;
  /** Framer Motion spring physics for all animations. */
  spring?: { mass: number; stiffness: number; damping: number };
  /** Maximum size in px items magnify to on hover. @default 70 */
  magnification?: number;
  /** Distance in px over which magnification spreads to neighbours. @default 200 */
  distance?: number;
  /** Dock panel height in px when idle. @default 64 */
  panelHeight?: number;
  /** Dock panel max height in px when expanded. @default 256 */
  dockHeight?: number;
  /** Base (idle) size of each item in px. @default 50 */
  baseItemSize?: number;
  /** Dock position on screen. Only "bottom" is currently animated. @default "bottom" */
  position?: "bottom" | "top";
  /** Gap between dock items. Tailwind gap class e.g. "gap-2", "gap-6". @default "gap-4" */
  gap?: string;
  /** Background color for individual item icons. Tailwind class or CSS value. */
  itemBackground?: string;
  /** Border color class for each item (e.g. "border-zinc-300"). */
  itemBorderColor?: string;
  /** Border radius override for items. Tailwind class (e.g. "rounded-xl"). @default "rounded-full" */
  borderRadius?: string;
  /** Color for the notification badge dot. Tailwind bg class. @default "bg-red-500" */
  badgeColor?: string;
  /** Whether to hide all hover labels. @default false */
  hideLabels?: boolean;
  /** Position of the hover label relative to the icon. @default "top" */
  labelPosition?: "top" | "bottom";
  /** Background for the hover label tooltip. Tailwind class. @default "bg-[#060606]" */
  labelBackground?: string;
  /** Text color for the hover label tooltip. Tailwind class. @default "text-white" */
  labelTextColor?: string;
  /** If true, renders a frosted glass blur panel behind the dock. @default false */
  blurBackground?: boolean;
  /** If true, wraps the dock with the blocks multi-layer border concept frame. @default true */
  multiBorder?: boolean;
  /** Show a visual separator line. @default false */
  showSeparator?: boolean;
  /** Index after which the separator is placed (0-based). */
  separatorIndex?: number;
}

export default function Dock({
  items,
  className = "",
  spring = { mass: 0.1, stiffness: 150, damping: 12 },
  magnification = 70,
  distance = 200,
  panelHeight = 64,
  dockHeight = 256,
  baseItemSize = 50,
  gap = "gap-4",
  itemBackground,
  itemBorderColor,
  borderRadius,
  badgeColor = "bg-red-500",
  hideLabels = false,
  labelPosition = "top",
  labelBackground,
  labelTextColor,
  blurBackground = false,
  multiBorder = true,
  showSeparator = false,
  separatorIndex,
}: DockProps) {
  const mouseX = useMotionValue(Infinity);
  const isHovered = useMotionValue(0);

  const maxHeight = useMemo(
    () => Math.max(dockHeight, magnification + magnification / 2 + 4),
    [magnification, dockHeight]
  );

  const animatedHeight = useSpring(
    useTransform(isHovered, [0, 1], [panelHeight, maxHeight]),
    spring
  );

  return (
    <motion.div
      style={{ height: animatedHeight }}
      className="mx-2 flex max-w-full items-center justify-center"
    >
      <motion.div
        onMouseMove={({ pageX }) => {
          isHovered.set(1);
          mouseX.set(pageX);
        }}
        onMouseLeave={() => {
          isHovered.set(0);
          mouseX.set(Infinity);
        }}
        className={cn(
          "absolute bottom-2 left-1/2 -translate-x-1/2 transform flex items-center justify-center w-fit transition-all duration-300",
          multiBorder
            ? "p-[3px] rounded-[24px] sm:rounded-[28px] border border-zinc-200/80 dark:border-zinc-800/80 bg-zinc-100/80 dark:bg-zinc-900/80 shadow-lg backdrop-blur-xl"
            : "",
          className
        )}
        style={{ height: panelHeight }}
        role="toolbar"
        aria-label="Application dock"
      >
        <div
          className={cn(
            "flex items-end w-fit rounded-[20px] sm:rounded-[24px] px-4 pb-2 h-full transition-all duration-300",
            gap,
            multiBorder
              ? "border border-zinc-200/90 dark:border-zinc-800/90 bg-white/90 dark:bg-black/90 shadow-inner"
              : blurBackground
              ? "bg-white/10 dark:bg-black/20 backdrop-blur-xl border-2 border-white/20 dark:border-white/10 shadow-md"
              : "bg-background border-2 border-border shadow-md"
          )}
        >
          {items.map((item, index) => (
            <React.Fragment key={index}>
              <DockItem
                icon={item.icon}
                label={item.label}
                onClick={item.onClick}
                mouseX={mouseX}
                baseItemSize={baseItemSize}
                magnification={magnification}
                distance={distance}
                spring={spring}
                badgeCount={item.badgeCount}
                badgeColor={badgeColor}
                itemBackground={itemBackground}
                itemBorderColor={itemBorderColor}
                borderRadius={borderRadius}
                hideLabels={hideLabels}
                labelPosition={labelPosition}
                labelBackground={labelBackground}
                labelTextColor={labelTextColor}
              />
              {showSeparator && separatorIndex === index && (
                <div className="self-center h-8 w-px bg-zinc-300 dark:bg-zinc-600 mx-1 shrink-0" />
              )}
            </React.Fragment>
          ))}
        </div>
      </motion.div>
    </motion.div>
  );
}

export { Dock };


```
--------------------------------------------------

### COMPONENT: drag-order-list
Category: Components
Description: A draggable, reorderable list built using React, Motion One, and Tailwind CSS. Items can be rearranged vertically via drag-and-drop gestures, with smooth animation and visual feedback.
URL: https://lightswind.com/components/drag-order-list
Import: import { DragOrderList } from '@/components/lightswind/drag-order-list';
Registry URL: https://lightswind.com/r/drag-order-list.json
Install Command: npx lightswind@latest add drag-order-list

Usage:
```tsx
import { DragOrderList } from '@/components/lightswind/drag-order-list';

const items = [
  {
    id: 1,
    title: "Task One",
    subtitle: "This is the first task",
    date: "2025-07-29",
    link: "https://example.com/task-1"
  },
  {
    id: 2,
    title: "Task Two",
    subtitle: "This is the second task",
    date: "2025-07-28"
  },
];

<DragOrderList
  items={items}
  onReorder={(newOrder) => console.log("Reordered items:", newOrder)}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect } from "react";
import {
  useMotionValue,
  Reorder,
  useDragControls,
  motion,
  animate,
  DragControls,
} from "framer-motion";
import { GripVertical } from "lucide-react";

export interface DragItem {
  id: number;
  title: string;
  subtitle: string;
  date: string;
  link?: string;
}

interface DragOrderListProps {
  items: DragItem[];
  onReorder?: (items: DragItem[]) => void;
}

export function DragOrderList({ items, onReorder }: DragOrderListProps) {
  const [list, setList] = React.useState(items);

  useEffect(() => {
    if (onReorder) onReorder(list);
  }, [list]);

  return (
    <Reorder.Group
      axis="y"
      values={list}
      onReorder={setList}
      className="space-y-4 w-full max-w-2xl mx-auto"
    >
      {list.map((item) => (
        <DragOrderItem key={item.id} item={item} />
      ))}
    </Reorder.Group>
  );
}

function DragOrderItem({ item }: { item: DragItem }) {
  const y = useMotionValue(0);
  const boxShadow = useRaisedShadow(y);
  const dragControls = useDragControls();

  return (
    <Reorder.Item
      value={item}
      style={{ boxShadow, y }}
      dragListener={false}
      dragControls={dragControls}
      className="flex justify-between items-start p-4 bg-background 
     text-foreground rounded-xl border shadow-sm"
    >
      <div className="flex flex-col space-y-1 flex-1">
        <h2 className="text-lg font-semibold">{item.title}</h2>
        <p className="text-sm text-muted-foreground">{item.subtitle}</p>
        <span className="text-xs text-muted-foreground">{item.date}</span>
        {item.link && (
          <a
            href={item.link}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-2 inline-block text-xs text-primarylw hover:underline"
          >
            View details about {item.title}
          </a>
        )}
      </div>
      <ReorderHandle dragControls={dragControls} />
    </Reorder.Item>
  );
}

function ReorderHandle({ dragControls }: { dragControls: DragControls }) {
  return (
    <motion.div
      whileTap={{ scale: 0.95 }}
      onPointerDown={(e) => {
        e.preventDefault();
        dragControls.start(e);
      }}
      className="cursor-grab active:cursor-grabbing p-2 text-muted-foreground"
    >
      <GripVertical />
    </motion.div>
  );
}

const inactiveShadow = "0px 0px 0px rgba(0,0,0,0.8)";

function useRaisedShadow(value: ReturnType<typeof useMotionValue>) {
  const boxShadow = useMotionValue(inactiveShadow);

  useEffect(() => {
    let isActive = false;
    return value.on("change", (latest) => {
      const wasActive = isActive;
      if (latest !== 0) {
        isActive = true;
        if (isActive !== wasActive) {
          animate(boxShadow, "5px 5px 15px rgba(0,0,0,0.15)");
        }
      } else {
        isActive = false;
        if (isActive !== wasActive) {
          animate(boxShadow, inactiveShadow);
        }
      }
    });
  }, [value, boxShadow]);

  return boxShadow;
}

```
--------------------------------------------------

### COMPONENT: draggable-reorder-list
Category: Components
Description: A smooth drag-to-reorder list using Framer Motion's Reorder API with spring physics, staggered entry, and optional item removal.
URL: https://lightswind.com/components/draggable-reorder-list
Import: import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list"
Registry URL: https://lightswind.com/r/draggable-reorder-list.json
Install Command: npx lightswind@latest add draggable-reorder-list

Usage:
```tsx
import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list";

const items: ReorderItem[] = [
  { id: "1", label: "First Item", description: "Description here" },
  { id: "2", label: "Second Item", description: "Another description" },
];

export function ReorderDemo() {
  return (
    <DraggableReorderList
      items={items}
      removable
      onReorder={(newOrder) => console.log(newOrder)}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import {
  motion,
  AnimatePresence,
  Reorder,
  useDragControls,
} from "framer-motion";
import { GripVertical, X, Plus } from "lucide-react";
import { cn } from "@/components/lib/utils";

export interface ReorderItem {
  id: string;
  label: string;
  description?: string;
  icon?: React.ReactNode;
}

interface DraggableReorderListProps {
  /** Initial items */
  items: ReorderItem[];
  /** Callback with new order when reordered */
  onReorder?: (items: ReorderItem[]) => void;
  /** Allow removing items */
  removable?: boolean;
  /** Additional classes */
  className?: string;
}

function Item({
  item,
  onRemove,
  removable,
}: {
  item: ReorderItem;
  onRemove: (id: string) => void;
  removable: boolean;
}) {
  const dragControls = useDragControls();

  return (
    <Reorder.Item
      value={item}
      id={item.id}
      dragListener={false}
      dragControls={dragControls}
      className="relative"
    >
      <motion.div
        layout
        initial={{ opacity: 0, y: -8, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.15 } }}
        whileDrag={{
          scale: 1.03,
          boxShadow: "0 16px 40px rgba(0,0,0,0.15)",
          zIndex: 50,
        }}
        transition={{ type: "spring", stiffness: 350, damping: 30 }}
        onPointerDown={(e) => e.preventDefault()}
        className={cn(
          "flex items-center gap-3 rounded-xl border bg-background px-4 py-3",
          "shadow-sm hover:shadow-md transition-shadow cursor-default select-none"
        )}
      >
        {/* Drag Handle */}
        <motion.div
          onPointerDown={(e) => dragControls.start(e)}
          className="flex-shrink-0 cursor-grab active:cursor-grabbing touch-none text-muted-foreground/40 hover:text-muted-foreground transition-colors"
          whileHover={{ scale: 1.1 }}
        >
          <GripVertical className="h-4 w-4" />
        </motion.div>

        {/* Icon */}
        {item.icon && (
          <div className="flex-shrink-0 flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground">
            {item.icon}
          </div>
        )}

        {/* Content */}
        <div className="flex-1 min-w-0 pointer-events-none">
          <p className="text-sm font-medium truncate select-none text-foreground">{item.label}</p>
          {item.description && (
            <p className="text-xs text-muted-foreground truncate mt-0.5 select-none">
              {item.description}
            </p>
          )}
        </div>

        {/* Remove Button */}
        {removable && (
          <motion.button
            type="button"
            onClick={() => onRemove(item.id)}
            aria-label={`Remove ${item.label}`}
            className="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground/40 hover:text-destructive hover:bg-destructive/10 transition-colors focus:outline-none"
            whileHover={{ scale: 1.15 }}
            whileTap={{ scale: 0.9 }}
          >
            <X className="h-3.5 w-3.5" />
          </motion.button>
        )}
      </motion.div>
    </Reorder.Item>
  );
}

export function DraggableReorderList({
  items: initialItems,
  onReorder,
  removable = true,
  className,
}: DraggableReorderListProps) {
  const [items, setItems] = useState<ReorderItem[]>(initialItems);

  const handleReorder = (newOrder: ReorderItem[]) => {
    setItems(newOrder);
    onReorder?.(newOrder);
  };

  const handleRemove = (id: string) => {
    const next = items.filter((item) => item.id !== id);
    setItems(next);
    onReorder?.(next);
  };

  return (
    <div className={cn("w-full select-none", className)} style={{ userSelect: "none" }}>
      <Reorder.Group
        axis="y"
        values={items}
        onReorder={handleReorder}
        className="flex flex-col gap-2"
        as="div"
      >
        <AnimatePresence initial={false}>
          {items.map((item) => (
            <Item
              key={item.id}
              item={item}
              onRemove={handleRemove}
              removable={removable}
            />
          ))}
        </AnimatePresence>
      </Reorder.Group>

      {items.length === 0 && (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col items-center justify-center rounded-xl border border-dashed py-10 text-muted-foreground gap-2"
        >
          <Plus className="h-5 w-5 opacity-40" />
          <p className="text-sm">All items removed</p>
        </motion.div>
      )}
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: electro-border
Category: Components
Description: A dynamic animated border with an electric, distortion-based effect. Supports optional glow and aura layers for an energized or minimal look.
URL: https://lightswind.com/components/electro-border
Import: import ElectroBorder from "@/components/lightswind/electro-border";
Registry URL: https://lightswind.com/r/electro-border.json
Install Command: npx lightswind@latest add electro-border

Usage:
```tsx
// 1. Default Electric Border
<ElectroBorder>
  <div className="p-8 text-white">Electric Energy!</div>
</ElectroBorder>

// 2. Only Electric Border (no glow or aura)
<ElectroBorder effects={false}>
  <div className="p-8 text-white">Pure Electric Border</div>
</ElectroBorder>

// 3. Electric Border with Glow Only
<ElectroBorder aura={false}>
  <div className="p-8 text-white">Glow Only</div>
</ElectroBorder>

// 4. Electric Border with Aura Only
<ElectroBorder glow={false}>
  <div className="p-8 text-white">Aura Only</div>
</ElectroBorder>

// 5. Custom speed, distortion, and color
<ElectroBorder
  borderColor="#00ffff"
  borderWidth={3}
  distortion={1.8}
  animationSpeed={1.5}
  glowBlur={40}
  glow
  aura
>
  <div className="p-10 text-white">Custom Lightning Frame</div>
</ElectroBorder>
```

Source Code:
```tsx
"use client";

import React, {
    useRef,
    useLayoutEffect,
    useEffect,
    useId,
    CSSProperties,
    PropsWithChildren,
    useCallback,
} from "react";

/* -----------------------------
   🔧 Utility: HEX → RGBA
------------------------------ */
const toRGBA = (color: string, alpha = 1): string => {
    if (!color) return `rgba(0, 255, 252, ${alpha})`;

    if (color.startsWith("#")) {
        const hex = color.length === 4
            ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`
            : color;

        if (hex.length === 7) {
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }
    }

    if (typeof window === "undefined") return color;

    try {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        if (!ctx) return color;
        ctx.fillStyle = color;
        const computed = ctx.fillStyle;

        if (computed.startsWith("rgba")) {
            return computed.replace(/[\d.]+\)$/g, `${alpha})`);
        }
        if (computed.startsWith("rgb")) {
            return computed.replace("rgb", "rgba").replace(")", `, ${alpha})`);
        }
        if (computed.startsWith("#")) {
            const r = parseInt(computed.slice(1, 3), 16);
            const g = parseInt(computed.slice(3, 5), 16);
            const b = parseInt(computed.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }
    } catch {
        return color;
    }
    return color;
};

/* -----------------------------
   ⚙️ Props Definition
------------------------------ */
export interface ElectroBorderProps extends PropsWithChildren {
    /** Border electric neon color (e.g., #00fffc, #ff7700, #ff007f) */
    borderColor?: string;
    /** Custom card background color / gradient (optional, auto theme-adaptive by default) */
    cardBackground?: string;
    /** Border thickness in px (default 2) */
    borderWidth?: number;
    /** Animation distortion intensity (default 1) */
    distortion?: number;
    /** Animation speed multiplier (default 1) */
    animationSpeed?: number;
    /** Border radius (default "24px") */
    radius?: string | number;

    /** 🔘 Enable outer glow effects (default true) */
    glow?: boolean;
    /** 🔘 Enable aura background reflection (default true) */
    aura?: boolean;
    /** 🔘 Enable glossy light overlays (default true) */
    overlay?: boolean;
    /** 🔘 Master toggle for all decorative layers */
    effects?: boolean;

    /** Glow blur intensity */
    glowBlur?: number;
    /** Number of octaves for the turbulence noise filter (default 2 for optimal 60fps performance) */
    numOctaves?: number;
    className?: string;
    style?: CSSProperties;
}

/* -----------------------------
   ⚡ ElectroBorder Component
------------------------------ */
export const ElectroBorder: React.FC<ElectroBorderProps> = ({
    children,
    borderColor = "#00fffc",
    cardBackground,
    borderWidth = 2,
    distortion = 1,
    animationSpeed = 1,
    radius = "24px",
    glow = true,
    aura = true,
    overlay = true,
    effects = true,
    glowBlur = 32,
    numOctaves = 2,
    className,
    style,
}) => {
    const rootRef = useRef<HTMLDivElement>(null);
    const svgRef = useRef<SVGSVGElement>(null);
    const mainCardRef = useRef<HTMLDivElement>(null);
    const rawId = useId();
    const filterId = `turbulent-displace-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;

    const parsedRadius = typeof radius === "number" ? `${radius}px` : radius;

    /* -----------------------------
       🔄 Filter Animation Control
    ------------------------------ */
    const updateFilter = useCallback((wOverride?: number, hOverride?: number) => {
        const svg = svgRef.current;
        const root = rootRef.current;
        if (!svg || !root) return;

        let w = wOverride;
        let h = hOverride;
        if (!w || !h) {
            const rect = root.getBoundingClientRect();
            w = Math.max(100, Math.round(rect.width || 350));
            h = Math.max(100, Math.round(rect.height || 500));
        }

        const dy1 = svg.querySelector<SVGAnimateElement>(`#${filterId}-dy-anim-1`);
        const dy2 = svg.querySelector<SVGAnimateElement>(`#${filterId}-dy-anim-2`);
        const dx1 = svg.querySelector<SVGAnimateElement>(`#${filterId}-dx-anim-1`);
        const dx2 = svg.querySelector<SVGAnimateElement>(`#${filterId}-dx-anim-2`);

        if (dy1) dy1.setAttribute("values", `${h}; 0`);
        if (dy2) dy2.setAttribute("values", `0; -${h}`);
        if (dx1) dx1.setAttribute("values", `${w}; 0`);
        if (dx2) dx2.setAttribute("values", `0; -${w}`);

        const duration = Math.max(0.1, 6 / Math.max(0.1, animationSpeed));
        const animations = [dy1, dy2, dx1, dx2];
        animations.forEach((anim) => {
            if (anim) {
                anim.setAttribute("dur", `${duration}s`);
                if ((anim as any).beginElement) {
                    try {
                        (anim as any).beginElement();
                    } catch {}
                }
            }
        });

        const disp = svg.querySelector("feDisplacementMap");
        if (disp) {
            disp.setAttribute("scale", `${30 * distortion}`);
        }
    }, [animationSpeed, distortion, filterId]);

    useLayoutEffect(() => {
        updateFilter();
        const root = rootRef.current;
        if (!root) return;
        const observer = new ResizeObserver((entries) => {
            if (entries[0]) {
                const { width, height } = entries[0].contentRect;
                if (width && height) {
                    updateFilter(Math.round(width), Math.round(height));
                }
            }
        });
        observer.observe(root);
        return () => observer.disconnect();
    }, [updateFilter]);

    useEffect(() => {
        updateFilter();
    }, [updateFilter]);

    // Viewport-aware performance optimization: pause SMIL animations when off-screen
    useEffect(() => {
        const root = rootRef.current;
        const svg = svgRef.current;
        if (!root || !svg || typeof IntersectionObserver === "undefined") return;

        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry && entry.isIntersecting) {
                    try {
                        if (typeof svg.unpauseAnimations === "function") {
                            svg.unpauseAnimations();
                        }
                    } catch {}
                } else {
                    try {
                        if (typeof svg.pauseAnimations === "function") {
                            svg.pauseAnimations();
                        }
                    } catch {}
                }
            },
            { rootMargin: "250px" }
        );

        observer.observe(root);
        return () => observer.disconnect();
    }, []);

    const gradientColor = toRGBA(borderColor, 0.25);
    const electricLight = toRGBA(borderColor, 0.9);
    const electricDim = toRGBA(borderColor, 0.5);

    return (
        <div
            ref={rootRef}
            className={`relative p-[2px] ${className ?? ""}`}
            style={{
                borderRadius: parsedRadius,
                ...style,
            }}
        >
            {/* Theme-Adaptive Card Background Layer (No hard shadow) */}
            <div
                className="absolute inset-0 pointer-events-none bg-gradient-to-b from-white to-zinc-50/90 dark:from-[#141417] dark:to-[#0c0c0e]"
                style={{
                    borderRadius: parsedRadius,
                    background: cardBackground ? cardBackground : undefined,
                }}
            />

            {/* Subtle Gradient Color Tint */}
            {!cardBackground && (
                <div
                    className="absolute inset-0 pointer-events-none opacity-25 dark:opacity-60"
                    style={{
                        borderRadius: parsedRadius,
                        background: `linear-gradient(-30deg, ${gradientColor}, transparent, ${gradientColor})`,
                    }}
                />
            )}

            {/* SVG Filter Definition */}
            <svg
                ref={svgRef}
                className="absolute w-0 h-0 pointer-events-none opacity-0"
                aria-hidden="true"
                focusable="false"
            >
                <defs>
                    <filter
                        id={filterId}
                        colorInterpolationFilters="sRGB"
                        x="-20%"
                        y="-20%"
                        width="140%"
                        height="140%"
                    >
                        <feTurbulence
                            type="turbulence"
                            baseFrequency="0.02"
                            numOctaves={numOctaves}
                            result="noise1"
                            seed="1"
                        />
                        <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
                            <animate
                                id={`${filterId}-dy-anim-1`}
                                attributeName="dy"
                                values="700; 0"
                                dur="6s"
                                repeatCount="indefinite"
                                calcMode="linear"
                            />
                        </feOffset>

                        <feTurbulence
                            type="turbulence"
                            baseFrequency="0.02"
                            numOctaves={numOctaves}
                            result="noise2"
                            seed="1"
                        />
                        <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
                            <animate
                                id={`${filterId}-dy-anim-2`}
                                attributeName="dy"
                                values="0; -700"
                                dur="6s"
                                repeatCount="indefinite"
                                calcMode="linear"
                            />
                        </feOffset>

                        <feTurbulence
                            type="turbulence"
                            baseFrequency="0.02"
                            numOctaves={numOctaves}
                            result="noise3"
                            seed="2"
                        />
                        <feOffset in="noise3" dx="0" dy="0" result="offsetNoise3">
                            <animate
                                id={`${filterId}-dx-anim-1`}
                                attributeName="dx"
                                values="490; 0"
                                dur="6s"
                                repeatCount="indefinite"
                                calcMode="linear"
                            />
                        </feOffset>

                        <feTurbulence
                            type="turbulence"
                            baseFrequency="0.02"
                            numOctaves={numOctaves}
                            result="noise4"
                            seed="2"
                        />
                        <feOffset in="noise4" dx="0" dy="0" result="offsetNoise4">
                            <animate
                                id={`${filterId}-dx-anim-2`}
                                attributeName="dx"
                                values="0; -490"
                                dur="6s"
                                repeatCount="indefinite"
                                calcMode="linear"
                            />
                        </feOffset>

                        <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
                        <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
                        <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />

                        <feDisplacementMap
                            in="SourceGraphic"
                            in2="combinedNoise"
                            scale="30"
                            xChannelSelector="R"
                            yChannelSelector="B"
                        />
                    </filter>
                </defs>
            </svg>

            {/* Inner Border Layers */}
            <div className="absolute inset-0 pointer-events-none" style={{ borderRadius: parsedRadius }}>
                {/* Outer guide border */}
                <div
                    className="absolute inset-0 pr-1 pb-1"
                    style={{
                        border: `${borderWidth}px solid ${electricDim}`,
                        borderRadius: parsedRadius,
                    }}
                >
                    {/* Main Turbulent Animated Electric Border */}
                    <div
                        ref={mainCardRef}
                        className="w-full h-full -mt-1 -ml-1"
                        style={{
                            borderRadius: parsedRadius,
                            border: `${borderWidth}px solid ${borderColor}`,
                            filter: `url(#${filterId})`,
                        }}
                    />
                </div>

                {/* Glow Layer 1 */}
                {effects && glow && (
                    <div
                        className="absolute inset-0"
                        style={{
                            border: `${borderWidth}px solid ${electricDim}`,
                            borderRadius: parsedRadius,
                            filter: "blur(1px)",
                            opacity: 0.8,
                        }}
                    />
                )}

                {/* Glow Layer 2 */}
                {effects && glow && (
                    <div
                        className="absolute inset-0"
                        style={{
                            border: `${borderWidth}px solid ${electricLight}`,
                            borderRadius: parsedRadius,
                            filter: "blur(4px)",
                            opacity: 0.9,
                        }}
                    />
                )}
            </div>

            {/* Glossy Electric Overlay */}
            {effects && overlay && (
                <div
                    className="absolute inset-0 pointer-events-none opacity-30 dark:opacity-50 mix-blend-overlay"
                    style={{
                        borderRadius: parsedRadius,
                        background: `linear-gradient(-30deg, ${electricLight}, transparent 35%, transparent 65%, ${electricLight})`,
                    }}
                />
            )}

            {/* Ambient Background Aura Glow (True Electric Theme Color) */}
            {effects && aura && (
                <div
                    className="absolute inset-0 pointer-events-none -z-10 scale-105 opacity-40 dark:opacity-60"
                    style={{
                        borderRadius: parsedRadius,
                        filter: `blur(${glowBlur}px)`,
                        background: `radial-gradient(ellipse at center, ${electricLight} 0%, ${electricDim} 40%, transparent 75%)`,
                    }}
                />
            )}

            {/* Content Slot */}
            <div className="relative z-10 w-full h-full" style={{ borderRadius: parsedRadius }}>
                {children}
            </div>
        </div>
    );
};

export default ElectroBorder;

```
--------------------------------------------------

### COMPONENT: expandable-search-bar
Category: Components
Description: An elegant, animated search bar that expands gracefully on interaction and features clear/command micro-interactions.
URL: https://lightswind.com/components/expandable-search-bar
Import: import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar"
Registry URL: https://lightswind.com/r/expandable-search-bar.json
Install Command: npx lightswind@latest add expandable-search-bar

Usage:
```tsx
import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar";

export function SearchBarDemo() {
  return (
    <div className="flex justify-center py-20">
      <ExpandableSearchBar placeholder="Search documents..." expandedWidth="20rem" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Search, X, Command } from "lucide-react";
import { cn } from "@/components/lib/utils";

interface ExpandableSearchBarProps {
  /** Optional placeholder text */
  placeholder?: string;
  /** Optional onChange handler */
  onChange?: (value: string) => void;
  /** Optional onSubmit handler */
  onSubmit?: (value: string) => void;
  /** Additional CSS classes */
  className?: string;
  /** The maximum expanded width (Tailwind class or absolute value like "300px") */
  expandedWidth?: string | number;
}

export function ExpandableSearchBar({
  placeholder = "Search...",
  onChange,
  onSubmit,
  className,
  expandedWidth = "18rem", // 288px (w-72)
}: ExpandableSearchBarProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [value, setValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Focus input when expanded
  useEffect(() => {
    if (isExpanded && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isExpanded]);

  // Handle outside click to collapse if empty
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node) &&
        value === ""
      ) {
        setIsExpanded(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [value]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (onSubmit) onSubmit(value);
  };

  const handleClear = () => {
    setValue("");
    if (onChange) onChange("");
    inputRef.current?.focus();
  };

  return (
    <div
      ref={containerRef}
      className={cn("relative flex items-center justify-end", className)}
      // Ensures the container takes up the max space when expanded to prevent layout shifts if needed
      style={{ width: isExpanded ? expandedWidth : "2.5rem" }}
    >
      <motion.form
        initial={false}
        animate={{
          width: isExpanded ? expandedWidth : "2.5rem",
          backgroundColor: isExpanded ? "var(--background)" : "var(--muted)",
        }}
        transition={{
          type: "spring",
          stiffness: 400,
          damping: 30,
        }}
        onSubmit={handleSubmit}
        className={cn(
          "relative flex h-10 items-center overflow-hidden rounded-full border shadow-sm transition-colors focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0",
          isExpanded ? "border-border/50 bg-background" : "border-transparent bg-muted hover:bg-muted/80 cursor-pointer"
        )}
        onClick={() => !isExpanded && setIsExpanded(true)}
      >
        <button
          type="button"
          className="absolute left-0 flex h-full w-10 items-center justify-center text-muted-foreground transition-colors hover:text-foreground z-10 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0"
          onClick={() => {
            if (isExpanded && value === "") {
              setIsExpanded(false);
            } else if (!isExpanded) {
              setIsExpanded(true);
            }
          }}
          aria-label="Search"
          disabled={isExpanded && value !== ""}
        >
          <Search className="h-4 w-4" />
        </button>

        <input
          ref={inputRef}
          type="text"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
            if (onChange) onChange(e.target.value);
          }}
          placeholder={placeholder}
          className="h-full w-full border-none bg-transparent pl-10 pr-10 text-sm outline-none placeholder:text-muted-foreground/60 focus:border-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none focus:ring-offset-0 focus-visible:ring-offset-0"
          style={{
            pointerEvents: isExpanded ? "auto" : "none",
            opacity: isExpanded ? 1 : 0,
            boxShadow: "none",
          }}
          tabIndex={isExpanded ? 0 : -1}
        />

        <AnimatePresence>
          {isExpanded && value === "" && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              transition={{ duration: 0.15 }}
              className="absolute right-3 flex items-center justify-center pointer-events-none"
            >
              <div className="flex h-5 items-center gap-1 rounded bg-muted px-1.5  text-[10px] font-medium text-muted-foreground">
                <Command className="h-3 w-3" />
                <span>K</span>
              </div>
            </motion.div>
          )}

          {isExpanded && value !== "" && (
            <motion.button
              type="button"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              transition={{ duration: 0.15 }}
              onClick={handleClear}
              className="absolute right-0 flex h-full w-10 items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0"
              aria-label="Clear search"
            >
              <X className="h-4 w-4" />
            </motion.button>
          )}
        </AnimatePresence>
      </motion.form>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: expandable-speed-dial
Category: Components
Description: A functional speed dial that expands into multiple floating action buttons with staggered physics animations.
URL: https://lightswind.com/components/expandable-speed-dial
Import: import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial"
Registry URL: https://lightswind.com/r/expandable-speed-dial.json
Install Command: npx lightswind@latest add expandable-speed-dial

Usage:
```tsx
import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial";
import { FileEdit, Share2, Download, Printer } from "lucide-react";

export function SpeedDialDemo() {
  const actions: SpeedDialAction[] = [
    { icon: <FileEdit className="h-4 w-4" />, label: "Edit", onClick: () => console.log("Edit") },
    { icon: <Share2 className="h-4 w-4" />, label: "Share", onClick: () => console.log("Share") },
  ];

  return (
    <div className="flex justify-center py-20">
      <ExpandableSpeedDial actions={actions} direction="up" size="lg" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus } from "lucide-react";
import { cn } from "@/components/lib/utils";

export interface SpeedDialAction {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
}

interface ExpandableSpeedDialProps {
  /** The actions to display when expanded */
  actions: SpeedDialAction[];
  /** The direction to expand the speed dial */
  direction?: "up" | "down" | "left" | "right";
  /** Optional classname for the container */
  className?: string;
  /** Size of the main button */
  size?: "sm" | "md" | "lg";
}

export function ExpandableSpeedDial({
  actions,
  direction = "up",
  className,
  size = "md",
}: ExpandableSpeedDialProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => setIsOpen(!isOpen);

  const sizes = {
    sm: "h-10 w-10",
    md: "h-12 w-12",
    lg: "h-14 w-14",
  };

  const actionSizes = {
    sm: "h-8 w-8",
    md: "h-10 w-10",
    lg: "h-12 w-12",
  };

  const getDirectionClasses = () => {
    switch (direction) {
      case "up":
        return "bottom-full mb-3 flex-col-reverse left-1/2 -translate-x-1/2";
      case "down":
        return "top-full mt-3 flex-col left-1/2 -translate-x-1/2";
      case "left":
        return "right-full mr-3 flex-row-reverse top-1/2 -translate-y-1/2";
      case "right":
        return "left-full ml-3 flex-row top-1/2 -translate-y-1/2";
      default:
        return "bottom-full mb-3 flex-col-reverse left-1/2 -translate-x-1/2";
    }
  };

  const getMotionVariants = (index: number) => {
    const delay = index * 0.05;
    const distance = 15;
    
    let x = 0;
    let y = 0;
    
    switch (direction) {
      case "up": y = distance; break;
      case "down": y = -distance; break;
      case "left": x = distance; break;
      case "right": x = -distance; break;
    }

    return {
      hidden: { opacity: 0, scale: 0.5, x, y },
      visible: { 
        opacity: 1, 
        scale: 1, 
        x: 0, 
        y: 0,
        transition: {
          type: "spring" as const,
          stiffness: 300,
          damping: 20,
          delay
        }
      },
      exit: { 
        opacity: 0, 
        scale: 0.5, 
        x, 
        y,
        transition: {
          duration: 0.2,
          delay: (actions.length - 1 - index) * 0.05
        }
      }
    };
  };

  return (
    <div className={cn("relative z-50", className)}>
      <AnimatePresence>
        {isOpen && (
          <div className={cn("absolute flex gap-3", getDirectionClasses())}>
            {actions.map((action, index) => (
              <motion.button
                key={action.label}
                variants={getMotionVariants(index)}
                initial="hidden"
                animate="visible"
                exit="exit"
                onClick={() => {
                  action.onClick();
                  setIsOpen(false);
                }}
                className={cn(
                  "relative flex items-center justify-center rounded-full bg-background shadow-md border hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                  actionSizes[size]
                )}
                title={action.label}
                aria-label={action.label}
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
              >
                {action.icon}
                
                {/* Tooltip for horizontal/vertical depending on direction */}
                {(direction === "up" || direction === "down") && (
                  <span className="absolute right-full mr-3 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background opacity-0 transition-opacity group-hover:opacity-100 hidden sm:block">
                    {action.label}
                  </span>
                )}
                {(direction === "left" || direction === "right") && (
                  <span className="absolute bottom-full mb-3 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background opacity-0 transition-opacity group-hover:opacity-100 hidden sm:block">
                    {action.label}
                  </span>
                )}
              </motion.button>
            ))}
          </div>
        )}
      </AnimatePresence>

      <motion.button
        onClick={toggleOpen}
        className={cn(
          "flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
          sizes[size]
        )}
        aria-label="Toggle Speed Dial"
        whileTap={{ scale: 0.9 }}
      >
        <motion.div
          animate={{ rotate: isOpen ? 135 : 0 }}
          transition={{ type: "spring", stiffness: 300, damping: 20 }}
          className="flex items-center justify-center"
        >
          <Plus className={size === "sm" ? "h-5 w-5" : size === "lg" ? "h-8 w-8" : "h-6 w-6"} />
        </motion.div>
      </motion.button>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: glass-folder
Category: Components
Description: A 3D glassmorphic folder component with layered depth and interactive rotation effects on hover. Designed using React and Tailwind CSS, it visually mimics a stack of translucent folder sheets, making it ideal for showcasing documents, portfolios, or feature categories in a stylish and futuristic way.
URL: https://lightswind.com/components/glass-folder
Import: import GlassFolder from '@/components/lightswind/glass-folder';
Registry URL: https://lightswind.com/r/glass-folder.json
Install Command: npx lightswind@latest add glass-folder

Usage:
```tsx
import GlassFolder from '@/components/lightswind/glass-folder';
import { FileText } from 'lucide-react';

<GlassFolder>
  <FileText className="w-8 h-8 text-yellow-300" />
</GlassFolder>;
```

Source Code:
```tsx
"use client";

import React from "react";
import { cn } from "@/components/lib/utils"; // Optional: For class merging utility

type GlassFolderProps = {
  icon?: React.ReactNode;
  className?: string;
};

const GlassFolder: React.FC<GlassFolderProps> = ({ icon, className }) => {
  return (
    <section
      className={cn(
        "relative group/folder flex flex-col items-center justify-center",
        className
      )}
    >
      <div className="relative w-60 h-40 cursor-pointer origin-bottom [perspective:1500px] z-10">
        {/* Top tab */}
        <div
          className="bg-primarylw/30 backdrop-blur-md w-full h-full origin-top rounded-2xl rounded-tl-none 
          group-hover/folder:shadow-[0_20px_40px_rgba(0,0,0,.2)] transition-all ease duration-300 relative 
          after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-20 after:h-4 after:bg-primarylw/30 after:backdrop-blur-md after:rounded-t-2xl 
          before:absolute before:content-[''] before:-top-[15px] before:left-[75.5px] before:w-4 before:h-4 before:bg-primarylw/30 before:backdrop-blur-md before:[clip-path:polygon(0_35%,0%_100%,50%_100%);]"
        ></div>

        {/* Folder layers */}
        <div className="absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom select-none group-hover/folder:[transform:rotateX(-20deg)]"></div>
        <div className="absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom group-hover/folder:[transform:rotateX(-30deg)]"></div>
        <div className="absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom group-hover/folder:[transform:rotateX(-38deg)]"></div>

        {/* Front folder layer with icon */}
        <div
          className="absolute bottom-0 bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] backdrop-blur-md w-full h-[156px] rounded-2xl rounded-tr-none 
          after:absolute after:content-[''] after:bottom-[99%] after:right-0 after:w-[146px] after:h-[16px] after:bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] after:backdrop-blur-md after:rounded-t-2xl 
          before:absolute before:content-[''] before:-top-[10px] before:right-[142px] before:size-3 before:bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] before:backdrop-blur-md before:[clip-path:polygon(100%_14%,50%_100%,100%_100%);] 
          transition-all ease duration-300 origin-bottom flex items-center justify-center 
          group-hover/folder:shadow-[inset_0_20px_40px_rgba(100,149,237,0.4),inset_0_-20px_40px_rgba(65,105,225,0.3)] 
          group-hover/folder:[transform:rotateX(-46deg)_translateY(1px)]"
        >
          <div className="text-foreground text-4xl">{icon}</div>
        </div>
      </div>
    </section>
  );
};

export default GlassFolder;
```
--------------------------------------------------

### COMPONENT: globe
Category: Components
Description: A fully customizable and interactive 3D globe built with the `cobe` library. Supports theming, lighting, rotation, mouse interactions, and custom markers. Ideal for showcasing global presence, user locations, or ambient visual flair.
URL: https://lightswind.com/components/globe
Import: import Globe from '@/components/lightswind/globe';
Registry URL: https://lightswind.com/r/globe.json
Install Command: npx lightswind@latest add globe

Usage:
```tsx
import Globe from '@/components/lightswind/globe';

// Basic usage with default values
<Globe />

// Custom appearance and behavior
<Globe
  theta={0.2}
  dark={1}
  scale={1.2}
  diffuse={1.5}
  baseColor="#1a1a1a"
  markerColor="#ff0000"
  glowColor="#444444"
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import createGlobe from "cobe";
import { cn } from "@/components/lib/utils";

// Utility function to convert a hex color string to a normalized RGB array [0-1, 0-1, 0-1]
const hexToRgbNormalized = (hex: string): [number, number, number] => {
  let r = 0,
    g = 0,
    b = 0;

  const cleanHex = hex.startsWith("#") ? hex.slice(1) : hex;

  if (cleanHex.length === 3) {
    r = parseInt(cleanHex[0] + cleanHex[0], 16);
    g = parseInt(cleanHex[1] + cleanHex[1], 16);
    b = parseInt(cleanHex[2] + cleanHex[2], 16);
  } else if (cleanHex.length === 6) {
    r = parseInt(cleanHex.substring(0, 2), 16);
    g = parseInt(cleanHex.substring(2, 4), 16);
    b = parseInt(cleanHex.substring(4, 6), 16);
  } else {
    return [0.4, 0.65, 1];
  }

  return [r / 255, g / 255, b / 255];
};

export interface GlobeMarker {
  location: [number, number];
  size: number;
}

export interface GlobeProps {
  className?: string;
  theta?: number;
  phi?: number;
  dark?: number;
  scale?: number;
  diffuse?: number;
  mapSamples?: number;
  mapBrightness?: number;
  baseColor?: [number, number, number] | string;
  markerColor?: [number, number, number] | string;
  glowColor?: [number, number, number] | string;
  markers?: GlobeMarker[];
  
  /** Enable mouse wheel and pinch zoom */
  enableZoom?: boolean;
  /** Minimum zoom scale */
  minScale?: number;
  /** Maximum zoom scale */
  maxScale?: number;
  /** Zoom sensitivity multiplier */
  zoomSensitivity?: number;
  /** Enable auto rotation */
  autoRotate?: boolean;
  /** Auto rotation speed */
  autoRotateSpeed?: number;
}

const Globe: React.FC<GlobeProps> = ({
  className,
  theta = 0.25,
  phi = 0,
  dark = 0,
  scale = 1.1,
  diffuse = 1.2,
  mapSamples = 24000,
  mapBrightness = 10,
  baseColor = "#ffffff",
  markerColor = "#ff3b30",
  glowColor = "#ffffff",
  markers = [],
  enableZoom = true,
  minScale = 0.4,
  maxScale = 3.5,
  zoomSensitivity = 0.002,
  autoRotate = true,
  autoRotateSpeed = 0.003,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const globeRef = useRef<any>(null);

  // Interaction refs
  const phiRef = useRef(phi);
  const thetaRef = useRef(theta);
  const targetScaleRef = useRef(scale);
  const currentScaleRef = useRef(scale);
  const isDragging = useRef(false);
  const lastMouseX = useRef(0);
  const lastMouseY = useRef(0);

  // Synchronize initial prop scale
  useEffect(() => {
    targetScaleRef.current = scale;
  }, [scale]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Normalize color props
    const resolvedBaseColor: [number, number, number] =
      typeof baseColor === "string" ? hexToRgbNormalized(baseColor) : baseColor;

    const resolvedMarkerColor: [number, number, number] =
      typeof markerColor === "string" ? hexToRgbNormalized(markerColor) : markerColor;

    const resolvedGlowColor: [number, number, number] =
      typeof glowColor === "string" ? hexToRgbNormalized(glowColor) : glowColor;

    const initGlobe = () => {
      if (globeRef.current) {
        globeRef.current.destroy();
        globeRef.current = null;
      }

      const rect = canvas.getBoundingClientRect();
      const width = Math.max(100, Math.round(rect.width || 600));
      const height = Math.max(100, Math.round(rect.height || 500));
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const internalWidth = Math.round(width * dpr);
      const internalHeight = Math.round(height * dpr);

      canvas.width = internalWidth;
      canvas.height = internalHeight;

      globeRef.current = createGlobe(canvas, {
        devicePixelRatio: dpr,
        width: internalWidth,
        height: internalHeight,
        phi: phiRef.current,
        theta: thetaRef.current,
        dark: dark,
        scale: currentScaleRef.current,
        diffuse: diffuse,
        mapSamples: mapSamples,
        mapBrightness: mapBrightness,
        baseColor: resolvedBaseColor,
        markerColor: resolvedMarkerColor,
        glowColor: resolvedGlowColor,
        opacity: 1,
        offset: [0, 0],
        markers: markers,
        onRender: (state: Record<string, any>) => {
          // Smooth zoom interpolation (lerp) for high-fps fluid zooming
          currentScaleRef.current +=
            (targetScaleRef.current - currentScaleRef.current) * 0.12;

          if (!isDragging.current && autoRotate) {
            phiRef.current += autoRotateSpeed;
          }
          state.phi = phiRef.current;
          state.theta = thetaRef.current;
          state.scale = currentScaleRef.current;
          state.width = internalWidth;
          state.height = internalHeight;
        },
      });
    };

    // --- Mouse Drag Interaction Handlers ---
    const onMouseDown = (e: MouseEvent) => {
      isDragging.current = true;
      lastMouseX.current = e.clientX;
      lastMouseY.current = e.clientY;
      canvas.style.cursor = "grabbing";
    };

    const onMouseMove = (e: MouseEvent) => {
      if (isDragging.current) {
        const deltaX = e.clientX - lastMouseX.current;
        const deltaY = e.clientY - lastMouseY.current;
        const rotationSpeed = 0.005;

        phiRef.current += deltaX * rotationSpeed;
        thetaRef.current = Math.max(
          -Math.PI / 2,
          Math.min(Math.PI / 2, thetaRef.current - deltaY * rotationSpeed)
        );

        lastMouseX.current = e.clientX;
        lastMouseY.current = e.clientY;
      }
    };

    const onMouseUp = () => {
      isDragging.current = false;
      canvas.style.cursor = "grab";
    };

    const onMouseLeave = () => {
      if (isDragging.current) {
        isDragging.current = false;
        canvas.style.cursor = "grab";
      }
    };

    // --- Mouse Wheel Zoom Interaction Handler ---
    const onWheel = (e: WheelEvent) => {
      if (!enableZoom) return;
      // Allow natural page scrolling; only intercept wheel when user is explicitly zooming with Ctrl/Cmd or dragging
      if (!e.ctrlKey && !e.metaKey && !isDragging.current) {
        return;
      }
      e.preventDefault();
      const zoomDelta = -e.deltaY * zoomSensitivity;
      const nextScale = targetScaleRef.current + zoomDelta;
      targetScaleRef.current = Math.max(minScale, Math.min(maxScale, nextScale));
    };

    // --- Touch Interaction (Drag + Pinch to Zoom) ---
    let touchDistance = 0;
    let initialTouchScale = 1;

    const onTouchStart = (e: TouchEvent) => {
      if (e.touches.length === 1) {
        isDragging.current = true;
        lastMouseX.current = e.touches[0].clientX;
        lastMouseY.current = e.touches[0].clientY;
      } else if (e.touches.length === 2 && enableZoom) {
        isDragging.current = false;
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        touchDistance = Math.hypot(dx, dy);
        initialTouchScale = targetScaleRef.current;
      }
    };

    const onTouchMove = (e: TouchEvent) => {
      if (e.touches.length === 1 && isDragging.current) {
        const deltaX = e.touches[0].clientX - lastMouseX.current;
        const deltaY = e.touches[0].clientY - lastMouseY.current;
        const rotationSpeed = 0.005;

        phiRef.current += deltaX * rotationSpeed;
        thetaRef.current = Math.max(
          -Math.PI / 2,
          Math.min(Math.PI / 2, thetaRef.current - deltaY * rotationSpeed)
        );

        lastMouseX.current = e.touches[0].clientX;
        lastMouseY.current = e.touches[0].clientY;
      } else if (e.touches.length === 2 && enableZoom && touchDistance > 0) {
        e.preventDefault();
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        const dist = Math.hypot(dx, dy);
        const factor = dist / touchDistance;
        const nextScale = initialTouchScale * factor;
        targetScaleRef.current = Math.max(minScale, Math.min(maxScale, nextScale));
      }
    };

    const onTouchEnd = () => {
      isDragging.current = false;
      touchDistance = 0;
    };

    let isVisible = true;
    const observer = typeof IntersectionObserver !== "undefined"
      ? new IntersectionObserver(
          ([entry]) => {
            const visible = entry && entry.isIntersecting;
            isVisible = visible;
            if (visible) {
              if (!globeRef.current) {
                initGlobe();
              }
            } else {
              if (globeRef.current) {
                globeRef.current.destroy();
                globeRef.current = null;
              }
            }
          },
          { rootMargin: "150px" }
        )
      : null;

    if (observer) {
      observer.observe(canvas);
    } else {
      initGlobe();
    }

    // Attach interaction listeners
    canvas.addEventListener("mousedown", onMouseDown);
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
    canvas.addEventListener("mouseleave", onMouseLeave);
    canvas.addEventListener("wheel", onWheel, { passive: false });
    canvas.addEventListener("touchstart", onTouchStart, { passive: true });
    canvas.addEventListener("touchmove", onTouchMove, { passive: false });
    canvas.addEventListener("touchend", onTouchEnd, { passive: true });

    const handleResize = () => {
      if (isVisible) {
        initGlobe();
      }
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      if (observer) {
        observer.disconnect();
      }
      if (canvas) {
        canvas.removeEventListener("mousedown", onMouseDown);
        canvas.removeEventListener("mousemove", onMouseMove);
        canvas.removeEventListener("mouseup", onMouseUp);
        canvas.removeEventListener("mouseleave", onMouseLeave);
        canvas.removeEventListener("wheel", onWheel);
        canvas.removeEventListener("touchstart", onTouchStart);
        canvas.removeEventListener("touchmove", onTouchMove);
        canvas.removeEventListener("touchend", onTouchEnd);
      }
      if (globeRef.current) {
        globeRef.current.destroy();
        globeRef.current = null;
      }
    };
  }, [
    theta,
    dark,
    diffuse,
    mapSamples,
    mapBrightness,
    baseColor,
    markerColor,
    glowColor,
    enableZoom,
    minScale,
    maxScale,
    zoomSensitivity,
    autoRotate,
    autoRotateSpeed,
    markers,
  ]);

  return (
    <div
      className={cn(
        "flex items-center justify-center relative w-full h-full min-h-[400px]",
        className
      )}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
      }}
    >
      <canvas
        ref={canvasRef}
        style={{
          width: "100%",
          height: "100%",
          display: "block",
          cursor: "grab",
        }}
      />
    </div>
  );
};

export default Globe;

```
--------------------------------------------------

### COMPONENT: grain-carousel
Category: Components
Description: An interactive 3D lenticular dual-image carousel with animated holographic gradient foil, micro film grain, and elevation tilt effects.
URL: https://lightswind.com/components/grain-carousel
Import: import GrainCarousel, { GrainCarouselItem } from "@/components/lightswind/grain-carousel";
Registry URL: https://lightswind.com/r/grain-carousel.json
Install Command: npx lightswind@latest add grain-carousel

Usage:
```tsx
import GrainCarousel, { GrainCarouselItem } from "@/components/lightswind/grain-carousel";

const items: GrainCarouselItem[] = [
  {
    title: "Apex Structure",
    subtitle: "Parametric Glass Facade",
    badge: "Architecture",
    imageA: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=600&q=80",
    imageB: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=600&q=80",
    accentColor: "#00F5FF",
  },
  {
    title: "Modern Pavilion",
    subtitle: "Minimalist Natural Wood",
    badge: "Concept",
    imageA: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80",
    imageB: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=600&q=80",
    accentColor: "#FF9FFC",
  },
];

export default function Example() {
  return (
    <GrainCarousel
      items={items}
      cardWidth={270}
      maxTilt={16}
      lift={36}
      foilVariant="cosmic-cyan"
      grainAmount={0.35}
      showRibs={true}
      showFoil={true}
      showGrain={true}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, {
    useState,
    useRef,
    useEffect,
    useCallback,
    useId,
    CSSProperties,
    forwardRef,
    useImperativeHandle,
} from "react";
import { cn } from "@/components/lib/utils";
import { ChevronLeft, ChevronRight, Sparkles } from "lucide-react";

export type GrainFoilVariant =
    | "holographic"
    | "cosmic-cyan"
    | "neon-sakura"
    | "solar-plasma"
    | "cyber-emerald"
    | "ultra-violet"
    | "monochrome";

export interface GrainCarouselItem {
    id?: string | number;
    title?: string;
    subtitle?: string;
    category?: string;
    imageA: string;
    imageB?: string;
    badge?: string;
    href?: string;
    accentColor?: string;
    onClick?: () => void;
}

export interface GrainCarouselProps {
    /** List of carousel slide items with dual lenticular images and meta info */
    items?: GrainCarouselItem[];
    /** Initially active center card index (default: 2 or middle) */
    defaultIndex?: number;
    /** Controlled active index */
    activeIndex?: number;
    /** Callback fired when center slide changes */
    onIndexChange?: (index: number, item: GrainCarouselItem) => void;
    /** Width of each card in pixels (default: 270) */
    cardWidth?: number;
    /** Aspect ratio for cards (default: "3 / 4") */
    aspectRatio?: string;
    /** Spacing between cards in pixels (default: 24) */
    gap?: number;
    /** 3D perspective depth in pixels (default: 1200) */
    perspective?: number;
    /** Z-axis lift elevation in px when card is hovered (default: 36) */
    lift?: number;
    /** Maximum 3D rotation tilt angle in degrees (default: 16) */
    maxTilt?: number;
    /** Aesthetic gradient foil color palette */
    foilVariant?: GrainFoilVariant;
    /** Intensity of animated gradient film grain overlay (0.0 to 1.0, default: 0.35) */
    grainAmount?: number;
    /** Number of vertical lenticular optical refraction strips (default: 56) */
    lenticularStrips?: number;
    /** Scale factor for inactive background cards (0.5 to 1.0, default: 0.90) */
    inactiveScale?: number;
    /** Brightness dim factor for inactive background cards (0.1 to 1.0, default: 0.55) */
    inactiveDim?: number;
    /** Whether to show lenticular optical lens ribs (default: true) */
    showRibs?: boolean;
    /** Whether to show animated holographic foil shimmer (default: true) */
    showFoil?: boolean;
    /** Whether to show film grain overlay (default: true) */
    showGrain?: boolean;
    /** Enable navigation arrows (default: true) */
    showArrows?: boolean;
    /** Enable bottom segmented progress dots (default: true) */
    showDots?: boolean;
    /** Enable automatic slide cycling (default: false) */
    autoplay?: boolean;
    /** Autoplay transition interval in ms (default: 4000) */
    autoplayInterval?: number;
    /** Pause autoplay when mouse enters carousel (default: true) */
    pauseOnHover?: boolean;
    /** Border radius for cards (default: "16px") */
    radius?: string | number;
    /** Optional container class name */
    className?: string;
    /** Optional container inline style */
    style?: CSSProperties;
}

export interface GrainCarouselHandle {
    next: () => void;
    prev: () => void;
    goTo: (index: number) => void;
    getIndex: () => number;
}

const DEFAULT_CAROUSEL_ITEMS: GrainCarouselItem[] = [
    {
        id: 1,
        title: "Apex Structure",
        subtitle: "Parametric Glass Facade",
        badge: "Architecture",
        imageA: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=600&q=80",
        imageB: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=600&q=80",
        accentColor: "#00F5FF",
    },
    {
        id: 2,
        title: "Modern Pavilion",
        subtitle: "Minimalist Natural Wood",
        badge: "Concept",
        imageA: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80",
        imageB: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=600&q=80",
        accentColor: "#FF9FFC",
    },
    {
        id: 3,
        title: "Villa Solarium",
        subtitle: "Infinite Horizon Pool",
        badge: "Luxury",
        imageA: "https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=600&q=80",
        imageB: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=600&q=80",
        accentColor: "#FF9900",
    },
    {
        id: 4,
        title: "Glass Skyline",
        subtitle: "Urban Geometric Tower",
        badge: "Metropolis",
        imageA: "https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=600&q=80",
        imageB: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=600&q=80",
        accentColor: "#00FF88",
    },
    {
        id: 5,
        title: "Monolith Center",
        subtitle: "Brutalist Concrete Curve",
        badge: "Exhibition",
        imageA: "https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?auto=format&fit=crop&w=600&q=80",
        imageB: "https://images.unsplash.com/photo-1507652313519-d4e9174996dd?auto=format&fit=crop&w=600&q=80",
        accentColor: "#A855F7",
    },
];

const FOIL_GRADIENTS: Record<GrainFoilVariant, string> = {
    holographic:
        "linear-gradient(115deg, transparent 0%, rgba(255, 0, 128, 0.4) 25%, rgba(0, 255, 255, 0.5) 50%, rgba(255, 255, 0, 0.4) 75%, transparent 100%)",
    "cosmic-cyan":
        "linear-gradient(115deg, transparent 0%, rgba(0, 150, 255, 0.4) 25%, rgba(0, 245, 255, 0.6) 50%, rgba(120, 255, 214, 0.4) 75%, transparent 100%)",
    "neon-sakura":
        "linear-gradient(115deg, transparent 0%, rgba(255, 70, 150, 0.4) 25%, rgba(255, 160, 250, 0.6) 50%, rgba(180, 100, 255, 0.4) 75%, transparent 100%)",
    "solar-plasma":
        "linear-gradient(115deg, transparent 0%, rgba(255, 60, 0, 0.4) 25%, rgba(255, 160, 0, 0.6) 50%, rgba(255, 220, 50, 0.4) 75%, transparent 100%)",
    "cyber-emerald":
        "linear-gradient(115deg, transparent 0%, rgba(0, 200, 100, 0.4) 25%, rgba(0, 255, 140, 0.6) 50%, rgba(0, 230, 255, 0.4) 75%, transparent 100%)",
    "ultra-violet":
        "linear-gradient(115deg, transparent 0%, rgba(130, 0, 255, 0.4) 25%, rgba(190, 80, 255, 0.6) 50%, rgba(255, 70, 180, 0.4) 75%, transparent 100%)",
    monochrome:
        "linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 70%, transparent 100%)",
};

export const GrainCarousel = forwardRef<GrainCarouselHandle, GrainCarouselProps>(({
    items = DEFAULT_CAROUSEL_ITEMS,
    defaultIndex,
    activeIndex: controlledIndex,
    onIndexChange,
    cardWidth = 270,
    aspectRatio = "3 / 4",
    gap = 24,
    perspective = 1200,
    lift = 36,
    maxTilt = 16,
    foilVariant = "cosmic-cyan",
    grainAmount = 0.35,
    lenticularStrips = 56,
    inactiveScale = 0.90,
    inactiveDim = 0.55,
    showRibs = true,
    showFoil = true,
    showGrain = true,
    showArrows = true,
    showDots = true,
    autoplay = false,
    autoplayInterval = 4000,
    pauseOnHover = true,
    radius = "16px",
    className,
    style,
}, ref) => {
    const rawDefault = defaultIndex !== undefined ? defaultIndex : Math.min(2, Math.max(0, Math.floor(items.length / 2)));
    const [internalIndex, setInternalIndex] = useState<number>(rawDefault);
    const currentIndex = controlledIndex !== undefined ? controlledIndex : internalIndex;

    const [trackOffset, setTrackOffset] = useState<number>(0);
    const [isHovered, setIsHovered] = useState<boolean>(false);
    const [cardInteractions, setCardInteractions] = useState<
        Record<number, { tiltX: number; tiltY: number; progress: number; foilX: number; foilY: number }>
    >({});

    const containerRef = useRef<HTMLDivElement>(null);
    const trackRef = useRef<HTMLDivElement>(null);
    const isDraggingRef = useRef<boolean>(false);
    const dragStartXRef = useRef<number>(0);

    const filterId = useId().replace(/[:]/g, "");

    const parsedRadius = typeof radius === "number" ? `${radius}px` : radius;

    const changeIndex = useCallback(
        (newIndex: number) => {
            const clamped = Math.max(0, Math.min(newIndex, items.length - 1));
            if (controlledIndex === undefined) {
                setInternalIndex(clamped);
            }
            if (onIndexChange && items[clamped]) {
                onIndexChange(clamped, items[clamped]);
            }
        },
        [controlledIndex, items, onIndexChange]
    );

    useImperativeHandle(ref, () => ({
        next: () => changeIndex(currentIndex + 1),
        prev: () => changeIndex(currentIndex - 1),
        goTo: (idx) => changeIndex(idx),
        getIndex: () => currentIndex,
    }));

    // Update track position for active slide centering
    const updateTrackPosition = useCallback(() => {
        if (!containerRef.current) return;
        const containerWidth = containerRef.current.offsetWidth;
        const centerOffset = containerWidth / 2 - cardWidth / 2;
        const targetTranslate = centerOffset - currentIndex * (cardWidth + gap);
        setTrackOffset(targetTranslate);
    }, [currentIndex, cardWidth, gap]);

    useEffect(() => {
        updateTrackPosition();
        const ro = new ResizeObserver(() => updateTrackPosition());
        if (containerRef.current) ro.observe(containerRef.current);
        return () => ro.disconnect();
    }, [updateTrackPosition]);

    // Autoplay Timer
    useEffect(() => {
        if (!autoplay || (pauseOnHover && isHovered) || items.length <= 1) return;
        const timer = setInterval(() => {
            setInternalIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));
        }, autoplayInterval);
        return () => clearInterval(timer);
    }, [autoplay, autoplayInterval, pauseOnHover, isHovered, items.length]);

    // Keyboard Navigation
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === "ArrowLeft") changeIndex(currentIndex - 1);
            if (e.key === "ArrowRight") changeIndex(currentIndex + 1);
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [currentIndex, changeIndex]);

    // Mouse Interaction for 3D Tilt and Lenticular Transition
    const handleCardMouseMove = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
        const card = e.currentTarget;
        const rect = card.getBoundingClientRect();
        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));

        const tiltY = (x - 0.5) * (maxTilt * 2);
        const tiltX = (0.5 - y) * (maxTilt * 1.5);
        const progress = x;

        setCardInteractions((prev) => ({
            ...prev,
            [index]: {
                tiltX,
                tiltY,
                progress,
                foilX: x * 100,
                foilY: y * 100,
            },
        }));
    };

    const handleCardMouseLeave = (index: number) => {
        setCardInteractions((prev) => ({
            ...prev,
            [index]: { tiltX: 0, tiltY: 0, progress: 0, foilX: 50, foilY: 50 },
        }));
    };

    // Drag / Swipe Handlers
    const handleMouseDown = (e: React.MouseEvent) => {
        isDraggingRef.current = true;
        dragStartXRef.current = e.clientX;
    };

    const handleTouchStart = (e: React.TouchEvent) => {
        isDraggingRef.current = true;
        dragStartXRef.current = e.touches[0].clientX;
    };

    const handleDragMove = (clientX: number) => {
        if (!isDraggingRef.current) return;
        const deltaX = clientX - dragStartXRef.current;
        if (Math.abs(deltaX) > 45) {
            if (deltaX > 0 && currentIndex > 0) {
                changeIndex(currentIndex - 1);
            } else if (deltaX < 0 && currentIndex < items.length - 1) {
                changeIndex(currentIndex + 1);
            }
            isDraggingRef.current = false;
        }
    };

    const handleMouseUp = () => {
        isDraggingRef.current = false;
    };

    return (
        <div
            className={cn("w-full flex flex-col items-center select-none relative", className)}
            style={style}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => {
                setIsHovered(false);
                isDraggingRef.current = false;
            }}
        >
            {/* SVG Procedural Grain Noise Filter definition */}
            <svg className="absolute w-0 h-0 pointer-events-none opacity-0" aria-hidden="true">
                <defs>
                    <filter id={`grain-filter-${filterId}`} x="0%" y="0%" width="100%" height="100%">
                        <feTurbulence
                            type="fractalNoise"
                            baseFrequency="0.85"
                            numOctaves="3"
                            stitchTiles="stitch"
                            result="noise"
                        />
                        <feColorMatrix
                            type="matrix"
                            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
                        />
                    </filter>
                </defs>
            </svg>

            {/* 3D Viewport Wrapper */}
            <div
                ref={containerRef}
                className="w-full relative py-8 overflow-hidden"
                style={{ perspective: `${perspective}px` }}
                onMouseDown={handleMouseDown}
                onMouseMove={(e) => handleDragMove(e.clientX)}
                onMouseUp={handleMouseUp}
                onTouchStart={handleTouchStart}
                onTouchMove={(e) => handleDragMove(e.touches[0].clientX)}
                onTouchEnd={handleMouseUp}
            >
                {/* 3D Carousel Track */}
                <div
                    ref={trackRef}
                    className="flex items-center cursor-grab active:cursor-grabbing will-change-transform transition-transform duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]"
                    style={{
                        transform: `translateX(${trackOffset}px)`,
                        gap: `${gap}px`,
                    }}
                >
                    {items.map((item, index) => {
                        const isActive = index === currentIndex;
                        const interaction = cardInteractions[index] || {
                            tiltX: 0,
                            tiltY: 0,
                            progress: 0,
                            foilX: 50,
                            foilY: 50,
                        };
                        const hasDualImage = Boolean(item.imageB);
                        const flipProgress = hasDualImage ? interaction.progress : 0;
                        const foilOpacity = Math.sin(interaction.progress * Math.PI) * 0.75;

                        return (
                            <div
                                key={item.id ?? index}
                                onClick={() => {
                                    if (!isActive) changeIndex(index);
                                    if (item.onClick) item.onClick();
                                }}
                                onMouseMove={(e) => handleCardMouseMove(e, index)}
                                onMouseLeave={() => handleCardMouseLeave(index)}
                                className={cn(
                                    "relative shrink-0 rounded-2xl cursor-pointer transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] group",
                                    isActive
                                        ? "z-20 shadow-2xl ring-1 ring-white/20"
                                        : "z-10 shadow-lg hover:brightness-75"
                                )}
                                style={{
                                    width: `${cardWidth}px`,
                                    aspectRatio,
                                    borderRadius: parsedRadius,
                                    transform: `scale(${isActive ? 1.0 : inactiveScale})`,
                                    filter: isActive ? "brightness(1)" : `brightness(${inactiveDim})`,
                                    transformStyle: "preserve-3d",
                                }}
                            >
                                {/* 3D Hover Tilt & Lift Container */}
                                <div
                                    className="w-full h-full relative rounded-[inherit] overflow-hidden transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] bg-zinc-900 border border-white/10 dark:border-white/5"
                                    style={{
                                        borderRadius: parsedRadius,
                                        transformStyle: "preserve-3d",
                                        transform: isActive
                                            ? `translateZ(${interaction.tiltX || interaction.tiltY ? lift : 0}px) rotateY(${interaction.tiltY}deg) rotateX(${interaction.tiltX}deg)`
                                            : undefined,
                                    }}
                                >
                                    {/* Primary Image Face (Image A) */}
                                    <img
                                        src={item.imageA}
                                        alt={item.title ?? `Slide ${index + 1}`}
                                        className="absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[inherit] transition-transform duration-700 group-hover:scale-105"
                                        loading="lazy"
                                    />

                                    {/* Secondary Lenticular Image Face (Image B) */}
                                    {hasDualImage && (
                                        <img
                                            src={item.imageB}
                                            alt={item.title ? `${item.title} Alt` : `Slide ${index + 1} Alt`}
                                            className="absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[inherit] transition-opacity duration-150"
                                            style={{
                                                opacity: flipProgress,
                                                filter: "contrast(1.08) saturate(1.15)",
                                            }}
                                            loading="lazy"
                                        />
                                    )}

                                    {/* Lenticular Lens Ribs Optical Refraction Overlay */}
                                    {showRibs && (
                                        <div
                                            className="absolute inset-0 pointer-events-none rounded-[inherit] mix-blend-overlay opacity-50"
                                            style={{
                                                background: `repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0px, rgba(0,0,0,0.4) calc(${cardWidth}px / ${lenticularStrips} * 0.5), rgba(255,255,255,0.12) calc(${cardWidth}px / ${lenticularStrips}))`,
                                            }}
                                        />
                                    )}

                                    {/* Animated Holographic Foil Shimmer */}
                                    {showFoil && (
                                        <div
                                            className="absolute inset-0 pointer-events-none rounded-[inherit] mix-blend-color-dodge transition-opacity duration-200"
                                            style={{
                                                background: FOIL_GRADIENTS[foilVariant] || FOIL_GRADIENTS["cosmic-cyan"],
                                                backgroundSize: "220% 220%",
                                                backgroundPosition: `${interaction.foilX}% ${interaction.foilY}%`,
                                                opacity: foilOpacity,
                                            }}
                                        />
                                    )}

                                    {/* Micro Film Grain Texture Overlay */}
                                    {showGrain && (
                                        <div
                                            className="absolute inset-0 pointer-events-none rounded-[inherit] mix-blend-overlay opacity-40 transition-opacity duration-300 group-hover:opacity-60"
                                            style={{
                                                filter: `url(#grain-filter-${filterId})`,
                                                opacity: grainAmount,
                                            }}
                                        />
                                    )}

                                    {/* Bottom Vignette Scrim */}
                                    <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/90 via-black/35 to-transparent rounded-[inherit]" />

                                    {/* Card Content Overlay */}
                                    <div className="absolute inset-x-0 bottom-0 p-4 sm:p-5 flex flex-col gap-1.5 pointer-events-none text-white select-none">
                                        {item.badge && (
                                            <div className="inline-flex items-center gap-1 self-start px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider backdrop-blur-md bg-white/15 border border-white/20 text-white">
                                                <Sparkles className="w-2.5 h-2.5" />
                                                <span>{item.badge}</span>
                                            </div>
                                        )}

                                        {item.title && (
                                            <h3 className="text-base sm:text-lg font-bold tracking-tight text-white drop-shadow-md">
                                                {item.title}
                                            </h3>
                                        )}

                                        {item.subtitle && (
                                            <p className="text-xs text-zinc-300/80 font-medium line-clamp-1">
                                                {item.subtitle}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Carousel Controls & Segmented Dots Rail */}
            {(showArrows || showDots) && (
                <div className="flex items-center justify-center gap-4 mt-2 select-none">
                    {/* Previous Button */}
                    {showArrows && (
                        <button
                            onClick={() => changeIndex(currentIndex - 1)}
                            disabled={currentIndex === 0}
                            aria-label="Previous Slide"
                            className="w-9 h-9 rounded-full flex items-center justify-center bg-card border border-border text-foreground hover:bg-muted hover:scale-105 active:scale-95 disabled:opacity-30 disabled:pointer-events-none transition-all duration-200 shadow-xs cursor-pointer"
                        >
                            <ChevronLeft className="w-4 h-4" />
                        </button>
                    )}

                    {/* Progress Dots Rail */}
                    {showDots && (
                        <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-card/80 border border-border backdrop-blur-md">
                            {items.map((_, i) => (
                                <button
                                    key={i}
                                    onClick={() => changeIndex(i)}
                                    aria-label={`Go to slide ${i + 1}`}
                                    className={cn(
                                        "h-1.5 rounded-full transition-all duration-300 cursor-pointer",
                                        i === currentIndex
                                            ? "w-7 bg-cyan-500 shadow-xs"
                                            : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/60"
                                    )}
                                />
                            ))}
                        </div>
                    )}

                    {/* Next Button */}
                    {showArrows && (
                        <button
                            onClick={() => changeIndex(currentIndex + 1)}
                            disabled={currentIndex === items.length - 1}
                            aria-label="Next Slide"
                            className="w-9 h-9 rounded-full flex items-center justify-center bg-card border border-border text-foreground hover:bg-muted hover:scale-105 active:scale-95 disabled:opacity-30 disabled:pointer-events-none transition-all duration-200 shadow-xs cursor-pointer"
                        >
                            <ChevronRight className="w-4 h-4" />
                        </button>
                    )}
                </div>
            )}
        </div>
    );
});

GrainCarousel.displayName = "GrainCarousel";

export default GrainCarousel;

```
--------------------------------------------------

### COMPONENT: world-map
Category: Components
Description: A high-performance interactive SVG dotted world map featuring accurate lat/long coordinates, live multi-timezone beacon pings, curved connection arcs with animated particles, and rich dark & light mode styling.
URL: https://lightswind.com/components/world-map
Import: import WorldMap, { DEFAULT_MARKERS, DEFAULT_ARCS } from "@/components/lightswind/world-map";
Registry URL: https://lightswind.com/r/world-map.json
Install Command: npx lightswind@latest add world-map

Usage:
```tsx
import WorldMap, { DEFAULT_MARKERS, DEFAULT_ARCS } from "@/components/lightswind/world-map";

// Basic usage with default markers and connection arcs
<div className="relative h-[480px] w-full overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-[#FAFAFA] dark:bg-[#09090B]">
  <WorldMap
    markers={DEFAULT_MARKERS}
    arcs={DEFAULT_ARCS}
    pulse={true}
    markerColor="#3B82F6"
    enableTooltips={true}
  />
</div>
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { MapPin, Clock } from "lucide-react";
import { cn } from "@/components/lib/utils";

export interface MapMarker {
  id?: string;
  lat: number;
  lng: number;
  label?: string;
  country?: string;
  timeZone?: string;
  ping?: string;
  size?: number;
  color?: string;
  pulse?: boolean;
  data?: any;
}

export interface MapArc {
  id?: string;
  start: { lat: number; lng: number };
  end: { lat: number; lng: number };
  color?: string;
  strokeWidth?: number;
  dashed?: boolean;
}

export interface WorldMapProps extends React.SVGProps<SVGSVGElement> {
  width?: number;
  height?: number;
  dotRadius?: number;
  dotColor?: string;
  markerColor?: string;
  pulseColor?: string;
  markers?: MapMarker[];
  arcs?: MapArc[];
  pulse?: boolean;
  stagger?: boolean;
  enableTooltips?: boolean;
  showTimezones?: boolean;
  interactive?: boolean;
  className?: string;
  onMarkerClick?: (marker: MapMarker) => void;
  renderMarkerOverlay?: (args: {
    marker: MapMarker;
    x: number;
    y: number;
    r: number;
  }) => React.ReactNode;
}

// Convert Latitude / Longitude (WGS84) to SVG Map Coordinates (Equirectangular / Miller hybrid projection)
export function latLngToXY(lat: number, lng: number, width: number = 800, height: number = 400) {
  // Longitude: -180 to +180 -> 0 to width
  const x = ((lng + 180) / 360) * width;
  // Latitude: +90 to -90 -> 0 to height (Miller-adjusted projection for balanced continents)
  const latRad = (lat * Math.PI) / 180;
  const mercN = Math.log(Math.tan(Math.PI / 4 + (latRad * 0.85) / 2));
  const y = height / 2 - (width * mercN) / (2 * Math.PI);
  
  // Clamp boundaries safely
  const clampedX = Math.max(0, Math.min(width, x));
  const clampedY = Math.max(0, Math.min(height, y));
  return { x: clampedX, y: clampedY };
}

// High-accuracy continent landmass sample grid points [lat, lng]
const WORLD_LANDMASS_SAMPLES: [number, number][] = [
  // North America - Alaska & Canada
  [71, -156], [68, -165], [64, -162], [65, -147], [61, -150], [60, -162], [58, -135],
  [69, -133], [65, -120], [62, -114], [67, -118], [63, -104], [60, -108], [64, -96],
  [58, -94], [55, -100], [53, -113], [54, -125], [51, -120], [49, -123], [52, -106],
  [50, -97], [53, -85], [58, -78], [55, -67], [52, -75], [48, -89], [47, -79], [46, -71],
  [47, -65], [45, -63], [53, -60],
  // USA (Lower 48)
  [48, -122], [46, -124], [44, -121], [42, -123], [39, -123], [37, -122], [34, -119], [32, -117],
  [47, -114], [44, -114], [40, -111], [37, -112], [34, -112], [32, -111],
  [48, -100], [45, -100], [41, -102], [37, -100], [33, -102], [30, -103], [28, -100],
  [47, -92], [43, -93], [39, -94], [35, -92], [32, -92], [30, -90],
  [44, -85], [41, -86], [38, -85], [34, -84], [30, -84], [27, -81], [25, -80],
  [43, -76], [40, -74], [37, -77], [35, -78], [32, -80],
  // Mexico & Central America
  [30, -110], [27, -108], [24, -105], [26, -100], [22, -101], [19, -99], [20, -90], [17, -93],
  [15, -90], [14, -87], [12, -85], [9, -83], [8, -80],
  // Caribbean
  [22, -79], [18, -72], [18, -66],
  // South America
  [10, -73], [7, -73], [4, -73], [1, -78], [-2, -79], [-5, -80], [-8, -78], [-12, -77], [-15, -75],
  [6, -62], [3, -60], [0, -50], [5, -53], [2, -66], [-2, -60], [-5, -63], [-8, -63],
  [-3, -44], [-6, -37], [-8, -35], [-12, -38], [-15, -44], [-12, -49],
  [-16, -68], [-19, -65], [-22, -65], [-23, -46], [-22, -43], [-25, -49], [-25, -57],
  [-28, -70], [-33, -71], [-38, -73], [-42, -73], [-46, -74], [-51, -73],
  [-29, -60], [-34, -58], [-38, -62], [-42, -64], [-46, -67], [-50, -68], [-54, -68],
  // Greenland & Iceland
  [76, -42], [72, -40], [70, -50], [65, -45], [64, -18],
  // Europe - UK & Ireland
  [58, -4], [55, -3], [52, -1], [51, 0], [53, -8],
  // Europe - Scandinavia
  [69, 25], [65, 22], [61, 25], [64, 14], [60, 11], [59, 17], [56, 13],
  // Europe - Western & Central
  [53, 5], [51, 4], [48, 2], [45, 0], [43, 3], [43, -3], [40, -4], [37, -5], [39, -9],
  [52, 10], [49, 11], [46, 9], [43, 12], [41, 14], [38, 15], [37, 14],
  [53, 19], [50, 19], [46, 17], [44, 21], [40, 22], [38, 23],
  // Europe - Eastern & Russia
  [58, 30], [55, 37], [52, 33], [48, 35], [45, 34], [46, 40],
  [65, 41], [60, 50], [55, 52], [52, 50], [48, 45],
  [68, 55], [64, 65], [60, 70], [56, 68], [52, 71],
  [67, 78], [63, 85], [59, 88], [55, 83], [52, 85],
  [68, 100], [63, 105], [58, 102], [54, 100],
  [67, 120], [62, 125], [57, 120], [53, 118],
  [66, 140], [62, 145], [58, 138], [54, 130],
  [64, 160], [60, 162], [56, 160], [52, 157],
  // Africa - North
  [36, 3], [34, 10], [32, 20], [31, 30], [31, -8],
  [28, -10], [25, 0], [25, 12], [26, 25], [26, 32],
  [21, -13], [20, -1], [20, 11], [20, 22], [21, 31],
  // Africa - West & Central
  [15, -16], [12, -8], [10, 0], [12, 14], [13, 25], [12, 37], [10, 42],
  [5, -3], [6, 3], [8, 10], [4, 19], [4, 28], [5, 36],
  [0, 10], [0, 20], [0, 29], [0, 38],
  // Africa - South
  [-5, 13], [-4, 22], [-4, 33], [-5, 39],
  [-11, 15], [-12, 26], [-11, 37],
  [-18, 15], [-18, 25], [-19, 34], [-19, 46],
  [-25, 17], [-24, 26], [-25, 33],
  [-30, 19], [-29, 27], [-30, 31], [-33, 22], [-34, 26],
  // Middle East
  [37, 36], [34, 44], [31, 47], [29, 40], [27, 45], [24, 45], [24, 54], [20, 56], [15, 48],
  [36, 50], [32, 54], [28, 56],
  // Central & South Asia
  [42, 60], [40, 68], [44, 75], [38, 73], [35, 68], [33, 70], [30, 68], [27, 65],
  [32, 76], [28, 77], [24, 75], [22, 80], [22, 88], [18, 74], [16, 80], [13, 77], [10, 78], [8, 80],
  // East Asia - China & Mongolia
  [48, 87], [44, 87], [41, 85], [47, 103], [44, 105], [40, 96], [40, 110], [42, 118], [45, 125],
  [36, 82], [35, 93], [35, 104], [36, 114], [37, 120], [39, 125],
  [30, 85], [30, 96], [30, 104], [31, 114], [31, 121],
  [25, 92], [24, 101], [25, 110], [24, 118], [22, 114],
  // Japan & Korea
  [38, 127], [35, 128], [43, 142], [38, 140], [35, 136], [33, 130],
  // Southeast Asia
  [19, 100], [18, 106], [14, 101], [15, 108], [11, 106], [6, 101], [3, 102], [1, 104],
  [16, 121], [13, 123], [9, 125], [1, 114], [-2, 115], [-2, 121], [-7, 110], [-8, 115],
  // Australia & New Zealand
  [-13, 131], [-15, 142], [-18, 123], [-21, 134], [-21, 148],
  [-25, 115], [-24, 126], [-25, 136], [-24, 151],
  [-30, 118], [-29, 129], [-31, 138], [-29, 153],
  [-34, 118], [-33, 136], [-35, 143], [-37, 145], [-34, 150], [-42, 146],
  [-37, 175], [-41, 174], [-45, 169]
];

export const DEFAULT_MARKERS: MapMarker[] = [
  { id: "sf", lat: 37.7749, lng: -122.4194, label: "San Francisco", country: "US", timeZone: "America/Los_Angeles", ping: "12ms", size: 3, pulse: true },
  { id: "nyc", lat: 40.7128, lng: -74.006, label: "New York", country: "US", timeZone: "America/New_York", ping: "18ms", size: 3, pulse: true },
  { id: "lon", lat: 51.5074, lng: -0.1278, label: "London", country: "UK", timeZone: "Europe/London", ping: "8ms", size: 3, pulse: true },
  { id: "ber", lat: 52.52, lng: 13.405, label: "Berlin", country: "DE", timeZone: "Europe/Berlin", ping: "14ms", size: 3, pulse: true },
  { id: "dxb", lat: 25.2048, lng: 55.2708, label: "Dubai", country: "AE", timeZone: "Asia/Dubai", ping: "28ms", size: 3, pulse: true },
  { id: "blr", lat: 12.9716, lng: 77.5946, label: "Bengaluru", country: "IN", timeZone: "Asia/Kolkata", ping: "19ms", size: 3, pulse: true },
  { id: "sg", lat: 1.3521, lng: 103.8198, label: "Singapore", country: "SG", timeZone: "Asia/Singapore", ping: "15ms", size: 3, pulse: true },
  { id: "tyo", lat: 35.6762, lng: 139.6503, label: "Tokyo", country: "JP", timeZone: "Asia/Tokyo", ping: "22ms", size: 3, pulse: true },
  { id: "syd", lat: -33.8688, lng: 151.2093, label: "Sydney", country: "AU", timeZone: "Australia/Sydney", ping: "38ms", size: 3, pulse: true },
  { id: "sp", lat: -23.5505, lng: -46.6333, label: "São Paulo", country: "BR", timeZone: "America/Sao_Paulo", ping: "45ms", size: 3, pulse: true },
];

export const DEFAULT_ARCS: MapArc[] = [
  { start: { lat: 37.7749, lng: -122.4194 }, end: { lat: 51.5074, lng: -0.1278 } }, // SF to London
  { start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 12.9716, lng: 77.5946 } },   // London to Bengaluru
  { start: { lat: 12.9716, lng: 77.5946 }, end: { lat: 35.6762, lng: 139.6503 } },  // Bengaluru to Tokyo
  { start: { lat: 35.6762, lng: 139.6503 }, end: { lat: -33.8688, lng: 151.2093 } },// Tokyo to Sydney
];

export function WorldMap({
  width = 900,
  height = 450,
  dotRadius = 1.8,
  dotColor,
  markerColor = "#3B82F6",
  pulseColor,
  markers = DEFAULT_MARKERS,
  arcs = DEFAULT_ARCS,
  pulse = true,
  stagger = true,
  enableTooltips = true,
  showTimezones = false,
  interactive = true,
  className,
  onMarkerClick,
  renderMarkerOverlay,
  style,
  ...svgProps
}: WorldMapProps) {
  const [hoveredMarker, setHoveredMarker] = useState<MapMarker | null>(null);
  const [now, setNow] = useState<Date>(new Date());

  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const formatLocalTime = (tz?: string) => {
    if (!tz) return now.toLocaleTimeString();
    try {
      return new Intl.DateTimeFormat("en-US", {
        timeZone: tz,
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        hour12: true,
      }).format(now);
    } catch {
      return now.toLocaleTimeString();
    }
  };

  // Convert landmass sample points into SVG grid coordinates
  const points = useMemo(() => {
    return WORLD_LANDMASS_SAMPLES.map(([lat, lng]) => {
      const { x, y } = latLngToXY(lat, lng, width, height);
      return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
    });
  }, [width, height]);

  // Convert markers to SVG coordinates
  const plottedMarkers = useMemo(() => {
    return markers.map((m) => {
      const { x, y } = latLngToXY(m.lat, m.lng, width, height);
      return { ...m, x, y };
    });
  }, [markers, width, height]);

  // Generate SVG Bezier arc paths
  const plottedArcs = useMemo(() => {
    return arcs.map((arc, idx) => {
      const start = latLngToXY(arc.start.lat, arc.start.lng, width, height);
      const end = latLngToXY(arc.end.lat, arc.end.lng, width, height);

      // Calculate control point for arching curve
      const dx = end.x - start.x;
      const dy = end.y - start.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      const midX = (start.x + end.x) / 2;
      const midY = (start.y + end.y) / 2 - dist * 0.25; // arch curvature height

      return {
        id: arc.id || `arc-${idx}`,
        path: `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`,
        color: arc.color || markerColor,
        strokeWidth: arc.strokeWidth || 1.2,
      };
    });
  }, [arcs, width, height, markerColor]);

  return (
    <div className={cn("relative w-full h-full select-none overflow-hidden flex flex-col justify-center items-center", className)}>
      <svg
        viewBox={`0 0 ${width} ${height}`}
        preserveAspectRatio="xMidYMid meet"
        className="w-full h-full text-zinc-300 dark:text-zinc-700 transition-colors duration-300"
        style={{ width: "100%", height: "100%", ...style }}
        {...svgProps}
      >
        {/* Subtle grid background */}
        <defs>
          <radialGradient id="mapCenterGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={markerColor} stopOpacity="0.08" />
            <stop offset="100%" stopColor="transparent" stopOpacity="0" />
          </radialGradient>
        </defs>

        <rect width={width} height={height} fill="url(#mapCenterGlow)" />

        {/* Continental Dotted Matrix */}
        <g className="transition-opacity duration-300">
          {points.map((pt, i) => (
            <circle
              key={`dot-${i}`}
              cx={pt.x}
              cy={pt.y}
              r={dotRadius}
              fill={dotColor || "currentColor"}
              className="opacity-70 dark:opacity-50 transition-colors duration-300"
            />
          ))}
        </g>

        {/* Connecting Curved Arcs */}
        <g className="pointer-events-none">
          {plottedArcs.map((arc) => (
            <g key={arc.id}>
              <path
                d={arc.path}
                fill="none"
                stroke={arc.color}
                strokeWidth={arc.strokeWidth}
                strokeOpacity={0.35}
                strokeDasharray="4 4"
              />
              {/* Traveling light particle */}
              <circle r={2} fill={arc.color}>
                <animateMotion path={arc.path} dur="4s" repeatCount="indefinite" />
              </circle>
            </g>
          ))}
        </g>

        {/* Location Markers */}
        {plottedMarkers.map((marker, idx) => {
          const r = marker.size || 3.5;
          const mColor = marker.color || markerColor;
          const pColor = pulseColor || mColor;
          const shouldPulse = pulse || marker.pulse;
          const isHovered = hoveredMarker?.id === marker.id || (hoveredMarker?.lat === marker.lat && hoveredMarker?.lng === marker.lng);

          return (
            <g
              key={marker.id || `marker-${idx}`}
              className={interactive ? "cursor-pointer group" : ""}
              onMouseEnter={() => interactive && setHoveredMarker(marker)}
              onMouseLeave={() => interactive && setHoveredMarker(null)}
              onClick={() => onMarkerClick?.(marker)}
            >
              {/* Pulsing radar waves */}
              {shouldPulse && (
                <g pointerEvents="none">
                  <circle cx={marker.x} cy={marker.y} r={r} fill="none" stroke={pColor} strokeWidth={1} strokeOpacity={0.8}>
                    <animate attributeName="r" values={`${r};${r * 3.8}`} dur="1.8s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.8;0" dur="1.8s" repeatCount="indefinite" />
                  </circle>
                  <circle cx={marker.x} cy={marker.y} r={r} fill="none" stroke={pColor} strokeWidth={0.8} strokeOpacity={0.6}>
                    <animate attributeName="r" values={`${r};${r * 3.8}`} dur="1.8s" begin="0.9s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.6;0" dur="1.8s" begin="0.9s" repeatCount="indefinite" />
                  </circle>
                </g>
              )}

              {/* Core solid marker point */}
              <circle
                cx={marker.x}
                cy={marker.y}
                r={isHovered ? r * 1.4 : r}
                fill={mColor}
                className="transition-all duration-200 drop-shadow-md"
              />

              {/* Center highlight dot */}
              <circle cx={marker.x} cy={marker.y} r={r * 0.4} fill="#FFFFFF" />

              {/* Custom Marker Overlay Hook */}
              {renderMarkerOverlay?.({ marker, x: marker.x, y: marker.y, r })}
            </g>
          );
        })}
      </svg>

      {/* Floating Interactive Tooltip */}
      <AnimatePresence>
        {enableTooltips && hoveredMarker && (
          <motion.div
            initial={{ opacity: 0, y: 8, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.95 }}
            transition={{ duration: 0.15 }}
            className="absolute z-50 p-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl border border-zinc-200 dark:border-zinc-800 shadow-2xl rounded-2xl pointer-events-none text-left min-w-[200px]"
            style={{
              left: `${(latLngToXY(hoveredMarker.lat, hoveredMarker.lng, width, height).x / width) * 100}%`,
              top: `${(latLngToXY(hoveredMarker.lat, hoveredMarker.lng, width, height).y / height) * 100}%`,
              transform: "translate(-50%, -125%)",
            }}
          >
            <div className="flex items-center justify-between gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-2 mb-2">
              <div className="flex items-center gap-1.5 min-w-0">
                <MapPin className="w-3.5 h-3.5 text-primarylw shrink-0" />
                <span className="font-bold text-xs text-zinc-900 dark:text-white truncate">
                  {hoveredMarker.label || `${hoveredMarker.lat.toFixed(1)}°, ${hoveredMarker.lng.toFixed(1)}°`}
                </span>
              </div>
              {hoveredMarker.ping && (
                <span className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[9px] font-bold px-1.5 py-0.5 rounded-md flex items-center gap-1 shrink-0">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                  {hoveredMarker.ping}
                </span>
              )}
            </div>

            <div className="space-y-1 text-[11px]">
              {hoveredMarker.timeZone && (
                <div className="flex items-center justify-between text-zinc-500 dark:text-zinc-400">
                  <span className="flex items-center gap-1">
                    <Clock className="w-3 h-3" /> Local Time
                  </span>
                  <span className="font-mono font-semibold text-zinc-900 dark:text-zinc-200">
                    {formatLocalTime(hoveredMarker.timeZone)}
                  </span>
                </div>
              )}
              <div className="flex items-center justify-between text-zinc-500 dark:text-zinc-400">
                <span>Coordinates</span>
                <span className="font-mono font-medium text-[10px] text-zinc-600 dark:text-zinc-400">
                  {hoveredMarker.lat.toFixed(2)}°, {hoveredMarker.lng.toFixed(2)}°
                </span>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default WorldMap;

```
--------------------------------------------------

### COMPONENT: glowing-cards
Category: Components
Description: Interactive card components with beautiful glowing effects that follow mouse cursor movement. Perfect for feature showcases, pricing sections, and content highlights.
URL: https://lightswind.com/components/glowing-cards
Import: import { GlowingCards, GlowingCard } from "@/components/lightswind/glowing-cards"
Registry URL: https://lightswind.com/r/glowing-cards.json
Install Command: npx lightswind@latest add glowing-cards

Usage:
```tsx
import { GlowingCards, GlowingCard } from "@/components/lightswind/glowing-cards";
import { Zap, Sparkles, Crown } from "lucide-react";

// Basic usage
<GlowingCards>
  <GlowingCard glowColor="#10b981">
    <h3>Performance</h3>
    <p>Lightning-fast components...</p>
  </GlowingCard>
  <GlowingCard glowColor="#8b5cf6">
    <h3>Design</h3>
    <p>Beautiful, accessible components...</p>
  </GlowingCard>
</GlowingCards>

// Advanced configuration
<GlowingCards
  enableGlow={true}
  glowRadius={30}
  glowOpacity={0.8}
  animationDuration={500}
  gap="3rem"
  responsive={true}
>
  <GlowingCard glowColor="#f59e0b" className="space-y-4">
    <div className="flex items-center space-x-2">
      <Crown className="w-6 h-6 text-amber-500" />
      <h3>Premium Features</h3>
    </div>
    <p>Enterprise-grade components...</p>
  </GlowingCard>
</GlowingCards>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from 'react';
import { cn } from '@/components/lib/utils';

export interface GlowingCardProps {
  children: React.ReactNode;
  className?: string;
  glowColor?: string;
  hoverEffect?: boolean;
}

export interface GlowingCardsProps {
  children: React.ReactNode;
  className?: string;
  /** Enable the glowing overlay effect */
  enableGlow?: boolean;
  /** Size of the glow effect radius */
  glowRadius?: number;
  /** Opacity of the glow effect */
  glowOpacity?: number;
  /** Animation duration for glow transitions */
  animationDuration?: number;
  /** Enable hover effects on individual cards */
  enableHover?: boolean;
  /** Gap between cards */
  gap?: string;
  /** Maximum width of cards container */
  maxWidth?: string;
  /** Padding around the container */
  padding?: string;
  /** Background color for the container */
  backgroundColor?: string;
  /** Border radius for cards */
  borderRadius?: string;
  /** Enable responsive layout */
  responsive?: boolean;
  /** Custom CSS variables for theming */
  customTheme?: {
    cardBg?: string;
    cardBorder?: string;
    textColor?: string;
    hoverBg?: string;
  };
}

export const GlowingCard: React.FC<GlowingCardProps> = ({
  children,
  className,
  glowColor = "#3b82f6",
  hoverEffect = true,
  ...props
}) => {
  return (
    <div
      className={cn(
        "relative flex-1 min-w-[14rem] p-6 rounded-2xl text-black dark:text-white",
        "bg-background border ",
        "transition-all duration-400 ease-out",
        className
      )}
      style={{
        '--glow-color': glowColor, // CSS variable definition
      } as React.CSSProperties}
      {...props}
    >
      {children}
    </div>
  );
};

export const GlowingCards: React.FC<GlowingCardsProps> = ({
  children,
  className,
  enableGlow = true,
  glowRadius = 25,
  glowOpacity = 1,
  animationDuration = 400,
  enableHover = true,
  gap = "2.5rem",
  maxWidth = "75rem",
  padding = "3rem 1.5rem",
  backgroundColor,
  borderRadius = "1rem",
  responsive = true,
  customTheme,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const overlayRef = useRef<HTMLDivElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [showOverlay, setShowOverlay] = useState(false);

  useEffect(() => {
    const container = containerRef.current;
    const overlay = overlayRef.current;

    if (!container || !overlay || !enableGlow) return;

    const handleMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      setMousePosition({ x, y });
      setShowOverlay(true);

      // Using string concatenation for style properties
      overlay.style.setProperty('--x', x + 'px');
      overlay.style.setProperty('--y', y + 'px');
      overlay.style.setProperty('--opacity', glowOpacity.toString());
    };

    const handleMouseLeave = () => {
      setShowOverlay(false);
      overlay.style.setProperty('--opacity', '0');
    };

    container.addEventListener('mousemove', handleMouseMove);
    container.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      container.removeEventListener('mousemove', handleMouseMove);
      container.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [enableGlow, glowOpacity]);

  const containerStyle = {
    '--gap': gap,
    '--max-width': maxWidth,
    '--padding': padding,
    '--border-radius': borderRadius,
    '--animation-duration': animationDuration + 'ms', // Concatenation
    '--glow-radius': glowRadius + 'rem', // Concatenation
    '--glow-opacity': glowOpacity,
    backgroundColor: backgroundColor || undefined,
    ...customTheme,
  } as React.CSSProperties;

  return (
    <div
      className={cn("relative w-full", className)}
      style={containerStyle}
    >
      <div
        ref={containerRef}
        className={cn(
          "relative max-w-[var(--max-width)] mx-auto ",
          "px-6 py-2"
        )}
        style={{ padding: "var(--padding)" }} // String literal
      >
        <div
          className={cn(
            "flex items-center justify-center flex-wrap gap-[var(--gap)]",
            responsive && "flex-col sm:flex-row "
          )}
        >
          {children}
        </div>

        {enableGlow && (
          <div
            ref={overlayRef}
            className={cn(
              "absolute inset-0 pointer-events-none select-none",
              "opacity-0 transition-all duration-[&lsqb;var(--animation-duration)&rsqb;] ease-out"
            )}
            style={{
              // String concatenation for WebkitMask and mask
              WebkitMask:
                "radial-gradient(var(--glow-radius) var(--glow-radius) at var(--x, 0) var(--y, 0), #000 1%, transparent 50%)",
              mask:
                "radial-gradient(var(--glow-radius) var(--glow-radius) at var(--x, 0) var(--y, 0), #000 1%, transparent 50%)",
              opacity: showOverlay ? 'var(--opacity)' : '0',
            }}
          >
            <div
              className={cn(
                "flex items-center justify-center flex-wrap gap-[var(--gap)] max-w-[var(--max-width)] center mx-auto",
                responsive && "flex-col sm:flex-row"
              )}
              style={{ padding: "var(--padding)" }} // String literal
            >
              {React.Children.map(children, (child, index) => {
                if (React.isValidElement(child) && child.type === GlowingCard) {
                  const element = child as React.ReactElement<any>;
                  const cardGlowColor = element.props.glowColor || "#3b82f6";
                  return React.cloneElement(element, {
                    className: cn(
                      element.props.className,
                      "bg-opacity-15 dark:bg-opacity-15",
                      "border-opacity-100 dark:border-opacity-100"
                    ),
                    style: {
                      ...element.props.style,
                      // String concatenation for background, border, and boxShadow
                      backgroundColor: cardGlowColor + "15",
                      borderColor: cardGlowColor,
                      boxShadow: "0 0 0 1px inset " + cardGlowColor,
                    },
                  });
                }
                return child;
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export { GlowingCards as default };
```
--------------------------------------------------

### COMPONENT: hamburger-menu-overlay
Category: Components
Description: A professional, fully customizable hamburger menu with animated full-screen overlay. Features smooth GSAP-style animations, responsive design, and comprehensive accessibility support.
URL: https://lightswind.com/components/hamburger-menu-overlay
Import: import { HamburgerMenuOverlay } from "@/components/lightswind/hamburger-menu-overlay"
Registry URL: https://lightswind.com/r/hamburger-menu-overlay.json
Install Command: npx lightswind@latest add hamburger-menu-overlay

Usage:
```tsx
import { HamburgerMenuOverlay } from "@/components/lightswind/hamburger-menu-overlay";
import { Home, Search, User, Settings } from "lucide-react";

// Basic navigation menu
const menuItems = [
  { label: "Home", icon: <Home size={20} />, href: "/" },
  { label: "Search", icon: <Search size={20} />, href: "/search" },
  { label: "Profile", icon: <User size={20} />, onClick: () => console.log("Profile") },
  { label: "Settings", icon: <Settings size={20} />, href: "/settings" }
];

<HamburgerMenuOverlay items={menuItems} />

// Advanced with gradient and blur
<HamburgerMenuOverlay 
  items={menuItems}
  overlayBackground="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  fontSize="xl"
  enableBlur={true}
  menuAlignment="center"
  animationDuration={2}
/>

// Custom positioning and styling
<HamburgerMenuOverlay 
  items={menuItems}
  buttonTop="30px"
  buttonLeft="30px"
  buttonColor="#22c55e"
  overlayBackground="#22c55e"
  onOpen={() => console.log("Menu opened")}
  onClose={() => console.log("Menu closed")}
/>
```

Source Code:
```tsx
"use client";
import React, { useState, useEffect, useRef } from "react";
import { cn } from "@/components/lib/utils";
import { Menu, X } from "lucide-react";

export interface MenuItem {
  label: string;
  href?: string;
  onClick?: () => void;
  icon?: React.ReactNode;
}

export interface HamburgerMenuOverlayProps {
  /** Array of menu items */
  items: MenuItem[];
  /** Button position from top */
  buttonTop?: string;
  /** Button position from left */
  buttonLeft?: string;
  /** Button size */
  buttonSize?: "sm" | "md" | "lg";
  /** Button background color */
  buttonColor?: string;
  /** Overlay background color/gradient */
  overlayBackground?: string;
  /** Menu text color */
  textColor?: string;
  /** Menu font size */
  fontSize?: "sm" | "md" | "lg" | "xl" | "2xl";
  /** Font family */
  fontFamily?: string;
  /** Font weight */
  fontWeight?: "normal" | "medium" | "semibold" | "bold";
  /** Animation duration in seconds */
  animationDuration?: number;
  /** Stagger delay between menu items */
  staggerDelay?: number;
  /** Menu items alignment */
  menuAlignment?: "left" | "center" | "right";
  /** Custom class for container */
  className?: string;
  /** Custom class for button */
  buttonClassName?: string;
  /** Custom class for menu items */
  menuItemClassName?: string;
  /** Disable overlay close on item click */
  keepOpenOnItemClick?: boolean;
  /** Custom button content */
  customButton?: React.ReactNode;
  /** ARIA label for accessibility */
  ariaLabel?: string;
  /** Callback when menu opens */
  onOpen?: () => void;
  /** Callback when menu closes */
  onClose?: () => void;
  /** Menu items layout direction */
  menuDirection?: "vertical" | "horizontal";
  /** Enable blur backdrop */
  enableBlur?: boolean;
  /** Z-index for overlay */
  zIndex?: number;
}

export const HamburgerMenuOverlay: React.FC<HamburgerMenuOverlayProps> = ({
  items = [],
  buttonTop = "60px",
  buttonLeft = "60px",
  buttonSize = "md",
  buttonColor = "#6c8cff",
  overlayBackground = "#6c8cff",
  textColor = "#ffffff",
  fontSize = "md",
  fontFamily = '"Krona One", monospace',
  fontWeight = "bold",
  animationDuration = 1.5,
  staggerDelay = 0.1,
  menuAlignment = "left",
  className,
  buttonClassName,
  menuItemClassName,
  keepOpenOnItemClick = false,
  customButton,
  ariaLabel = "Navigation menu",
  onOpen,
  onClose,
  menuDirection = "vertical",
  enableBlur = false,
  zIndex = 1000,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const navRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const buttonSizes = {
    sm: "w-10 h-10",
    md: "w-12 h-12",
    lg: "w-16 h-16",
  };

  const fontSizes = {
    sm: "text-2xl md:text-3xl",
    md: "text-3xl md:text-4xl",
    lg: "text-4xl md:text-5xl",
    xl: "text-5xl md:text-6xl",
    "2xl": "text-6xl md:text-7xl",
  };

  const toggleMenu = () => {
    const newState = !isOpen;
    setIsOpen(newState);

    if (newState) {
      onOpen?.();
    } else {
      onClose?.();
    }
  };

  const handleItemClick = (item: MenuItem) => {
    if (item.onClick) {
      item.onClick();
    }

    if (item.href && !item.onClick) {
      window.location.href = item.href;
    }

    if (!keepOpenOnItemClick) {
      setIsOpen(false);
      onClose?.();
    }
  };

  // Close menu on escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape" && isOpen) {
        setIsOpen(false);
        onClose?.();
      }
    };

    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, onClose]);

  return (
    <div ref={containerRef} className={cn("absolute w-full h-full", className)}>
      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Krona+One:wght@400&display=swap');
          
          .hamburger-overlay-${zIndex} {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: start;
            align-items: center;
            background: ${overlayBackground};
            z-index: ${zIndex};
            clip-path: circle(0px at ${buttonLeft} ${buttonTop});
            transition: clip-path ${animationDuration}s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            ${enableBlur ? "backdrop-filter: blur(10px);" : ""}
          }
          
          .hamburger-overlay-${zIndex}.open {
            clip-path: circle(150% at ${buttonLeft} ${buttonTop});
          }
          
          .hamburger-button-${zIndex} {
            position: absolute;
            left: ${buttonLeft};
            top: ${buttonTop};
            transform: translate(-50%, -50%);
            border-radius: 20px;
            z-index: ${zIndex + 1};
            background: ${buttonColor};
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
          }
          
          .hamburger-button-${zIndex}:hover {
            transform: translate(-50%, -50%) scale(1.1);
          }
          
          .hamburger-button-${zIndex}:focus {
            outline: 2px solid ${textColor};
            outline-offset: 2px;
          }
          
          .menu-items-${zIndex} {
            ${menuDirection === "horizontal" ? "display: flex; flex-wrap: wrap; gap: 1rem;" : ""}
            ${menuAlignment === "center" ? "text-align: center;" : ""}
            ${menuAlignment === "right" ? "text-align: right;" : ""}
          }
          
          .menu-item-${zIndex} {
            position: relative;
            list-style: none;
            padding: 0.5rem 0;
            cursor: pointer;
            transform: translateX(-200px);
            opacity: 0;
            transition: all 0.3s ease;
            font-family: ${fontFamily};
            font-weight: ${fontWeight};
            color: ${textColor};
            ${menuDirection === "horizontal" ? "display: inline-block; margin: 0 1rem;" : ""}
          }
          
          .menu-item-${zIndex}.visible {
            transform: translateX(0);
            opacity: 1;
          }
          
          .menu-item-${zIndex}::before {
            content: "";
            position: absolute;
            left: -20%;
            top: 50%;
            transform: translate(-50%, -50%) translateX(-50%);
            width: 25%;
            height: 8px;
            border-radius: 10px;
            background: ${textColor};
            opacity: 0;
            transition: all 0.25s ease;
            pointer-events: none;
          }
          
          .menu-item-${zIndex}:hover::before {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(0);
          }
          
          .menu-item-${zIndex} span {
            opacity: 0.7;
            transition: opacity 0.25s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
          }
          
          .menu-item-${zIndex}:hover span {
            opacity: 1;
          }
          
          .menu-item-${zIndex}:focus {
            outline: 2px solid ${textColor};
            outline-offset: 2px;
            border-radius: 4px;
          }
          
          /* Mobile responsiveness */
          @media (max-width: 768px) {
            .hamburger-button-${zIndex} {
              left: 30px;
              top: 30px;
            }
            
            .hamburger-overlay-${zIndex} {
              clip-path: circle(0px at 30px 30px);
            }
            
            .hamburger-overlay-${zIndex}.open {
              clip-path: circle(150% at 30px 30px);
            }
            
            .menu-items-${zIndex} {
              padding: 1rem;
              max-height: 80vh;
              overflow-y: auto;
            }
            
            .menu-item-${zIndex} {
              padding: 1rem 0;
            }
          }
          
          @media (max-width: 480px) {
            .menu-items-${zIndex} {
              ${menuDirection === "horizontal" ? "flex-direction: column; gap: 0;" : ""}
            }
            
            .menu-item-${zIndex} {
              ${menuDirection === "horizontal" ? "display: block; margin: 0;" : ""}
            }
          }
        `}
      </style>

      {/* Navigation Overlay */}
      <div
        ref={navRef}
        className={cn(`flex flex-col items-center justify-center h-full
           hamburger-overlay-${zIndex}`, isOpen && "open")}
        aria-hidden={!isOpen}
      >
        <ul
          className={cn(
            `mt-20 menu-items-${zIndex}`,
            menuDirection === "horizontal" && "flex flex-wrap "
          )}
        >
          {items.map((item, index) => (
            <li
              key={index}
              className={cn(
                `menu-item-${zIndex}`,
                fontSizes[fontSize],
                isOpen && "visible",
                menuItemClassName
              )}
              style={{
                transitionDelay: isOpen ? `${index * staggerDelay}s` : "0s",
              }}
              onClick={() => handleItemClick(item)}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  handleItemClick(item);
                }
              }}
              tabIndex={isOpen ? 0 : -1}
              role="button"
              aria-label={`Navigate to ${item.label}`}
            >
              <span>
                {item.icon && <span className="menu-icon">{item.icon}</span>}
                {item.label}
              </span>
            </li>
          ))}
        </ul>
      </div>

      {/* Hamburger Button */}
      <button
        className={cn(
          `hamburger-button-${zIndex}`,
          buttonSizes[buttonSize],
          buttonClassName
        )}
        onClick={toggleMenu}
        aria-label={ariaLabel}
        aria-expanded={isOpen}
        aria-controls="navigation-menu"
      >
        {customButton || (
          <div className="relative w-full h-full flex items-center justify-center">
            <Menu
              className={cn(
                "absolute transition-all duration-300",
                isOpen
                  ? "opacity-0 rotate-45 scale-0"
                  : "opacity-100 rotate-0 scale-100"
              )}
              size={buttonSize === "sm" ? 16 : buttonSize === "md" ? 20 : 24}
              color={textColor}
            />
            <X
              className={cn(
                "absolute transition-all duration-300",
                isOpen
                  ? "opacity-100 rotate-0 scale-100"
                  : "opacity-0 -rotate-45 scale-0"
              )}
              size={buttonSize === "sm" ? 16 : buttonSize === "md" ? 20 : 24}
              color={textColor}
            />
          </div>
        )}
      </button>
    </div>
  );
};

export default HamburgerMenuOverlay;

```
--------------------------------------------------

### COMPONENT: image-reveal
Category: Components
Description: An animated image hover reveal component built with Framer Motion. Displays a floating image near the cursor when hovering over each label. Perfect for showcasing visual categories, portfolios, or galleries with interactive feedback.
URL: https://lightswind.com/components/image-reveal
Import: import ImageReveal from '@/components/lightswind/image-reveal';
Registry URL: https://lightswind.com/r/image-reveal.json
Install Command: npx lightswind@latest add image-reveal

Usage:
```tsx
import ImageReveal from '@/components/lightswind/image-reveal';

// Basic usage
<ImageReveal />
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect } from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { MoveUpRight as ArrowIcon } from "lucide-react";

interface VisualItem {
  key: number;
  url: string;
  label: string;
}

const visualData: VisualItem[] = [
  {
    key: 1,
    url: "https://images.pexels.com/photos/9002742/pexels-photo-9002742.jpeg",
    label: "Pinky Island",
  },
  {
    key: 2,
    url: "https://images.pexels.com/photos/31622979/pexels-photo-31622979.jpeg",
    label: "Greedy Model",
  },
  {
    key: 3,
    url: "https://images.pexels.com/photos/12187128/pexels-photo-12187128.jpeg",
    label: "Sigma Connect",
  },
  {
    key: 4,
    url: "https://images.pexels.com/photos/28168248/pexels-photo-28168248.jpeg",
    label: "Futuristic Gamma",
  },
];

const ImageReveal: React.FC = () => {
  const [focusedItem, setFocusedItem] = useState<VisualItem | null>(null);
  const [isLargeScreen, setIsLargeScreen] = useState(true);

  const cursorX = useMotionValue(0);
  const cursorY = useMotionValue(0);
  const smoothX = useSpring(cursorX, { stiffness: 300, damping: 40 });
  const smoothY = useSpring(cursorY, { stiffness: 300, damping: 40 });

  useEffect(() => {
    const updateScreen = () => {
      setIsLargeScreen(window.innerWidth >= 768);
    };
    updateScreen();
    window.addEventListener("resize", updateScreen);
    return () => window.removeEventListener("resize", updateScreen);
  }, []);

  const onMouseTrack = (e: React.MouseEvent) => {
    cursorX.set(e.clientX);
    cursorY.set(e.clientY);
  };

  const onHoverActivate = (item: VisualItem) => {
    setFocusedItem(item);
  };

  const onHoverDeactivate = () => {
    setFocusedItem(null);
  };

  return (
    <div
      className="relative mx-auto w-full min-h-fit bg-background rounded-md border overflow-hidden"
      onMouseMove={onMouseTrack}
      onMouseLeave={onHoverDeactivate}
    >
      {visualData.map((item) => (
        <div
          key={item.key}
          className="p-4 cursor-pointer relative sm:flex items-center justify-between"
          onMouseEnter={() => onHoverActivate(item)}
        >
          {!isLargeScreen && (
            <img
              src={item.url}
              className="sm:w-32 sm:h-20 w-full h-52 object-cover rounded-md"
              alt={item.label}
            />
          )}
          <h2
            className={`newFont uppercase md:text-5xl sm:text-2xl text-xl font-semibold sm:py-6 py-2 leading-[100%] relative transition-colors ${
              focusedItem?.key === item.key
                ? "mix-blend-difference z-20 text-gray-300"
                : "text-foreground"
            }`}
          >
            {item.label}
          </h2>
          <button
            className={`sm:block hidden p-4 rounded-full transition-all duration-300 ease-out ${
              focusedItem?.key === item.key
                ? "mix-blend-difference z-20 bg-white text-black"
                : ""
            }`}
          >
            <ArrowIcon className="w-8 h-8" />
          </button>
          <div
            className={`h-[2px] dark:bg-white bg-black absolute bottom-0 left-0 transition-all duration-300 ease-linear ${
              focusedItem?.key === item.key ? "w-full" : "w-0"
            }`}
          />
        </div>
      ))}

      {isLargeScreen && focusedItem && (
        <motion.img
          src={focusedItem.url}
          alt={focusedItem.label}
          className="fixed z-30 object-cover w-[300px] h-[400px] rounded-lg pointer-events-none shadow-2xl dark:bg-gray-950 bg-white"
          style={{
            left: smoothX,
            top: smoothY,
            x: "-50%",
            y: "-50%",
          }}
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.5 }}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
        />
      )}
    </div>
  );
};

export default ImageReveal;

```
--------------------------------------------------

### COMPONENT: image-trail-effect
Category: Components
Description: An animated mouse trail image effect built with React. Displays a trail of floating images that follow the user's cursor. Ideal for creating visually engaging and interactive sections on landing pages or portfolios.
URL: https://lightswind.com/components/image-trail-effect
Import: import ImageTrailEffect from '@/components/lightswind/image-trail-effect';
Registry URL: https://lightswind.com/r/image-trail-effect.json
Install Command: npx lightswind@latest add image-trail-effect

Usage:
```tsx
import ImageTrailEffect from '@/components/lightswind/image-trail-effect';

<ImageTrailEffect
  imageSources={[
    '/images/trail1.jpg',
    '/images/trail2.jpg',
    '/images/trail3.jpg'
  ]}
  content={<h1 className="text-3xl font-bold">Hover Me!</h1>}
/>
```

Source Code:
```tsx
// @ts-nocheck
"use client";
import { cn } from "@/components/lib/utils";
import { createRef, ReactNode, useRef } from "react";

interface MouseTrailProps {
  imageSources: string[];
  content?: ReactNode;
  containerClassName?: string;
  imageClassName?: string;
  triggerDistance?: number;
  maxTrailImages?: number;
  useFadeEffect?: boolean;
}

export default function ImageTrailEffect({
  imageSources,
  content,
  containerClassName,
  maxTrailImages = 5,
  imageClassName = "w-40 h-48",
  triggerDistance = 20,
  useFadeEffect = false,
}: MouseTrailProps) {
  const wrapperRef = useRef(null);
  const imageRefs = useRef(
    imageSources.map(() => createRef<HTMLImageElement>())
  );
  const zIndexCounterRef = useRef(1);

  let imageIndex = 0;
  let lastPosition = { x: 0, y: 0 };

  const activateImage = (img: HTMLImageElement, x: number, y: number) => {
    const containerBounds = wrapperRef.current?.getBoundingClientRect();
    const relativeX = x - containerBounds.left;
    const relativeY = y - containerBounds.top;

    img.style.left = `${relativeX}px`;
    img.style.top = `${relativeY}px`;

    if (zIndexCounterRef.current > 40) {
      zIndexCounterRef.current = 1;
    }

    img.style.zIndex = String(zIndexCounterRef.current++);
    img.dataset.status = "active";

    if (useFadeEffect) {
      setTimeout(() => {
        img.dataset.status = "inactive";
      }, 1500);
    }

    lastPosition = { x, y };
  };

  const calculateDistance = (x: number, y: number) => {
    return Math.hypot(x - lastPosition.x, y - lastPosition.y);
  };

  const deactivateImage = (img: HTMLImageElement) => {
    img.dataset.status = "inactive";
  };

  const handleMouseMove = (e: MouseEvent | Touch) => {
    if (
      calculateDistance(e.clientX, e.clientY) >
      window.innerWidth / triggerDistance
    ) {
      const leadImage =
        imageRefs.current[imageIndex % imageRefs.current.length]?.current;
      const tailImage =
        imageRefs.current[
          (imageIndex - maxTrailImages) % imageRefs.current.length
        ]?.current;

      if (leadImage) activateImage(leadImage, e.clientX, e.clientY);
      if (tailImage) deactivateImage(tailImage);

      imageIndex++;
    }
  };

  const handleMouseLeave = () => {
    // Deactivate all images when cursor leaves the container
    imageRefs.current.forEach((ref) => {
      if (ref.current) {
        ref.current.dataset.status = "inactive";
      }
    });
    // Reset position tracker so next entry restarts cleanly
    lastPosition = { x: 0, y: 0 };
  };

  return (
    <section
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onTouchMove={(e) => handleMouseMove(e.touches[0])}
      ref={wrapperRef}
      className={cn(
        `grid place-content-center h-[600px] w-full bg-background  text-foreground
        relative overflow-hidden rounded-lg`,
        containerClassName
      )}
    >
      {imageSources.map((src, i) => (
        <img
          key={i}
          ref={imageRefs.current[i]}
          src={src}
          alt={`trail-${i}`}
          loading="lazy"
          decoding="async"
          data-index={i}
          data-status="inactive"
          className={cn(
            "object-cover scale-0 opacity:0 data-[status='active']:scale-100 data-[status='active']:opacity-100 transition-transform data-[status='active']:duration-500 duration-300 data-[status='active']:ease-out-expo absolute -translate-y-[50%] -translate-x-[50%]",
            imageClassName
          )}
        />
      ))}
      {content}
    </section>
  );
}


```
--------------------------------------------------

### COMPONENT: interactive-card
Category: Components
Description: A responsive and animated 3D hover card built with Framer Motion and Tailwind CSS. It responds to cursor position with rotation and a glowing radial gradient. Perfect for enhancing UI with interactive visual depth and modern appeal.
URL: https://lightswind.com/components/interactive-card
Import: import { InteractiveCard } from '@/components/lightswind/interactive-card';
Registry URL: https://lightswind.com/r/interactive-card.json
Install Command: npx lightswind@latest add interactive-card

Usage:
```tsx
import { InteractiveCard } from '@/components/lightswind/interactive-card';

<InteractiveCard
  InteractiveColor="#00f0ff"
  tailwindBgClass="bg-gray-900 dark:bg-gray-800"
  className="text-white text-center flex items-center justify-center font-semibold text-lg"
>
  Hover Me!
</InteractiveCard>;
```

Source Code:
```tsx
import { useRef, useState } from "react";
import { motion, useMotionValue, useTransform, useMotionTemplate } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming cn is a utility for conditionally joining class names

export const InteractiveCard = ({
  children,
  className,
  InteractiveColor = "#07eae6ff",
  // backgroundColor = "#0c0d16",
  // whiteCardBackgroundColor = "#173eff",
  borderRadius = "48px",
  rotationFactor = 0.4,
  transitionDuration = 0.3,
  transitionEasing = "easeInOut",
  // Add a prop to accept Tailwind background classes
  // Example: "bg-gray-900 dark:bg-gray-800"
  tailwindBgClass = "bg-transparent backdrop-blur-md",
}: {
  children: React.ReactNode;
  className?: string;
  InteractiveColor?: string;
  // If you're using tailwindBgClass, you might not need these anymore,
  // or you could use them as fallbacks/defaults
  // backgroundColor?: string;
  // whiteCardBackgroundColor?: string;
  borderRadius?: string;
  rotationFactor?: number;
  transitionDuration?: number;
  transitionEasing?: string;
  tailwindBgClass?: string; // Prop to accept Tailwind background classes
}) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState(false);

  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const rotateXTrans = useTransform(y, [0, 1], [rotationFactor * 15, -rotationFactor * 15]);
  const rotateYTrans = useTransform(x, [0, 1], [-rotationFactor * 15, rotationFactor * 15]);

  const handlePointerMove = (e: React.PointerEvent) => {
    const bounds = cardRef.current?.getBoundingClientRect();
    if (!bounds) return;

    const px = (e.clientX - bounds.left) / bounds.width;
    const py = (e.clientY - bounds.top) / bounds.height;

    x.set(px);
    y.set(py);
  };

  const xPercentage = useTransform(x, (val) => `${val * 100}%`);
  const yPercentage = useTransform(y, (val) => `${val * 100}%`);

  const interactiveBackground = useMotionTemplate`radial-gradient(circle at ${xPercentage} ${yPercentage}, ${InteractiveColor} 0%, transparent 80%)`;

  return (
    <motion.div
      ref={cardRef}
      onPointerMove={handlePointerMove}
      onPointerEnter={() => setIsHovered(true)}
      onPointerLeave={() => setIsHovered(false)}
      style={{
        perspective: 1000,
        borderRadius,
      }}
      className="relative w-[320px] aspect-[17/21] isolate"
    >
      <motion.div
        style={{
          rotateX: rotateXTrans,
          rotateY: rotateYTrans,
          transformStyle: "preserve-3d",
          transition: `transform ${transitionDuration}s ${transitionEasing}`,
        }}
        className="w-full h-full rounded-xl overflow-hidden border shadow-lg"
      >
        {/* Background Interactive Layer */}
        <motion.div
          className="absolute inset-0 rounded-xl z-0"
          style={{
            background: interactiveBackground,
            transition: `opacity ${transitionDuration}s ${transitionEasing}`,
            opacity: isHovered ? 0.6 : 0,
            pointerEvents: "none",
          }}
        />

        {/* Content */}
        <div
          // Use cn to combine your custom className with the Tailwind background class
          // You can also add dark mode classes here
          className={cn(
            "relative z-10 w-full h-full",
            tailwindBgClass, // <--- Apply the Tailwind background class here
            className, // Existing class for outer styling
            // Example: Add a default text color for contrast
            "text-foreground"
          )}
          style={{
            borderRadius, // Keep borderRadius from props
            // Remove the direct backgroundColor style application
            // as it's now handled by Tailwind classes
          }}
        >
          {children}
        </div>
      </motion.div>
    </motion.div>
  );
};
```
--------------------------------------------------

### COMPONENT: interactive-gradient-card
Category: Components
Description: A customizable interactive gradient background that responds to mouse movements and provides visual feedback.
URL: https://lightswind.com/components/interactive-gradient-card
Import: import { InteractiveGradient } from "@/components/lightswind/interactive-gradient"
Registry URL: https://lightswind.com/r/interactive-gradient-card.json
Install Command: npx lightswind@latest add interactive-gradient-card

Usage:
```tsx
import { InteractiveGradient } from "@/components/lightswind/interactive-gradient"

// Basic usage
<InteractiveGradient>
  <div className="p-6 text-white">
    <h3 className="text-xl font-bold">Interactive Card</h3>
    <p>Hover or move your mouse around to see the gradient effect</p>
  </div>
</InteractiveGradient>

// With custom colors and options
<InteractiveGradient
  color="#1890ff"
  glowColor="#107667ed"
  followMouse={true}
  hoverOnly={false}
  intensity={100}
  backgroundColor="#151419"
  width="20rem"
  height="20rem"
  borderRadius="2.25rem"
>
  <div className="p-6 text-white">Content here</div>
</InteractiveGradient>
```

Source Code:
```tsx
import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/components/lib/utils";

export interface GradientCardProps {
  color: string;
  glowColor: string;
  width?: string;
  height?: string;
  borderRadius?: string;
  className?: string;
  children?: React.ReactNode;
  followMouse?: boolean;
  hoverOnly?: boolean;
  intensity?: number;
  backgroundColor?: string; // Keep this prop for other potential uses or if you want to pass a raw CSS color string
}

export const InteractiveGradient = ({
  color ,
  glowColor = "#107667ed",
  width = "",
  height = "",
  borderRadius = "1rem",
  className = "",
  children,
  followMouse = true,
  hoverOnly = false,
  intensity = 100,
  backgroundColor, // You can still use this for other parts if needed
}: GradientCardProps) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isHovering, setIsHovering] = useState(false);
  const [resolvedGlowFallbackColor, setResolvedGlowFallbackColor] = useState("#ffffff"); // Renamed for clarity

  // Detect dark mode for fallback (if backgroundColor prop isn't a direct CSS color)
  useEffect(() => {
    // This logic is primarily for the *glow fallback* when the background is handled by Tailwind
    // or when no direct backgroundColor is provided for the radial gradient's base.
    if (!backgroundColor || !backgroundColor.startsWith("#") && !backgroundColor.startsWith("rgb")) {
        const html = document.documentElement;
        const updateColor = () => {
          const isDark = html.classList.contains("dark");
          // This sets the color for the "base" of the radial gradient, which needs a CSS color.
          setResolvedGlowFallbackColor(isDark ? "#000" : "#ffffff"); // Black for dark, white for light as default
        };

        updateColor();

        const observer = new MutationObserver(updateColor);
        observer.observe(html, { attributes: true, attributeFilter: ["class"] });

        return () => observer.disconnect();
    } else {
        // If backgroundColor is a direct CSS color, use it for the radial gradient's base.
        setResolvedGlowFallbackColor(backgroundColor);
    }
  }, [backgroundColor]);

  const normalizedIntensity = Math.max(0, Math.min(100, intensity)) / 100;

  useEffect(() => {
    if (!followMouse) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!cardRef.current || (hoverOnly && !isHovering)) return;
      const rect = cardRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      setPosition({ x, y });
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, [followMouse, hoverOnly, isHovering]);

  const getBackgroundStyle = (): React.CSSProperties => {
    // Use resolvedGlowFallbackColor for the radial gradient's base,
    // which should always be a valid CSS color.
    if (!followMouse || (hoverOnly && !isHovering)) {
      return {
        background: `radial-gradient(circle at center, ${glowColor} 0%, ${resolvedGlowFallbackColor} ${45 * normalizedIntensity}%, ${resolvedGlowFallbackColor} 100%)`,
      };
    }

    return {
      background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${glowColor} 0%, ${resolvedGlowFallbackColor} ${45 * normalizedIntensity}%, ${resolvedGlowFallbackColor} 100%)`,
    };
  };

  const getBorderStyle = (): React.CSSProperties => {
    // resolvedGlowFallbackColor is also used here
    return {
      "--gradient-border": `linear-gradient(45deg, ${resolvedGlowFallbackColor}, ${resolvedGlowFallbackColor}, ${color})`,
    } as React.CSSProperties;
  };

  return (
    <div
      ref={cardRef}
      className={cn(
        `relative grid place-content-center place-items-center text-center
        border transition-all duration-300
        interactive-gradient-card text-foreground`,
        backgroundColor || 'bg-white dark:bg-black',
        className
      )}
      style={{
        ...getBackgroundStyle(), // This handles the radial glow overlay
        ...getBorderStyle(),
        width,
        height,
        borderRadius,
      }}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      {/* Gradient border */}
      <style>
        {`
          .interactive-gradient-card::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: ${borderRadius};
            z-index: -1;
            border: 0.155rem solid transparent;
            background: var(--gradient-border) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
          }
        `}
      </style>
      {children}
    </div>
  );
};

export default InteractiveGradient;
```
--------------------------------------------------

### COMPONENT: shader-card
Category: Components
Description: An interactive WebGL fluid plasma shader card with cursor turbulence displacement, dynamic lighting glow, and 3D perspective tilt.
URL: https://lightswind.com/components/shader-card
Import: import ShaderCard from "@/components/lightswind/shader-card";
Registry URL: https://lightswind.com/r/shader-card.json
Install Command: npx lightswind@latest add shader-card

Usage:
```tsx
import ShaderCard from "@/components/lightswind/shader-card";
import { Sparkles, Check, ArrowRight } from "lucide-react";

export default function Example() {
  return (
    <ShaderCard
      color="#00D2FF"
      speed={0.5}
      branchIntensity={1.8}
      noiseScale={1.5}
      opacity={0.85}
      enableTilt={true}
      glow={true}
      className="w-full max-w-[360px] min-h-[520px] p-7 text-white"
    >
      <div className="space-y-3">
        <div className="inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-cyan-400/10 text-cyan-400 border border-cyan-400/30">
          <Sparkles className="w-3 h-3" />
          <span>Pro Tier</span>
        </div>
        <h3 className="text-2xl font-bold">Enterprise AI Suite</h3>
        <p className="text-xs text-zinc-300">GPU shader acceleration for modern applications.</p>
      </div>

      <div className="my-5 py-4 border-y border-white/10">
        <div className="text-4xl font-extrabold">$49<span className="text-xs text-zinc-300 font-normal"> / mo</span></div>
      </div>

      <button className="w-full py-3 rounded-xl text-xs font-bold bg-[#00D2FF] text-black flex items-center justify-center gap-2">
        <span>Upgrade Now</span>
        <ArrowRight className="w-3.5 h-3.5" />
      </button>
    </ShaderCard>
  );
}
```

Source Code:
```tsx
"use client";

import React, {
    useRef,
    useEffect,
    useCallback,
    useState,
    PropsWithChildren,
    CSSProperties,
    forwardRef,
    useImperativeHandle,
} from "react";
import { useTheme } from "next-themes";
import { cn } from "@/components/lib/utils";

export interface ShaderCardProps extends PropsWithChildren {
    /** Primary electric plasma shader color (Hex or RGB string, default: "#00D2FF" Sky Blue) */
    color?: string;
    /** Background card interior base color (default: "#0d0e12") */
    bgColor?: string;
    /** Fluid wave speed multiplier (default: 0.5) */
    speed?: number;
    /** Vertical origin position offset (default: 0.15) */
    positionY?: number;
    /** Coordinate zoom scale factor (default: 4.0) */
    scale?: number;
    /** Power exponent controlling plasma branch contrast & sharpness (default: 1.8) */
    branchIntensity?: number;
    /** Horizontal wave distortion amplitude (default: 0.25) */
    waveAmount?: number;
    /** Noise granularity and density multiplier (default: 1.5) */
    noiseScale?: number;
    /** Exponential vertical falloff power (default: 1.6) */
    falloffPower?: number;
    /** WebGL shader layer opacity (0.0 to 1.0, default: 0.85) */
    opacity?: number;
    /** Optional blur filter applied directly to the WebGL shader canvas (e.g. "6px" or 6) */
    shaderBlur?: number | string;
    /** Add a mild frosted glass blur overlay on top of the shader (default: false) */
    frostedOverlay?: boolean;
    /** Enable cursor-reactive turbulence and wave displacement (default: true) */
    interactive?: boolean;
    /** Enable subtle 3D card tilt perspective when hovering (default: true) */
    enableTilt?: boolean;
    /** Maximum 3D tilt angle in degrees (default: 10) */
    maxTilt?: number;
    /** Enable atmospheric colored ambient glow behind card (default: true) */
    glow?: boolean;
    /** Glow blur radius in pixels (default: 32) */
    glowBlur?: number;
    /** Glow opacity (default: 0.35) */
    glowOpacity?: number;
    /** Border radius for the card (default: "20px") */
    radius?: string | number;
    /** Optional outer card container class */
    className?: string;
    /** Optional canvas element class */
    canvasClassName?: string;
    /** Optional inline styles */
    style?: CSSProperties;
    /** Maximum device pixel ratio (default: 2) */
    dpr?: number;
}

export interface ShaderCardHandle {
    getCanvas: () => HTMLCanvasElement | null;
    getGL: () => WebGLRenderingContext | null;
}

/** Utility to parse Hex or RGB strings to normalized [r, g, b] float vectors */
function parseColorToRgb(color: string, fallback: [number, number, number] = [0, 0.82, 1]): [number, number, number] {
    if (!color) return fallback;
    const clean = color.trim();
    if (clean.startsWith("#")) {
        let hex = clean.replace("#", "");
        if (hex.length === 3) {
            hex = hex.split("").map((c) => c + c).join("");
        }
        const num = parseInt(hex, 16);
        if (isNaN(num)) return fallback;
        return [
            ((num >> 16) & 255) / 255,
            ((num >> 8) & 255) / 255,
            (num & 255) / 255,
        ];
    }
    const match = clean.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
    if (match) {
        return [
            parseInt(match[1], 10) / 255,
            parseInt(match[2], 10) / 255,
            parseInt(match[3], 10) / 255,
        ];
    }
    return fallback;
}

const VERTEX_SHADER = `
  attribute vec2 a_position;
  varying vec2 v_uv;
  void main() {
    v_uv = (a_position + 1.0) * 0.5;
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

const FRAGMENT_SHADER = `
  precision highp float;
  varying vec2 v_uv;

  uniform float u_time;
  uniform vec2 u_resolution;
  uniform vec3 u_color;
  uniform float u_speed;
  uniform float u_positionY;
  uniform float u_scale;
  uniform float u_branchIntensity;
  uniform float u_waveAmount;
  uniform float u_noiseScale;
  uniform float u_falloffPower;
  uniform float u_opacity;
  uniform vec2 u_mouse;
  uniform float u_isHovered;

  // Simple 2D Pseudo Random / Noise
  float hash(vec2 p) {
    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
  }

  float noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    f = f * f * (3.0 - 2.0 * f);
    float a = hash(i);
    float b = hash(i + vec2(1.0, 0.0));
    float c = hash(i + vec2(0.0, 1.0));
    float d = hash(i + vec2(1.0, 1.0));
    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
  }

  float fbm(vec2 p) {
    float v = 0.0;
    float a = 0.5;
    for (int i = 0; i < 4; i++) {
      v += a * noise(p);
      p *= 2.0;
      a *= 0.5;
    }
    return v;
  }

  void main() {
    vec2 uv = v_uv;
    float t = u_time * u_speed;

    // Aspect ratio correction
    float aspect = u_resolution.x / u_resolution.y;

    // Position offset adjustment
    vec2 p = uv * u_scale;
    p.y -= u_positionY * u_scale;

    // Cursor interactive fluid wave displacement
    if (u_isHovered > 0.0) {
      vec2 m = u_mouse * u_scale;
      m.y -= u_positionY * u_scale;
      float dMouse = distance(p, m);
      float mouseInfluence = smoothstep(1.6, 0.0, dMouse);
      p += (p - m) * mouseInfluence * 0.5 * u_isHovered;
    }

    // Wave distortion
    float wave = sin(p.x * 2.0 + t) * cos(p.y * 1.5 + t * 0.7) * u_waveAmount;
    
    // Fluid noise branch calculation
    float n = fbm(p * u_noiseScale + vec2(t * 0.2, -t * 0.3) + wave);
    n = pow(n, u_branchIntensity);

    // Vertical falloff mask (glow concentrated around bottom-to-middle)
    float verticalMask = smoothstep(0.0, 1.0, uv.y * 1.6);
    verticalMask = pow(verticalMask, u_falloffPower);

    // Core glow & color mixing
    float intensity = n * verticalMask * 2.4;
    vec3 color = u_color * intensity;

    // Bottom accent glow
    float bottomGlow = smoothstep(0.0, 0.8, uv.y) * 0.35;
    color += u_color * bottomGlow;

    // Localized cursor interactive glow aura
    if (u_isHovered > 0.0) {
      float dMouseUV = distance(uv, u_mouse);
      float cursorGlow = smoothstep(0.45, 0.0, dMouseUV) * 0.35 * u_isHovered;
      color += u_color * cursorGlow;
    }

    float alpha = clamp(intensity * u_opacity, 0.0, 1.0);
    gl_FragColor = vec4(color, alpha);
  }
`;

function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
    const shader = gl.createShader(type);
    if (!shader) return null;
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compile error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

export const ShaderCard = forwardRef<ShaderCardHandle, ShaderCardProps>(({
    children,
    color = "#00D2FF",
    bgColor,
    speed = 0.5,
    positionY = 0.15,
    scale = 4.0,
    branchIntensity = 1.8,
    waveAmount = 0.25,
    noiseScale = 1.5,
    falloffPower = 1.6,
    opacity = 0.85,
    shaderBlur,
    frostedOverlay = false,
    interactive = true,
    enableTilt = false,
    maxTilt = 10,
    glow = true,
    glowBlur = 32,
    glowOpacity = 0.35,
    radius = "20px",
    className,
    canvasClassName,
    style,
    dpr = 2,
}, ref) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const glRef = useRef<WebGLRenderingContext | null>(null);
    const animFrameRef = useRef<number | null>(null);
    const isVisibleRef = useRef<boolean>(true);

    const mousePosRef = useRef<{ x: number; y: number }>({ x: 0.5, y: 0.5 });
    const isHoveredRef = useRef<number>(0);
    const startTimeRef = useRef<number>(performance.now());
    const [tiltStyle, setTiltStyle] = useState<{ transform: string }>({ transform: "" });

    const { resolvedTheme, theme } = useTheme();
    const isLightMode = resolvedTheme === "light" || theme === "light";
    const effectiveBgColor = bgColor ?? (isLightMode ? "#f8fafc" : "#0d0e12");

    const parsedRadius = typeof radius === "number" ? `${radius}px` : radius;
    const parsedShaderBlur = typeof shaderBlur === "number" ? `${shaderBlur}px` : shaderBlur;

    useImperativeHandle(ref, () => ({
        getCanvas: () => canvasRef.current,
        getGL: () => glRef.current,
    }));

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const gl = canvas.getContext("webgl", {
            alpha: true,
            antialias: true,
            depth: false,
            preserveDrawingBuffer: false,
        });

        if (!gl) {
            console.warn("WebGL not supported for ShaderCard");
            return;
        }

        glRef.current = gl;
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        const vs = createShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
        const fs = createShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
        if (!vs || !fs) return;

        const program = gl.createProgram();
        if (!program) return;
        gl.attachShader(program, vs);
        gl.attachShader(program, fs);
        gl.linkProgram(program);

        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.error("Program link error:", gl.getProgramInfoLog(program));
            return;
        }

        gl.useProgram(program);

        // Quad Geometry Buffers
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([
                -1, -1,
                 1, -1,
                -1,  1,
                -1,  1,
                 1, -1,
                 1,  1,
            ]),
            gl.STATIC_DRAW
        );

        const positionLocation = gl.getAttribLocation(program, "a_position");
        gl.enableVertexAttribArray(positionLocation);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

        // Uniform Locations
        const uniforms = {
            time: gl.getUniformLocation(program, "u_time"),
            resolution: gl.getUniformLocation(program, "u_resolution"),
            color: gl.getUniformLocation(program, "u_color"),
            speed: gl.getUniformLocation(program, "u_speed"),
            positionY: gl.getUniformLocation(program, "u_positionY"),
            scale: gl.getUniformLocation(program, "u_scale"),
            branchIntensity: gl.getUniformLocation(program, "u_branchIntensity"),
            waveAmount: gl.getUniformLocation(program, "u_waveAmount"),
            noiseScale: gl.getUniformLocation(program, "u_noiseScale"),
            falloffPower: gl.getUniformLocation(program, "u_falloffPower"),
            opacity: gl.getUniformLocation(program, "u_opacity"),
            mouse: gl.getUniformLocation(program, "u_mouse"),
            isHovered: gl.getUniformLocation(program, "u_isHovered"),
        };

        const handleResize = () => {
            if (!canvas || !gl) return;
            const targetDpr = Math.min(window.devicePixelRatio || 1, dpr);
            const displayWidth = Math.round(canvas.clientWidth * targetDpr);
            const displayHeight = Math.round(canvas.clientHeight * targetDpr);

            if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                canvas.width = Math.max(1, displayWidth);
                canvas.height = Math.max(1, displayHeight);
                gl.viewport(0, 0, canvas.width, canvas.height);
            }
        };

        handleResize();

        const resizeObserver = new ResizeObserver(() => handleResize());
        resizeObserver.observe(canvas);

        const intersectionObserver = new IntersectionObserver(
            ([entry]) => {
                isVisibleRef.current = entry.isIntersecting;
            },
            { threshold: 0.05 }
        );
        intersectionObserver.observe(canvas);

        let currentHover = 0;

        const render = () => {
            if (isVisibleRef.current && gl && canvas) {
                handleResize();

                const time = (performance.now() - startTimeRef.current) * 0.001;
                const rgb = parseColorToRgb(color, [0, 0.82, 1]);

                // Smooth hover transition
                const targetHover = isHoveredRef.current;
                currentHover += (targetHover - currentHover) * 0.1;

                gl.uniform1f(uniforms.time, time);
                gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
                gl.uniform3f(uniforms.color, rgb[0], rgb[1], rgb[2]);
                gl.uniform1f(uniforms.speed, speed);
                gl.uniform1f(uniforms.positionY, positionY);
                gl.uniform1f(uniforms.scale, scale);
                gl.uniform1f(uniforms.branchIntensity, branchIntensity);
                gl.uniform1f(uniforms.waveAmount, waveAmount);
                gl.uniform1f(uniforms.noiseScale, noiseScale);
                gl.uniform1f(uniforms.falloffPower, falloffPower);
                gl.uniform1f(uniforms.opacity, opacity);
                gl.uniform2f(uniforms.mouse, mousePosRef.current.x, mousePosRef.current.y);
                gl.uniform1f(uniforms.isHovered, currentHover);

                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }

            animFrameRef.current = requestAnimationFrame(render);
        };

        animFrameRef.current = requestAnimationFrame(render);

        return () => {
            if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
            resizeObserver.disconnect();
            intersectionObserver.disconnect();
            if (gl) {
                gl.deleteProgram(program);
                gl.deleteShader(vs);
                gl.deleteShader(fs);
                gl.deleteBuffer(positionBuffer);
            }
        };
    }, [
        color,
        speed,
        positionY,
        scale,
        branchIntensity,
        waveAmount,
        noiseScale,
        falloffPower,
        opacity,
        dpr,
    ]);

    const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        if (!containerRef.current) return;
        const rect = containerRef.current.getBoundingClientRect();
        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));

        mousePosRef.current = { x, y: 1.0 - y }; // Invert for WebGL coords

        if (enableTilt) {
            const tiltY = (x - 0.5) * (maxTilt * 2);
            const tiltX = (0.5 - y) * (maxTilt * 2);
            setTiltStyle({
                transform: `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.02, 1.02, 1.02)`,
            });
        }
    }, [enableTilt, maxTilt]);

    const handleMouseEnter = useCallback(() => {
        if (interactive) isHoveredRef.current = 1.0;
    }, [interactive]);

    const handleMouseLeave = useCallback(() => {
        if (interactive) isHoveredRef.current = 0.0;
        if (enableTilt) {
            setTiltStyle({
                transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)",
            });
        }
    }, [interactive, enableTilt]);

    return (
        <div
            ref={containerRef}
            onMouseMove={handleMouseMove}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            className={cn(
                "relative flex flex-col justify-between overflow-hidden transition-transform duration-300 ease-out border border-white/10 dark:border-white/10 shadow-2xl select-none group",
                className
            )}
            style={{
                borderRadius: parsedRadius,
                backgroundColor: effectiveBgColor,
                transformStyle: "preserve-3d",
                ...tiltStyle,
                ...style,
            }}
        >
            {/* Ambient Atmosphere Glow Backdrop */}
            {glow && (
                <div
                    className="absolute inset-0 pointer-events-none -z-10 scale-105 transition-opacity duration-300"
                    style={{
                        borderRadius: parsedRadius,
                        filter: `blur(${glowBlur}px)`,
                        background: `radial-gradient(ellipse at center, ${color} 0%, transparent 70%)`,
                        opacity: glowOpacity,
                    }}
                />
            )}

            {/* WebGL Canvas Background */}
            <canvas
                ref={canvasRef}
                className={cn("w-full h-full block pointer-events-none absolute inset-0 z-0", canvasClassName)}
                style={{
                    borderRadius: parsedRadius,
                    filter: parsedShaderBlur ? `blur(${parsedShaderBlur})` : undefined,
                }}
            />

            {/* Mild Frosted Glass Light Blur Overlay */}
            {frostedOverlay && (
                <div
                    className="absolute inset-0 pointer-events-none z-0 backdrop-blur-[6px] bg-black/15 dark:bg-black/25"
                    style={{
                        borderRadius: parsedRadius,
                    }}
                />
            )}

            {/* Content Slot Layer */}
            {children && (
                <div className="relative z-10 w-full h-full pointer-events-auto flex flex-col justify-between">
                    {children}
                </div>
            )}
        </div>
    );
});

ShaderCard.displayName = "ShaderCard";

export default ShaderCard;

```
--------------------------------------------------

### COMPONENT: iphone16-pro
Category: Components
Description: A high-fidelity, reusable iPhone 16 Pro SVG component built with React and TypeScript. It supports displaying images or videos on the screen, a dynamic island, camera dot, and customizable frame, bezel, and screen properties. Ideal for showcasing mobile app mockups, interactive demos, or marketing visuals with realistic device frames.
URL: https://lightswind.com/components/iphone16-pro
Import: import { Iphone16Pro } from '@/components/lightswind/iphone16-pro';
Registry URL: https://lightswind.com/r/iphone16-pro.json
Install Command: npx lightswind@latest add iphone16-pro

Usage:
```tsx
import { Iphone16Pro } from '@/components/lightswind/iphone16-pro';

<Iphone16Pro
  width={433}
  height={882}
  src="/path/to/image.jpg"
  videoSrc="/path/to/video.mp4"
  showIsland={true}
  islandWidth={130}
  islandHeight={40}
  frameColor="white"
  frameDarkColor="black"
  bezelColor="neutral-100"
  screenRadius={55}
  shadow={true}
  rounded={true}
  contentClassName="object-cover"
  contentStyle={{ borderRadius: '55px' }}
  showCamera={true}
  screenGradient="#ff00ff,#00ffff"
  hoverAnimation={true}
/>
```

Source Code:
```tsx
import React, { forwardRef, CSSProperties, SVGProps } from "react";
import { Wifi, Battery, Signal } from "lucide-react";

export type Iphone16ProFinish = "theme" | "black" | "white" | "natural" | "desert" | "cosmic" | string;

export interface Iphone16ProProps extends SVGProps<SVGSVGElement> {
    /** Device frame width (base SVG width) */
    width?: number;
    /** Device frame height (base SVG height) */
    height?: number;
    /** Titanium finish preset ("theme" | "black" | "white" | "natural" | "desert" | "cosmic") or custom hex color */
    finish?: Iphone16ProFinish;
    /** Image URL source for screen */
    src?: string;
    /** Video URL source for screen */
    videoSrc?: string;
    /** Custom wallpaper gradient or color for screen */
    wallpaper?: string;
    /** Custom React nodes/children to render inside the iPhone screen */
    children?: React.ReactNode;
    /** Toggle Dynamic Island pill */
    showIsland?: boolean;
    /** Custom content inside expanded Dynamic Island on hover */
    islandContent?: React.ReactNode;
    /** Island width */
    islandWidth?: number;
    /** Island height */
    islandHeight?: number;
    /** Frame color (light mode override) */
    frameColor?: string;
    /** Frame color (dark mode override) */
    frameDarkColor?: string;
    /** Bezel color */
    bezelColor?: string;
    /** Screen border radius */
    screenRadius?: number;
    /** Enable drop shadow */
    shadow?: boolean;
    /** Rounded outer frame corners */
    rounded?: boolean;
    /** Class for inner content container */
    contentClassName?: string;
    /** Custom styles for inner content */
    contentStyle?: CSSProperties;
    /** Toggle camera lens dot */
    showCamera?: boolean;
    /** Background gradient for screen */
    screenGradient?: string;
    /** Enable smooth hover tilt animation */
    hoverAnimation?: boolean;
    /** Rotation angle in degrees (e.g. 0, 15, -15, 90) */
    rotate?: number;
    /** Enable continuous smooth floating & rotating 3D animation */
    autoRotate?: boolean;
    /** Device orientation: "portrait" | "landscape" */
    orientation?: "portrait" | "landscape";
    /** Toggle top iOS Status Bar (Time, WiFi, Battery) */
    showStatusBar?: boolean;
    /** Custom time string for status bar (default: "9:41") */
    statusTime?: string;
    /** Toggle bottom iOS Home Indicator bar */
    showHomeIndicator?: boolean;
    /** Toggle subtle glass glare reflection overlay */
    glassReflection?: boolean;
}

const FINISH_PRESETS: Record<string, { frame: string; stroke: string; bezel: string }> = {
    theme: {
        frame: "fill-black stroke-neutral-800 dark:fill-neutral-100 dark:stroke-neutral-300",
        stroke: "stroke-neutral-800 dark:stroke-neutral-300",
        bezel: "fill-black",
    },
    black: {
        frame: "fill-[#141416] dark:fill-[#0a0a0c]",
        stroke: "stroke-[#2a2a2d] dark:stroke-[#202022]",
        bezel: "fill-black",
    },
    white: {
        frame: "fill-[#ffffff] dark:fill-[#f0f0f4]",
        stroke: "stroke-[#e2e2e7] dark:stroke-[#d0d0d5]",
        bezel: "fill-black",
    },
    natural: {
        frame: "fill-[#c5c2bb] dark:fill-[#7a7771]",
        stroke: "stroke-[#dfdcd6] dark:stroke-[#5a5752]",
        bezel: "fill-[#141416]",
    },
    desert: {
        frame: "fill-[#e2d5c3] dark:fill-[#8a7d6e]",
        stroke: "stroke-[#f2e7d7] dark:stroke-[#695d4e]",
        bezel: "fill-[#141416]",
    },
    cosmic: {
        frame: "fill-[#f97316] dark:fill-[#ea580c]",
        stroke: "stroke-[#fdba74] dark:stroke-[#c2410c]",
        bezel: "fill-[#141416]",
    },
};

export const Iphone16Pro = forwardRef<SVGSVGElement, Iphone16ProProps>(
    (
        {
            width = 433,
            height = 882,
            finish = "theme",
            rotate = 0,
            autoRotate = false,
            orientation = "portrait",
            src,
            videoSrc,
            wallpaper = "bg-gradient-to-tr from-slate-950 via-indigo-950 to-slate-900",
            children,
            showIsland = true,
            islandContent,
            islandWidth = 124,
            islandHeight = 35,
            frameColor,
            frameDarkColor,
            bezelColor = "black",
            screenRadius = 50,
            shadow = true,
            rounded = true,
            contentClassName = "",
            contentStyle,
            showCamera = true,
            screenGradient,
            hoverAnimation = true,
            showStatusBar = true,
            statusTime = "9:41",
            showHomeIndicator = true,
            glassReflection = true,
            className = "",
            style,
            ...props
        }: Iphone16ProProps,
        ref
    ) => {
        const finishStyle = FINISH_PRESETS[finish] || {
            frame: frameColor ? `fill-[${frameColor}]` : FINISH_PRESETS.theme.frame,
            stroke: "stroke-gray-300 dark:stroke-white/20",
            bezel: "fill-black",
        };

        const finalRotate = orientation === "landscape" ? rotate + 90 : rotate;
        const screenX = 18;
        const screenY = 18;
        const screenW = width - 36; // 397
        const screenH = height - 36; // 846

        return (
            <svg
                ref={ref}
                viewBox={`0 0 ${width} ${height}`}
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                style={{
                    transform: !autoRotate && finalRotate !== 0 ? `rotate(${finalRotate}deg)` : undefined,
                    transition: "transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
                    ...style,
                }}
                className={`
                    w-full h-auto max-w-[433px] max-h-[85vh] mx-auto block select-none
                    ${shadow ? "drop-shadow-[0_25px_50px_rgba(0,0,0,0.35)] dark:drop-shadow-[0_25px_50px_rgba(0,0,0,0.7)]" : ""}
                    ${hoverAnimation && !autoRotate ? "transition-transform duration-500 hover:scale-[1.015]" : ""}
                    ${autoRotate ? "animate-iphone-float-rotate" : ""}
                    ${className}
                `}
                {...props}
            >
                <defs>
                    {autoRotate && (
                        <style>
                            {`
                                @keyframes iphone-float-rotate {
                                    0%, 100% { transform: translateY(0px) rotate(${finalRotate}deg) scale(1); }
                                    25% { transform: translateY(-10px) rotate(${finalRotate + 5}deg) scale(1.01); }
                                    50% { transform: translateY(-18px) rotate(${finalRotate}deg) scale(1.02); }
                                    75% { transform: translateY(-10px) rotate(${finalRotate - 5}deg) scale(1.01); }
                                }
                                .animate-iphone-float-rotate {
                                    animation: iphone-float-rotate 8s ease-in-out infinite;
                                    transform-origin: center center;
                                }
                            `}
                        </style>
                    )}
                </defs>
                {/* ── Side Buttons (iPhone 16 Pro Layout) ── */}
                {/* Action Button (Left) */}
                <rect x="0" y="165" width="4" height="32" rx="2" className="fill-[#68655f] dark:fill-[#403e3a]" />
                {/* Volume Up (Left) */}
                <rect x="0" y="215" width="4" height="60" rx="2" className="fill-[#68655f] dark:fill-[#403e3a]" />
                {/* Volume Down (Left) */}
                <rect x="0" y="290" width="4" height="60" rx="2" className="fill-[#68655f] dark:fill-[#403e3a]" />
                {/* Power Button (Right) */}
                <rect x={width - 4} y="225" width="4" height="96" rx="2" className="fill-[#68655f] dark:fill-[#403e3a]" />
                {/* Camera Control Button (Right - New in iPhone 16) */}
                <rect x={width - 4} y="635" width="4" height="68" rx="2" className="fill-[#68655f]/80 dark:fill-[#403e3a]/80" />

                {/* ── Outer Titanium Frame ── */}
                <rect
                    x="3"
                    y="3"
                    width={width - 6}
                    height={height - 6}
                    rx={rounded ? 68 : 0}
                    className={`${finishStyle.frame} ${finishStyle.stroke}`}
                    strokeWidth="3"
                />

                {/* Inner Antenna/Chassis Bezel Accent */}
                <rect
                    x="12"
                    y="12"
                    width={width - 24}
                    height={height - 24}
                    rx={rounded ? 58 : 0}
                    className="fill-black stroke-neutral-900/80"
                    strokeWidth="2"
                />

                {/* Screen Clip Path */}
                <clipPath id="iphone-screen-clip">
                    <rect
                        x={screenX}
                        y={screenY}
                        width={screenW}
                        height={screenH}
                        rx={screenRadius}
                        ry={screenRadius}
                    />
                </clipPath>

                {/* ── Screen Area (foreignObject for Full React / Image / Video Rendering) ── */}
                <foreignObject
                    x={screenX}
                    y={screenY}
                    width={screenW}
                    height={screenH}
                    clipPath="url(#iphone-screen-clip)"
                >
                    <div
                        className={`relative w-full h-full overflow-hidden flex flex-col justify-between ${
                            screenGradient ? "" : wallpaper
                        } ${contentClassName}`}
                        style={{
                            borderRadius: `${screenRadius}px`,
                            background: screenGradient
                                ? `linear-gradient(135deg, ${screenGradient})`
                                : undefined,
                            ...contentStyle,
                        }}
                    >
                        {/* Background Image / Video if provided */}
                        {src && (
                            <img
                                src={src}
                                alt="iPhone Screen"
                                className="absolute inset-0 w-full h-full object-cover z-0"
                            />
                        )}
                        {videoSrc && (
                            <video
                                src={videoSrc}
                                autoPlay
                                loop
                                muted
                                playsInline
                                className="absolute inset-0 w-full h-full object-cover z-0"
                            />
                        )}

                        {/* Custom Children Layout */}
                        {children && (
                            <div className="relative z-10 w-full h-full overflow-auto">
                                {children}
                            </div>
                        )}

                        {/* Default Content Placeholder if no src/children passed */}
                        {!src && !videoSrc && !children && (
                            <div className="relative z-0 w-full h-full flex flex-col items-center justify-center p-6 text-center text-white/90">
                                <div className="w-16 h-16 rounded-3xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center mb-4 shadow-xl">
                                    <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
                                    </svg>
                                </div>
                                <h3 className="text-xl font-extrabold tracking-tight text-white mb-1">iPhone 16 Pro</h3>
                                <p className="text-xs text-white/70 max-w-[240px] leading-relaxed">
                                    Titanium design with Super Retina XDR &amp; Dynamic Island
                                </p>
                            </div>
                        )}

                        {/* ── Top Status Bar Overlay (iOS Native Style) ── */}
                        {showStatusBar && (
                            <div className="absolute top-0 left-0 right-0 z-30 pt-3.5 px-7 flex items-center justify-between pointer-events-none text-white font-sans text-xs">
                                <span className="font-semibold tracking-tight text-[13px] pl-1">
                                    {statusTime}
                                </span>
                                <div className="flex items-center gap-1.5 opacity-90 pr-1">
                                    <Signal className="w-3.5 h-3.5 fill-current" />
                                    <Wifi className="w-3.5 h-3.5 stroke-[2.5]" />
                                    <Battery className="w-4 h-4 fill-current stroke-[1.5]" />
                                </div>
                            </div>
                        )}

                        {/* ── Dynamic Island Pill ── */}
                        {showIsland && (
                            <div className="absolute top-2.5 left-1/2 -translate-x-1/2 z-40 group cursor-pointer">
                                <div
                                    className="bg-black rounded-full flex items-center justify-between px-3 text-white transition-all duration-300 shadow-lg border border-white/10 group-hover:w-[190px] group-hover:h-[42px]"
                                    style={{
                                        width: `${islandWidth}px`,
                                        height: `${islandHeight}px`,
                                    }}
                                >
                                    {islandContent ? (
                                        islandContent
                                    ) : (
                                        <>
                                            <div className="flex items-center gap-2">
                                                <div className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse" />
                                                <span className="text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate max-w-[100px]">
                                                    Live Activity
                                                </span>
                                            </div>
                                            {showCamera && (
                                                <div className="w-3.5 h-3.5 rounded-full bg-neutral-900 border border-neutral-700/80 flex items-center justify-center shrink-0">
                                                    <div className="w-1.5 h-1.5 rounded-full bg-indigo-950/80" />
                                                </div>
                                            )}
                                        </>
                                    )}
                                </div>
                            </div>
                        )}

                        {/* ── Glass Reflection Overlay ── */}
                        {glassReflection && (
                            <div className="absolute inset-0 z-20 pointer-events-none bg-gradient-to-tr from-transparent via-white/[0.07] to-transparent" />
                        )}

                        {/* ── Bottom Home Indicator Bar ── */}
                        {showHomeIndicator && (
                            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-30 w-32 h-1 bg-white/40 backdrop-blur-sm rounded-full pointer-events-none" />
                        )}
                    </div>
                </foreignObject>

                {/* Optional Linear Gradient Definition for Screen */}
                {screenGradient && (
                    <defs>
                        <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stopColor={screenGradient.split(",")[0]} />
                            <stop offset="100%" stopColor={screenGradient.split(",")[1] || screenGradient.split(",")[0]} />
                        </linearGradient>
                    </defs>
                )}
            </svg>
        );
    }
);

Iphone16Pro.displayName = "Iphone16Pro";


```
--------------------------------------------------

### COMPONENT: lens
Category: Components
Description: Interactive magnifying lens component with customizable zoom, animations, and visual effects. Perfect for image galleries, product showcases, detailed inspections, and interactive content exploration with both hover and static modes.
URL: https://lightswind.com/components/lens
Import: import { Lens } from "@/components/lightswind/lens"
Registry URL: https://lightswind.com/r/lens.json
Install Command: npx lightswind@latest add lens

Usage:
```tsx
import { Lens } from "@/components/lightswind/lens";

<Lens zoomFactor={2} lensSize={150}>
  <img src="/image.jpg" alt="Product" className="w-full h-64 object-cover" />
</Lens>

// Static Lens (Always Visible)
<Lens 
  isStatic
  position={{ x: 200, y: 150 }}
  zoomFactor={2.5}
  lensSize={120}
  shadowIntensity="medium"
>
  <img src="/image.jpg" alt="Product" className="w-full h-64 object-cover" />
</Lens>

// Advanced Lens with Custom Effects
<Lens 
  zoomFactor={3}
  lensSize={180}
  maskShape="square"
  blurEdge={true}
  shadowIntensity="heavy"
  animationDuration={0.5}
  smoothFollow={false}
>
  <div className="bg-gradient-to-r from-primarylw to-purple-500 h-96">
    <h1 className="text-white text-4xl">Interactive Content</h1>
  </div>
</Lens>
```

Source Code:
```tsx
"use client";

import React, { useRef, useState } from "react";
import { AnimatePresence, motion, Easing } from "framer-motion";

function cn(...inputs: (string | undefined | null | boolean)[]) {
  return inputs.filter(Boolean).join(" ");
}

interface LensProps {
  children: React.ReactNode;
  zoomFactor?: number;
  lensSize?: number;
  position?: {
    x: number;
    y: number;
  };
  isStatic?: boolean;
  isFocusing?: () => void;
  hovering?: boolean;
  setHovering?: (hovering: boolean) => void;
  className?: string;
  borderRadius?: string;
  borderWidth?: number;
  borderColor?: string;
  shadowIntensity?: 'none' | 'light' | 'medium' | 'heavy';
  animationDuration?: number;
  animationEasing?: Easing | Easing[];
  maskShape?: 'circle' | 'square';
  opacity?: number;
  blurEdge?: boolean;
  smoothFollow?: boolean;
  disabled?: boolean;
}

export const Lens: React.FC<LensProps> = ({
  children,
  zoomFactor = 1.5,
  lensSize = 170,
  isStatic = false,
  position = { x: 200, y: 150 },
  hovering,
  setHovering,
  className,
  borderRadius = "lg",
  borderWidth = 0,
  borderColor = "border-gray-300",
  shadowIntensity = 'medium',
  animationDuration = 0.3,
  animationEasing = "easeOut",
  maskShape = 'circle',
  opacity = 1,
  blurEdge = false,
  smoothFollow = true,
  disabled = false,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [localIsHovering, setLocalIsHovering] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 100, y: 100 });

  const isHovering = hovering !== undefined ? hovering : localIsHovering;
  const setIsHovering = setHovering || setLocalIsHovering;

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (disabled || isStatic) return;

    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    if (smoothFollow) {
      setMousePosition({ x, y });
    } else {
      // Snap to grid for less smooth following
      const gridSize = 20;
      setMousePosition({
        x: Math.round(x / gridSize) * gridSize,
        y: Math.round(y / gridSize) * gridSize,
      });
    }
  };

  const shadowClasses = {
    none: '',
    light: 'shadow-sm',
    medium: 'shadow-md',
    heavy: 'shadow-xl',
  };

  const getMaskImage = (x: number, y: number) => {
    const radius = lensSize / 2;
    // Using string concatenation for shape and gradient
    const shape =
      maskShape === 'circle'
        ? "circle " + radius + "px at " + x + "px " + y + "px"
        : "ellipse " + radius + "px " + radius + "px at " + x + "px " + y + "px";

    const gradient = blurEdge
      ? "radial-gradient(" + shape + ", black 60%, transparent 100%)"
      : "radial-gradient(" + shape + ", black 100%, transparent 100%)";

    return gradient;
  };

  const currentX = isStatic ? position.x : mousePosition.x;
  const currentY = isStatic ? position.y : mousePosition.y;

  const lensContent = (
    <motion.div
      initial={{ opacity: 0, scale: 0.58 }}
      animate={{ opacity: opacity, scale: 1 }}
      exit={{ opacity: 0, scale: 0.8 }}
      transition={{ duration: animationDuration, ease: animationEasing }}
      className={cn(
        "absolute inset-0 overflow-hidden",
        borderWidth > 0 && "border-" + borderWidth + " " + borderColor, // String concatenation
        shadowClasses[shadowIntensity]
      )}
      style={{
        maskImage: getMaskImage(currentX, currentY),
        WebkitMaskImage: getMaskImage(currentX, currentY),
        transformOrigin: currentX + "px " + currentY + "px", // String concatenation
        zIndex: 50,
      }}
    >
      <div
        className={cn("absolute inset-0", className)}
        style={{
          transform: "scale(" + zoomFactor + ")", // String concatenation
          transformOrigin: currentX + "px " + currentY + "px", // String concatenation
        }}
      >
        {children}
      </div>
    </motion.div>
  );

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative overflow-hidden z-20 h-full w-full",
        "rounded-" + borderRadius, // String concatenation
        disabled && "cursor-not-allowed opacity-50",
        className
      )}
      onMouseEnter={function () {
        return !disabled && setIsHovering(true);
      }}
      onMouseLeave={function () {
        return !disabled && setIsHovering(false);
      }}
      onMouseMove={handleMouseMove}
    >
      {children}

      {isStatic ? (
        <div>{lensContent}</div>
      ) : (
        <AnimatePresence>
          {isHovering && !disabled && (
            <div>{lensContent}</div>
          )}
        </AnimatePresence>
      )}
    </div>
  );
};
```
--------------------------------------------------

### COMPONENT: magic-card
Category: Components
Description: Interactive card with pointer-tracking spotlight/projection effect and glassmorphic borders.
URL: https://lightswind.com/components/magic-card
Import: import { MagicCard } from '@/components/lightswind/magic-card';
Registry URL: https://lightswind.com/r/magic-card.json
Install Command: npx lightswind@latest add magic-card

Usage:
```tsx
import { MagicCard } from '@/components/lightswind/magic-card';

export function MagicCardDemo() {
  return (
    <MagicCard
        title="Magic Card"
        imageUrl="https://images.unsplash.com/photo-1517336714731-489689fd1ca4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, MouseEvent, useId } from "react";
import { cn } from "@/components/lib/utils";

interface MagicCardProps extends React.HTMLAttributes<HTMLDivElement> {
    imageUrl: string;
    title: string;
    icon?: React.ReactNode;
}

export const MagicCard = ({
    imageUrl,
    title,
    icon,
    className,
    ...props
}: MagicCardProps) => {
    const cardRef = useRef<HTMLDivElement>(null);
    const id = useId();
    // Sanitize ID for use in URL
    const filterId = `magic-card-blur-${id.replace(/:/g, '')}`;

    const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
        const card = cardRef.current;
        if (!card) return;

        const rect = card.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        const relativeX = e.clientX - centerX;
        const relativeY = e.clientY - centerY;

        // Normalize to -1 to 1 range
        const x = (relativeX / (rect.width / 2)).toFixed(3);
        const y = (relativeY / (rect.height / 2)).toFixed(3);

        card.style.setProperty('--pointer-x', x);
        card.style.setProperty('--pointer-y', y);
    };

    const handleMouseLeave = () => {
        const card = cardRef.current;
        if (!card) return;
        // Reset to default "off-screen" position, matching the default fallback
        card.style.setProperty('--pointer-x', '-10');
        card.style.setProperty('--pointer-y', '-10');
    };

    return (
        <article
            ref={cardRef}
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave}
            className={cn(
                "group relative aspect-[4/3] w-[300px] cursor-pointer rounded-xl outline outline-2 outline-neutral-200 dark:outline-neutral-800 bg-neutral-50 dark:bg-neutral-900 transition-all duration-300 active:scale-[0.99] active:translate-y-px [container-type:size]",
                className
            )}
            {...props}
        >
            {/* Inner Content Wrapper */}
            <div className="absolute inset-0 grid place-items-center gap-2 overflow-hidden rounded-xl [clip-path:inset(0_round_12px)]">

                {/* Magic Image Layer (Effect) */}
                <div
                    className="img-container absolute inset-0 grid place-items-center opacity-25 group-hover:opacity-100 transition-opacity duration-300"
                    style={{
                        transform: 'translateZ(0)',
                        filter: `url(#${filterId}) saturate(5) brightness(1.3) contrast(1.4)`,
                        translate: 'calc(var(--pointer-x, -10) * 50cqi) calc(var(--pointer-y, -10) * 50cqh)',
                        scale: '3.4',
                        willChange: 'transform, filter'
                    }}
                >
                    <img src={imageUrl} alt="" className="w-[100px] select-none" />
                </div>

                {/* Main Image */}
                <img src={imageUrl} alt="" className="relative z-[2] w-[100px] select-none" />

                {/* Title */}
                <h2 className="relative z-[4] m-0 text-base font-medium select-none text-neutral-900 dark:text-neutral-100">
                    {title}
                </h2>
            </div>

            {/* Border/Glass Effect */}
            <div
                className="pointer-events-none absolute inset-0 z-[2] rounded-xl border-[3px] border-transparent [transform:translateZ(0)] [clip-path:inset(0_round_12px)] backdrop-blur-sm backdrop-saturate-[4.2] backdrop-brightness-[2.5] backdrop-contrast-[2.5]"
                style={{
                    mask: 'linear-gradient(#fff 0 100%) border-box, linear-gradient(#fff 0 100%) padding-box',
                    maskComposite: 'exclude',
                    WebkitMaskComposite: 'xor', // Webkit fallback for exclude behavior
                }}
            />

            {/* SVG Filter Definition */}
            <svg className="absolute h-0 w-0 overflow-visible opacity-0 pointer-events-none">
                <defs>
                    <filter id={filterId} width="500%" height="500%">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="28" />
                    </filter>
                </defs>
            </svg>
        </article>
    );
};

```
--------------------------------------------------

### COMPONENT: magic-loader
Category: Components
Description: A mesmerizing particle-based loader with spinning effects and customizable colors. Perfect for loading states and adding visual appeal with smooth canvas animations.
URL: https://lightswind.com/components/magic-loader
Import: import MagicLoader from "@/components/lightswind/magic-loader"
Registry URL: https://lightswind.com/r/magic-loader.json
Install Command: npx lightswind@latest add magic-loader

Usage:
```tsx
import MagicLoader from "@/components/lightswind/magic-loader";

// Basic Usage
<MagicLoader />

// Custom Size and Speed
<MagicLoader 
  size={300} 
  speed={1.5} 
/>

// Fire Theme
<MagicLoader 
  size={250}
  particleCount={2}
  speed={1.2}
  hueRange={[0, 40]}
/>

// Ocean Theme
<MagicLoader
  size={200}
  speed={0.8}
  hueRange={[180, 220]}
/>

// Mobile Optimized
<MagicLoader
  size={150}
  particleCount={1}
  speed={0.7}
  className="md:hidden"
/>
```

Source Code:
```tsx
import React, { useEffect, useRef, useCallback } from 'react';
import { useInView } from "framer-motion";
import { cn } from '@/components/lib/utils';

interface Particle {
  radius: number;
  x: number;
  y: number;
  angle: number;
  speed: number;
  accel: number;
  decay: number;
  life: number;
}

interface MagicLoaderProps {
  size?: number;
  particleCount?: number;
  speed?: number;
  hueRange?: [number, number];
  className?: string;
}

const MagicLoader: React.FC<MagicLoaderProps> = ({
  size = 200,
  particleCount = 1,
  speed = 1,
  hueRange = [0, 360],
  className
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const animationRef = useRef<number>(undefined);
  const particlesRef = useRef<Particle[]>([]);
  const tickRef = useRef(0);
  const globalAngleRef = useRef(0);
  const globalRotationRef = useRef(0);

  const createParticle = useCallback((centerX: number, centerY: number, tick: number, minSize: number): Particle => {
    return {
      radius: 7,
      x: centerX + Math.cos(tick / 20) * minSize / 2,
      y: centerY + Math.sin(tick / 20) * minSize / 2,
      angle: globalRotationRef.current + globalAngleRef.current,
      speed: 0,
      accel: 0.01,
      decay: 0.01,
      life: 1
    };
  }, []);

  const stepParticle = useCallback((particle: Particle, index: number) => {
    particle.speed += particle.accel;
    particle.x += Math.cos(particle.angle) * particle.speed * speed;
    particle.y += Math.sin(particle.angle) * particle.speed * speed;
    particle.angle += Math.PI / 64;
    particle.accel *= 1.01;
    particle.life -= particle.decay;

    if (particle.life <= 0) {
      particlesRef.current.splice(index, 1);
    }
  }, [speed]);

  const drawParticle = useCallback((ctx: CanvasRenderingContext2D, particle: Particle, index: number, tick: number) => {
    const hue = hueRange[0] + ((tick + (particle.life * 120)) % (hueRange[1] - hueRange[0]));
    ctx.fillStyle = ctx.strokeStyle = `hsla(${hue}, 100%, 60%, ${particle.life})`;

    // Draw line to previous particle
    ctx.beginPath();
    if (particlesRef.current[index - 1]) {
      ctx.moveTo(particle.x, particle.y);
      ctx.lineTo(particlesRef.current[index - 1].x, particlesRef.current[index - 1].y);
    }
    ctx.stroke();

    // Draw main particle circle
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, Math.max(0.001, particle.life * particle.radius), 0, Math.PI * 2);
    ctx.fill();

    // Draw sparkle effects
    const sparkleSize = Math.random() * 1.25;
    const sparkleX = particle.x + ((Math.random() - 0.5) * 35) * particle.life;
    const sparkleY = particle.y + ((Math.random() - 0.5) * 35) * particle.life;
    ctx.fillRect(Math.floor(sparkleX), Math.floor(sparkleY), sparkleSize, sparkleSize);
  }, [hueRange]);

  const visibilityRef = useRef(true);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);

  useEffect(() => {
    visibilityRef.current = isInView;
  }, [isInView]);

  const animate = useCallback(() => {
    if (!visibilityRef.current) {
      animationRef.current = requestAnimationFrame(animate);
      return;
    }
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const rect = canvas.getBoundingClientRect();
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const minSize = Math.min(rect.width, rect.height) * 0.5;

    // Add new particles
    for (let i = 0; i < particleCount; i++) {
      particlesRef.current.push(createParticle(centerX, centerY, tickRef.current, minSize));
    }

    // Update particles
    particlesRef.current.forEach((particle, index) => {
      stepParticle(particle, index);
    });

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw particles
    particlesRef.current.forEach((particle, index) => {
      drawParticle(ctx, particle, index, tickRef.current);
    });

    // Update global rotation
    globalRotationRef.current += Math.PI / 6 * speed;
    globalAngleRef.current += Math.PI / 6 * speed;
    tickRef.current++;

    animationRef.current = requestAnimationFrame(animate);
  }, [createParticle, stepParticle, drawParticle, particleCount, speed]);

  const setupCanvas = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // Set canvas size
    const dpr = window.devicePixelRatio || 1;
    canvas.width = size * dpr;
    canvas.height = size * dpr;
    canvas.style.width = `${size}px`;
    canvas.style.height = `${size}px`;

    ctx.scale(dpr, dpr);
    ctx.globalCompositeOperation = 'lighter';

    // Reset animation state
    particlesRef.current = [];
    tickRef.current = 0;
    globalAngleRef.current = 0;
    globalRotationRef.current = 0;
  }, [size]);

  useEffect(() => {
    setupCanvas();
    animate();

    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [setupCanvas, animate]);

  return (
    <div ref={containerRef} className={cn("flex items-center justify-center", className)}>
      <canvas
        ref={canvasRef}
        className="max-w-full max-h-full"
        style={{
          width: size,
          height: size
        }}
      />
    </div>
  );
};

export default MagicLoader;
```
--------------------------------------------------

### COMPONENT: morphing-navigation
Category: Components
Description: A sophisticated navigation component that morphs from a full horizontal menu to a compact hamburger button on scroll. Features smooth animations, backdrop blur effects, and customizable themes perfect for modern web applications.
URL: https://lightswind.com/components/morphing-navigation
Import: import { MorphingNavigation } from "@/components/lightswind/morphing-navigation"
Registry URL: https://lightswind.com/r/morphing-navigation.json
Install Command: npx lightswind@latest add morphing-navigation

Usage:
```tsx
import { MorphingNavigation } from "@/components/lightswind/morphing-navigation";
import { Home, ShoppingBag, Info, HelpCircle } from "lucide-react";

// Basic usage
<MorphingNavigation
  links={[
    { id: 'home', label: 'Home', href: '#home' },
    { id: 'shop', label: 'Shop', href: '#shop' },
    { id: 'about', label: 'About', href: '#about' },
    { id: 'help', label: 'Help', href: '#help' }
  ]}
  onLinkClick={(link) => console.log('Clicked:', link)}
/>

// Advanced configuration with icons and custom styling
<MorphingNavigation
  links={[
    { id: 'home', label: 'Home', href: '#home', icon: <Home size={14} /> },
    { id: 'shop', label: 'Shop', href: '#shop', icon: <ShoppingBag size={14} /> },
    { id: 'about', label: 'About', href: '#about', icon: <Info size={14} /> },
    { id: 'help', label: 'Help', href: '#help', icon: <HelpCircle size={14} /> }
  ]}
  theme="custom"
  backgroundColor="rgba(59, 130, 246, 0.1)"
  textColor="#3b82f6"
  borderColor="rgba(59, 130, 246, 0.3)"
  scrollThreshold={150}
  animationDuration={1.5}
  enablePageBlur={true}
  onLinkClick={(link) => handleNavigation(link)}
  onMenuToggle={(isOpen) => console.log('Menu:', isOpen)}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/components/lib/utils";

export interface MorphingNavigationLink {
  id: string;
  label: string;
  href: string;
  icon?: React.ReactNode;
}

export interface MorphingNavigationProps {
  links: MorphingNavigationLink[];
  scrollThreshold?: number;
  enablePageBlur?: boolean;
  theme?: "dark" | "light" | "glass" | "custom";
  backgroundColor?: string;
  textColor?: string;
  borderColor?: string;
  initialTop?: number;
  compactTop?: number;
  animationDuration?: number;
  className?: string;
  onLinkClick?: (link: MorphingNavigationLink) => void;
  onMenuToggle?: (isOpen: boolean) => void;
  enableSmoothTransitions?: boolean;
  customHamburgerIcon?: React.ReactNode;
  disableAutoMorph?: boolean;
}

export const MorphingNavigation: React.FC<MorphingNavigationProps> = ({
  links,
  scrollThreshold = 100,
  enablePageBlur = true,
  theme = "glass",
  backgroundColor,
  textColor,
  borderColor,
  initialTop = 70,
  compactTop = 20,
  animationDuration = 1,
  className,
  onLinkClick,
  onMenuToggle,
  enableSmoothTransitions = true,
  customHamburgerIcon,
  disableAutoMorph = false,
}) => {
  const [isSticky, setIsSticky] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const navRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const getThemeStyles = useCallback(() => {
    switch (theme) {
      case "dark":
        return {
          nav: "bg-black/80 border-gray-800",
          text: "text-white",
          button: "bg-black/50 border-gray-700",
        };
      case "light":
        return {
          nav: "bg-white/80 border-gray-200",
          text: "text-gray-900",
          button: "bg-white/50 border-gray-300",
        };
      case "custom":
        return {
          nav: backgroundColor ? "" : "bg-white/5 border-white/10",
          text: textColor ? "" : "text-white",
          button: "bg-black/30 border-white/10",
        };
      case "glass":
      default:
        return {
          nav: "bg-white/5 border-white/10",
          text: "text-foreground",
          button: "bg-black/30 border-white/10",
        };
    }
  }, [theme, backgroundColor, textColor]);

  const themeStyles = getThemeStyles();

  useEffect(() => {
    if (disableAutoMorph && !isMobile) return;
    const handleScroll = () => {
      if (isMobile) {
        setIsSticky(true);
        setIsMenuOpen(false);
      } else {
        setIsSticky(window.scrollY >= scrollThreshold);
        setIsMenuOpen(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [scrollThreshold, disableAutoMorph, isMobile]);

  const handleMenuToggle = () => {
    const open = !isMenuOpen;
    setIsMenuOpen(open);
    if (isMobile && open) {
      setIsSticky(true);
    } else if (isMobile && !open) {
      setIsSticky(window.scrollY >= scrollThreshold);
    } else {
      setIsSticky(false);
    }
    onMenuToggle?.(open);
  };

  const handleLinkClick = (link: MorphingNavigationLink, e: React.MouseEvent) => {
    e.preventDefault();
    setIsMenuOpen(false);
    onLinkClick?.(link);
    if (enableSmoothTransitions) {
      const target = document.querySelector(link.href);
      if (target) {
        target.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }
  };

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (navRef.current && !navRef.current.contains(e.target as Node) && isMenuOpen) {
        setIsMenuOpen(false);
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => document.removeEventListener("click", handleClickOutside);
  }, [isMenuOpen]);

  const customStyles = {
    backgroundColor: theme === "custom" ? backgroundColor : undefined,
    color: theme === "custom" ? textColor : undefined,
    borderColor: theme === "custom" ? borderColor : undefined,
  };

  return (
    <>
      <AnimatePresence>
        {enablePageBlur && isMenuOpen && (
          <motion.div
            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          />
        )}
      </AnimatePresence>

      <motion.header
        className={cn("fixed top-4 z-50 w-full", className)}
        initial={false}
        animate={{
          top: isMobile ? compactTop : isSticky ? compactTop : initialTop,
        }}
        transition={{ duration: animationDuration }}
      >
        <motion.nav
          ref={navRef}
          className={cn(
            "flex justify-center items-center mx-auto backdrop-blur-md border fixed",
            themeStyles.nav,
            themeStyles.text,
            {
              "left-1/2 -translate-x-1/2": !isMobile && !isSticky,
              "left-0 right-0": isMobile || isSticky,
              "sm:w-[70px] sm:h-[70px] sm:rounded-full": isMobile,
            }
          )}
          animate={{
            height: isMobile ? 70 : isSticky ? 90 : 100,
            width: isMobile ? 70 : isSticky ? 90 : 500,
            borderRadius: 9999,
          }}
          transition={{ duration: animationDuration }}
          style={{ top: 0, ...customStyles }}
        >
          <AnimatePresence>
            {!isMobile && !isSticky &&
              links.map((link, i) => (
                <motion.a
                  key={link.id}
                  href={link.href}
                  onClick={(e) => handleLinkClick(link, e)}
                  initial={{ opacity: 0, scale: 0.5 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0 }}
                  transition={{ delay: i * 0.1 }}
                  className="px-5 py-2.5 text-sm font-bold lowercase tracking-wide"
                >
                  {link.icon && <span className="mr-2 inline-block">{link.icon}</span>}
                  {link.label}
                </motion.a>
              ))}
          </AnimatePresence>

          <motion.button
            onClick={handleMenuToggle}
            className={cn(
              "absolute w-[60px] h-[60px] rounded-full outline-none border cursor-pointer",
              themeStyles.button,
              {
                hidden: !isSticky && !isMobile,
                block: isMobile || isSticky,
              }
            )}
            animate={{ scale: isMobile || isSticky ? 1 : 0 }}
            transition={{ delay: isMobile || isSticky ? 0.2 : 0 }}
          >
            {customHamburgerIcon || (
              <div className="flex flex-col items-center justify-center h-full">
                <span className="block w-4 h-0.5 bg-current my-1"></span>
                <span className="block w-4 h-0.5 bg-current my-1"></span>
                <span className="block w-4 h-0.5 bg-current my-1"></span>
              </div>
            )}
          </motion.button>
        </motion.nav>
      </motion.header>

      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            className="fixed inset-0 z-40 flex items-center justify-center"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.3 }}
          >
            <motion.div
              className={cn(
                "p-8 rounded-2xl backdrop-blur-md border w-11/12 max-w-sm",
                themeStyles.nav,
                themeStyles.text
              )}
              style={customStyles}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <div className="flex flex-col space-y-4">
                {links.map((link) => (
                  <a
                    key={link.id}
                    href={link.href}
                    onClick={(e) => handleLinkClick(link, e)}
                    className="font-bold text-lg tracking-wide lowercase hover:scale-105 transition-transform"
                  >
                    {link.icon && <span className="inline-block mr-3">{link.icon}</span>}
                    {link.label}
                  </a>
                ))}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

export default MorphingNavigation;

```
--------------------------------------------------

### COMPONENT: orbit-card
Category: Components
Description: A visually enhanced card component with a pulsing orbit-style glowing background animation. Built using React, Tailwind CSS, and CSS-in-JSX keyframes. Ideal for showcasing premium features, callouts, or spotlight sections.
URL: https://lightswind.com/components/orbit-card
Import: import OrbitCard from '@/components/lightswind/orbit-card';
Registry URL: https://lightswind.com/r/orbit-card.json
Install Command: npx lightswind@latest add orbit-card

Usage:
```tsx
import OrbitCard from '@/components/lightswind/orbit-card';
import { Crown } from 'lucide-react';

<OrbitCard>
  <div className="flex flex-col items-center text-center">
    <Crown className="w-8 h-8 text-yellow-500 mb-3" />
    <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
      Unlock Premium Access
    </h2>
    <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
      Gain priority access to new features, exclusive tools, and member-only resources.
    </p>
    <button className="px-4 py-2 rounded-lg bg-primarylw text-white hover:bg-primarylw-2 transition duration-300 text-sm font-medium">
      Upgrade Now
    </button>
  </div>
</OrbitCard>;
```

Source Code:
```tsx
"use client";

import React from "react";

type OrbitCardProps = {
  children: React.ReactNode;
  className?: string;
};

const OrbitCard: React.FC<OrbitCardProps> = ({ children, className }) => {
  return (
    <div className={`relative ${className} rounded-xl`}>
      {/* Glowing shadow background */}
      <div className="absolute inset-0 z-0 flex items-center justify-center rounded-xl bg-background">
        <div className="absolute h-full w-full animate-orbit-glow rounded-xl">
          <div className="h-full w-full rounded-xl bg-transparent shadow-[0_0_30px_10px_rgba(59,130,246,0.5)]"></div>
        </div>
      </div>

      {/* Card Content */}
      <div className="relative z-10 rounded-xl bg-background p-6 ">
        {children}
      </div>

      {/* Keyframes for glowing effect */}
      <style jsx>{`
        @keyframes orbit-glow {
          0% {
            transform: scale(1);
            box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
          }
          50% {
            transform: scale(1.05);
            box-shadow: 0 0 40px 20px rgba(59, 130, 246, 0.3);
          }
          100% {
            transform: scale(1);
            box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
          }
        }
        .animate-orbit-glow {
          animation: orbit-glow 4s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
};

export default OrbitCard;

```
--------------------------------------------------

### COMPONENT: scroll-cards
Category: Components
Description: A high-performance scroll-driven stacked cards component powered by GSAP and ScrollTrigger. As the user scrolls, current cards scale down and rotate elegantly while subsequent cards slide in from any direction (bottom, top, left, or right). Ideal for showcase galleries, portfolio highlights, and interactive storyboards.
URL: https://lightswind.com/components/scroll-cards
Import: import { ScrollCards } from "@/components/lightswind/scroll-cards"
Registry URL: https://lightswind.com/r/scroll-cards.json
Install Command: npx lightswind@latest add scroll-cards

Usage:
```tsx
import { ScrollCards } from "@/components/lightswind/scroll-cards";

const cards = [
  { id: 1, image: "https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=2940" },
  { id: 2, image: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&w=2940" },
  { id: 3, image: "https://images.unsplash.com/photo-1682687982185-531d09ec56fc?q=80&w=2940" },
];

export function Demo() {
  return (
    <div className="w-full min-h-[150vh]">
      <ScrollCards cards={cards} direction="bottom" cardScale={0.7} cardRotation={5} />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef } from "react";
import { cn } from "@/components/lib/utils";

interface CardData {
  id: number | string;
  image: string;
  alt?: string;
}

export interface ScrollCardsProps {
  cards: CardData[];
  /**
   * Defines the direction from which the next card enters.
   * @default "bottom"
   */
  direction?: "bottom" | "top" | "left" | "right";
  className?: string;
  containerClassName?: string;
  imageClassName?: string;
  /**
   * The scale the current card scales down to.
   * @default 0.7
   */
  cardScale?: number;
  /**
   * The rotation the current card rotates to.
   * @default 5
   */
  cardRotation?: number;
}

export function ScrollCards({
  cards,
  direction = "bottom",
  className,
  containerClassName,
  imageClassName,
  cardScale = 0.7,
  cardRotation = 5,
}: ScrollCardsProps) {
  const container = useRef<HTMLDivElement>(null);
  const imageRefs = useRef<(HTMLImageElement | null)[]>([]);

  useGSAP(
    () => {
      gsap.registerPlugin(ScrollTrigger);

      const imageElements = imageRefs.current.filter(Boolean);
      const totalCards = imageElements.length;

      if (!imageElements[0]) return;

      gsap.set(imageElements[0], { x: "0%", y: "0%", scale: 1, rotation: 0 });

      // Determine initial offset based on direction
      const getInitialOffset = () => {
        switch (direction) {
          case "top":
            return { y: "-100%", x: "0%" };
          case "left":
            return { x: "-100%", y: "0%" };
          case "right":
            return { x: "100%", y: "0%" };
          case "bottom":
          default:
            return { y: "100%", x: "0%" };
        }
      };

      for (let i = 1; i < totalCards; i++) {
        gsap.set(imageElements[i], { ...getInitialOffset(), scale: 1, rotation: 0 });
      }

      const scrollTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: container.current,
          start: "top top",
          end: `+=${window.innerHeight * totalCards}`,
          pin: true,
          scrub: 1,
          pinSpacing: true,
          anticipatePin: 1,
        },
      });

      for (let i = 0; i < totalCards - 1; i++) {
        const currentImage = imageElements[i];
        const nextImage = imageElements[i + 1];
        const position = i;

        if (!currentImage || !nextImage) continue;

        scrollTimeline.to(
          currentImage,
          {
            scale: cardScale,
            rotation: cardRotation,
            duration: 1,
            ease: "power2.inOut",
          },
          position,
        );

        scrollTimeline.to(
          nextImage,
          {
            x: "0%",
            y: "0%",
            duration: 1,
            ease: "power2.inOut",
          },
          position,
        );
      }

      const resizeObserver = new ResizeObserver(() => {
        ScrollTrigger.refresh();
      });

      if (container.current) {
        resizeObserver.observe(container.current);
      }

      return () => {
        resizeObserver.disconnect();
        scrollTimeline.kill();
      };
    },
    { scope: container, dependencies: [direction, cards.length, cardScale, cardRotation] }
  );

  return (
    <div className={cn("relative w-full h-[70vh]", className)} ref={container}>
      <div className="lightswind-scroll-cards-trigger relative flex h-[70vh] w-full items-center justify-center overflow-hidden p-4 lg:p-8">
        <div
          className={cn(
            "relative w-[95%] sm:w-[90%] lg:w-[85%] max-w-[1400px] aspect-[4/3] md:aspect-video overflow-hidden rounded-3xl shadow-xl",
            containerClassName
          )}
        >
          {cards.map((card, i) => (
            <img
              key={card.id}
              src={card.image}
              alt={card.alt || `Scroll card gallery image ${i}`}
              className={cn(
                "absolute top-0 left-0 h-full w-full object-cover rounded-3xl will-change-transform shadow-2xl",
                imageClassName
              )}
              ref={(el) => {
                imageRefs.current[i] = el;
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: scroll-paragraph
Category: Components
Description: A professional scroll-triggered typography component that reveals text paragraphs line-by-line while pinning the parent section, providing smooth GSAP-based scroll engagement like tracking websites.
URL: https://lightswind.com/components/scroll-paragraph
Import: import { ScrollPara } from "@/components/lightswind/scroll-para"
Registry URL: https://lightswind.com/r/scroll-paragraph.json
Install Command: npx lightswind@latest add scroll-paragraph

Usage:
```tsx
import { ScrollPara } from "@/components/lightswind/scroll-para";

const textLines = [
  "In an era of digital noise",
  "Creating experiences that matter",
  "Requires more than just beauty"
];

export function Demo() {
  return (
    <div className="w-full">
      <ScrollPara 
        lines={textLines} 
        blur={12}
        direction="bottom" 
        pinSpacing={true}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef } from "react";
import { cn } from "@/components/lib/utils";

export interface ScrollPara3DProps {
  /**
   * The text lines to reveal in 3D space.
   */
  lines: string[];
  className?: string;
  containerClassName?: string;
  textClassName?: string;
  /**
   * The perspective depth distance in pixels.
   * Less = more extreme 3D depth/stretch.
   * @default 600
   */
  perspective?: number;
  /**
   * The tilt angle of the text floor plane (rotateX degrees).
   * @default 50
   */
  angle?: number;
  /**
   * How much extra scrolling space to pin for the animation.
   * Multiplier based on content height.
   * @default 1.2
   */
  scrubSpeed?: number;
  /**
   * Font size in rem for each text line.
   * @default 3.5
   */
  fontSize?: number;
}

export function ScrollPara3D({
  lines,
  className,
  containerClassName,
  textClassName,
  perspective = 600,
  angle = 50,
  scrubSpeed = 1.2,
  fontSize = 3.5,
}: ScrollPara3DProps) {
  const sectionRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      gsap.registerPlugin(ScrollTrigger);
      if (!contentRef.current || !sectionRef.current) return;

      const contentHeight = contentRef.current.offsetHeight;
      const windowHeight = window.innerHeight;

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top top",
          end: `+=${contentHeight * scrubSpeed}`,
          pin: true,
          scrub: 1,
          anticipatePin: 1,
        },
      });

      // Start just below so text is immediately visible on scroll
      tl.fromTo(
        contentRef.current,
        { y: windowHeight * 0.3 },
        { y: -contentHeight, ease: "none" }
      );

      return () => { tl.kill(); };
    },
    { dependencies: [lines.length, perspective, angle, scrubSpeed, fontSize] }
  );

  return (
    <div
      ref={sectionRef}
      className={cn(
        "relative w-full h-screen overflow-hidden bg-background",
        className
      )}
      style={{ perspective: `${perspective}px` }}
    >
      {/* Top/bottom fade overlay */}
      <div
        className="absolute inset-0 z-10 pointer-events-none"
        style={{
          background:
            "linear-gradient(to bottom, var(--background) 0%, transparent 15%, transparent 85%, var(--background) 100%)",
        }}
      />

      {/*
        Tilted floor plane.
        We use transformOrigin "center bottom" so the rotation pivots
        at the bottom center of the plane → text crawls toward viewer naturally.
        Width is 100% of the section.
      */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
          transformStyle: "preserve-3d",
          transform: `rotateX(${angle}deg)`,
          transformOrigin: "center bottom",
        }}
      >
        {/* Scrolling content strip */}
        <div
          ref={contentRef}
          className={cn(
            "w-full flex flex-col items-center justify-start",
            containerClassName
          )}
          style={{ willChange: "transform" }}
        >
          {lines.map((line, i) => (
            <p
              key={i}
              className={cn(
                "w-full text-center font-black uppercase text-primary tracking-tighter leading-tight",
                textClassName
              )}
              style={{ fontSize: `${fontSize}rem` }}
            >
              {line}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: scroll-list
Category: Components
Description: An animated vertical list that highlights the centered item using Framer Motion.
URL: https://lightswind.com/components/scroll-list
Import: import ScrollList from '@/components/lightswind/scroll-list';
Registry URL: https://lightswind.com/r/scroll-list.json
Install Command: npx lightswind@latest add scroll-list

Usage:
```tsx
import ScrollList from '@/components/lightswind/scroll-list';

<ScrollList
  data={yourDataArray}
  renderItem={(item, index) => (
    <div className="p-4 bg-white rounded-xl shadow-md">
      <h3 className="text-lg font-semibold">{item.title}</h3>
      <p className="text-sm text-gray-600">{item.description}</p>
    </div>
  )}
  itemHeight={160}
/>
```

Source Code:
```tsx
import React, { useRef, useEffect, useState } from "react";
import { motion, useScroll, Variants } from "framer-motion";

// Define the props for the ScrollList component
interface ScrollListProps<T> {
  data: T[]; // The array of data items to display
  renderItem: (item: T, index: number) => React.ReactNode; // Function to render each item's content
  itemHeight?: number; // Optional: Fixed height for each item in pixels. Defaults to 155px.
}

const ScrollList = <T,>({
  data,
  renderItem,
  itemHeight = 155, // Default item height
}: ScrollListProps<T>) => {
  // useRef to get a reference to the scrollable div element
  const listRef = useRef<HTMLDivElement>(null);
  // useState to keep track of the index of the currently focused item
  const [focusedIndex, setFocusedIndex] = useState<number>(0);

  // useScroll hook from Framer Motion to track scroll progress (can be used for additional animations)
  const { scrollYProgress } = useScroll({ container: listRef });

  useEffect(() => {
    const updateFocusedItem = () => {
      if (!listRef.current) return;

      const container = listRef.current;
      // Get all direct children (the motion.div items)
      const children = Array.from(container.children) as HTMLDivElement[];
      const scrollTop = container.scrollTop; // Current vertical scroll position
      const containerCenter = container.clientHeight / 2; // Vertical center of the container

      let closestItemIndex = 0;
      let minDistanceToCenter = Infinity; // Initialize with a very large number

      // Iterate over each child item to find the one closest to the center
      children.forEach((child, index) => {
        const itemTop = child.offsetTop; // Top position of the item relative to its parent
        const actualItemHeight = child.offsetHeight; // Actual rendered height of the item
        const itemCenter = itemTop + actualItemHeight / 2; // Vertical center of the item

        // Calculate the distance from the item's center to the container's center, adjusted for scroll
        const distanceToCenter = Math.abs(
          itemCenter - scrollTop - containerCenter
        );

        // If this item is closer to the center than the previous closest
        if (distanceToCenter < minDistanceToCenter) {
          minDistanceToCenter = distanceToCenter;
          closestItemIndex = index;
        }
      });

      // Update the focused index state
      setFocusedIndex(closestItemIndex);
    };

    // Call immediately on mount to set initial focused item
    updateFocusedItem();

    // Add scroll event listener to update focused item on scroll
    const listElement = listRef.current;
    if (listElement) {
      listElement.addEventListener("scroll", updateFocusedItem);
    }

    // Cleanup function: remove the event listener when the component unmounts
    return () => {
      if (listElement) {
        listElement.removeEventListener("scroll", updateFocusedItem);
      }
    };
  }, [data, itemHeight]); // Dependencies: Re-run effect if data or itemHeight changes

  // Framer Motion Variants for defining animation states for each item
  const itemVariants: Variants = {
    hidden: {
      opacity: 0,
      scale: 0.7,
      transition: { duration: 0.35, ease: "easeOut" },
    },
    focused: {
      opacity: 1,
      scale: 1,
      zIndex: 10,
      transition: { duration: 0.35, ease: "easeOut" },
    },
    next: {
      opacity: 1,
      scale: 0.95,
      zIndex: 5,
      transition: { duration: 0.35, ease: "easeOut" },
    },
    visible: {
      opacity: 1,
      scale: 1,
      transition: { duration: 0.35, ease: "easeOut" },
    },
  };

  return (
    <div
      ref={listRef}
      // Tailwind CSS classes for styling: hidden scrollbar, centered horizontally, full width
      className="scroll-list__wrp scrollbar-hidden mx-auto w-full"
      // Inline style for fixed height and scrollability of the main container
      style={{ height: "600px", overflowY: "auto" }}
    >
      {data.map((item, index) => {
        let variant = "hidden"; // Default variant

        // Determine the animation variant based on the item's position relative to the focused item
        if (index === focusedIndex) {
          variant = "focused"; // The currently focused item
        } else if (index === focusedIndex + 1) {
          variant = "next"; // The item immediately following the focused one
        } else {
          // Items within a certain range (2 items above/below) of the focused item are visible
          const isWithinVisibleRange = Math.abs(index - focusedIndex) <= 2;
          if (isWithinVisibleRange) {
            variant = "visible";
          }
        }

        return (
          <motion.div
            key={index} // Unique key for React list rendering
            // !!! IMPORTANT CHANGE HERE !!!
            // Use a fixed width Tailwind class, e.g., 'w-96' (384px) or 'w-[350px]' for a custom pixel value.
            // Using 'w-full' will make them take the full width of the parent, which is 'w-full' from scroll-list__wrp.
            className="scroll-list__item mx-auto max-w-3xl py-2" // Added py-2 padding for spacing
            variants={itemVariants} // Apply defined animation variants
            initial="hidden" // Initial animation state
            animate={variant} // Animate to this variant based on scroll position
            // Set the height of each individual item.
            style={{
              height: itemHeight ? `${itemHeight}px` : "auto",
              boxSizing: "border-box", // Ensure padding is included in height calculations
            }}
          >
            {renderItem(item, index)}
          </motion.div>
        );
      })}
    </div>
  );
};

export default ScrollList;
```
--------------------------------------------------

### COMPONENT: scroll-timeline
Category: Components
Description: An animated timeline component that reveals entries as the user scrolls down the page.
URL: https://lightswind.com/components/scroll-timeline
Import: import { ScrollTimeline } from "@/components/lightswind/scroll-timeline"
Registry URL: https://lightswind.com/r/scroll-timeline.json
Install Command: npx lightswind@latest add scroll-timeline

Usage:
```tsx
import { ScrollTimeline } from "@/components/lightswind/scroll-timeline"

// Define your timeline events
const events = [
  {
    year: "2023",
    title: "Major Achievement",
    subtitle: "Organization Name",
    description: "Description of the achievement."
  },
  {
    year: "2022",
    title: "Important Milestone",
    subtitle: "Organization Name",
    description: "Details about the milestone."
  },
]

export function ScrollTimelineExample() {
  return (
    <ScrollTimeline 
      events={events}
      title="My Journey"
      subtitle="Scroll to explore the timeline"
      progressIndicator={true}
      cardAlignment="alternating"
      revealAnimation="fade"
    />
  )
}
```

Source Code:
```tsx
import React, { useState, useEffect, useRef } from "react";
import { motion, useScroll, useTransform, useSpring } from "framer-motion";
import { cn } from "@/components/lib/utils";
import { Card, CardContent } from "./card";
import { Calendar } from "lucide-react";

export interface TimelineEvent {
  id?: string;
  year: string;
  title: string;
  subtitle?: string;
  description: string;
  icon?: React.ReactNode;
  color?: string;
}

export interface ScrollTimelineProps {
  events: TimelineEvent[];
  title?: string;
  subtitle?: string;
  animationOrder?: "sequential" | "staggered" | "simultaneous";
  cardAlignment?: "alternating" | "left" | "right";
  lineColor?: string;
  activeColor?: string;
  progressIndicator?: boolean;
  cardVariant?: "default" | "elevated" | "outlined" | "filled";
  cardEffect?: "none" | "glow" | "shadow" | "bounce";
  parallaxIntensity?: number;
  progressLineWidth?: number;
  progressLineCap?: "round" | "square";
  dateFormat?: "text" | "badge";
  className?: string;
  revealAnimation?: "fade" | "slide" | "scale" | "flip" | "none";
  connectorStyle?: "dots" | "line" | "dashed";
  perspective?: boolean;
  darkMode?: boolean;
  smoothScroll?: boolean;
}

const DEFAULT_EVENTS: TimelineEvent[] = [
  {
    year: "2023",
    title: "Major Achievement",
    subtitle: "Organization Name",
    description:
      "Description of the achievement or milestone reached during this time period.",
  },
  {
    year: "2022",
    title: "Important Milestone",
    subtitle: "Organization Name",
    description: "Details about this significant milestone and its impact.",
  },
  {
    year: "2021",
    title: "Key Event",
    subtitle: "Organization Name",
    description: "Information about this key event in the timeline.",
  },
];

export const ScrollTimeline = ({
  events = DEFAULT_EVENTS,
  title = "Timeline",
  subtitle = "Scroll to explore the journey",
  animationOrder = "sequential",
  cardAlignment = "alternating",
  lineColor = "bg-primary/30",
  activeColor = "bg-primary",
  progressIndicator = true,
  cardVariant = "default",
  cardEffect = "none",
  parallaxIntensity = 0.2,
  progressLineWidth = 2,
  progressLineCap = "round",
  dateFormat = "badge",
  revealAnimation = "fade",
  className = "",
  connectorStyle = "line",
  perspective = false,
  darkMode = false,
  smoothScroll = true,
}: ScrollTimelineProps) => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(-1);
  const timelineRefs = useRef<(HTMLDivElement | null)[]>([]);

  const { scrollYProgress } = useScroll({
    target: scrollRef,
    offset: ["start start", "end end"],
  });

  const smoothProgress = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  const progressHeight = useTransform(smoothProgress, [0, 1], ["0%", "100%"]);

  useEffect(() => {
    const unsubscribe = scrollYProgress.onChange((v) => {
      const newIndex = Math.floor(v * events.length);
      if (
        newIndex !== activeIndex &&
        newIndex >= 0 &&
        newIndex < events.length
      ) {
        setActiveIndex(newIndex);
      }
    });
    return () => unsubscribe();
  }, [scrollYProgress, events.length, activeIndex]);

  const getCardVariants = (index: number) => {
    const baseDelay =
      animationOrder === "simultaneous"
        ? 0
        : animationOrder === "staggered"
        ? index * 0.2
        : index * 0.3;

    const initialStates = {
      fade: { opacity: 0, y: 20 },
      slide: {
        x:
          cardAlignment === "left"
            ? -100
            : cardAlignment === "right"
            ? 100
            : index % 2 === 0
            ? -100
            : 100,
        opacity: 0,
      },
      scale: { scale: 0.8, opacity: 0 },
      flip: { rotateY: 90, opacity: 0 },
      none: { opacity: 1 },
    };

    return {
      initial: initialStates[revealAnimation],
      whileInView: {
        opacity: 1,
        y: 0,
        x: 0,
        scale: 1,
        rotateY: 0,
        transition: {
          duration: 0.7,
          delay: baseDelay,
          ease: [0.25, 0.1, 0.25, 1.0] as [number, number, number, number],
        },
      },
      viewport: { once: false, margin: "-100px" },
    };
  };

  const getConnectorClasses = () => {
    const baseClasses = cn(
      "absolute left-1/2 transform -translate-x-1/2",
      lineColor
    );
    const widthStyle = `w-[${progressLineWidth}px]`;
    switch (connectorStyle) {
      case "dots":
        return cn(baseClasses, "w-1 rounded-full");
      case "dashed":
        return cn(
          baseClasses,
          widthStyle,
          `[mask-image:linear-gradient(to_bottom,black_33%,transparent_33%,transparent_66%,black_66%)] [mask-size:1px_12px]`
        );
      case "line":
      default:
        return cn(baseClasses, widthStyle);
    }
  };

  const getCardClasses = (index: number) => {
    const baseClasses = "relative z-30 rounded-lg transition-all duration-300";
    const variantClasses = {
      default: "bg-card border shadow-sm",
      elevated: "bg-card border border-border/40 shadow-md",
      outlined: "bg-card/50 backdrop-blur border-2 border-primary/20",
      filled: "bg-primary/10 border border-primary/30",
    };
    const effectClasses = {
      none: "",
      glow: "hover:shadow-[0_0_15px_rgba(var(--primary-rgb)/0.5)]",
      shadow: "hover:shadow-lg hover:-translate-y-1",
      bounce: "hover:scale-[1.03] hover:shadow-md active:scale-[0.97]",
    };
    const alignmentClassesDesktop =
      cardAlignment === "alternating"
        ? index % 2 === 0
          ? "lg:mr-[calc(50%+20px)]"
          : "lg:ml-[calc(50%+20px)]"
        : cardAlignment === "left"
        ? "lg:mr-auto lg:ml-0"
        : "lg:ml-auto lg:mr-0";
    const perspectiveClass = perspective
      ? "transform transition-transform hover:rotate-y-1 hover:rotate-x-1"
      : "";

    return cn(
      baseClasses,
      variantClasses[cardVariant],
      effectClasses[cardEffect],
      alignmentClassesDesktop,
      "w-full lg:w-[calc(50%-40px)]"
    );
  };

  return (
    <div
      ref={scrollRef}
      className={cn(
        "relative min-h-screen w-full overflow-hidden",
        darkMode ? "bg-background text-foreground" : "",
        className
      )}
    >
      <div className="text-center py-16 px-4">
        <h2 className="text-3xl md:text-5xl font-bold mb-4">{title}</h2>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          {subtitle}
        </p>
      </div>

      <div className="relative max-w-6xl mx-auto px-4 pb-24">
        <div className="relative mx-auto">
          <div
            className={cn(getConnectorClasses(), "h-full absolute top-0 z-10")}
          ></div>

          {/* === MODIFICATION START === */}
          {/* Enhanced Progress Indicator with Traveling Glow */}
          {progressIndicator && (
            <>
              {/* The main filled progress line */}
              <motion.div
                className="absolute top-0 z-10"
                style={{
                  height: progressHeight,
                  width: progressLineWidth,
                  left: "50%",
                  transform: "translateX(-50%)",
                  borderRadius:
                    progressLineCap === "round" ? "9999px" : "0px",
                  background: `linear-gradient(to bottom, #22d3ee, #6366f1, #a855f7)`,
                  // Enhanced shadow for a constant glow effect along the path
                  boxShadow: `
                    0 0 15px rgba(99,102,241,0.5),
                    0 0 25px rgba(168,85,247,0.3)
                  `,
                }}
              />
              {/* The traveling glow "comet" at the head of the line */}
              <motion.div
                className="absolute z-20"
                style={{
                  top: progressHeight,
                  left: "50%",
                  translateX: "-50%",
                  translateY: "-50%", // Center the comet on the line's end point
                }}
              >
                <motion.div
                  className="w-5 h-5 rounded-full" // Size of the comet core
                  style={{
                    background:
                      "radial-gradient(circle, rgba(168,85,247,0.8) 0%, rgba(99,102,241,0.5) 40%, rgba(34,211,238,0) 70%)",
                    // Intense, layered glow effect for the comet
                    boxShadow: `
                      0 0 15px 4px rgba(168, 85, 247, 0.6),
                      0 0 25px 8px rgba(99, 102, 241, 0.4),
                      0 0 40px 15px rgba(34, 211, 238, 0.2)
                    `,
                  }}
                  animate={{
                    scale: [1, 1.3, 1],
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                />
              </motion.div>
            </>
          )}
          {/* === MODIFICATION END === */}

          <div className="relative z-20">
            {events.map((event, index) => {
              const yOffset = useTransform(
                smoothProgress,
                [0, 1],
                [parallaxIntensity * 100, -parallaxIntensity * 100]
              );
              return (
                <div
                  key={event.id || index}
                  ref={(el) => {
                    timelineRefs.current[index] = el;
                  }}
                  className={cn(
                    "relative flex items-center mb-20 py-4",
                    "flex-col lg:flex-row",
                    cardAlignment === "alternating"
                      ? index % 2 === 0
                        ? "lg:justify-start"
                        : "lg:flex-row-reverse lg:justify-start"
                      : cardAlignment === "left"
                      ? "lg:justify-start"
                      : "lg:flex-row-reverse lg:justify-start"
                  )}
                >
                  <div
                    className={cn(
                      "absolute top-1/2 transform -translate-y-1/2 z-30",
                      "left-1/2 -translate-x-1/2"
                    )}
                  >
                    <motion.div
                      className={cn(
                        "w-6 h-6 rounded-full border-4 bg-background flex items-center justify-center",
                        index <= activeIndex
                          ? "border-primary"
                          : "border bg-card"
                      )}
                      animate={
                        index <= activeIndex
                          ? {
                              scale: [1, 1.3, 1],
                              boxShadow: [
                                "0 0 0px rgba(99,102,241,0)",
                                "0 0 12px rgba(99,102,241,0.6)",
                                "0 0 0px rgba(99,102,241,0)",
                              ],
                            }
                          : {}
                      }
                      transition={{
                        duration: 0.8,
                        repeat: Infinity,
                        repeatDelay: 4,
                        ease: "easeInOut",
                      }}
                    />
                  </div>
                  <motion.div
                    className={cn(
                      getCardClasses(index),
                      "mt-12 lg:mt-0"
                    )}
                    variants={getCardVariants(index)}
                    initial="initial"
                    whileInView="whileInView"
                    viewport={{ once: false, margin: "-100px" }}
                    style={parallaxIntensity > 0 ? { y: yOffset } : undefined}
                  >
                    <Card className="bg-background border">
                      <CardContent className="p-6">
                        {dateFormat === "badge" ? (
                          <div className="flex items-center mb-2">
                            {event.icon || (
                              <Calendar className="h-4 w-4 mr-2 text-primary" />
                            )}
                            <span
                              className={cn(
                                "text-sm font-bold",
                                event.color
                                  ? `text-${event.color}`
                                  : "text-primary"
                              )}
                            >
                              {event.year}
                            </span>
                          </div>
                        ) : (
                          <p className="text-lg font-bold text-primary mb-2">
                            {event.year}
                          </p>
                        )}
                        <h3 className="text-xl font-bold mb-1">
                          {event.title}
                        </h3>
                        {event.subtitle && (
                          <p className="text-muted-foreground font-medium mb-2">
                            {event.subtitle}
                          </p>
                        )}
                        <p className="text-muted-foreground">
                          {event.description}
                        </p>
                      </CardContent>
                    </Card>
                  </motion.div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

```
--------------------------------------------------

### COMPONENT: seasonal-hover-cards
Category: Components
Description: A set of cards that change their appearance based on the current season.
URL: https://lightswind.com/components/seasonal-hover-cards
Import: import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards"
Registry URL: https://lightswind.com/r/seasonal-hover-cards.json
Install Command: npx lightswind@latest add seasonal-hover-cards

Usage:
```tsx
import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards";

export function SeasonalHoverCardsDemo() {
  return <SeasonalHoverCards />;
}
```

Source Code:
```tsx

import React from 'react';
import { cn } from "@/components/lib/utils";

export interface SeasonCardProps {
  title: string;
  subtitle: string;
  description: string;
  imageSrc: string;
  imageAlt?: string;
  className?: string;
}

interface SeasonalHoverCardsProps {
  cards: SeasonCardProps[];
  className?: string;
}

const SeasonCard = ({
  title,
  subtitle,
  description,
  imageSrc,
  imageAlt,
  className,
}: SeasonCardProps) => {
  return (
    <div
      className={cn(
        "group relative flex flex-col justify-end p-6 w-full md:w-1/3 h-[350px] lg:h-[450px] bg-black rounded-lg overflow-hidden shadow-lg transition-all duration-500 hover:w-2/3",
        className
      )}
    >
      <img
        src={imageSrc}
        className="absolute inset-0 w-full h-full object-cover object-center"
        alt={imageAlt || title}
      />
      <div className="absolute inset-0 bg-black bg-opacity-60"></div>
      <div className="relative md:absolute md:bottom-20 z-10 space-y-2">
        <h2 className="text-xl font-bold text-white">{title}</h2>
        <p className="text-sm text-gray-300">{subtitle}</p>
      </div>
      <div className="mt-4 transform translate-y-6 opacity-0 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
        <p className="text-lg text-white">{description}</p>
      </div>
    </div>
  );
};

export function SeasonalHoverCards({
  cards,
  className,
}: SeasonalHoverCardsProps) {
  return (
    <div className={cn("flex flex-wrap md:flex-nowrap gap-4 w-full px-4", className)}>
      {cards.map((card, index) => (
        <SeasonCard
          key={index}
          title={card.title}
          subtitle={card.subtitle}
          description={card.description}
          imageSrc={card.imageSrc}
          imageAlt={card.imageAlt}
        />
      ))}
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: slide-to-confirm
Category: Components
Description: A highly interactive slide-to-action button frequently used for critical operations like payments or deleting records.
URL: https://lightswind.com/components/slide-to-confirm
Import: import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm"
Registry URL: https://lightswind.com/r/slide-to-confirm.json
Install Command: npx lightswind@latest add slide-to-confirm

Usage:
```tsx
import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm";

export function ConfirmDemo() {
  const handleConfirm = async () => {
    // Simulate async operation
    await new Promise(resolve => setTimeout(resolve, 1500));
  };

  return (
    <div className="flex justify-center py-12">
      <SlideToConfirm onConfirm={handleConfirm} />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef } from "react";
import { motion, useAnimation, useMotionValue, useTransform } from "framer-motion";
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/components/lib/utils";

interface SlideToConfirmProps {
  /** Text to show before sliding */
  text?: string;
  /** Text to show after confirming */
  successText?: string;
  /** Async callback fired when slide completes */
  onConfirm: () => Promise<void> | void;
  /** Width of the component */
  width?: number;
  /** Height of the component */
  height?: number;
  /** Additional classes for the container */
  className?: string;
}

export function SlideToConfirm({
  text = "Slide to confirm",
  successText = "Confirmed",
  onConfirm,
  width = 320,
  height = 56,
  className,
}: SlideToConfirmProps) {
  const [state, setState] = useState<"idle" | "loading" | "success">("idle");
  const containerRef = useRef<HTMLDivElement>(null);
  const trackWidth = width - height; // Total drag distance
  const thumbSize = height - 8; // Margin inside

  const x = useMotionValue(0);
  const controls = useAnimation();

  // Opacity of the text fades out as you drag
  const textOpacity = useTransform(x, [0, trackWidth * 0.5], [1, 0]);
  // Background gradient progresses as you drag
  const bgWidth = useTransform(x, [0, trackWidth], [height, width]);

  const handleDragEnd = async () => {
    if (state !== "idle") return;

    if (x.get() >= trackWidth * 0.9) {
      // Completed drag
      controls.start({ x: trackWidth, transition: { type: "spring", stiffness: 400, damping: 30 } });
      setState("loading");

      try {
        await onConfirm();
        setState("success");
      } catch (error) {
        // If error, reset
        setState("idle");
        controls.start({ x: 0, transition: { type: "spring", stiffness: 400, damping: 30 } });
      }
    } else {
      // Reset if not fully dragged
      controls.start({ x: 0, transition: { type: "spring", stiffness: 400, damping: 30 } });
    }
  };

  const handleReset = () => {
    if (state === "success") {
      setState("idle");
      x.set(0);
      controls.start({ x: 0 });
    }
  };

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative flex items-center justify-center overflow-hidden rounded-full border bg-muted select-none",
        state === "success" ? "cursor-pointer border-green-500/50" : "",
        className
      )}
      style={{
        width,
        height,
      }}
      onClick={handleReset}
    >
      {/* Background fill transitioning to green on success */}
      <motion.div
        className="absolute left-0 top-0 h-full rounded-full"
        style={{
          width: state === "success" ? width : bgWidth,
          backgroundColor: state === "success" ? "#22c55e" : "var(--primary)",
          opacity: state === "success" ? 0.1 : 0.05,
        }}
        animate={{ width: state === "success" ? width : undefined }}
        transition={{ duration: 0.3 }}
      />

      {/* Main Text */}
      <motion.span
        className={cn(
          "absolute font-medium text-sm z-0",
          state === "success" ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
        )}
        style={{ opacity: state === "idle" ? textOpacity : 0 }}
      >
        {text}
      </motion.span>

      {/* Success Text */}
      <motion.span
        className="absolute font-medium text-sm z-0 text-green-600 dark:text-green-400"
        initial={{ opacity: 0, y: 10 }}
        animate={{
          opacity: state === "success" ? 1 : 0,
          y: state === "success" ? 0 : 10
        }}
        transition={{ duration: 0.3, delay: 0.1 }}
      >
        {successText}
      </motion.span>

      {/* Draggable Thumb */}
      <motion.div
        drag={state === "idle" ? "x" : false}
        dragConstraints={{ left: 0, right: trackWidth }}
        dragElastic={0.05}
        dragMomentum={false}
        onDragEnd={handleDragEnd}
        className={cn(
          "absolute left-1 z-10 flex cursor-grab items-center justify-center rounded-full bg-background shadow-md active:cursor-grabbing",
          state !== "idle" && "cursor-default"
        )}

        initial={false}
        whileTap={{ scale: state === "idle" ? 0.95 : 1 }}
        animate={state === "success" ? { x: trackWidth, backgroundColor: "#22c55e", color: "white" } : controls}
        style={{
          width: thumbSize,
          height: thumbSize,
          x,
        }}
      >
        <motion.div
          animate={{
            rotate: state === "loading" ? 360 : 0,
            scale: state === "idle" ? 1 : 0,
            opacity: state === "idle" ? 1 : 0,
          }}
          transition={{ duration: 0.2 }}
          className="absolute"
        >
          <ArrowRight className="h-5 w-5 opacity-70" />
        </motion.div>

        <motion.div
          animate={{
            scale: state === "loading" ? 1 : 0,
            opacity: state === "loading" ? 1 : 0,
          }}
          transition={{ duration: 0.2 }}
          className="absolute flex h-full w-full items-center justify-center"
        >
          {/* Refined macOS Style Spinner (12 Spokes) */}
          <div className="relative h-[20px] w-[20px]">
            {[...Array(12)].map((_, i) => (
              <motion.span
                key={i}
                className="absolute left-[9px] top-0 h-[5.5px] w-[1.8px] rounded-full bg-foreground"
                style={{
                  rotate: i * 30,
                  transformOrigin: "center 10px",
                }}
                animate={{
                  opacity: [0.15, 1, 0.15],
                }}
                transition={{
                  duration: 1.1,
                  repeat: Infinity,
                  delay: i * 0.091,
                  ease: "linear",
                }}
              />
            ))}
          </div>
        </motion.div>

        <motion.div
          animate={{
            scale: state === "success" ? 1 : 0,
            opacity: state === "success" ? 1 : 0,
          }}
          transition={{ type: "spring", stiffness: 300, damping: 20 }}
          className="absolute text-white"
        >
          <Check className="h-5 w-5" />
        </motion.div>
      </motion.div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: sliding-cards
Category: Components
Description: An interactive stack of sliding cards with 3D depth and swipe gesture functionality. Each card can display an icon and customized background. Ideal for showcasing features, testimonials, or data cards in a visually appealing and animated format. Built with React, Tailwind CSS, and custom swipe logic.
URL: https://lightswind.com/components/sliding-cards
Import: import SlidingCards from '@/components/lightswind/sliding-cards';
Registry URL: https://lightswind.com/r/sliding-cards.json
Install Command: npx lightswind@latest add sliding-cards

Usage:
```tsx
import { FaStar, FaBolt, FaHeart } from 'react-icons/fa';
import SlidingCards from '@/components/lightswind/sliding-cards';

const cardItems = [
  { id: 1, icon: <FaStar />, bgClass: 'bg-gradient-to-br from-yellow-400 to-red-400' },
  { id: 2, icon: <FaBolt />, bgClass: 'bg-gradient-to-br from-purple-400 to-pink-400' },
  { id: 3, icon: <FaHeart />, bgClass: 'bg-gradient-to-br from-teal-400 to-cyan-300' },
];

<SlidingCards cards={cardItems} cardSize="w-20 h-20" className="mx-auto" />;
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { cn } from "@/components/lib/utils"; // Optional utility for className merging

export type CardContent = {
  id: string | number;
  title?: string;
  description?: string;
  icon?: React.ReactNode;
  bgClass?: string;
};

type SlidingCardsProps = {
  cards: CardContent[];
  className?: string;
  cardSize?: string;
  centerIcon?: React.ReactNode;
  visibleRange?: number;
  onCardClick?: (index: number) => void;
};

const SlidingCards: React.FC<SlidingCardsProps> = ({
  cards,
  className = "",
  cardSize = "w-24 h-24",
  onCardClick,
}) => {
  const cardStackRef = useRef<HTMLDivElement>(null);
  const cardsRef = useRef<HTMLElement[]>([]);

  useEffect(() => {
    const cardStack = cardStackRef.current;
    if (!cardStack) return;
    cardsRef.current = Array.from(cardStack.querySelectorAll(".card"));

    let isSwiping = false;
    let startX = 0;
    let currentX = 0;
    let animationFrameId: number | null = null;

    const getDuration = () => 300;

    const getActiveCard = () => cardsRef.current[0];

    const updatePositions = () => {
      cardsRef.current.forEach((card, i) => {
        const offset = i + 1;
        card.style.zIndex = `${100 - offset}`;
        card.style.transform = `perspective(700px) translateZ(${-12 * offset}px) translateY(${7 * offset}px) translateX(0px) rotateY(0deg)`;
        card.style.opacity = `1`;
      });
    };

    const applySwipeStyles = (deltaX: number) => {
      const card = getActiveCard();
      if (!card) return;
      const rotate = deltaX * 0.2;
      const opacity = 1 - Math.min(Math.abs(deltaX) / 100, 1) * 0.75;
      card.style.transform = `perspective(700px) translateZ(-12px) translateY(7px) translateX(${deltaX}px) rotateY(${rotate}deg)`;
      card.style.opacity = `${opacity}`;
    };

    const handleStart = (clientX: number) => {
      if (isSwiping) return;
      isSwiping = true;
      startX = currentX = clientX;
      const card = getActiveCard();
      card && (card.style.transition = "none");
    };

    const handleMove = (clientX: number) => {
      if (!isSwiping) return;
      if (animationFrameId) cancelAnimationFrame(animationFrameId);
      animationFrameId = requestAnimationFrame(() => {
        currentX = clientX;
        const deltaX = currentX - startX;
        applySwipeStyles(deltaX);
        if (Math.abs(deltaX) > 50) handleEnd();
      });
    };

    const handleEnd = () => {
      if (!isSwiping) return;
      if (animationFrameId) cancelAnimationFrame(animationFrameId);

      const deltaX = currentX - startX;
      const threshold = 50;
      const duration = getDuration();
      const card = getActiveCard();

      if (card) {
        card.style.transition = `transform ${duration}ms ease, opacity ${duration}ms ease`;

        if (Math.abs(deltaX) > threshold) {
          const direction = Math.sign(deltaX);
          card.style.transform = `perspective(700px) translateZ(-12px) translateY(7px) translateX(${direction * 300}px) rotateY(${direction * 20}deg)`;

          setTimeout(() => {
            card.style.transform = `perspective(700px) translateZ(-12px) translateY(7px) translateX(${direction * 300}px) rotateY(${-direction * 20}deg)`;
          }, duration / 2);

          setTimeout(() => {
            cardsRef.current = [...cardsRef.current.slice(1), card];
            updatePositions();
          }, duration);
        } else {
          applySwipeStyles(0);
        }
      }

      isSwiping = false;
      startX = currentX = 0;
    };

    cardStack.addEventListener("pointerdown", (e) => handleStart(e.clientX));
    cardStack.addEventListener("pointermove", (e) => handleMove(e.clientX));
    cardStack.addEventListener("pointerup", handleEnd);

    updatePositions();
  }, []);

  return (
    <section
      ref={cardStackRef}
      className={cn(
        "relative w-64 h-[22rem] grid place-content-center touch-none select-none",
        className
      )}
    >
      {cards.map(({ id, icon, bgClass = "bg-gradient-to-br from-pink-300 to-orange-200" }, index) => (
        <article
          key={id}
          onClick={() => onCardClick?.(index)}
          className={cn(
            "card absolute inset-4 grid place-content-center rounded-xl border border-gray-400 shadow-md cursor-grab transition-transform ease-in-out",
            bgClass
          )}
        >
          <span className={cn("aspect-square grid place-content-center", cardSize)}>
            {icon || (
              <svg
                className="w-full h-full fill-white drop-shadow-md"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
              >
                <circle cx="8" cy="8" r="6" />
              </svg>
            )}
          </span>
        </article>
      ))}
    </section>
  );
};

export default SlidingCards;

```
--------------------------------------------------

### COMPONENT: sliding-logo-marquee
Category: Components
Description: A professional sliding logo marquee component with smooth animations, blur effects, and customizable styling. Perfect for showcasing client logos, partners, or brands with elegant horizontal scrolling motion.
URL: https://lightswind.com/components/sliding-logo-marquee
Import: import { SlidingLogoMarquee } from "@/components/lightswind/sliding-logo-marquee"
Registry URL: https://lightswind.com/r/sliding-logo-marquee.json
Install Command: npx lightswind@latest add sliding-logo-marquee

Usage:
```tsx
import { SlidingLogoMarquee, SlidingLogoMarqueeItem } from "@/components/lightswind/sliding-logo-marquee";

// Basic Usage
const logos: SlidingLogoMarqueeItem[] = [
  {
    id: "1",
    content: <div className="text-white font-bold">Company A</div>,
    href: "https://example.com"
  },
  {
    id: "2", 
    content: <img src="/logo.png" alt="Logo" className="h-8" />
  }
];

<SlidingLogoMarquee items={logos} />

// Advanced Configuration
<SlidingLogoMarquee
  items={logos}
  speed={60}
  height="120px"
  enableBlur={true}
  blurIntensity={2}
  pauseOnHover={true}
  showGridBackground={true}
  onItemClick={(item) => console.log("Clicked:", item.id)}
/>
```

Source Code:
```tsx
"use client";

import React, { useRef, useState, useMemo } from "react";
// Import your actual utility
import { cn } from "@/components/lib/utils"; // Assuming this is your actual path
import { Pause, Play } from "lucide-react";

// --- Interfaces (Kept for completeness) ---
export interface SlidingLogoMarqueeItem {
  id: string;
  content: React.ReactNode;
  href?: string;
}

export interface SlidingLogoMarqueeProps {
  items: SlidingLogoMarqueeItem[];
  speed?: number;
  pauseOnHover?: boolean;
  enableBlur?: boolean;
  blurIntensity?: number;
  height?: string;
  width?: string;
  gap?: string;
  scale?: number;
  direction?: "horizontal" | "vertical";
  autoPlay?: boolean;
  backgroundColor?: string;
  showGridBackground?: boolean;
  className?: string;
  onItemClick?: (item: SlidingLogoMarqueeItem) => void;
  enableSpillEffect?: boolean;
  animationSteps?: number;
  showControls?: boolean;
}

export function SlidingLogoMarquee({
  items,
  speed = 1,
  pauseOnHover = true,
  enableBlur = true,
  blurIntensity = 1,
  height = "100px",
  width = "100%",
  gap = "2rem",
  scale = 1,
  direction = "horizontal",
  autoPlay = true,
  backgroundColor = '!transparent',
  showGridBackground = false,
  className,
  onItemClick,
  enableSpillEffect = false,
  animationSteps = 8,
  showControls = true,
}: SlidingLogoMarqueeProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isPlaying, setIsPlaying] = useState(autoPlay);

  // CORE FIX: Duplicating the items for a seamless loop
  const duplicatedItems = useMemo(() => [...items, ...items], [items]);

  const handleItemClick = (item: SlidingLogoMarqueeItem) => {
    if (item.href) {
      window.open(item.href, "_blank", "noopener,noreferrer");
    }
    onItemClick?.(item);
  };

  const togglePlayState = () => {
    setIsPlaying(!isPlaying);
  };

  const blurDivs = Array.from({ length: animationSteps }, (_, index) => (
    <div key={index} style={{ "--index": index } as React.CSSProperties} className="absolute inset-0 z-[var(--index)]" />
  ));

  const itemRenderer = (item: SlidingLogoMarqueeItem, index: number, isDuplicate: boolean) => (
    <li
      // Use original ID plus index/flag for unique keys
      key={`${item.id}-${index}-${isDuplicate ? 'dup' : 'orig'}`}
      className={cn(
        "sliding-marquee-item text-foreground",
        "grid place-items-center cursor-pointer transition-transform duration-200 ease-in-out",
        "hover:scale-[1.05] focus:scale-[1.05] focus:outline-none focus:ring-2 focus:ring-primary",
        " backdrop-blur-sm",
      )}
      onClick={() => handleItemClick(item)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          handleItemClick(item);
        }
      }}
    >
      <div className="h-4/5 w-auto">{item.content}</div>
    </li>
  );

  return (
    <>
      <style>
        {`
        .sliding-marquee-container {
          --speed: ${speed};
          --gap: ${gap};
          --blur: ${blurIntensity};
          --blurs: ${animationSteps};
          /* Dynamic Duration: Higher speed (e.g., 60) results in a shorter duration */
          /* Use a large fixed distance (e.g., 200vw) divided by speed to control rate */
          --duration: calc(200s / var(--speed)); 
        }

        /* ------------------------------------------------ */
        /* --- CORE INFINITE LOOP FIX: Animating by -50% -- */
        /* ------------------------------------------------ */
        @keyframes marquee-horizontal {
          /* Translates the doubled content by exactly half its length to loop seamlessly */
          from { transform: translateX(0); }
          to { transform: translateX(-50%); } 
        }
        
        @keyframes marquee-vertical {
          from { transform: translateY(0); }
          to { transform: translateY(-50%); }
        }

        .sliding-marquee-list {
          display: flex;
          flex-shrink: 0; 
          min-width: 200%;
          gap: var(--gap);
          height: 100%;
          align-items: center;
          list-style-type: none;
          padding-inline: 0;
          margin: 0;
          pointer-events: auto;
          animation: marquee-horizontal var(--duration) linear infinite paused;
          transform: translateZ(0); /* Add this for mobile GPU layer */
          will-change: transform;    /* Hint browser to optimize for animation */
        }

        /* Conditional Animation based on Direction */
        .sliding-marquee-resizable[data-direction="vertical"] .sliding-marquee-list {
            flex-direction: column;
            min-width: unset;
            min-height: 200%;
            width: 100%;
            animation: marquee-vertical var(--duration) linear infinite paused;
        }


        .sliding-marquee-item {
          /* Ensure item size is well-defined to calculate total list width accurately */
          min-width: clamp(100px, 15vw, 250px); 
          height: 80%;
          aspect-ratio: 16 / 9;
          font-size: clamp(1rem, 1vw + 0.5rem, 2rem);
        }
        
        /* Play State Controls */
        [data-play-state="running"] .sliding-marquee-list {
          animation-play-state: running !important;
        }
        [data-play-state="paused"] .sliding-marquee-list {
          animation-play-state: paused !important;
        }

        /* --- Layout & Effects (Tailwind-Ready/Hybrid) --- */
        .sliding-marquee-resizable {
          overflow: hidden;
          scale: var(--scale);
          width: 100%;
          height: ${height};
          position: relative;
        }

        .sliding-marquee-inner {
          height: 100%;
          width: 100%;
          position: relative;
          mask: linear-gradient(90deg, transparent, black 15% 85%, transparent);
          display: flex; 
          pointer-events: none;
        }

        /* The rest of the blur and spill effect CSS... */
        .sliding-marquee-blur { position: absolute; top: 0; bottom: 0; width: 25%; z-index: 2; pointer-events: none; }
        .sliding-marquee-blur--right { right: 0; }
        .sliding-marquee-blur--left { left: 0; rotate: 180deg; }
        .sliding-marquee-blur div {
            mask: linear-gradient(90deg,
                transparent calc(var(--index) * calc((100 / var(--blurs)) * 1%)),
                black calc((var(--index) + 1) * calc((100 / var(--blurs)) * 1%)),
                black calc((var(--index) + 2) * calc((100 / var(--blurs)) * 1%)),
                transparent calc((var(--index) + 3) * calc((100 / var(--blurs)) * 1%)));
            backdrop-filter: blur(calc((var(--index, 0) * var(--blur, 0)) * 1px));
        }
        .sliding-marquee-resizable[data-spill="true"] { container-type: size; }
        .sliding-marquee-resizable[data-spill="true"] .sliding-marquee-inner::after {
            content: ""; position: fixed; top: 50%; left: 50%; width: calc(var(--scale) * 10000vw); height: calc(var(--scale) * 10000vh);
            pointer-events: none; translate: -50% -50%;
            mask: linear-gradient(white, white) 50% 50% / 100% 100% no-repeat, linear-gradient(white, white) 50% 50% / 100cqi 100cqh no-repeat;
            mask-composite: exclude;
        }
        `}
      </style>

      <div
        ref={containerRef}
        className={cn("sliding-marquee-container relative", className)}
        style={{ width, background: backgroundColor, scale: scale }}
        onMouseEnter={() => pauseOnHover && setIsPlaying(false)}
        onMouseLeave={() => pauseOnHover && setIsPlaying(true)}
      >
        {showGridBackground && (
          <div className="absolute inset-0 pointer-events-none opacity-5">
            <div className="h-full w-full bg-[radial-gradient(#4b5563_1px,transparent_1px)]
             [background-size:16px_16px]"/>
          </div>
        )}

        <div
          className="sliding-marquee-resizable"
          data-direction={direction}
          data-blurring={enableBlur}
          data-play-state={isPlaying ? "running" : "paused"}
          data-spill={enableSpillEffect}
        >
          <div className="sliding-marquee-inner">
            {enableBlur && (
              <div className="sliding-marquee-blur sliding-marquee-blur--left">
                {blurDivs}
              </div>
            )}

            {/* Rendered Items: Original Set + Duplicate Set */}
            <ul className="sliding-marquee-list text-foreground" aria-hidden={false}>
              {items.map((item, index) => itemRenderer(item, index, false))}

              {/* Duplicate is key to the seamless loop */}
              {items.map((item, index) => itemRenderer(item, index, true))}
            </ul>

            {enableBlur && (
              <div className="sliding-marquee-blur sliding-marquee-blur--right">
                {blurDivs}
              </div>
            )}
          </div>
        </div>

        {showControls && (
          <button
            onClick={togglePlayState}
            className={cn(
              "absolute top-1/2 right-2 transform -translate-y-1/2 z-10 p-2 text-xs",
              "bg-gray-800/50 text-white",
              "rounded-full hover:bg-gray-700/70 transition-colors",
              "focus:outline-none focus:ring-2 focus:ring-primary"
            )}
            aria-label={isPlaying ? "Pause animation" : "Play animation"}
          >
            {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
          </button>
        )}
      </div>
    </>
  );
}

export default SlidingLogoMarquee;
```
--------------------------------------------------

### COMPONENT: spectrum-loader
Category: Components
Description: A professional SVG-based loading indicator that features a vibrant, animated rainbow spectrum. By leveraging layered radial gradients and cinematic glow filters, it creates a premium visual experience. The component uses Framer Motion for high-performance spinning and stroke-draw animations, making it both smooth and highly customizable through props.
URL: https://lightswind.com/components/spectrum-loader
Import: import { SpectrumLoader } from "@/components/lightswind/spectrum-loader"
Registry URL: https://lightswind.com/r/spectrum-loader.json
Install Command: npx lightswind@latest add spectrum-loader

Usage:
```tsx
import { SpectrumLoader } from "@/components/lightswind/spectrum-loader";

export default function App() {
  return (
    <div className="flex items-center justify-center p-20">
      <SpectrumLoader size={64} strokeWidth={4} glow={true} />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useId } from "react";
import { motion } from "framer-motion";
import { cn } from "../lib/utils";

interface SpectrumLoaderProps {
  size?: number;
  strokeWidth?: number;
  duration?: number;
  colors?: string[];
  glow?: boolean;
  className?: string;
}

export const SpectrumLoader = ({
  size = 48,
  strokeWidth = 4,
  duration = 2,
  colors = ["#ff8000", "#00ff19", "#9900ff", "#ffff00", "#FF0000", "#00CCFF"],
  glow = true,
  className,
}: SpectrumLoaderProps) => {
  const id = useId().replace(/:/g, "");
  const maskId = `mask-${id}`;
  const filterId = `glow-${id}`;

  return (
    <div 
      className={cn("relative flex items-center justify-center overflow-visible", className)}
      style={{ width: size, height: size }}
    >
      <svg
        viewBox="0 0 24 24"
        className="w-full h-full overflow-visible"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {glow && (
            <filter id={filterId} y="-100%" x="-100%" width="300%" height="300%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="1.2" result="blur" />
              <feColorMatrix type="saturate" values="3" />
              <feComposite in="SourceGraphic" operator="over" />
            </filter>
          )}
          
          {/* Gradients */}
          <radialGradient id={`${id}-a`} cx="0" cy="24" r="24" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[0]} />
            <stop offset="1" stopColor={colors[0]} stopOpacity="0" />
          </radialGradient>
          <radialGradient id={`${id}-b`} cx="24" cy="24" r="24" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[1]} />
            <stop offset="1" stopColor={colors[1]} stopOpacity="0" />
          </radialGradient>
          <radialGradient id={`${id}-c`} cx="12" cy="0" r="12" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[2]} />
            <stop offset="1" stopColor={colors[2]} stopOpacity="0" />
          </radialGradient>
          <radialGradient id={`${id}-d`} cx="12" cy="12" r="12" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[3]} />
            <stop offset="1" stopColor={colors[3]} stopOpacity="0" />
          </radialGradient>
          <radialGradient id={`${id}-e`} cx="0" cy="0" r="24" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[4]} />
            <stop offset="1" stopColor={colors[4]} stopOpacity="0" />
          </radialGradient>
          <radialGradient id={`${id}-f`} cx="24" cy="0" r="20" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor={colors[5]} />
            <stop offset="1" stopColor={colors[5]} stopOpacity="0" />
          </radialGradient>

          <mask id={maskId}>
            <motion.circle
              cx="12"
              cy="12"
              r="8"
              fill="none"
              stroke="white"
              strokeWidth={strokeWidth}
              pathLength="1.025"
              animate={{ 
                strokeDashoffset: [1.05, 2.1, 3.15],
              }}
              transition={{
                duration: duration,
                repeat: Infinity,
                ease: "easeInOut",
                times: [0, 0.5, 1],
              }}
              style={{ strokeDasharray: "1.05" }}
            />
          </mask>
        </defs>

        {/* Static Background Ring */}
        <circle
          cx="12"
          cy="12"
          r="8"
          fill="none"
          strokeWidth={strokeWidth}
          stroke="currentColor"
          className="opacity-[0.08]"
        />

        {/* Rotating Content Group */}
        <motion.g
          animate={{ rotate: -360 }}
          transition={{ duration: duration * 1.5, repeat: Infinity, ease: "linear" }}
          style={{ transformOrigin: "center", transformBox: "fill-box" }}
          filter={glow ? `url(#${filterId})` : undefined}
        >
          <g mask={`url(#${maskId})`}>
            <rect fill={`url(#${id}-a)`} width="24" height="24" />
            <rect fill={`url(#${id}-b)`} width="24" height="24" />
            <rect fill={`url(#${id}-c)`} width="24" height="24" />
            <rect fill={`url(#${id}-d)`} width="24" height="24" />
            <rect fill={`url(#${id}-e)`} width="24" height="24" />
            <rect fill={`url(#${id}-f)`} width="24" height="24" />
          </g>
        </motion.g>
      </svg>
    </div>
  );
};

export default SpectrumLoader;

```
--------------------------------------------------

### COMPONENT: stack-list
Category: Components
Description: A responsive animated stack view component that displays a vertical list of items with expandable functionality, built with Tailwind CSS and Framer Motion.
URL: https://lightswind.com/components/stack-list
Import: import StackList from '@/components/lightswind/stack-list';
Registry URL: https://lightswind.com/r/stack-list.json
Install Command: npx lightswind@latest add stack-list

Usage:
```tsx
import StackList from '@/components/lightswind/stack-list';
import { Flame, FileText, MapPin } from 'lucide-react';

const activities = [
  {
    icon: <FileText className="w-5 h-5" />,
    title: "Camping",
    subtitle: "Yosemite Park",
    date: "5 August",
  },
  {
    icon: <MapPin className="w-5 h-5" />,
    title: "Boating",
    subtitle: "Lake Tahoe",
    date: "2 August",
  },
  {
    icon: <Flame className="w-5 h-5" />,
    title: "Barbecue",
    subtitle: "Greenfield Shores",
    date: "28 July",
  },
];

<StackList
  items={activities}
  initialVisible={1}
  className="w-full sm:max-w-md md:max-w-lg"
/>;
```

Source Code:
```tsx
"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown } from "lucide-react";

type StackListItem = {
  icon: React.ReactNode;
  title: string;
  subtitle: string;
  date: string;
};

type StackListProps = {
  items: StackListItem[];
  initialVisible?: number;
  className?: string; // allows custom responsive width/styling
};

export default function StackList({
  items,
  initialVisible = 1,
  className = "",
}: StackListProps) {
  const [expanded, setExpanded] = useState(false);

  const visibleItems = expanded ? items : items.slice(0, initialVisible);

  return (
    <div
      className={`bg-transparent text-foreground mx-auto  
         overflow-hidden ${className}`}
    >
      <div className="flex flex-col gap-4 relative">
        <AnimatePresence initial={false}>
          {visibleItems.map((item, index) => (
            <motion.div
              key={item.title + index}
              initial={{ opacity: 0, y: 20, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -20, scale: 0.95 }}
              transition={{ duration: 0.3, delay: index * 0.05 }}
              className="flex items-center gap-4 p-4 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-2xl shadow-sm"
            >
              <div className="w-12 h-12 bg-background rounded-xl 
              flex items-center justify-center text-foreground">
                {item.icon}
              </div>
              <div className="flex-1">
                <div className="text-xs xl:text-sm font-semibold text-gray-900 dark:text-white">
                  {item.title}
                </div>
                <div className="text-xs xl:text-sm text-gray-500 dark:text-gray-400">
                  {item.subtitle}
                </div>
              </div>
              <div className="text-xs xl:text-sm text-gray-400">{item.date}</div>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>

      {items.length > initialVisible && (
        <button
          onClick={() => setExpanded((prev) => !prev)}
          className="mt-4 mx-auto flex items-center justify-center gap-2 px-4 py-2
           border border-gray-300 dark:border-gray-700 rounded-full 
           text-xs xl:text-sm font-medium text-gray-600 dark:text-gray-300 transition 
           hover:bg-gray-100 dark:hover:bg-neutral-800"
        >
          <span>{expanded ? "Hide" : "Show All"}</span>
          <motion.div
            animate={{ rotate: expanded ? 180 : 0 }}
            transition={{ duration: 0.3 }}
          >
            <ChevronDown className="w-4 h-4" />
          </motion.div>
        </button>
      )}
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: team-carousel
Category: Components
Description: An interactive 3D carousel component for displaying team members with smooth animations, keyboard/touch navigation, and extensive customization options.
URL: https://lightswind.com/components/team-carousel
Import: import { TeamCarousel } from "@/components/lightswind/team-carousel"
Registry URL: https://lightswind.com/r/team-carousel.json
Install Command: npx lightswind@latest add team-carousel

Usage:
```tsx
import { TeamCarousel } from '@/components/lightswind/team-carousel';

const teamMembers = [
  {
    id: "1",
    name: "Emily Kim",
    role: "Founder",
    image: "https://example.com/emily.jpg",
    bio: "Visionary leader with 10+ years of experience."
  },
  // ... more members
];

function TeamPage() {
  return (
    <TeamCarousel 
      members={teamMembers}
      autoPlay={3000}
      onMemberChange={(member, index) => {
        console.log('Active member:', member.name);
      }}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useCallback, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { motion, AnimatePresence, TargetAndTransition} from 'framer-motion';
import { cn } from '@/components/lib/utils'; // Assuming this utility correctly merges class names

export interface TeamMember {
  id: string;
  name: string;
  role: string;
  image: string;
  bio?: string;
}

export interface TeamCarouselProps {
  /** Array of team members */
  members: TeamMember[];
  /** Background color or gradient. Overrides the default 'bg-background' class. */
  background?: string;
  /** Card width in pixels */
  cardWidth?: number;
  /** Card height in pixels */
  cardHeight?: number;
  /** Card border radius */
  cardRadius?: number;
  /** Enable/disable navigation arrows */
  showArrows?: boolean;
  /** Enable/disable dots indicator */
  showDots?: boolean;
  /** Enable/disable keyboard navigation */
  keyboardNavigation?: boolean;
  /** Enable/disable touch/swipe navigation */
  touchNavigation?: boolean;
  /** Animation duration in milliseconds */
  animationDuration?: number;
  /** Auto-play interval in milliseconds (0 to disable) */
  autoPlay?: number;
  /** Pause auto-play on hover */
  pauseOnHover?: boolean;
  /** Number of visible cards on each side */
  visibleCards?: number;
  /** Scale factor for side cards */
  sideCardScale?: number;
  /** Opacity for side cards */
  sideCardOpacity?: number;
  /** Apply grayscale filter to side cards */
  grayscaleEffect?: boolean;
  /** Custom className for container */
  className?: string;
  /** Custom className for cards */
  cardClassName?: string;
  /** Member info position */
  infoPosition?: 'bottom' | 'overlay' | 'none';
  /** Info text color */
  infoTextColor?: string;
  /** Info background */
  infoBackground?: string;
  /** Callback when active member changes */
  onMemberChange?: (member: TeamMember, index: number) => void;
  /** Callback when card is clicked */
  onCardClick?: (member: TeamMember, index: number) => void;
  /** Initial active index */
  initialIndex?: number;
}

export const TeamCarousel: React.FC<TeamCarouselProps> = ({
  members,
  background,
  cardWidth = 280,
  cardHeight = 380,
  cardRadius = 20,
  showArrows = true,
  showDots = true,
  keyboardNavigation = true,
  touchNavigation = true,
  animationDuration = 800,
  autoPlay = 0,
  pauseOnHover = true,
  visibleCards = 2,
  sideCardScale = 0.9,
  sideCardOpacity = 0.8,
  grayscaleEffect = true,
  className,
  cardClassName,
  infoPosition = "bottom",
  infoTextColor,
  infoBackground = "transparent",
  onMemberChange,
  onCardClick,
  initialIndex = 0,
}) => {
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const [direction, setDirection] = useState(0); // 0: no movement, 1: next, -1: prev
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);

  const totalMembers = members.length;

  const paginate = useCallback(
    (newDirection: number) => {
      if (totalMembers === 0) return;
      setDirection(newDirection);
      const nextIndex = (currentIndex + newDirection + totalMembers) % totalMembers;
      setCurrentIndex(nextIndex);
      onMemberChange?.(members[nextIndex], nextIndex);
    },
    [currentIndex, totalMembers, members, onMemberChange]
  );

  const wrapIndex = (index: number) => {
    return (index + totalMembers) % totalMembers;
  };

  const calculatePosition = (index: number) => {
    const activeIndex = currentIndex;
    const diff = wrapIndex(index - activeIndex);

    if (diff === 0) return 'center';
    if (diff <= visibleCards) return `right-${diff}`;
    if (diff >= totalMembers - visibleCards) return `left-${totalMembers - diff}`;
    return 'hidden';
  };

  // Explicitly type the return of getVariantStyles to match framer-motion's expectations
  const getVariantStyles = (position: string): TargetAndTransition => {
    // FIX: Changed ease from number[] to an array of string presets or a valid CubicBezier type
    // Using string presets for simplicity and type compatibility.
    // If you need the exact cubic-bezier values, ensure they are compatible with framer-motion's Easing type.
    // For custom cubic-bezier, you might need to use a type assertion like `as [number, number, number, number]`
    // or import CubicBezier from 'framer-motion/types/value/types'.
    const transition = {
      duration: animationDuration / 1000,
      // You can use a string preset like 'easeInOut' or a valid cubic-bezier array if framer-motion's types support it directly
      // For the given numbers, 'easeInOut' is a close approximation or 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' if framer-motion accepted it directly as string
      // To strictly match [0.25, 0.46, 0.45, 0.94], framer-motion expects it as a CubicBezier tuple:
      ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number],
    };

    switch (position) {
      case 'center':
        return {
          zIndex: 10,
          opacity: 1,
          scale: 1.08,
          x: 0,
          filter: 'grayscale(0%)',
          pointerEvents: 'auto',
          transition,
        };
      case 'right-1':
        return {
          zIndex: 5,
          opacity: sideCardOpacity,
          scale: sideCardScale,
          x: cardWidth * 0.75,
          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
          pointerEvents: 'auto',
          transition,
        };
      case 'right-2':
        return {
          zIndex: 1,
          opacity: sideCardOpacity * 0.7,
          scale: sideCardScale * 0.88,
          x: cardWidth * 1.5,
          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
          pointerEvents: 'auto',
          transition,
        };
      case 'left-1':
        return {
          zIndex: 5,
          opacity: sideCardOpacity,
          scale: sideCardScale,
          x: -cardWidth * 0.75,
          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
          pointerEvents: 'auto',
          transition,
        };
      case 'left-2':
        return {
          zIndex: 1,
          opacity: sideCardOpacity * 0.7,
          scale: sideCardScale * 0.88,
          x: -cardWidth * 1.5,
          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
          pointerEvents: 'auto',
          transition,
        };
      default:
        return {
          zIndex: 0,
          opacity: 0,
          scale: 0.8,
          x: direction > 0 ? cardWidth * (visibleCards + 1.2) : -cardWidth * (visibleCards + 1.2),
          pointerEvents: 'none',
          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
          transition,
        };
    }
  };

  // Auto-play functionality
  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (autoPlay > 0) {
      interval = setInterval(() => {
        paginate(1);
      }, autoPlay);
    }

    const carouselContainer = document.getElementById('team-carousel-container');

    const handleMouseEnter = () => {
      if (pauseOnHover && autoPlay > 0) clearInterval(interval);
    };

    const handleMouseLeave = () => {
      if (pauseOnHover && autoPlay > 0) {
        interval = setInterval(() => {
          paginate(1);
        }, autoPlay);
      }
    };

    if (carouselContainer && pauseOnHover && autoPlay > 0) {
      carouselContainer.addEventListener('mouseenter', handleMouseEnter);
      carouselContainer.addEventListener('mouseleave', handleMouseLeave);
    }

    return () => {
      clearInterval(interval);
      if (carouselContainer && pauseOnHover && autoPlay > 0) {
        carouselContainer.removeEventListener('mouseenter', handleMouseEnter);
        carouselContainer.removeEventListener('mouseleave', handleMouseLeave);
      }
    };
  }, [autoPlay, paginate, pauseOnHover]);

  // Keyboard navigation
  useEffect(() => {
    if (!keyboardNavigation) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowLeft') {
        paginate(-1);
      } else if (e.key === 'ArrowRight') {
        paginate(1);
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [keyboardNavigation, paginate]);

  // Touch navigation
  const handleTouchStart = (e: React.TouchEvent) => {
    if (!touchNavigation) return;
    setTouchStart(e.targetTouches[0].clientX);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    if (!touchNavigation) return;
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = () => {
    if (!touchNavigation) return;

    const swipeThreshold = 50;
    const diff = touchStart - touchEnd;

    if (Math.abs(diff) > swipeThreshold) {
      if (diff > 0) {
        paginate(1);
      } else {
        paginate(-1);
      }
    }
  };

  return (
    <div
      id="team-carousel-container"
      className={cn(
        "w-full py-4 md:py-8 flex flex-col items-center justify-center relative",
        className
      )}
      style={{ background: background }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {/* Carousel Container */}
      <div
        className="w-full relative z-10 mx-auto flex items-center justify-center overflow-visible"
        style={{
          height: cardHeight + 40,
          perspective: '1000px',
        }}
      >
        {/* Navigation Arrows */}
        {showArrows && (
          <>
            <motion.button
              onClick={() => paginate(-1)}
              className="absolute left-2 md:left-6 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110 shadow-lg"
              whileTap={{ scale: 0.9 }}
              aria-label="Previous Team Member"
            >
              <ChevronLeft className="w-6 h-6" />
            </motion.button>
            <motion.button
              onClick={() => paginate(1)}
              className="absolute right-2 md:right-6 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110 shadow-lg"
              whileTap={{ scale: 0.9 }}
              aria-label="Next Team Member"
            >
              <ChevronRight className="w-6 h-6" />
            </motion.button>
          </>
        )}

        {/* Cards Track */}
        <div
          className="w-full h-full flex justify-center items-center relative"
          style={{ transformStyle: 'preserve-3d' }}
        >
          <AnimatePresence initial={false} custom={direction}>
            {members.map((member, index) => {
              const position = calculatePosition(index);
              const isCurrent = index === currentIndex;

              if (position === 'hidden' && !isCurrent) return null;

              return (
                <motion.div
                  key={member.id}
                  className={cn(
                    "absolute bg-white overflow-hidden shadow-2xl cursor-pointer",
                    cardClassName
                  )}
                  style={{
                    width: cardWidth,
                    height: cardHeight,
                    borderRadius: cardRadius,
                    top: '50%',
                    left: '50%',
                    marginLeft: -cardWidth / 2,
                    marginTop: -cardHeight / 2,
                  }}
                  initial={getVariantStyles('hidden')}
                  animate={getVariantStyles(position)}
                  exit={getVariantStyles('hidden')}
                  onClick={() => {
                    if (!isCurrent) {
                      const newDirection = index > currentIndex ? 1 : -1;
                      setDirection(newDirection);
                      setCurrentIndex(index);
                      onMemberChange?.(members[index], index);
                    }
                    onCardClick?.(member, index);
                  }}
                >
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-full object-cover"
                    loading="lazy"
                    decoding="async"
                  />

                  {/* Overlay Info */}
                  {infoPosition === 'overlay' && (
                    <div
                      className="absolute bottom-0 left-0 right-0 p-4 text-center"
                      style={{
                        background: infoBackground || "linear-gradient(transparent, rgba(0,0,0,0.8))",
                        color: infoTextColor,
                      }}
                    >
                      <h3 className="text-lg font-bold">{member.name}</h3>
                      <p className="text-sm opacity-90">{member.role}</p>
                    </div>
                  )}
                </motion.div>
              );
            })}
          </AnimatePresence>
        </div>
      </div>

      {/* Member Info (Bottom) */}
      {infoPosition === 'bottom' && members[currentIndex] && (
        <motion.div
          key={members[currentIndex].id + "-info"}
          initial={{ opacity: 0, y: 15 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -15 }}
          transition={{ duration: 0.3 }}
          className="text-center mt-6 z-10 text-foreground"
        >
          <h2
            className="text-3xl md:text-4xl font-bold mb-2 relative inline-block text-foreground"
            style={infoTextColor ? { color: infoTextColor } : undefined}
          >
            {members[currentIndex].name}
            <span
              className="absolute top-full left-0 w-full h-0.5 mt-1.5 bg-primary"
              style={infoTextColor ? { background: infoTextColor } : undefined}
            />
          </h2>
          <p
            className="text-lg md:text-xl font-medium opacity-90 uppercase tracking-wider mt-2 text-primary"
            style={infoTextColor ? { color: infoTextColor } : undefined}
          >
            {members[currentIndex].role}
          </p>
          {members[currentIndex].bio && (
            <p className="text-sm md:text-base mt-2 max-w-lg mx-auto opacity-75 px-4 text-muted-foreground">
              {members[currentIndex].bio}
            </p>
          )}
        </motion.div>
      )}

      {/* Dots Indicator */}
      {showDots && (
        <div className="flex justify-center gap-2.5 mt-6 z-10">
          {members.map((_, index) => (
            <motion.button
              key={index}
              onClick={() => {
                if (index !== currentIndex) {
                  const newDirection = index > currentIndex ? 1 : -1;
                  setDirection(newDirection);
                  setCurrentIndex(index);
                  onMemberChange?.(members[index], index);
                }
              }}
              className={cn(
                "w-3 h-3 rounded-full transition-all duration-300",
                index === currentIndex
                  ? "scale-125 bg-primary"
                  : "hover:scale-110 bg-muted-foreground/40"
              )}
              style={infoTextColor ? {
                background: index === currentIndex
                  ? infoTextColor
                  : `${infoTextColor}40`,
              } : undefined}
              whileTap={{ scale: 0.9 }}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default TeamCarousel;
```
--------------------------------------------------

### COMPONENT: terminal-card
Category: Components
Description: A dynamic terminal-style card component with typing animation and syntax highlighting. Ideal for showcasing commands or code snippets with copy-to-clipboard functionality and visually appealing terminal interface. Built with React, Framer Motion, Tailwind CSS, and SyntaxHighlighter.
URL: https://lightswind.com/components/terminal-card
Import: import TerminalCard from '@/components/lightswind/terminal-card';
Registry URL: https://lightswind.com/r/terminal-card.json
Install Command: npx lightswind@latest add terminal-card

Usage:
```tsx
import TerminalCard from '@/components/lightswind/terminal-card';

<TerminalCard command="npm install your-package-name" language="bash" />;
```

Source Code:
```tsx
"use client";

import React, { useEffect, useState } from "react";
import { Copy, Terminal, Check } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";
import { toast } from "sonner";

type TerminalCardProps = {
  command: string;
  language?: string;
  className?: string;
};

const TerminalCard: React.FC<TerminalCardProps> = ({ command, className }) => {
  const [copied, setCopied] = useState(false);
  const [displayedText, setDisplayedText] = useState("");
  const [index, setIndex] = useState(0);
  const [isComplete, setIsComplete] = useState(false);

  // Typing animation logic
  useEffect(() => {
    let timeout: NodeJS.Timeout;

    if (index < command.length) {
      timeout = setTimeout(() => {
        setDisplayedText((prev) => prev + command.charAt(index));
        setIndex((prev) => prev + 1);
      }, 40); // typing speed
    } else {
      setIsComplete(true);
      timeout = setTimeout(() => {
        setDisplayedText("");
        setIndex(0);
        setIsComplete(false);
      }, 2000); // restart delay
    }

    return () => clearTimeout(timeout);
  }, [index, command]);

  // Copy handler
  const handleCopy = () => {
    navigator.clipboard.writeText(command);
    setCopied(true);
    toast.success("Copied to clipboard");
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div
      className={cn(
        "border rounded-xl backdrop-blur-md min-w-[300px] max-w-full overflow-hidden shadow-sm",
        "bg-zinc-50 border-zinc-200 text-zinc-900",
        "dark:bg-zinc-950 dark:border-zinc-800 dark:text-zinc-100",
        className
      )}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-3.5 py-2.5 bg-zinc-100/70 dark:bg-zinc-900/70 border-b border-zinc-200 dark:border-zinc-800 text-xs font-semibold text-zinc-600 dark:text-zinc-400">
        <div className="flex items-center gap-2">
          <Terminal className="w-3.5 h-3.5 text-primarylw" />
          <span>Terminal</span>
        </div>
        <button
          className="p-1 rounded-md transition hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
          onClick={handleCopy}
          aria-label="Copy to clipboard"
        >
          {copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
        </button>
      </div>

      {/* Content */}
      <div className="text-xs font-mono p-3.5 bg-zinc-900 text-zinc-100 dark:bg-zinc-950 max-h-[300px] overflow-auto select-text">
        {isComplete ? (
          <pre className="whitespace-pre-wrap m-0 p-0 font-mono text-xs">
            <span className="text-emerald-400 mr-2">$</span>
            {command}
          </pre>
        ) : (
          <motion.pre className="whitespace-pre-wrap m-0 p-0 font-mono text-xs">
            <span className="text-emerald-400 mr-2">$</span>
            {displayedText}
            <motion.span
              className="inline-block w-1.5 h-3.5 bg-emerald-400 ml-1 align-middle"
              animate={{ opacity: [0, 1] }}
              transition={{ duration: 0.6, repeat: Infinity }}
            />
          </motion.pre>
        )}
      </div>
    </div>
  );
};

export default TerminalCard;

```
--------------------------------------------------

### COMPONENT: top-loader
Category: Components
Description: A slim loading indicator that appears at the top of the page to show loading progress.
URL: https://lightswind.com/components/top-loader
Import: import { TopLoader } from '@/components/lightswind/top-loader';
Registry URL: https://lightswind.com/r/top-loader.json
Install Command: npx lightswind@latest add top-loader

Usage:
```tsx
import { TopLoader } from '@/components/lightswind/top-loader';
import { Button } from '@/components/lightswind/button';
import { useState } from 'react';

export function TopLoaderDemo() {
  const [isLoading, setIsLoading] = useState(false);
  
  return (
    <div>
      <TopLoader isLoading={isLoading} />
      <Button
        onClick={() => {
          setIsLoading(true);
          setTimeout(() => setIsLoading(false), 3000);
        }}
      >
        Start Loading
      </Button>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface TopLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Whether the loader is currently active */
  isLoading?: boolean;
  /** The color of the loader bar */
  color?: string;
  /** The height of the loader bar in pixels */
  height?: number;
  /** The speed of the loader animation in milliseconds */
  speed?: number;
  /** Whether to show the spinner */
  showSpinner?: boolean;
  /** The easing function for the animation */
  easing?: string;
  /** The minimum percentage to start at */
  minimum?: number;
  /** The parent element to render the loader in */
  parent?: string;
  /** Whether to automatically increment the loader */
  trickle?: boolean;
  /** How much to increase during trickle */
  trickleRate?: number;
  /** How often to trickle in milliseconds */
  trickleSpeed?: number;
  /** Custom template for the loader */
  template?: string;
  /** Z-index for the loader elements */
  zIndex?: number;
  /** Current progress value (0-1) */
  progress?: number;
}

const TopLoader = React.forwardRef<HTMLDivElement, TopLoaderProps>(
  ({
    isLoading = false,
    color = "#33C3F0",
    height = 4,
    speed = 200,
    showSpinner = true,
    easing = "ease",
    minimum = 0.08,
    parent = "body",
    trickle = true,
    trickleRate = 0.02,
    trickleSpeed = 800,
    zIndex = 1031,
    progress,
    className,
    ...props
  }, ref) => {
    const [mounted, setMounted] = React.useState(false);
    const [currentProgress, setCurrentProgress] = React.useState(0);
    const progressRef = React.useRef<number>(0);
    const isStartedRef = React.useRef<boolean>(false);
    const requestRef = React.useRef<number | null>(null);
    const loaderIdRef = React.useRef<string>(`top-loader-${Math.random().toString(36).substring(2, 9)}`);

    // CSS styles for the loader
    const styles = React.useMemo(() => {
      return {
        container: {
          pointerEvents: 'none',
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: `${height}px`,
          zIndex: zIndex,
        } as React.CSSProperties,
        bar: {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: color,
          boxShadow: `0 0 15px ${color}, 0 0 8px ${color}`,
          transition: `transform ${speed}ms ${easing}`,
          transform: `translate3d(-${100 - (currentProgress * 100)}%, 0, 0)`,
          zIndex: zIndex,
        } as React.CSSProperties,
        spinner: {
          display: showSpinner ? 'block' : 'none',
          position: 'fixed',
          top: '15px',
          right: '15px',
          width: '18px',
          height: '25px',
          boxSizing: 'border-box',
          border: 'solid 2px transparent',
          borderTopColor: color,
          borderLeftColor: color,
          borderRadius: '50%',
          animation: 'top-loader-spinner 400ms linear infinite',
          zIndex: zIndex,
        } as React.CSSProperties,
      };
    }, [color, currentProgress, easing, height, showSpinner, speed, zIndex]);

    // Helper functions
    const clamp = (n: number, min: number, max: number): number => {
      if (n < min) return min;
      if (n > max) return max;
      return n;
    };

    const set = React.useCallback((n: number) => {
      n = clamp(n, minimum, 1);
      progressRef.current = n;
      setCurrentProgress(n);
      
      if (n === 1) {
        setTimeout(() => {
          setCurrentProgress(0);
          isStartedRef.current = false;
        }, speed);
      } else {
        isStartedRef.current = true;
      }
    }, [minimum, speed]);

    const inc = React.useCallback((amount?: number) => {
      let n = progressRef.current;
      
      if (!isStartedRef.current) {
        set(minimum);
        return;
      }
      
      if (typeof amount !== 'number') {
        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
      }
      
      n = clamp(n + amount, 0, 0.994);
      set(n);
    }, [minimum, set]);

    const trickleFunction = React.useCallback(() => {
      inc(trickleRate * Math.random());
    }, [inc, trickleRate]);

    React.useEffect(() => {
      if (!mounted) return;
      
      if (progress !== undefined) {
        set(progress);
        return;
      }
      
      if (isLoading && trickle) {
        const tick = () => {
          if (!isLoading) return;
          trickleFunction();
          requestRef.current = window.setTimeout(() => {
            if (requestRef.current) {
              tick();
            }
          }, trickleSpeed);
        };
        
        tick();
        
        return () => {
          if (requestRef.current) {
            window.clearTimeout(requestRef.current);
            requestRef.current = null;
          }
        };
      }
    }, [isLoading, mounted, progress, set, trickle, trickleFunction, trickleSpeed]);

    React.useEffect(() => {
      setMounted(true);
      
      const style = document.createElement('style');
      style.textContent = `
        @keyframes top-loader-spinner {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `;
      document.head.appendChild(style);
      
      return () => {
        document.head.removeChild(style);
        if (requestRef.current) {
          window.clearTimeout(requestRef.current);
        }
      };
    }, []);

    React.useEffect(() => {
      if (!mounted) return;
      
      if (isLoading) {
        if (currentProgress === 0) {
          set(minimum);
        }
      } else if (currentProgress > 0) {
        set(1);
      }
    }, [isLoading, mounted, currentProgress, minimum, set]);

    if (!mounted) {
      return null;
    }

    if (!isLoading && currentProgress === 0) {
      return null;
    }

    return (
      <div
        id={loaderIdRef.current}
        ref={ref}
        className={cn("top-loader", className)}
        style={styles.container}
        {...props}
        role="progressbar"
        aria-busy={isLoading}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={Math.round(currentProgress * 100)}
      >
        <div className="top-loader-bar" style={styles.bar} />
        {showSpinner && <div className="top-loader-spinner" style={styles.spinner} />}
      </div>
    );
  }
);

TopLoader.displayName = "TopLoader";

export { TopLoader };

```
--------------------------------------------------

### COMPONENT: top-sticky-bar
Category: Components
Description: A versatile and animated sticky bar component that can appear at the top of the viewport. It supports both external control via a `show` prop and automatic visibility based on scroll position, offering customizable content, appearance, and animation.
URL: https://lightswind.com/components/top-sticky-bar
Import: import { TopStickyBar } from '@/components/lightswind/top-sticky-bar';
Registry URL: https://lightswind.com/r/top-sticky-bar.json
Install Command: npx lightswind@latest add top-sticky-bar

Usage:
```tsx
import { TopStickyBar } from '@/components/lightswind/top-sticky-bar';

// Option 1: Controlled externally (e.g., by a button or parent state)
<TopStickyBar show={true} className="bg-primarylw text-white">
  <p>This is a custom message!</p>
</TopStickyBar>

// Option 2: Automatic visibility on scroll
// Ensure your page has enough content to scroll
<TopStickyBar showOnScroll={true} scrollThreshold={250} className="bg-green-700 text-yellow-300">
  <p className="font-semibold">Scroll down to see me!</p>
</TopStickyBar>;
```

Source Code:
```tsx
import { motion, Easing } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming you have a utility for class name concatenation
import { useState, useEffect } from "react"; // Import useState and useEffect

interface TopStickyBarProps {
  /**
   * Controls the visibility of the bar. True to show, false to hide.
   * This prop is ignored if `showOnScroll` is true.
   */
  show?: boolean; // Make optional as it might be controlled internally
  /**
   * If true, the bar's visibility will be controlled by scroll position.
   * If false or undefined, the `show` prop controls visibility.
   * @default false
   */
  showOnScroll?: boolean;
  /**
   * The scroll position (in pixels) after which the bar will become visible when `showOnScroll` is true.
   * @default 200
   */
  scrollThreshold?: number;
  /**
   * The content to display inside the sticky bar. Can be a string, JSX, or any React Node.
   */
  children: React.ReactNode;
  /**
   * Optional. Additional Tailwind CSS classes to apply to the bar for styling.
   * Defaults to basic styling for a top bar.
   */
  className?: string;
  /**
   * Optional. The animation duration in seconds.
   * @default 0.4
   */
  duration?: number;
  /**
   * Optional. The easing function for the animation.
   * @default "easeInOut"
   */
  ease?: Easing | Easing[];
  /**
   * Optional. The initial vertical offset for the animation (when hidden).
   * @default -50
   */
  initialY?: number;
  /**
   * Optional. The vertical offset when the bar is shown.
   * @default 0
   */
  visibleY?: number;
  /**
   * Optional. The vertical offset when the bar is hidden.
   * @default -50
   */
  hiddenY?: number;
}

const TopStickyBar = ({
  show: externalShow = false, // Renamed to avoid conflict with internal state
  showOnScroll = false,
  scrollThreshold = 200,
  children,
  className,
  duration = 0.4,
  ease = "easeInOut",
  initialY = -50,
  visibleY = 0,
  hiddenY = -50,
}: TopStickyBarProps) => {
  const [internalShow, setInternalShow] = useState(externalShow); // Initialize with externalShow

  // Effect to manage scroll-based visibility
  useEffect(() => {
    if (!showOnScroll) {
      setInternalShow(externalShow); // If not scroll-controlled, use external prop
      return;
    }

    const handleScroll = () => {
      if (window.scrollY > scrollThreshold) {
        setInternalShow(true);
      } else {
        setInternalShow(false);
      }
    };

    window.addEventListener("scroll", handleScroll);
    // Call once on mount to set initial state based on current scroll
    handleScroll();

    return () => window.
removeEventListener("scroll", handleScroll);
  }, [showOnScroll, scrollThreshold, externalShow]); // Re-run if these props change

  // Determine the final `show` value
  const finalShow = showOnScroll ? internalShow : externalShow;

  return (
    <motion.div
      initial={{ y: initialY, opacity: 0 }}
      animate={{
        y: finalShow ? visibleY : hiddenY,
        opacity: finalShow ? 1 : 0,
      }}
      transition={{ duration, ease }}
      className={cn(
        "fixed top-0 left-0 w-full z-[60] bg-gray-800 text-white py-1 text-sm text-center shadow-md",
        className
      )}
    >
      {children}
    </motion.div>
  );
};

export default TopStickyBar;
```
--------------------------------------------------

### COMPONENT: trusted-users
Category: Components
Description: A visually appealing component to showcase social proof by displaying user avatars, a star rating, and a customizable caption. Perfect for landing pages, testimonials, or feature highlights. Built with React and Tailwind CSS.
URL: https://lightswind.com/components/trusted-users
Import: import { TrustedUsers } from '@/components/lightswind/trusted-users';
Registry URL: https://lightswind.com/r/trusted-users.json
Install Command: npx lightswind@latest add trusted-users

Usage:
```tsx
import { TrustedUsers } from '@/components/lightswind/trusted-users';

<TrustedUsers
  avatars={[
    '/avatars/user1.jpg',
    '/avatars/user2.jpg',
    '/avatars/user3.jpg',
    '/avatars/user4.jpg',
  ]}
  rating={5}
  totalUsersText="5,000+"
  caption="Loved by"
  starColorClass="text-yellow-400"
  ringColors={[
    "ring-pink-500",
    "ring-green-500",
    "ring-blue-500",
    "ring-purple-500"
  ]}
/>
```

Source Code:
```tsx
import React from "react";
import { Star } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { CountUp } from "./count-up";
import Image from "next/image";
import Link from "next/link";

interface TrustedUsersProps {
  avatars: string[];
  rating?: number;
  totalUsersText?: number;
  caption?: string;
  className?: string;
  starColorClass?: string;
  ringColors?: string[];
}

export const TrustedUsers: React.FC<TrustedUsersProps> = ({
  avatars,
  rating = 5,
  totalUsersText = 1000, // ✅ default as number
  caption = "Trusted by",
  className = "",
  starColorClass = "text-yellow-400",
  ringColors = [],
}) => {
  return (
    <div
      className={cn(
        `flex items-center justify-center gap-6 bg-transparent
          text-foreground py-4 px-4`,
        className
      )}
    >
      <div className="flex -space-x-4">
        {avatars.map((src, i) => (
          <div
            key={i}
            className={`w-10 h-10 rounded-full overflow-hidden ring-1 ring-offset-2 ring-offset-black ${ringColors[i] || "ring-blue-900"
              }`}
          >
            <Image
              src={src}
              alt={`Avatar ${i + 1}`}
              width={40}
              height={40}
              className="w-full h-full object-cover"
              loading="lazy"
            />
          </div>
        ))}
      </div>

      <div className="flex flex-col items-start gap-1">
        <div className={`flex gap-1 ${starColorClass}`}>
          {Array.from({ length: rating }).map((_, i) => (
            <Star key={i} fill="currentColor" className="w-4 h-4" aria-hidden="true" />
          ))}
        </div>
        <div className="text-foreground text-xs md:text-md font-medium flex items-center flex-wrap">
          {caption}
          <CountUp
            value={totalUsersText}
            duration={2}
            separator=","
            className="ml-1 text-lg"
            suffix="+"
            colorScheme="gradient"
          />
          <Link href="/pricing" className="underline text-primarylw dark:text-greedy ml-1">
            Pro users
          </Link>
        </div>
      </div>
    </div>
  );
};

```
--------------------------------------------------

### COMPONENT: ripple-loader
Category: Components
Description: A customizable animated ripple loader component with layered ripple effects and a centered icon, built using React and inline CSS-in-JSX. Accepts dynamic icons through props.
URL: https://lightswind.com/components/ripple-loader
Import: import RippleLoader from '@/components/lightswind/ripple-loader';
Registry URL: https://lightswind.com/r/ripple-loader.json
Install Command: npx lightswind@latest add ripple-loader

Usage:
```tsx
import RippleLoader from '@/components/lightswind/ripple-loader';
import { FaReact } from 'react-icons/fa';

<RippleLoader
  icon={<FaReact size="100%" />}
  size={200}
  duration="2s"
  logoColor="dodgerblue"
/>;
```

Source Code:
```tsx
"use client";
import React from "react";
import { motion } from "framer-motion";

type RippleLoaderProps = {
  icon?: React.ReactNode;
  size?: number;
  duration?: number; // in seconds
  logoColor?: string;
  className?: string;
};

const RippleLoader: React.FC<RippleLoaderProps> = ({
  icon,
  size = 250,
  duration = 2, // use number for easier calculations
  logoColor = "grey",
  className = "",
}) => {
  const baseInset = 40;
  const rippleBoxes = Array.from({ length: 5 }, (_, i) => ({
    inset: `${baseInset - i * 10}%`,
    zIndex: 99 - i,
    delay: i * 0.2,
    opacity: 1 - i * 0.2,
  }));

  return (
    <div
      className={`relative ${className}`}
      style={{ width: size, height: size }}
    >
      {rippleBoxes.map((box, i) => (
        <motion.div
          key={i}
          className="absolute rounded-full border-t backdrop-blur-[5px]"
          style={{
            inset: box.inset,
            zIndex: box.zIndex,
            borderColor: `rgba(100,100,100,${box.opacity})`,
            background:
              "linear-gradient(0deg, rgba(50, 50, 50, 0.2), rgba(100, 100, 100, 0.2))",
          }}
          animate={{
            scale: [1, 1.3, 1],
            boxShadow: [
              "rgba(0, 0, 0, 0.3) 0px 10px 10px 0px",
              "rgba(0, 0, 0, 0.3) 0px 30px 20px 0px",
              "rgba(0, 0, 0, 0.3) 0px 10px 10px 0px",
            ],
          }}
          transition={{
            repeat: Infinity,
            duration,
            delay: box.delay,
            ease: "easeInOut",
          }}
        />
      ))}

      {/* ICON CONTAINER 
        Set a specific z-index (e.g., 100) to ensure it's above all ripples.
        Removed p-[20%] to give the icon max available space inside the center.
      */}
      <div
        className="absolute inset-0 grid place-content-center"
        style={{ zIndex: 100, padding: `${baseInset / 2}%` }}
      >
        <motion.span
          className="w-full h-full"
          animate={{ color: [logoColor, "#ffffff", logoColor] }}
          transition={{
            repeat: Infinity,
            duration,
            delay: 0.1,
            ease: "easeInOut",
          }}
        >
          <span
            className="w-full h-full text-foreground"
            style={{ display: "inline-block", width: "100%", height: "100%" }}
          >
            {icon &&
              React.cloneElement(icon as React.ReactElement<any>, {
                className: "w-full h-full",
              })}
          </span>
        </motion.span>
      </div>
    </div>
  );
};

export default RippleLoader;
```
--------------------------------------------------

### COMPONENT: woofy-hover-image
Category: Components
Description: A sophisticated image hover effect component that reveals different visual effects through an organic marbling mask. Features WebGL-powered shaders, multiple effect types, and smooth animations.
URL: https://lightswind.com/components/woofy-hover-image
Import: import WoofyHoverImage from '@/components/lightswind/woofy-hover-image';
Registry URL: https://lightswind.com/r/woofy-hover-image.json
Install Command: npx lightswind@latest add woofy-hover-image

Usage:
```tsx
<WoofyHoverImage
  src="https://example.com/image.jpg"
  alt="Beautiful landscape"
  width="400px"
  height="300px"
  effectType="inversion"
  maskRadius={0.35}
  turbulenceIntensity={0.225}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState, useCallback } from "react";
import { cn } from "@/components/lib/utils";

export interface WoofyHoverImageProps {
  src: string;
  alt?: string;
  width?: number | string;
  height?: number | string;
  className?: string;
  effectType?: "inversion" | "blackWhite" | "sepia" | "duotone" | "pixelate" | "blur";
  maskRadius?: number;
  turbulenceIntensity?: number;
  animationSpeed?: number;
  appearDuration?: number;
  disappearDuration?: number;
  effectIntensity?: number;
  invertMask?: boolean;
  duotoneColor1?: string;
  duotoneColor2?: string;
  onHover?: () => void;
  onLeave?: () => void;
}

export const WoofyHoverImage: React.FC<WoofyHoverImageProps> = ({
  src,
  alt = "",
  width = "auto",
  height = 400,
  className,
  effectType = "inversion",
  maskRadius = 0.35,
  turbulenceIntensity = 0.225,
  animationSpeed = 1.0,
  appearDuration = 0.4,
  disappearDuration = 0.3,
  effectIntensity = 0.5,
  invertMask = false,
  duotoneColor1 = "#3366cc",
  duotoneColor2 = "#e63333",
  onHover,
  onLeave,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [imageLoaded, setImageLoaded] = useState(false);
  const imgElementRef = useRef<HTMLImageElement | null>(null);

  const isMouseInsideRef = useRef(false);
  const targetMouseRef = useRef({ x: 0.5, y: 0.5 });
  const lerpedMouseRef = useRef({ x: 0.5, y: 0.5 });
  const currentRadiusRef = useRef(0);
  const animationIdRef = useRef<number | null>(null);
  const timeRef = useRef(0);

  // Pre-rendered offscreen canvases for base image and effect image
  const baseCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const effectCanvasRef = useRef<HTMLCanvasElement | null>(null);

  // Generate the effect layer into an offscreen canvas
  const renderEffectLayer = useCallback(
    (img: HTMLImageElement, w: number, h: number) => {
      const effectCanvas = document.createElement("canvas");
      effectCanvas.width = w;
      effectCanvas.height = h;
      const eCtx = effectCanvas.getContext("2d");
      if (!eCtx) return null;

      // Draw original image first
      eCtx.drawImage(img, 0, 0, w, h);

      switch (effectType) {
        case "blackWhite": {
          eCtx.save();
          eCtx.globalCompositeOperation = "copy";
          eCtx.filter = "grayscale(100%)";
          eCtx.drawImage(img, 0, 0, w, h);
          eCtx.restore();
          break;
        }

        case "sepia": {
          eCtx.save();
          eCtx.globalCompositeOperation = "copy";
          eCtx.filter = "sepia(100%)";
          eCtx.drawImage(img, 0, 0, w, h);
          eCtx.restore();
          break;
        }

        case "blur": {
          eCtx.save();
          eCtx.globalCompositeOperation = "copy";
          const blurPx = Math.max(1, Math.round(effectIntensity * 12));
          eCtx.filter = `blur(${blurPx}px)`;
          eCtx.drawImage(img, 0, 0, w, h);
          eCtx.restore();
          break;
        }

        case "pixelate": {
          const pixelSize = Math.max(2, Math.round(effectIntensity * 24));
          const pW = Math.max(1, Math.floor(w / pixelSize));
          const pH = Math.max(1, Math.floor(h / pixelSize));
          const pCanvas = document.createElement("canvas");
          pCanvas.width = pW;
          pCanvas.height = pH;
          const pCtx = pCanvas.getContext("2d");
          if (pCtx) {
            pCtx.drawImage(img, 0, 0, pW, pH);
            eCtx.save();
            eCtx.imageSmoothingEnabled = false;
            eCtx.drawImage(pCanvas, 0, 0, w, h);
            eCtx.restore();
          }
          break;
        }

        case "duotone": {
          // 1. Grayscale base
          eCtx.save();
          eCtx.globalCompositeOperation = "copy";
          eCtx.filter = "grayscale(100%)";
          eCtx.drawImage(img, 0, 0, w, h);

          // 2. Duotone gradient overlay
          eCtx.globalCompositeOperation = "multiply";
          const grad = eCtx.createLinearGradient(0, 0, w, h);
          grad.addColorStop(0, duotoneColor1);
          grad.addColorStop(1, duotoneColor2);
          eCtx.fillStyle = grad;
          eCtx.fillRect(0, 0, w, h);
          eCtx.restore();
          break;
        }

        case "inversion":
        default: {
          eCtx.save();
          eCtx.globalCompositeOperation = "copy";
          eCtx.filter = "invert(100%)";
          eCtx.drawImage(img, 0, 0, w, h);
          eCtx.restore();
          break;
        }
      }

      return effectCanvas;
    },
    [effectType, effectIntensity, duotoneColor1, duotoneColor2]
  );

  // Load image
  useEffect(() => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = src;
    img.onload = () => {
      imgElementRef.current = img;
      setImageLoaded(true);
    };
  }, [src]);

  // Handle resizing and rebuilding offscreen canvases
  const updateCanvases = useCallback(() => {
    const container = containerRef.current;
    const canvas = canvasRef.current;
    const img = imgElementRef.current;
    if (!container || !canvas || !img) return;

    const rect = container.getBoundingClientRect();
    const w = Math.max(Math.floor(rect.width), 10);
    const h = Math.max(Math.floor(rect.height), 10);
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    canvas.width = w * dpr;
    canvas.height = h * dpr;
    canvas.style.width = `${w}px`;
    canvas.style.height = `${h}px`;

    // Base offscreen canvas
    const baseCanvas = document.createElement("canvas");
    baseCanvas.width = w * dpr;
    baseCanvas.height = h * dpr;
    const bCtx = baseCanvas.getContext("2d");
    if (bCtx) {
      bCtx.drawImage(img, 0, 0, w * dpr, h * dpr);
      baseCanvasRef.current = baseCanvas;
    }

    // Effect offscreen canvas
    effectCanvasRef.current = renderEffectLayer(img, w * dpr, h * dpr);
  }, [renderEffectLayer]);

  useEffect(() => {
    if (!imageLoaded) return;
    updateCanvases();

    const handleResize = () => updateCanvases();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [imageLoaded, updateCanvases]);

  // Draw organic ink-marbling boundary path
  const drawOrganicMask = (
    ctx: CanvasRenderingContext2D,
    cx: number,
    cy: number,
    r: number,
    time: number,
    speed: number,
    turbulence: number
  ) => {
    const steps = 72;
    ctx.beginPath();
    for (let i = 0; i <= steps; i++) {
      const angle = (i / steps) * Math.PI * 2;
      // Multi-frequency harmonic wave disturbance simulating fluid ink marbling
      const wave =
        Math.sin(3 * angle + time * speed * 1.5) * 0.45 +
        Math.cos(5 * angle - time * speed * 2.1) * 0.32 +
        Math.sin(8 * angle + time * speed * 3.3) * 0.23;

      const currentR = Math.max(0, r * (1.0 + wave * turbulence * 2.2));
      const px = cx + Math.cos(angle) * currentR;
      const py = cy + Math.sin(angle) * currentR;

      if (i === 0) ctx.moveTo(px, py);
      else ctx.lineTo(px, py);
    }
    ctx.closePath();
  };

  // Main animation loop
  useEffect(() => {
    if (!imageLoaded) return;
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animId = 0;

    const animate = () => {
      animId = requestAnimationFrame(animate);

      const baseCanvas = baseCanvasRef.current;
      const effectCanvas = effectCanvasRef.current;
      if (!baseCanvas || !effectCanvas) return;

      const w = canvas.width;
      const h = canvas.height;

      // Smooth mouse lerp
      lerpedMouseRef.current.x += (targetMouseRef.current.x - lerpedMouseRef.current.x) * 0.1;
      lerpedMouseRef.current.y += (targetMouseRef.current.y - lerpedMouseRef.current.y) * 0.1;

      if (isMouseInsideRef.current) {
        timeRef.current += 0.015 * animationSpeed;
      }

      ctx.clearRect(0, 0, w, h);

      // 1. Draw primary background layer
      const primaryLayer = invertMask ? effectCanvas : baseCanvas;
      const maskedLayer = invertMask ? baseCanvas : effectCanvas;

      ctx.drawImage(primaryLayer, 0, 0, w, h);

      // 2. Draw organic mask reveal layer if radius > 0
      const currentRadius = currentRadiusRef.current;
      if (currentRadius > 0.001) {
        const cx = lerpedMouseRef.current.x * w;
        const cy = lerpedMouseRef.current.y * h;
        const pixelRadius = currentRadius * Math.min(w, h);

        ctx.save();
        drawOrganicMask(ctx, cx, cy, pixelRadius, timeRef.current, animationSpeed, turbulenceIntensity);
        ctx.clip();

        ctx.drawImage(maskedLayer, 0, 0, w, h);
        ctx.restore();
      }
    };

    animate();
    animationIdRef.current = animId;

    return () => {
      cancelAnimationFrame(animId);
    };
  }, [imageLoaded, animationSpeed, turbulenceIntensity, invertMask]);

  // Pointer hover interactions with smooth easing
  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!containerRef.current) return;

      const rect = containerRef.current.getBoundingClientRect();
      const inside =
        e.clientX >= rect.left &&
        e.clientX <= rect.right &&
        e.clientY >= rect.top &&
        e.clientY <= rect.bottom;

      if (inside) {
        targetMouseRef.current.x = (e.clientX - rect.left) / rect.width;
        targetMouseRef.current.y = (e.clientY - rect.top) / rect.height;

        if (!isMouseInsideRef.current) {
          isMouseInsideRef.current = true;
          onHover?.();

          // Animate radius to maskRadius with ease-out cubic
          const startRadius = currentRadiusRef.current;
          const targetRadius = maskRadius;
          const startTime = performance.now();

          const animateRadius = () => {
            const elapsed = (performance.now() - startTime) / 1000;
            const progress = Math.min(elapsed / appearDuration, 1);
            const easeProgress = 1 - Math.pow(1 - progress, 3);

            currentRadiusRef.current = startRadius + (targetRadius - startRadius) * easeProgress;

            if (progress < 1 && isMouseInsideRef.current) {
              requestAnimationFrame(animateRadius);
            }
          };

          animateRadius();
        }
      } else if (isMouseInsideRef.current) {
        isMouseInsideRef.current = false;
        onLeave?.();

        // Animate radius to 0 with ease-in cubic
        const startRadius = currentRadiusRef.current;
        const startTime = performance.now();

        const animateRadius = () => {
          const elapsed = (performance.now() - startTime) / 1000;
          const progress = Math.min(elapsed / disappearDuration, 1);
          const easeProgress = Math.pow(progress, 3);

          currentRadiusRef.current = startRadius * (1 - easeProgress);

          if (progress < 1 && !isMouseInsideRef.current) {
            requestAnimationFrame(animateRadius);
          }
        };

        animateRadius();
      }
    },
    [maskRadius, appearDuration, disappearDuration, onHover, onLeave]
  );

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove, { passive: true });
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, [handleMouseMove]);

  return (
    <div
      ref={containerRef}
      className={cn("relative overflow-hidden flex items-center justify-center select-none", className)}
      style={{ width, height }}
    >
      <img
        src={src}
        alt={alt}
        className="w-full h-full object-cover pointer-events-none"
        style={{ position: "relative", zIndex: 0 }}
      />
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full pointer-events-none block z-10"
      />
    </div>
  );
};

export default WoofyHoverImage;
```
--------------------------------------------------

### COMPONENT: cinematic-scroll
Category: Components
Description: A premium scrollable container that features layered, progressive blur masking at the top and bottom edges. It creates a cinematic 'fade-out' effect for content as it enters or leaves the scrollable area, paired with a high-performance custom scrollbar built with Framer Motion. This component is designed to elevate long-form content, sidebars, or complex layouts with a professional editorial aesthetic.
URL: https://lightswind.com/components/cinematic-scroll
Import: import { CinematicScroll } from "@/components/lightswind/cinematic-scroll"
Registry URL: https://lightswind.com/r/cinematic-scroll.json
Install Command: npx lightswind@latest add cinematic-scroll

Usage:
```tsx
import { CinematicScroll } from "@/components/lightswind/cinematic-scroll";

export default function App() {
  return (
    <div className="w-full h-[500px]">
      <CinematicScroll accentColor="#3b82f6" blurMax={20}>
        <h2 className="text-3xl font-bold">Cinematic Experience</h2>
        <p className="mt-4 text-muted-foreground">
          Scroll down to see the progressive blur masking in action at the top and bottom edges.
        </p>
        <div className="h-[1000px] mt-8 bg-gradient-to-b from-blue-500/10 to-transparent rounded-xl border border-dashed border-blue-500/20" />
      </CinematicScroll>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef } from "react";
import { motion, useScroll, useSpring } from "framer-motion";
import { cn } from "../lib/utils";

interface CinematicScrollProps {
  children: React.ReactNode;
  className?: string;
  blurLayers?: number;
  blurMax?: number;
  blurSize?: number; // in pixels
  accentColor?: string;
  showScrollbar?: boolean;
}

export const CinematicScroll = ({
  children,
  className,
  blurLayers = 5,
  blurMax = 20,
  blurSize = 80,
  accentColor = "#3b82f6",
  showScrollbar = true,
}: CinematicScrollProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const scrollerRef = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    container: scrollerRef,
  });

  // Spring smooth progress for the custom bar
  const scaleY = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative w-full h-full overflow-hidden rounded-xl border border-border bg-background",
        className
      )}
      style={{
        "--blur-max": blurMax,
        "--blur-size": blurSize,
        "--accent": accentColor,
      } as React.CSSProperties}
    >
      {/* Top Blur Mask Layers */}
      <div className="absolute top-0 left-0 right-0 z-30 pointer-events-none overflow-hidden" style={{ height: blurSize }}>
        {[...Array(blurLayers)].map((_, i) => (
          <div
            key={`top-${i}`}
            className="absolute inset-0"
            style={{
              backdropFilter: `blur(${Math.sin(((blurLayers - (i + 1)) / blurLayers) * Math.PI / 2) * blurMax}px) contrast(1.2) brightness(1.1)`,
              maskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
              WebkitMaskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
            }}
          />
        ))}
      </div>

      {/* Bottom Blur Mask Layers */}
      <div className="absolute bottom-0 left-0 right-0 z-30 pointer-events-none overflow-hidden rotate-180" style={{ height: blurSize }}>
        {[...Array(blurLayers)].map((_, i) => (
          <div
            key={`bottom-${i}`}
            className="absolute inset-0"
            style={{
              backdropFilter: `blur(${Math.sin(((blurLayers - (i + 1)) / blurLayers) * Math.PI / 2) * blurMax}px) contrast(1.2) brightness(1.1)`,
              maskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
              WebkitMaskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
            }}
          />
        ))}
      </div>

      {/* Custom Scrollbar */}
      {showScrollbar && (
        <div className="absolute top-2 right-2 bottom-2 w-1.5 z-40 pointer-events-none hidden sm:block">
          <motion.div
            className="w-full rounded-full origin-top"
            style={{
              scaleY,
              height: "100%",
              background: `linear-gradient(to bottom, ${accentColor}, ${accentColor}dd)`,
              boxShadow: `0 0 10px ${accentColor}44`,
            }}
          />
        </div>
      )}

      {/* Main Scrollable Content */}
      <div
        ref={scrollerRef}
        className="w-full h-full overflow-y-auto overflow-x-hidden custom-scrollbar"
        style={{ scrollbarWidth: "none" }} // Hide default scrollbar
      >
        <div className="px-6 py-12">
          {children}
        </div>
      </div>

      <style jsx global>{`
        .custom-scrollbar::-webkit-scrollbar {
          display: none;
        }
      `}</style>
    </div>
  );
};

export default CinematicScroll;

```
--------------------------------------------------

### COMPONENT: marquee-menu
Category: Components
Description: A cinematic radio-selection menu where each list item reveals an infinitely-scrolling marquee strip behind it using a smooth clip-path animation. Hovering or selecting an item exposes a row of pill-shaped images and repeated text scrolling horizontally. Built with Framer Motion for the clip-path spring transition and a CSS keyframe animation for the seamless infinite scroll. Fully accessible with keyboard navigation, ARIA roles, and screen-reader friendly hidden marquee content.
URL: https://lightswind.com/components/marquee-menu
Import: import MarqueeMenu from "@/components/lightswind/marquee-menu"
Registry URL: https://lightswind.com/r/marquee-menu.json
Install Command: npx lightswind@latest add marquee-menu

Usage:
```tsx
import MarqueeMenu from "@/components/lightswind/marquee-menu";

const items = [
  { name: "Vancouver", src: "https://images.unsplash.com/..." },
  { name: "Toronto",   src: "https://images.unsplash.com/..." },
  { name: "Montreal",  src: "https://images.unsplash.com/..." },
];

export function Demo() {
  return (
    <MarqueeMenu
      items={items}
      defaultIndex={0}
      rowHeight={72}
      imageWidth={140}
      marqueeDuration={12}
      showDividers
      align="center"
      onSelect={(i, item) => console.log(item.name)}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useId } from "react";
import { motion } from "framer-motion";
import { cn } from "../lib/utils";

// ─────────────────────────────────────────────────────────────────────────────
// Types
// ─────────────────────────────────────────────────────────────────────────────

export interface MarqueeMenuItemData {
  /** Display name shown in the menu list */
  name: string;
  /** Image URL shown in the scrolling marquee row */
  src: string;
  /** Image alt text (defaults to name) */
  alt?: string;
}

export interface MarqueeMenuProps {
  /** Items to display — each item gets one row in the menu and one marquee strip */
  items: MarqueeMenuItemData[];
  /** Zero-based index of the initially active item */
  defaultIndex?: number;
  /** Height of each row in pixels (menu row + marquee row are the same height) */
  rowHeight?: number;
  /** Width of each marquee image in pixels */
  imageWidth?: number;
  /** Gap between marquee elements in pixels */
  marqueeGap?: number;
  /** Marquee scroll duration in seconds (lower = faster) */
  marqueeDuration?: number;
  /** How many copies of the strip to render for seamless looping (min 2) */
  copies?: number;
  /** Additional className on the root wrapper */
  className?: string;
  /** Callback fired when the active item changes */
  onSelect?: (index: number, item: MarqueeMenuItemData) => void;
  /** Text alignment of menu labels */
  align?: "left" | "center" | "right";
  /** Whether to show a divider line between rows */
  showDividers?: boolean;
  /** Custom menu item class */
  menuItemClassName?: string;
  /** Marquee panel background colour (Tailwind class) */
  marqueeBg?: string;
}

// ─────────────────────────────────────────────────────────────────────────────
// Sub-component: a single infinitely-scrolling strip
// ─────────────────────────────────────────────────────────────────────────────

interface MarqueeRowProps {
  item: MarqueeMenuItemData;
  rowHeight: number;
  imageWidth: number;
  gap: number;
  duration: number;
  copies: number;
}

function MarqueeRow({ item, rowHeight, imageWidth, gap, duration, copies }: MarqueeRowProps) {
  const safeCount = Math.max(2, copies);

  // Render exactly 2 identical sets so the strip is 2× the visible content.
  // The CSS animation translates -50% → back to the start = seamless loop.
  const singleSet = Array.from({ length: safeCount });

  return (
    <div
      className="overflow-hidden w-full"
      style={{ height: rowHeight }}
      aria-hidden="true"
    >
      <div
        className="flex items-center w-max"
        style={{
          height: rowHeight,
          gap,
          paddingLeft: gap,
          animation: `marquee-lw ${duration}s linear infinite`,
        }}
      >
        {/* Two identical sets — .flatMap flattens into a single renderable array */}
        {[0, 1].flatMap((set) =>
          singleSet.map((_, i) => (
            <React.Fragment key={`${set}-${i}`}>
              <span
                className="text-sm sm:text-base font-semibold shrink-0 whitespace-nowrap text-foreground/70"
                style={{ fontFamily: "inherit" }}
              >
                {item.name}
              </span>
              <img
                src={item.src}
                alt={item.alt ?? item.name}
                draggable={false}
                loading="lazy"
                className="shrink-0 object-cover"
                style={{
                  width: imageWidth,
                  height: Math.round(rowHeight * 0.72),
                  aspectRatio: "3 / 1",
                  borderRadius: 9999,
                }}
              />
            </React.Fragment>
          ))
        )}


      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Main component
// ─────────────────────────────────────────────────────────────────────────────

const MarqueeMenu = ({
  items = [],
  defaultIndex = 0,
  rowHeight = 72,
  imageWidth = 140,
  marqueeGap = 40,
  marqueeDuration = 12,
  copies = 4,
  className,
  onSelect,
  align = "center",
  showDividers = true,
  menuItemClassName,
  marqueeBg,
}: MarqueeMenuProps) => {
  const [activeIndex, setActiveIndex] = useState(
    Math.max(0, Math.min(defaultIndex, items.length - 1))
  );
  const groupId = useId();
  const total = items.length;

  const handleSelect = (index: number) => {
    setActiveIndex(index);
    onSelect?.(index, items[index]);
  };

  // ── Clip-path for the marquee overlay ────────────────────────────────────
  const topPct = (activeIndex / total) * 100;
  const bottomPct = ((activeIndex + 1) / total) * 100;
  const clipPath = `polygon(0 ${topPct}%, 100% ${topPct}%, 100% ${bottomPct}%, 0 ${bottomPct}%)`;

  const alignClass =
    align === "left"
      ? "justify-start text-left"
      : align === "right"
        ? "justify-end text-right"
        : "justify-center text-center";

  if (!items.length) return null;

  return (
    <>
      {/* Keyframe injection — scoped via class to avoid global conflicts */}
      <style>{`
        @keyframes marquee-lw {
          to { transform: translateX(-50%); }
        }
      `}</style>

      <div
        className={cn("relative select-none w-full max-w-lg mx-auto", className)}
        style={{ "--row-h": `${rowHeight}px` } as React.CSSProperties}
      >
        {/* ── MENU LABELS ──────────────────────────────────────────────────── */}
        <div className="relative z-10 w-full">
          {items.map((item, i) => (
            <label
              key={item.name}
              htmlFor={`${groupId}-${i}`}
              className={cn(
                "relative flex items-center cursor-pointer",
                "transition-colors",
                showDividers && "border-b border-border/60 last:border-b-0",
                alignClass,
                menuItemClassName
              )}
              style={{ height: rowHeight }}
            >
              <input
                id={`${groupId}-${i}`}
                type="radio"
                name={groupId}
                value={item.name}
                checked={activeIndex === i}
                onChange={() => handleSelect(i)}
                className="sr-only"
              />
              <motion.span
                className={cn(
                  "text-lg sm:text-2xl md:text-3xl font-semibold tracking-tight transition-colors",
                  activeIndex === i
                    ? "text-foreground"
                    : "text-muted-foreground/60"
                )}
                animate={{ opacity: activeIndex === i ? 1 : 0.45 }}
                transition={{ duration: 0.25 }}
              >
                {item.name}
              </motion.span>
            </label>
          ))}
        </div>

        {/* ── MARQUEE OVERLAY ──────────────────────────────────────────────── */}
        <motion.div
          aria-hidden="true"
          className={cn(
            "absolute inset-0 pointer-events-none z-20",
            marqueeBg ?? "bg-background"
          )}
          style={{
            maskImage:
              "linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%)",
            WebkitMaskImage:
              "linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%)",
          }}
          animate={{ clipPath }}
          transition={{ type: "spring", bounce: 0.1, duration: 0.55 }}
        >
          {items.map((item) => (
            <MarqueeRow
              key={item.name}
              item={item}
              rowHeight={rowHeight}
              imageWidth={imageWidth}
              gap={marqueeGap}
              duration={marqueeDuration}
              copies={copies}
            />
          ))}
        </motion.div>
      </div>
    </>
  );
};

export default MarqueeMenu;

```
--------------------------------------------------

### COMPONENT: fluid-action-panel
Category: Components
Description: A professional, highly interactive floating utility widget that morphs between a collapsed progress trigger and an expanded glassmorphic settings dashboard. Features page scroll progress tracking, custom theme togglers, and clean copy-link and social sharing shortcuts with responsive touch controls.
URL: https://lightswind.com/components/fluid-action-panel
Import: import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";
Registry URL: https://lightswind.com/r/fluid-action-panel.json
Install Command: npx lightswind@latest add fluid-action-panel

Usage:
```tsx
import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";

export default function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className="relative min-h-screen">
      {/* Content here */}
      
      <FluidActionPanel
        position="bottom-right"
        isDark={isDark}
        onThemeToggle={() => setIsDark(!isDark)}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";
import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Settings2, X, Sun, Moon, Share2, Link2, Twitter, Compass, ArrowUp, Check, Monitor } from "lucide-react";
import { cn } from "@/components/lib/utils";

export interface FluidActionPanelProps {
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  className?: string;
  onThemeToggle?: () => void;
  isDark?: boolean;
}

export const FluidActionPanel = ({
  position = "bottom-right",
  className,
  onThemeToggle,
  isDark = false
}: FluidActionPanelProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrollProgress, setScrollProgress] = useState(0);
  const [copied, setCopied] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Track scroll position for reading progress
  useEffect(() => {
    const handleScroll = () => {
      const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
      if (totalScroll > 0) {
        const progress = (window.scrollY / totalScroll) * 100;
        setScrollProgress(Math.min(progress, 100));
      }
    };

    window.addEventListener("scroll", handleScroll);
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Close on click outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [isOpen]);

  const handleCopyLink = () => {
    navigator.clipboard.writeText(window.location.href);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleScrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const positionClasses = {
    "bottom-right": "bottom-6 right-6",
    "bottom-left": "bottom-6 left-6",
    "top-right": "top-6 right-6",
    "top-left": "top-6 left-6",
  };

  // SVG circular path metrics
  const radius = 26;
  const stroke = 2.5;
  const normalizedRadius = radius - stroke * 2;
  const circumference = normalizedRadius * 2 * Math.PI;
  const strokeDashoffset = circumference - (scrollProgress / 100) * circumference;

  // Stagger configurations for child elements
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.05,
        delayChildren: 0.05
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 10 },
    visible: { opacity: 1, y: 0, transition: { type: "spring" as const, stiffness: 300, damping: 25 } }
  };

  return (
    <div 
      ref={containerRef}
      className={cn("fixed z-[9999] font-sans select-none", positionClasses[position], className)}
    >
      <motion.div
        layout
        initial={{ borderRadius: 30 }}
        animate={{ 
          width: isOpen ? 320 : 56,
          height: isOpen ? 385 : 56,
          borderRadius: isOpen ? 24 : 28
        }}
        transition={{ 
          type: "spring", 
          stiffness: 350, 
          damping: 28,
          mass: 0.8
        }}
        className="bg-white/80 dark:bg-zinc-900/80 border border-zinc-200/80 dark:border-zinc-800/80 backdrop-blur-xl shadow-2xl shadow-zinc-500/10 dark:shadow-black/50 overflow-hidden flex flex-col justify-start"
      >
        {/* Toggle Button wrapper (Always rendered at the top-left coordinate space of the layout container) */}
        <div className="relative w-14 h-14 flex items-center justify-center shrink-0">
          <motion.button
            onClick={() => setIsOpen(!isOpen)}
            className="w-14 h-14 flex items-center justify-center relative focus:outline-none z-25 group"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            {/* SVG Progress Ring */}
            <svg className="w-14 h-14 absolute rotate-[-90deg] pointer-events-none">
              <circle
                stroke="currentColor"
                fill="transparent"
                strokeWidth={stroke}
                strokeDasharray={circumference + " " + circumference}
                style={{ strokeDashoffset }}
                strokeLinecap="round"
                r={normalizedRadius}
                cx="28"
                cy="28"
                className="text-zinc-900 dark:text-zinc-50 transition-all duration-75"
              />
            </svg>

            {/* Morphing Icon */}
            <AnimatePresence>
              {!isOpen ? (
                <motion.div
                  key="settings"
                  initial={{ rotate: -90, opacity: 0 }}
                  animate={{ rotate: 0, opacity: 1 }}
                  exit={{ rotate: 90, opacity: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  <Settings2 className="w-5 h-5 text-zinc-800 dark:text-zinc-200" />
                </motion.div>
              ) : (
                <motion.div
                  key="close"
                  initial={{ rotate: 90, opacity: 0 }}
                  animate={{ rotate: 0, opacity: 1 }}
                  exit={{ rotate: -90, opacity: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  <X className="w-5 h-5 text-zinc-800 dark:text-zinc-200" />
                </motion.div>
              )}
            </AnimatePresence>
          </motion.button>
        </div>

        {/* Action Panel Content (Animate in only when open) */}
        <AnimatePresence>
          {isOpen && (
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
              exit="hidden"
              className="px-5 pb-5 flex flex-col gap-4 text-left flex-1"
            >
              {/* Header Info */}
              <motion.div variants={itemVariants} className="flex flex-col gap-0.5 border-b border-zinc-200/50 dark:border-zinc-800/50 pb-2">
                <span className="text-[10px] font-black tracking-widest text-zinc-400 dark:text-zinc-500 uppercase">
                  System Hub
                </span>
                <span className="text-sm font-bold text-zinc-800 dark:text-zinc-100 flex items-center gap-1.5">
                  <Compass className="w-4 h-4 text-zinc-800 dark:text-zinc-200" /> Page Navigator
                </span>
              </motion.div>

              {/* Progress Indicator Card */}
              <motion.div 
                variants={itemVariants}
                className="flex items-center justify-between bg-zinc-50/50 dark:bg-zinc-950/40 border border-zinc-200/50 dark:border-zinc-800/40 p-3 rounded-xl shadow-sm"
              >
                <div className="flex flex-col">
                  <span className="text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase">Progress</span>
                  <span className="text-base font-black tracking-tight text-zinc-800 dark:text-zinc-200">
                    {Math.round(scrollProgress)}% Scrolled
                  </span>
                </div>
                <button
                  onClick={handleScrollToTop}
                  className="p-2.5 bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 rounded-full hover:scale-105 active:scale-95 transition-all shadow-md flex items-center justify-center border border-transparent dark:border-zinc-200/50"
                  title="Scroll to Top"
                >
                  <ArrowUp className="w-3.5 h-3.5" />
                </button>
              </motion.div>

              {/* Toggle controls grid */}
              <motion.div variants={itemVariants} className="grid grid-cols-2 gap-2">
                {/* Theme Controller */}
                <button
                  onClick={onThemeToggle}
                  className="flex flex-col items-center justify-center p-3 rounded-xl border border-zinc-200 dark:border-zinc-800/80 hover:bg-zinc-50 dark:hover:bg-zinc-950/40 hover:-translate-y-0.5 active:translate-y-0 transition-all gap-2 text-center text-zinc-700 dark:text-zinc-300"
                >
                  {isDark ? (
                    <>
                      <Sun className="w-4 h-4 text-zinc-800 dark:text-zinc-100" />
                      <span className="text-[10px] font-bold uppercase tracking-wider">Light Theme</span>
                    </>
                  ) : (
                    <>
                      <Moon className="w-4 h-4 text-zinc-800 dark:text-zinc-100" />
                      <span className="text-[10px] font-bold uppercase tracking-wider">Dark Theme</span>
                    </>
                  )}
                </button>

                {/* Link Copy Widget */}
                <button
                  onClick={handleCopyLink}
                  className="flex flex-col items-center justify-center p-3 rounded-xl border border-zinc-200 dark:border-zinc-800/80 hover:bg-zinc-50 dark:hover:bg-zinc-950/40 hover:-translate-y-0.5 active:translate-y-0 transition-all gap-2 text-center text-zinc-700 dark:text-zinc-300"
                >
                  {copied ? (
                    <>
                      <Check className="w-4 h-4 text-zinc-800 dark:text-zinc-100" />
                      <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-800 dark:text-zinc-100">Copied!</span>
                    </>
                  ) : (
                    <>
                      <Link2 className="w-4 h-4 text-zinc-800 dark:text-zinc-100" />
                      <span className="text-[10px] font-bold uppercase tracking-wider">Copy Link</span>
                    </>
                  )}
                </button>
              </motion.div>

              {/* Share hub row */}
              <motion.div variants={itemVariants} className="flex flex-col gap-1.5">
                <span className="text-[9px] font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
                  Quick Share
                </span>
                <div className="flex gap-2">
                  <a
                    href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(typeof window !== "undefined" ? window.location.href : "")}`}
                    target="_blank"
                    rel="noreferrer"
                    className="flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-950/40 hover:-translate-y-0.5 transition-all text-[11px] font-bold text-zinc-700 dark:text-zinc-300"
                  >
                    <Twitter className="w-3.5 h-3.5 text-zinc-700 dark:text-zinc-300" />
                    Twitter
                  </a>
                  <button
                    onClick={() => {
                      if (navigator.share) {
                        navigator.share({
                          title: document.title,
                          url: window.location.href
                        });
                      }
                    }}
                    className="flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-950/40 hover:-translate-y-0.5 transition-all text-[11px] font-bold text-zinc-700 dark:text-zinc-300"
                  >
                    <Share2 className="w-3.5 h-3.5 text-zinc-700 dark:text-zinc-300" />
                    System
                  </button>
                </div>
              </motion.div>

              {/* Footer specs */}
              <motion.div variants={itemVariants} className="flex justify-between items-center text-[9px] text-zinc-400 dark:text-zinc-500 border-t border-zinc-200/50 dark:border-zinc-800/50 pt-2 mt-auto">
                <span className="flex items-center gap-1 font-bold">
                  <Monitor className="w-2.5 h-2.5" /> Lightswind UI
                </span>
                <span className="font-semibold">v1.2.6</span>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    </div>
  );
};

```
--------------------------------------------------

### COMPONENT: knowledge-convergence
Category: Components
Description: An animated AI knowledge convergence hub component connecting multi-source data feeds (YouTube, Medium, GitHub, LeetCode, PDF/Word documents) into a central target title with glowing bezier beams, energy flow particles, and full light/dark theme support.
URL: https://lightswind.com/components/knowledge-convergence
Import: import KnowledgeConvergence from "@/components/lightswind/knowledge-convergence";
Registry URL: https://lightswind.com/r/knowledge-convergence.json
Install Command: npx lightswind@latest add knowledge-convergence

Usage:
```tsx
import KnowledgeConvergence from "@/components/lightswind/knowledge-convergence";

export default function Demo() {
  return (
    <KnowledgeConvergence
      title="Gyanaguru 2.0"
      badgeText="Beta"
      glowIntensity="high"
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useId } from "react";
import { motion } from "framer-motion";
import { cn } from "@/components/lib/utils";

export interface SourceItem {
  id: string;
  label?: string;
  icon?: React.ReactNode;
  type?: "default" | "skeleton" | "custom";
  badge?: string;
  href?: string;
  color?: string;
}

export interface KnowledgeConvergenceProps {
  /** Root container extra CSS classes */
  className?: string;
  /** Main focal point title on the right */
  title?: string;
  /** Badge text displayed next to main title */
  badgeText?: string;
  /** Toggle badge display */
  showBadge?: boolean;
  /** Custom list of source nodes on the left */
  sources?: SourceItem[];
  /** Primary connection glowing dot & beam accent color */
  dotColor?: string;
  /** Color theme override ('light' | 'dark' | 'system') */
  theme?: "light" | "dark" | "system";
  /** Background ambient spotlight glow intensity */
  glowIntensity?: "low" | "medium" | "high";
  /** Optional click handler for title or target node */
  onTargetClick?: () => void;
}

/* Built-in Brand Icons */
const YouTubeIcon = () => (
  <div className="w-5 h-5 flex items-center justify-center rounded bg-red-600 text-white shrink-0 shadow-xs">
    <svg className="w-3 h-3 fill-current" viewBox="0 0 24 24">
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>
  </div>
);

const MediumIcon = () => (
  <div className="w-5 h-5 flex items-center justify-center rounded bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 shrink-0 shadow-xs font-serif font-black text-xs">
    <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
      <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42c1.87 0 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
    </svg>
  </div>
);

const GitHubIcon = () => (
  <div className="w-5 h-5 flex items-center justify-center rounded bg-zinc-900 text-white dark:bg-zinc-800 dark:text-zinc-100 shrink-0 shadow-xs">
    <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
      <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
    </svg>
  </div>
);

const LeetCodeIcon = () => (
  <div className="w-5 h-5 flex items-center justify-center rounded bg-amber-500/10 text-amber-500 shrink-0 border border-amber-500/20 font-bold text-xs">
    <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
      <path d="M13.483 0a1.374 1.374 0 0 0-.961.438L7.17 5.79a1.374 1.374 0 0 0-.012 1.936l1.372 1.372a1.374 1.374 0 0 0 1.936 0L14.7 4.86a1.374 1.374 0 0 0 0-1.936l-1.37-1.37A1.374 1.374 0 0 0 13.483 0zm-8.23 8.23a1.374 1.374 0 0 0-.972.402L.402 12.512a1.374 1.374 0 0 0 0 1.944l3.88 3.88a1.374 1.374 0 0 0 1.944 0l1.372-1.372a1.374 1.374 0 0 0 0-1.944l-2.408-2.408 2.408-2.408a1.374 1.374 0 0 0 0-1.944l-1.372-1.372a1.374 1.374 0 0 0-.972-.432zM16.14 11.23a1.374 1.374 0 0 0-.972.402l-1.372 1.372a1.374 1.374 0 0 0 0 1.944l2.408 2.408-2.408 2.408a1.374 1.374 0 0 0 0 1.944l1.372 1.372a1.374 1.374 0 0 0 1.944 0l3.88-3.88a1.374 1.374 0 0 0 0-1.944l-3.88-3.88a1.374 1.374 0 0 0-.972-.402z" />
    </svg>
  </div>
);

const DocsIcon = () => (
  <div className="relative w-5 h-5 flex items-center justify-center shrink-0">
    <div className="absolute left-0 top-0 w-3.5 h-4 bg-blue-600 rounded-xs flex items-center justify-center text-white text-[8px] font-black shadow-xs z-10 border border-white/20">
      W
    </div>
    <div className="absolute right-0 bottom-0 w-3.5 h-4 bg-red-600 rounded-xs flex items-center justify-center text-white text-[7px] font-bold shadow-xs border border-white/20">
      PDF
    </div>
  </div>
);

/* Exact Header Lightswind Logo */
const HeaderLogo = () => (
  <div className="relative flex items-center justify-center shrink-0">
    <img
      src="/logo.svg"
      alt="Lightswind UI"
      className="h-8 w-auto rounded-full shadow-sm"
    />
  </div>
);

const defaultSourcesList: SourceItem[] = [
  { id: "skel-top", type: "skeleton" },
  { id: "youtube", label: "YouTube", icon: <YouTubeIcon /> },
  { id: "medium", label: "Medium", icon: <MediumIcon /> },
  { id: "github", label: "GitHub", icon: <GitHubIcon /> },
  { id: "leetcode", label: "Leetcode", icon: <LeetCodeIcon /> },
  { id: "docs", label: "PDF, Word, other docs", icon: <DocsIcon /> },
  { id: "skel-bottom", type: "skeleton" },
];

export const KnowledgeConvergence: React.FC<KnowledgeConvergenceProps> = ({
  className,
  title = "Lightswind UI",
  badgeText = "v3.1",
  showBadge = true,
  sources = defaultSourcesList,
  dotColor = "#0284c7", // Skyblue Theme Accent
  glowIntensity = "high",
  onTargetClick,
}) => {
  const [hoveredId, setHoveredId] = useState<string | null>(null);
  const filterId = useId();

  // Normalized 1000 x 600 viewBox layout coordinate system
  const viewBoxWidth = 1000;
  const viewBoxHeight = 600;

  // Left card connection point coordinates directly centered on pill dots
  const leftX = 232;
  const targetX = 635;
  const targetY = 300;

  // Vertical distribution centered around 300
  const sourceCount = sources.length;
  const totalHeight = 440;
  const startY = 80;
  const stepY = sourceCount > 1 ? totalHeight / (sourceCount - 1) : 0;

  const getSourceY = (index: number) => startY + index * stepY;

  return (
    <div
      className={cn(
        "relative w-full min-h-[480px] lg:min-h-[560px] rounded-3xl overflow-hidden select-none flex items-center justify-center p-4 sm:p-8 bg-transparent text-slate-800 dark:text-slate-100",
        className
      )}
    >
      {/* Responsive Hub Canvas */}
      <div className="relative w-full max-w-5xl h-full flex flex-col md:flex-row items-center justify-between gap-6 z-10">
        
        {/* SVG Skyblue Bezier Beams & Animated Energy Trails */}
        <svg
          className="absolute inset-0 w-full h-full pointer-events-none hidden md:block"
          viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
          preserveAspectRatio="xMidYMid meet"
        >
          <defs>
            {/* Skyblue Neon Beam Stream Gradient */}
            <linearGradient id={`${filterId}-stream-grad`} x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#0284c7" stopOpacity="0.35" />
              <stop offset="40%" stopColor="#38bdf8" stopOpacity="0.75" />
              <stop offset="80%" stopColor="#0284c7" stopOpacity="0.85" />
              <stop offset="100%" stopColor="#0369a1" stopOpacity="0.95" />
            </linearGradient>

            {/* Soft Glow Filter for Electric Beams */}
            <filter id={`${filterId}-glow`} x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="3" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>

            {/* Glowing Particle Filter */}
            <filter id={`${filterId}-dot-glow`} x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="3.5" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>

          {/* Render Bezier Stream Lines */}
          <g>
            {sources.map((src, i) => {
              const srcY = getSourceY(i);
              const isHovered = hoveredId === src.id;
              const isAnyHovered = hoveredId !== null;

              // Bezier curve calculations connecting pill node dots to hub node
              const pathD = `M ${leftX} ${srcY} C ${leftX + 180} ${srcY}, ${targetX - 180} ${targetY}, ${targetX} ${targetY}`;

              return (
                <g key={src.id}>
                  {/* Skyblue Vector Stream */}
                  <path
                    d={pathD}
                    fill="none"
                    stroke={`url(#${filterId}-stream-grad)`}
                    strokeWidth={isHovered ? 3.8 : 2}
                    strokeOpacity={isHovered ? 1 : isAnyHovered ? 0.25 : 0.6}
                    filter={`url(#${filterId}-glow)`}
                    className="transition-all duration-300"
                  />

                  {/* Pulsing Light Dotted Stream */}
                  <path
                    d={pathD}
                    fill="none"
                    stroke={dotColor}
                    strokeWidth={isHovered ? 2.5 : 1.3}
                    strokeDasharray="8 16"
                    strokeOpacity={isHovered ? 1 : 0.4}
                    className="transition-all duration-300"
                  >
                    <animate
                      attributeName="stroke-dashoffset"
                      from="48"
                      to="0"
                      dur={isHovered ? "0.9s" : "2.2s"}
                      repeatCount="indefinite"
                    />
                  </path>

                  {/* Skyblue Primary Energy Flow Dot */}
                  <circle r={isHovered ? 4.5 : 3.5} fill="#0284c7" filter={`url(#${filterId}-dot-glow)`}>
                    <animateMotion
                      path={pathD}
                      dur={isHovered ? "1.3s" : `${2.0 + (i % 3) * 0.4}s`}
                      repeatCount="indefinite"
                      begin={`${(i * 0.3) % 2}s`}
                    />
                  </circle>

                  {/* Secondary Cyan Energy Particle */}
                  <circle r="2.2" fill="#38bdf8" opacity="0.9">
                    <animateMotion
                      path={pathD}
                      dur={isHovered ? "1.3s" : `${2.0 + (i % 3) * 0.4}s`}
                      repeatCount="indefinite"
                      begin={`${((i * 0.3) % 2) + 1.0}s`}
                    />
                  </circle>
                </g>
              );
            })}
          </g>
        </svg>

        {/* Left Side: Source Nodes Stack with Light & Dark Theme Adaptivity */}
        <div className="relative z-20 flex flex-col justify-between h-[440px] w-full md:w-auto min-w-[235px]">
          {sources.map((src) => {
            const isHovered = hoveredId === src.id;

            if (src.type === "skeleton") {
              return (
                <div
                  key={src.id}
                  onMouseEnter={() => setHoveredId(src.id)}
                  onMouseLeave={() => setHoveredId(null)}
                  className="flex items-center justify-between gap-3 px-3.5 py-2.5 rounded-xl bg-slate-200/50 dark:bg-slate-800/40 border border-slate-300/60 dark:border-slate-700/50 backdrop-blur-xs w-44 opacity-60 transition-all duration-300 hover:opacity-100"
                >
                  <div className="h-2.5 w-24 rounded-full bg-slate-400/40 dark:bg-slate-600/40 animate-pulse" />
                  <div
                    className="w-2.5 h-2.5 rounded-full shrink-0 shadow-[0_0_10px_#0284c7]"
                    style={{ backgroundColor: dotColor }}
                  />
                </div>
              );
            }

            return (
              <motion.div
                key={src.id}
                onMouseEnter={() => setHoveredId(src.id)}
                onMouseLeave={() => setHoveredId(null)}
                whileHover={{ scale: 1.03, x: 5 }}
                transition={{ type: "spring", stiffness: 450, damping: 25 }}
                className={cn(
                  "relative flex items-center justify-between gap-4 px-4 py-2.5 rounded-xl border transition-all duration-300 cursor-pointer select-none",
                  // Light Mode: clean light card with dark text | Dark Mode: slate dark card with white text
                  "bg-slate-100/90 dark:bg-[#0e1629]/90 border-slate-300/80 dark:border-slate-800/80 shadow-xs backdrop-blur-md",
                  "hover:bg-white dark:hover:bg-[#14203a] hover:border-sky-500/50 hover:shadow-md dark:hover:shadow-[0_0_25px_rgba(56,189,248,0.2)]",
                  isHovered && "border-sky-500 bg-white dark:bg-[#162442] dark:border-sky-400"
                )}
              >
                {/* Source Icon & Title */}
                <div className="flex items-center gap-3">
                  {src.icon}
                  <span className="text-sm font-semibold tracking-wide text-slate-800 dark:text-slate-100">
                    {src.label}
                  </span>
                </div>

                {/* Glowing Connection Dot */}
                <div className="relative flex items-center justify-center shrink-0">
                  <div
                    className={cn(
                      "w-2.5 h-2.5 rounded-full transition-transform duration-300",
                      isHovered && "scale-130"
                    )}
                    style={{
                      backgroundColor: dotColor,
                      boxShadow: `0 0 10px ${dotColor}, 0 0 18px ${dotColor}`,
                    }}
                  />
                  <div
                    className="absolute inset-0 rounded-full animate-ping opacity-60 pointer-events-none"
                    style={{ backgroundColor: dotColor }}
                  />
                </div>
              </motion.div>
            );
          })}
        </div>

        {/* Right Side: Lightswind UI Target Node & Header Logo */}
        <div className="relative z-20 flex items-center gap-5 my-auto md:pl-8">
          {/* Central Hub Node Pulsing Dot */}
          <div className="relative flex items-center justify-center shrink-0">
            {/* Glowing Halo */}
            <div
              className="absolute w-14 h-14 rounded-full opacity-70 animate-pulse pointer-events-none"
              style={{
                background: `radial-gradient(circle, ${dotColor} 0%, transparent 70%)`,
                filter: "blur(6px)",
              }}
            />
            {/* Central Skyblue Node Core */}
            <div
              className="w-4 h-4 rounded-full relative z-10 transition-transform duration-300 hover:scale-125 cursor-pointer"
              style={{
                backgroundColor: dotColor,
                boxShadow: `0 0 14px ${dotColor}, 0 0 28px ${dotColor}`,
              }}
              onClick={onTargetClick}
            />
            <div
              className="absolute w-9 h-9 rounded-full border border-sky-500/50 animate-ping pointer-events-none"
            />
          </div>

          {/* Header Lightswind Logo & Clean Title (No Underline) */}
          <div className="flex items-center gap-3">
            {/* Exact Logo from Header */}
            <HeaderLogo />

            {/* Title Text (Adaptive Light/Dark Theme) */}
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white">
              {title}
            </h2>

            {/* Status Pill Badge */}
            {showBadge && (
              <span className="px-2.5 py-1 text-xs font-bold rounded-full bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-300 border border-sky-500/20 dark:border-sky-400/30 backdrop-blur-md shadow-xs">
                {badgeText}
              </span>
            )}
          </div>
        </div>

      </div>
    </div>
  );
};

export default KnowledgeConvergence;

```
--------------------------------------------------

## CATEGORY (FREE): Background (35)

### COMPONENT: animated-flow
Category: Background
Description: A high-performance WebGL domain-warping fluid gradient background component. Features multi-variant color presets, customizable noise scale, film grain, domain warping, rotation angle, and seamless light and dark mode theme switching.
URL: https://lightswind.com/components/animated-flow
Import: import { AnimatedFlow } from "@/components/lightswind/animated-flow"
Registry URL: https://lightswind.com/r/animated-flow.json
Install Command: npx lightswind@latest add animated-flow

Usage:
```tsx
import { AnimatedFlow } from "@/components/lightswind/animated-flow";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative overflow-hidden rounded-2xl">
      <AnimatedFlow variant="blue" flowSpeed={1.0} distortionWarp={2.6} filmGrain={0.35}>
        <div className="flex items-center justify-center h-full text-white font-bold text-3xl">
          Animated Flow
        </div>
      </AnimatedFlow>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { cn } from "@/components/lib/utils";

export type FlowVariant =
  | "blue"
  | "purple"
  | "emerald"
  | "solar"
  | "aurora"
  | "monochrome"
  | "custom"
  | "silk"
  | "abyss";

export interface AnimatedFlowProps {
  className?: string;
  children?: React.ReactNode;
  /** Preset theme variant ("blue" | "purple" | "emerald" | "solar" | "aurora" | "monochrome" | "custom") */
  variant?: FlowVariant;
  /** Velocity speed multiplier for fluid motion (default: 1.0) */
  flowSpeed?: number;
  /** Noise density zoom scale (default: 1.15) */
  zoomScale?: number;
  /** Fluid domain warping intensity (default: 2.6) */
  distortionWarp?: number;
  /** Color vibrancy & contrast multiplier (default: 1.35) */
  colorContrast?: number;
  /** Analog film grain noise opacity (0.0 to 1.0, default: 0.35) */
  filmGrain?: number;
  /** Corner dark vignette strength (0.0 to 1.0, auto-adapts by theme if undefined) */
  vignetteStrength?: number;
  /** Rotation angle of the fluid field in degrees (default: 0) */
  rotationAngle?: number;
  /** Array of up to 5 HEX color strings for custom palette */
  colors?: string[];
  /** Individual HEX color stop overrides */
  color1?: string;
  color2?: string;
  color3?: string;
  color4?: string;
  color5?: string;
  /** Whether the fluid responds to cursor movement (default: true) */
  interactive?: boolean;
}

/** Variant Color Palettes for Light and Dark Modes */
const VARIANT_PALETTES: Record<
  Exclude<FlowVariant, "custom">,
  { light: [string, string, string, string, string]; dark: [string, string, string, string, string] }
> = {
  blue: {
    light: ["#ffffff", "#e0f2fe", "#38bdf8", "#0284c7", "#1d4ed8"],
    dark: ["#000000", "#031738", "#0055ff", "#00b4d8", "#7dd3fc"],
  },
  abyss: {
    light: ["#ffffff", "#e0f2fe", "#38bdf8", "#0284c7", "#1d4ed8"],
    dark: ["#000000", "#031738", "#0055ff", "#00b4d8", "#7dd3fc"],
  },
  purple: {
    light: ["#ffffff", "#fdf2f8", "#f43f5e", "#c026d3", "#6b21a8"],
    dark: ["#000000", "#1e0038", "#7b2cbf", "#ff007f", "#f472b6"],
  },
  silk: {
    light: ["#ffffff", "#fdf2f8", "#f43f5e", "#c026d3", "#6b21a8"],
    dark: ["#000000", "#1e0038", "#7b2cbf", "#ff007f", "#f472b6"],
  },
  emerald: {
    light: ["#ffffff", "#f0fdf4", "#34d399", "#059669", "#064e3b"],
    dark: ["#000000", "#02261b", "#10b981", "#06b6d4", "#6ee7b7"],
  },
  solar: {
    light: ["#ffffff", "#fff7ed", "#fb923c", "#ea580c", "#9a3412"],
    dark: ["#000000", "#240a02", "#c2410c", "#f97316", "#fde047"],
  },
  aurora: {
    light: ["#ffffff", "#f0fdfa", "#2dd4bf", "#6366f1", "#4338ca"],
    dark: ["#000000", "#022424", "#0d9488", "#8b5cf6", "#a7f3d0"],
  },
  monochrome: {
    light: ["#ffffff", "#f1f5f9", "#94a3b8", "#475569", "#0f172a"],
    dark: ["#000000", "#121215", "#3f3f46", "#71717a", "#e4e4e7"],
  },
};

/** Converts HEX color string ("#0047ff") to RGB float array ([0, 0.278, 1]) */
function hexToRgb(hex: string): [number, number, number] {
  let c = hex.replace("#", "").trim();
  if (c.length === 3) {
    c = c.split("").map((x) => x + x).join("");
  }
  const num = parseInt(c, 16);
  if (isNaN(num)) return [0, 0, 0];
  return [(num >> 16 & 255) / 255, (num >> 8 & 255) / 255, (num & 255) / 255];
}

const VERTEX_SHADER = `
attribute vec2 position;
void main() {
    gl_Position = vec4(position, 0.0, 1.0);
}
`;

const FRAGMENT_SHADER = `
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform float u_scale;
uniform float u_warp;
uniform float u_contrast;
uniform float u_grain;
uniform float u_vignette;
uniform float u_angle;
uniform vec3 u_color1;
uniform vec3 u_color2;
uniform vec3 u_color3;
uniform vec3 u_color4;
uniform vec3 u_color5;

vec2 wp_hash2(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
    return fract(sin(p) * 43758.5453) * 2.0 - 1.0;
}

float wp_hash1(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

float wp_noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f * f * (3.0 - 2.0 * f);
    return mix(
        mix(dot(wp_hash2(i), f), 
            dot(wp_hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x), 
        mix(dot(wp_hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), 
            dot(wp_hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), 
        u.y);
}

float wp_fbm(vec2 p) {
    float a = 0.55;
    float s = 0.0;
    for (int i = 0; i < 4; i++) {
        s += a * wp_noise(p);
        p *= 2.05;
        a *= 0.45;
    }
    return s;
}

vec3 wp_pal(float t, vec3 c0, vec3 c1, vec3 c2, vec3 c3, vec3 c4) {
    t = clamp(t, 0.0, 1.0);
    vec3 c = mix(c0, c1, smoothstep(0.00, 0.35, t));
    c = mix(c, c2, smoothstep(0.30, 0.65, t));
    c = mix(c, c3, smoothstep(0.60, 0.88, t));
    c = mix(c, c4, smoothstep(0.85, 1.00, t));
    return c;
}

void main() {
    vec2 res = max(u_resolution, vec2(1.0));
    vec2 fc = vec2(gl_FragCoord.x, gl_FragCoord.y);
    vec2 uv = (fc - 0.5 * res) / res.y;

    float rad = u_angle * (3.14159265 / 180.0);
    mat2 rot = mat2(cos(rad), -sin(rad), sin(rad), cos(rad));
    uv = rot * uv;

    float sc = u_scale * 0.82;
    float wa = u_warp * 0.75;
    
    // Dynamic Mouse Warp Interaction across canvas
    vec2 mouseUV = (u_mouse - vec2(0.5, 0.5)) * vec2(res.x / res.y, 1.0);
    mouseUV = rot * mouseUV;
    float mouseDist = length(uv - mouseUV);
    float mouseInfluence = smoothstep(0.85, 0.0, mouseDist);
    vec2 mouseWarp = (uv - mouseUV) * mouseInfluence * 0.45;

    // Full-canvas interactive fluid coordinate
    vec2 uvw = uv + mouseWarp + (u_mouse - vec2(0.5, 0.5)) * 0.4;
    
    float ts = u_time * 0.45;
    uvw += 0.07 * vec2(sin(ts + uv.y * 3.8 + uv.x * 2.1), cos(ts * 0.8 + uv.x * 3.8 - uv.y * 2.1));

    vec2 p = uvw * sc + vec2(15.4, 11.2);

    vec2 q = vec2(wp_fbm(p + vec2(0.0, 0.0)), wp_fbm(p + vec2(5.2, 1.3)));
    vec2 r = vec2(wp_fbm(p + wa * q + vec2(1.7, 9.2)), wp_fbm(p + wa * q + vec2(8.3, 2.8)));
    float f = wp_fbm(p + wa * r);

    float t = 0.42 + f * u_contrast * 1.85;
    float k = t - 0.78;
    if (k > 0.0) { t = 0.78 + k / (1.0 + k * 1.6); }
    t = pow(clamp(t, 0.0, 1.0), 1.15);

    vec3 col = wp_pal(t, u_color1, u_color2, u_color3, u_color4, u_color5);

    float d = length(uv * vec2(0.78, 0.52));
    col *= mix(1.0, 1.0 - smoothstep(0.1, 1.25, d), clamp(u_vignette, 0.0, 1.0));

    float gs = 1500.0 / res.y;
    float g = wp_hash1(floor(fc * gs) + 37.0);
    col += (g - 0.5) * clamp(u_grain, 0.0, 1.0) * 0.34 * (0.22 + dot(col, vec3(0.333)));

    gl_FragColor = vec4(max(col, vec3(0.0)), 1.0);
}
`;

/**
 * AnimatedFlow
 *
 * A high-performance WebGL domain-warping fluid gradient background component.
 * Features customizable color variants, film grain, noise scale, domain warping, rotation, and light/dark theme switching.
 */
export function AnimatedFlow({
  className,
  children,
  variant = "blue",
  flowSpeed = 1.0,
  zoomScale = 1.15,
  distortionWarp = 2.6,
  colorContrast = 1.35,
  filmGrain = 0.35,
  vignetteStrength,
  rotationAngle = 0,
  colors,
  color1,
  color2,
  color3,
  color4,
  color5,
  interactive = true,
}: AnimatedFlowProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const mouseRef = useRef({ x: 0.5, y: 0.5, targetX: 0.5, targetY: 0.5 });
  const { resolvedTheme, theme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [isLightMode, setIsLightMode] = useState(false);

  useEffect(() => {
    setMounted(true);
    const checkIsLight = () => {
      if (typeof document !== "undefined") {
        if (document.documentElement.classList.contains("dark")) {
          return false;
        }
        if (document.documentElement.classList.contains("light")) {
          return true;
        }
      }
      if (resolvedTheme) {
        return resolvedTheme === "light";
      }
      if (theme) {
        return theme === "light";
      }
      if (typeof window !== "undefined" && window.matchMedia) {
        return !window.matchMedia("(prefers-color-scheme: dark)").matches;
      }
      return false;
    };

    setIsLightMode(checkIsLight());

    if (typeof document !== "undefined") {
      const observer = new MutationObserver(() => {
        setIsLightMode(checkIsLight());
      });
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [resolvedTheme, theme]);

  const paletteKey = mounted && isLightMode ? "light" : "dark";

  // Resolve palette preset or custom overrides
  const selectedPalette = VARIANT_PALETTES[variant === "custom" ? "blue" : variant][paletteKey];

  const activeColor1 = color1 ?? colors?.[0] ?? selectedPalette[0];
  const activeColor2 = color2 ?? colors?.[1] ?? selectedPalette[1];
  const activeColor3 = color3 ?? colors?.[2] ?? selectedPalette[2];
  const activeColor4 = color4 ?? colors?.[3] ?? selectedPalette[3];
  const activeColor5 = color5 ?? colors?.[4] ?? selectedPalette[4];

  // Default vignette adapts by theme (no dark vignette in light mode)
  const activeVignette = vignetteStrength ?? (mounted && isLightMode ? 0.0 : 0.45);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl") || (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
    if (!gl) return;

    const createShader = (glCtx: WebGLRenderingContext, type: number, source: string) => {
      const shader = glCtx.createShader(type);
      if (!shader) return null;
      glCtx.shaderSource(shader, source);
      glCtx.compileShader(shader);
      if (!glCtx.getShaderParameter(shader, glCtx.COMPILE_STATUS)) {
        console.error("Shader compile error:", glCtx.getShaderInfoLog(shader));
        glCtx.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertShader = createShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
    const fragShader = createShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
    if (!vertShader || !fragShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertShader);
    gl.attachShader(program, fragShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program link error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    // Quad geometry
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const posAttrib = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(posAttrib);
    gl.vertexAttribPointer(posAttrib, 2, gl.FLOAT, false, 0, 0);

    // Uniform locations
    const uResolution = gl.getUniformLocation(program, "u_resolution");
    const uTime = gl.getUniformLocation(program, "u_time");
    const uMouse = gl.getUniformLocation(program, "u_mouse");
    const uScale = gl.getUniformLocation(program, "u_scale");
    const uWarp = gl.getUniformLocation(program, "u_warp");
    const uContrast = gl.getUniformLocation(program, "u_contrast");
    const uGrain = gl.getUniformLocation(program, "u_grain");
    const uVignette = gl.getUniformLocation(program, "u_vignette");
    const uAngle = gl.getUniformLocation(program, "u_angle");
    const uColor1 = gl.getUniformLocation(program, "u_color1");
    const uColor2 = gl.getUniformLocation(program, "u_color2");
    const uColor3 = gl.getUniformLocation(program, "u_color3");
    const uColor4 = gl.getUniformLocation(program, "u_color4");
    const uColor5 = gl.getUniformLocation(program, "u_color5");

    let animId: number;
    let startTime = performance.now();

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const width = canvas.clientWidth * dpr;
      const height = canvas.clientHeight * dpr;
      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
        gl.viewport(0, 0, width, height);
      }
    };

    const handlePointerMove = (e: MouseEvent | TouchEvent) => {
      if (!interactive) return;
      const rect = canvas.getBoundingClientRect();
      const clientX = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
      const clientY = "touches" in e ? e.touches[0]?.clientY ?? 0 : e.clientY;
      const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
      const y = Math.max(0, Math.min(1, 1.0 - (clientY - rect.top) / rect.height));
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    window.addEventListener("resize", resize);
    if (interactive) {
      window.addEventListener("mousemove", handlePointerMove);
      window.addEventListener("touchmove", handlePointerMove, { passive: true });
    }
    resize();

    const render = (now: number) => {
      const elapsedTime = (now - startTime) * 0.001 * flowSpeed;

      // Smooth mouse lerp with high responsiveness
      mouseRef.current.x += (mouseRef.current.targetX - mouseRef.current.x) * 0.08;
      mouseRef.current.y += (mouseRef.current.targetY - mouseRef.current.y) * 0.08;

      gl.useProgram(program);
      gl.uniform2f(uResolution, canvas.width, canvas.height);
      gl.uniform1f(uTime, elapsedTime);
      gl.uniform2f(uMouse, mouseRef.current.x, mouseRef.current.y);
      gl.uniform1f(uScale, zoomScale);
      gl.uniform1f(uWarp, distortionWarp);
      gl.uniform1f(uContrast, colorContrast);
      gl.uniform1f(uGrain, filmGrain);
      gl.uniform1f(uVignette, activeVignette);
      gl.uniform1f(uAngle, rotationAngle);

      const c1 = hexToRgb(activeColor1);
      const c2 = hexToRgb(activeColor2);
      const c3 = hexToRgb(activeColor3);
      const c4 = hexToRgb(activeColor4);
      const c5 = hexToRgb(activeColor5);

      gl.uniform3f(uColor1, c1[0], c1[1], c1[2]);
      gl.uniform3f(uColor2, c2[0], c2[1], c2[2]);
      gl.uniform3f(uColor3, c3[0], c3[1], c3[2]);
      gl.uniform3f(uColor4, c4[0], c4[1], c4[2]);
      gl.uniform3f(uColor5, c5[0], c5[1], c5[2]);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animId = requestAnimationFrame(render);
    };

    animId = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener("resize", resize);
      if (interactive) {
        window.removeEventListener("mousemove", handlePointerMove);
        window.removeEventListener("touchmove", handlePointerMove);
      }
      gl.deleteBuffer(positionBuffer);
      gl.deleteProgram(program);
      gl.deleteShader(vertShader);
      gl.deleteShader(fragShader);
    };
  }, [
    flowSpeed,
    zoomScale,
    distortionWarp,
    colorContrast,
    filmGrain,
    activeVignette,
    rotationAngle,
    activeColor1,
    activeColor2,
    activeColor3,
    activeColor4,
    activeColor5,
    interactive,
  ]);

  return (
    <div
      className={cn(
        "relative w-full h-full min-h-[400px] overflow-hidden bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300",
        className
      )}
    >
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none z-0" />
      {children && <div className="relative z-10 w-full h-full">{children}</div>}
    </div>
  );
}

export default AnimatedFlow;

```
--------------------------------------------------

### COMPONENT: animated-grain
Category: Background
Description: A high-performance WebGL procedural Bayer dither wave background component. Features pixel quantization, multi-harmonic domain warping, dynamic cursor interaction, analog film grain, and light and dark mode theme switching.
URL: https://lightswind.com/components/animated-grain
Import: import { AnimatedGrain } from "@/components/lightswind/animated-grain"
Registry URL: https://lightswind.com/r/animated-grain.json
Install Command: npx lightswind@latest add animated-grain

Usage:
```tsx
import { AnimatedGrain } from "@/components/lightswind/animated-grain";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative overflow-hidden rounded-2xl">
      <AnimatedGrain variant="ocean" speed={1.0} scale={3.5} intensity={2.2} ditherScale={0.6}>
        <div className="flex items-center justify-center h-full text-white font-bold text-3xl">
          Animated Grain
        </div>
      </AnimatedGrain>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { cn } from "@/components/lib/utils";

export type GrainVariant =
  | "ocean"
  | "violet"
  | "cyberpunk"
  | "emerald"
  | "solar"
  | "monochrome"
  | "sunset"
  | "matrix"
  | "custom";

export type DitherPattern = "hash" | "crosshatch" | "bayer";

export interface AnimatedGrainProps {
  className?: string;
  children?: React.ReactNode;
  /** Preset color theme variant */
  variant?: GrainVariant;
  /** Dither pattern style ("hash" for '#' weave grid, "crosshatch", or "bayer") */
  ditherPattern?: DitherPattern;
  /** Wave oscillation speed multiplier (default: 1.0) */
  speed?: number;
  /** Wave density and zoom scale (default: 3.5) */
  scale?: number;
  /** Domain warp turbulence intensity (default: 2.2) */
  intensity?: number;
  /** Pixel quantization dither scale factor (0.2 to 2.0, default: 0.6) */
  ditherScale?: number;
  /** Extra subtle analog film grain overlay (0.0 to 1.0, default: 0.15) */
  grainAmount?: number;
  /** Color vibrancy & contrast multiplier (default: 1.2) */
  contrast?: number;
  /** Field rotation angle in degrees (default: 0) */
  rotationAngle?: number;
  /** Dark corner vignette strength (0.0 to 1.0, auto-adapts by theme if undefined) */
  vignetteStrength?: number;
  /** Overall opacity (0.0 to 1.0, default: 1.0) */
  opacity?: number;
  /** Array of up to 4 HEX color strings for custom palette */
  colors?: string[];
  /** Individual HEX color overrides */
  primaryColor?: string;
  secondaryColor?: string;
  tertiaryColor?: string;
  highlightColor?: string;
  /** Whether the wave shader responds to cursor movement (default: true) */
  interactive?: boolean;
}

/** Variant Color Palettes for Light and Dark Modes */
const VARIANT_PALETTES: Record<
  Exclude<GrainVariant, "custom">,
  {
    light: [string, string, string, string]; // [primary, secondary, tertiary, highlight]
    dark: [string, string, string, string];
  }
> = {
  ocean: {
    light: ["#0284c7", "#06b6d4", "#f0f9ff", "#ffffff"],
    dark: ["#38bdf8", "#0284c7", "#031221", "#bae6fd"],
  },
  violet: {
    light: ["#5227ff", "#9333ea", "#f5f3ff", "#ffffff"],
    dark: ["#ffffff", "#5227ff", "#0a0a0f", "#a289ff"],
  },
  cyberpunk: {
    light: ["#06b6d4", "#d946ef", "#fdf4ff", "#ffffff"],
    dark: ["#00f5ff", "#ff007f", "#09090e", "#ffe600"],
  },
  emerald: {
    light: ["#059669", "#10b981", "#f0fdf4", "#ffffff"],
    dark: ["#34d399", "#059669", "#04140d", "#a7f3d0"],
  },
  solar: {
    light: ["#ea580c", "#f59e0b", "#fffbeb", "#ffffff"],
    dark: ["#fde047", "#f97316", "#140702", "#fed7aa"],
  },
  monochrome: {
    light: ["#1e293b", "#64748b", "#f8fafc", "#ffffff"],
    dark: ["#ffffff", "#71717a", "#09090b", "#d4d4d8"],
  },
  sunset: {
    light: ["#e11d48", "#f97316", "#fff1f2", "#ffffff"],
    dark: ["#fb7185", "#e11d48", "#18040a", "#fecdd3"],
  },
  matrix: {
    light: ["#16a34a", "#22c55e", "#f0fdf4", "#ffffff"],
    dark: ["#4ade80", "#16a34a", "#021206", "#86efac"],
  },
};

/** Converts HEX color string ("#5227FF") to RGB float array ([0.32, 0.15, 1.0]) */
function hexToRgb(hex: string): [number, number, number] {
  let c = hex.replace("#", "").trim();
  if (c.length === 3) {
    c = c.split("").map((x) => x + x).join("");
  }
  const num = parseInt(c, 16);
  if (isNaN(num)) return [1, 1, 1];
  return [((num >> 16) & 255) / 255, ((num >> 8) & 255) / 255, (num & 255) / 255];
}

const VERTEX_SHADER = `
attribute vec2 position;
void main() {
    gl_Position = vec4(position, 0.0, 1.0);
}
`;

const FRAGMENT_SHADER = `
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform float u_speed;
uniform float u_intensity;
uniform float u_scale;
uniform float u_downScale;
uniform float u_contrast;
uniform float u_grain;
uniform float u_vignette;
uniform float u_angle;
uniform float u_opacity;
uniform int u_ditherStyle;
uniform vec3 u_primaryColor;
uniform vec3 u_secondaryColor;
uniform vec3 u_tertiaryColor;
uniform vec3 u_highlightColor;

// Procedural Hash (#) Weave Dithering Matrix
// Generates intersecting vertical and horizontal lines forming sharp '#' lattice crosshatching
float hashGridDither(vec2 uv) {
    int x = int(mod(uv.x, 4.0));
    int y = int(mod(uv.y, 4.0));
    
    // Check if on horizontal line (y=1 or y=3) or vertical line (x=1 or x=3)
    bool isVert = (x == 1 || x == 3);
    bool isHoriz = (y == 1 || y == 3);
    
    // Intersection points of the '#' grid (4 intersection nodes)
    if (isVert && isHoriz) {
        int idx = (x == 1 ? 0 : 1) + (y == 1 ? 0 : 2);
        if (idx == 0) return 0.00;
        if (idx == 1) return 0.08;
        if (idx == 2) return 0.16;
        return 0.24;
    }
    
    // Vertical line segments connecting the '#'
    if (isVert) {
        int idx = (x == 1 ? 0 : 1) + (y == 0 ? 0 : 2);
        if (idx == 0) return 0.32;
        if (idx == 1) return 0.40;
        if (idx == 2) return 0.48;
        return 0.56;
    }
    
    // Horizontal line segments connecting the '#'
    if (isHoriz) {
        int idx = (x == 0 ? 0 : 1) + (y == 1 ? 0 : 2);
        if (idx == 0) return 0.36;
        if (idx == 1) return 0.44;
        if (idx == 2) return 0.52;
        return 0.60;
    }
    
    // Outer open spaces surrounding the '#' grid
    int idx = (x == 0 ? 0 : 1) + (y == 0 ? 0 : 2);
    if (idx == 0) return 0.76;
    if (idx == 1) return 0.84;
    if (idx == 2) return 0.92;
    return 0.98;
}

// Procedural Continuous Crosshatch Weave Matrix
float crosshatchDither(vec2 uv) {
    int x = int(mod(uv.x, 4.0));
    int y = int(mod(uv.y, 4.0));
    if ((x == 1 || x == 3) && (y == 1 || y == 3)) return 0.05;
    if (x == 1 || x == 3) return 0.35;
    if (y == 1 || y == 3) return 0.55;
    return 0.90;
}

// 4x4 Standard Bayer Dithering Matrix
float bayer4x4(vec2 uv) {
    int x = int(mod(uv.x, 4.0));
    int y = int(mod(uv.y, 4.0));
    int index = x + y * 4;
    
    if (index == 0) return 0.0 / 16.0;
    if (index == 1) return 8.0 / 16.0;
    if (index == 2) return 2.0 / 16.0;
    if (index == 3) return 10.0 / 16.0;
    if (index == 4) return 12.0 / 16.0;
    if (index == 5) return 4.0 / 16.0;
    if (index == 6) return 14.0 / 16.0;
    if (index == 7) return 6.0 / 16.0;
    if (index == 8) return 3.0 / 16.0;
    if (index == 9) return 11.0 / 16.0;
    if (index == 10) return 1.0 / 16.0;
    if (index == 11) return 9.0 / 16.0;
    if (index == 12) return 15.0 / 16.0;
    if (index == 13) return 7.0 / 16.0;
    if (index == 14) return 13.0 / 16.0;
    return 5.0 / 16.0;
}

// Pseudo-random noise hash
float hash1(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
    vec2 res = max(u_resolution, vec2(1.0));
    vec2 fc = gl_FragCoord.xy;
    vec2 st = (fc - 0.5 * res) / min(res.x, res.y);
    
    // Rotation transformation
    float rad = u_angle * (3.14159265 / 180.0);
    mat2 rot = mat2(cos(rad), -sin(rad), sin(rad), cos(rad));
    st = rot * st;

    // Interactive mouse warp displacement
    vec2 mouseST = (u_mouse - vec2(0.5, 0.5)) * vec2(res.x / min(res.x, res.y), res.y / min(res.x, res.y));
    mouseST = rot * mouseST;
    float mouseDist = length(st - mouseST);
    float mouseInfluence = smoothstep(0.9, 0.0, mouseDist);
    vec2 mouseWarp = (st - mouseST) * mouseInfluence * 0.35;

    vec2 p = (st + mouseWarp) * (u_scale * 0.85);
    float t = u_time * u_speed * 0.45;
    
    // Multi-Harmonic Wave & Domain Warping
    float wave1 = sin(p.x * 2.0 + t) * cos(p.y * 2.0 + t);
    float wave2 = sin(p.x * 3.0 - t * 0.85 + wave1 * u_intensity);
    float wave3 = cos(p.y * 4.0 + t * 0.6 + wave2 * u_intensity);
    float wave4 = sin((p.x + p.y) * 2.5 + t * 0.4 + wave3 * (u_intensity * 0.5));
    
    float wavePattern = clamp((wave1 + wave2 + wave3 + wave4) * 0.25 + 0.5, 0.0, 1.0);
    wavePattern = pow(wavePattern, 1.0 / max(0.2, u_contrast));

    // Pixel Dithering via Hash (#) or Crosshatch Matrix lookup
    float pixelSize = max(1.0, 1.0 / max(0.05, u_downScale));
    vec2 pixelCoord = floor(fc / pixelSize);
    
    float ditherThreshold;
    if (u_ditherStyle == 0) {
        ditherThreshold = hashGridDither(pixelCoord);
    } else if (u_ditherStyle == 1) {
        ditherThreshold = crosshatchDither(pixelCoord);
    } else {
        ditherThreshold = bayer4x4(pixelCoord);
    }
    
    // Dither step thresholding
    float dithered = step(ditherThreshold, wavePattern);

    // Multi-stop harmonic gradient blend
    vec3 grad = mix(u_tertiaryColor, u_secondaryColor, smoothstep(0.05, 0.65, wavePattern));
    grad = mix(grad, u_primaryColor, smoothstep(0.40, 0.88, wavePattern));
    grad = mix(grad, u_highlightColor, smoothstep(0.85, 1.00, wavePattern));
    
    vec3 finalColor = mix(u_tertiaryColor, grad, dithered);

    // Subtle edge vignette
    float d = length(st * vec2(0.8, 0.55));
    finalColor *= mix(1.0, 1.0 - smoothstep(0.2, 1.4, d), clamp(u_vignette, 0.0, 1.0));

    // Subtle analog grain layer
    float grain = hash1(floor(fc * 1.5) + fract(u_time));
    finalColor += (grain - 0.5) * clamp(u_grain, 0.0, 1.0) * 0.25;

    gl_FragColor = vec4(clamp(finalColor, 0.0, 1.0), u_opacity);
}
`;

/**
 * AnimatedGrain
 *
 * A high-performance WebGL procedural Hash (#) dither wave background component.
 * Features customizable '#' hash lattice weave dithering, domain warping, dynamic cursor interaction, and light/dark themes.
 */
export function AnimatedGrain({
  className,
  children,
  variant = "ocean",
  ditherPattern = "hash",
  speed = 1.0,
  scale = 3.5,
  intensity = 2.2,
  ditherScale = 0.6,
  grainAmount = 0.15,
  contrast = 1.2,
  rotationAngle = 0,
  vignetteStrength,
  opacity = 1.0,
  colors,
  primaryColor,
  secondaryColor,
  tertiaryColor,
  highlightColor,
  interactive = true,
}: AnimatedGrainProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const mouseRef = useRef({ x: 0.5, y: 0.5, targetX: 0.5, targetY: 0.5 });
  const { resolvedTheme, theme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [isLightMode, setIsLightMode] = useState(false);

  useEffect(() => {
    setMounted(true);
    const checkIsLight = () => {
      if (typeof document !== "undefined") {
        if (document.documentElement.classList.contains("dark")) return false;
        if (document.documentElement.classList.contains("light")) return true;
      }
      if (resolvedTheme) return resolvedTheme === "light";
      if (theme) return theme === "light";
      if (typeof window !== "undefined" && window.matchMedia) {
        return !window.matchMedia("(prefers-color-scheme: dark)").matches;
      }
      return false;
    };

    setIsLightMode(checkIsLight());

    if (typeof document !== "undefined") {
      const observer = new MutationObserver(() => {
        setIsLightMode(checkIsLight());
      });
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [resolvedTheme, theme]);

  const paletteKey = mounted && isLightMode ? "light" : "dark";
  const selectedPalette = VARIANT_PALETTES[variant === "custom" ? "ocean" : variant][paletteKey];

  const activePrimary = primaryColor ?? colors?.[0] ?? selectedPalette[0];
  const activeSecondary = secondaryColor ?? colors?.[1] ?? selectedPalette[1];
  const activeTertiary = tertiaryColor ?? colors?.[2] ?? selectedPalette[2];
  const activeHighlight = highlightColor ?? colors?.[3] ?? selectedPalette[3];

  const activeVignette = vignetteStrength ?? (mounted && isLightMode ? 0.0 : 0.4);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl =
      canvas.getContext("webgl") ||
      (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
    if (!gl) return;

    const createShader = (type: number, source: string) => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.warn("[AnimatedGrain] Shader error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vert = createShader(gl.VERTEX_SHADER, VERTEX_SHADER);
    const frag = createShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
    if (!vert || !frag) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vert);
    gl.attachShader(program, frag);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.warn("[AnimatedGrain] Program link error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    // Fullscreen Quad
    const quad = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);

    const posAttr = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(posAttr);
    gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0);

    const uniforms = {
      resolution: gl.getUniformLocation(program, "u_resolution"),
      time: gl.getUniformLocation(program, "u_time"),
      mouse: gl.getUniformLocation(program, "u_mouse"),
      speed: gl.getUniformLocation(program, "u_speed"),
      intensity: gl.getUniformLocation(program, "u_intensity"),
      scale: gl.getUniformLocation(program, "u_scale"),
      downScale: gl.getUniformLocation(program, "u_downScale"),
      contrast: gl.getUniformLocation(program, "u_contrast"),
      grain: gl.getUniformLocation(program, "u_grain"),
      vignette: gl.getUniformLocation(program, "u_vignette"),
      angle: gl.getUniformLocation(program, "u_angle"),
      opacity: gl.getUniformLocation(program, "u_opacity"),
      ditherStyle: gl.getUniformLocation(program, "u_ditherStyle"),
      primaryColor: gl.getUniformLocation(program, "u_primaryColor"),
      secondaryColor: gl.getUniformLocation(program, "u_secondaryColor"),
      tertiaryColor: gl.getUniformLocation(program, "u_tertiaryColor"),
      highlightColor: gl.getUniformLocation(program, "u_highlightColor"),
    };

    let animationFrameId: number;
    const startTime = performance.now();

    const render = (now: number) => {
      if (!canvas || !gl) return;

      const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
      const displayWidth = Math.floor(canvas.clientWidth * dpr);
      const displayHeight = Math.floor(canvas.clientHeight * dpr);

      if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
        canvas.width = displayWidth;
        canvas.height = displayHeight;
        gl.viewport(0, 0, displayWidth, displayHeight);
      }

      // Smooth mouse lerp
      if (interactive) {
        mouseRef.current.x += (mouseRef.current.targetX - mouseRef.current.x) * 0.06;
        mouseRef.current.y += (mouseRef.current.targetY - mouseRef.current.y) * 0.06;
      }

      const pCol = hexToRgb(activePrimary);
      const sCol = hexToRgb(activeSecondary);
      const tCol = hexToRgb(activeTertiary);
      const hCol = hexToRgb(activeHighlight);

      const styleIndex = ditherPattern === "crosshatch" ? 1 : ditherPattern === "bayer" ? 2 : 0;

      gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
      gl.uniform1f(uniforms.time, (now - startTime) * 0.001);
      gl.uniform2f(uniforms.mouse, mouseRef.current.x, mouseRef.current.y);
      gl.uniform1f(uniforms.speed, speed);
      gl.uniform1f(uniforms.intensity, intensity);
      gl.uniform1f(uniforms.scale, scale);
      gl.uniform1f(uniforms.downScale, ditherScale);
      gl.uniform1f(uniforms.contrast, contrast);
      gl.uniform1f(uniforms.grain, grainAmount);
      gl.uniform1f(uniforms.vignette, activeVignette);
      gl.uniform1f(uniforms.angle, rotationAngle);
      gl.uniform1f(uniforms.opacity, opacity);
      gl.uniform1i(uniforms.ditherStyle, styleIndex);

      gl.uniform3f(uniforms.primaryColor, pCol[0], pCol[1], pCol[2]);
      gl.uniform3f(uniforms.secondaryColor, sCol[0], sCol[1], sCol[2]);
      gl.uniform3f(uniforms.tertiaryColor, tCol[0], tCol[1], tCol[2]);
      gl.uniform3f(uniforms.highlightColor, hCol[0], hCol[1], hCol[2]);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animationFrameId = requestAnimationFrame(render);
    };

    animationFrameId = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(animationFrameId);
      if (gl) {
        gl.deleteProgram(program);
        gl.deleteShader(vert);
        gl.deleteShader(frag);
        gl.deleteBuffer(buffer);
      }
    };
  }, [
    activePrimary,
    activeSecondary,
    activeTertiary,
    activeHighlight,
    ditherPattern,
    speed,
    scale,
    intensity,
    ditherScale,
    grainAmount,
    contrast,
    rotationAngle,
    activeVignette,
    opacity,
    interactive,
  ]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!interactive || !canvasRef.current) return;
    const rect = canvasRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = 1.0 - (e.clientY - rect.top) / rect.height;
    mouseRef.current.targetX = Math.max(0, Math.min(1, x));
    mouseRef.current.targetY = Math.max(0, Math.min(1, y));
  };

  const handleMouseLeave = () => {
    if (!interactive) return;
    mouseRef.current.targetX = 0.5;
    mouseRef.current.targetY = 0.5;
  };

  return (
    <div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn("relative w-full h-full overflow-hidden", className)}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full block pointer-events-none"
      />
      {children && <div className="relative z-10 w-full h-full">{children}</div>}
    </div>
  );
}

export default AnimatedGrain;

```
--------------------------------------------------

### COMPONENT: animated-particles
Category: Background
Description: A high-performance WebGL particle vector field component with custom shapes (circle, star, square, diamond, ring, cross, random), diverse spatial distributions (random, spiral, orbital, wave, grid, image), curl noise flow physics, and interactive cursor velocity dynamics.
URL: https://lightswind.com/components/animated-particles
Import: import { AnimatedParticles } from "@/components/lightswind/animated-particles"
Registry URL: https://lightswind.com/r/animated-particles.json
Install Command: npx lightswind@latest add animated-particles

Usage:
```tsx
import { AnimatedParticles } from "@/components/lightswind/animated-particles";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative overflow-hidden rounded-2xl">
      <AnimatedParticles
        shape="random"
        distribution="random"
        variant="azure"
        particleCount={40000}
        speed={1.0}
      >
        <div className="flex items-center justify-center h-full text-white font-bold text-3xl">
          Animated Particles
        </div>
      </AnimatedParticles>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { cn } from "@/components/lib/utils";

export type ParticleShape =
  | "random"
  | "heart"
  | "star"
  | "saturn"
  | "ring"
  | "infinity"
  | "diamond"
  | "spiral"
  | "butterfly";

export type ParticleGlyph =
  | "circle"
  | "star"
  | "square"
  | "diamond"
  | "ring"
  | "cross"
  | "random";

export type CursorMode = "disperse" | "attract" | "swirl";

export type ParticleVariant =
  | "azure"
  | "violet"
  | "emerald"
  | "solar"
  | "aurora"
  | "monochrome"
  | "custom";

export interface AnimatedParticlesProps {
  className?: string;
  children?: React.ReactNode;
  /** Overall particle shape formation ("random" | "heart" | "star" | "saturn" | "ring" | "infinity" | "diamond" | "spiral" | "butterfly", default: "random") */
  shape?: ParticleShape;
  /** Individual particle point glyph shape ("circle" | "star" | "square" | "diamond" | "ring" | "cross" | "random") */
  glyph?: ParticleGlyph;
  /** Preset color theme variant */
  variant?: ParticleVariant;
  /** Optional image URL to sample particle colors and positions from */
  imageUrl?: string;
  /** Total number of simulated particles (5,000 to 100,000, default: 45,000) */
  particleCount?: number;
  /** Rendered particle point size (default: 2.6) */
  particleSize?: number;
  /** Particle maximum alpha opacity (0.0 to 1.0, default: 0.9) */
  particleOpacity?: number;
  /** Vector field velocity speed multiplier (default: 1.0) */
  speed?: number;
  /** Curl noise frequency zoom scale (default: 0.004) */
  noiseScale?: number;
  /** Curl noise force displacement strength (default: 0.06) */
  noiseStrength?: number;
  /** Shape assembly spring stiffness (0.01 to 0.1, default: 0.045) */
  springStiffness?: number;
  /** Particle lifespan cycle frames (default: 240) */
  lifespan?: number;
  /** Velocity damping friction factor (0.85 to 0.99, default: 0.95) */
  damping?: number;
  /** Whether the particle field responds to cursor motion (default: true) */
  interactive?: boolean;
  /** Physics mode when cursor interacts with particles ("disperse" | "attract" | "swirl") */
  cursorMode?: CursorMode;
  /** Cursor interaction force strength (default: 0.15) */
  cursorStrength?: number;
  /** Cursor interaction influence radius in pixels (default: 140) */
  cursorRadius?: number;
  /** Background canvas color (auto-adapts by theme if undefined) */
  backgroundColor?: string;
  /** Optional ambient blurred background backdrop image */
  backdropImage?: string;
  /** Opacity of ambient backdrop image (0.0 to 1.0, default: 0.15) */
  backdropOpacity?: number;
  /** Blur radius for ambient backdrop (default: 20) */
  backdropBlur?: number;
  /** Custom HEX color palette array for particles */
  colors?: string[];
}

/** Variant Color Palettes for Light and Dark Modes */
const VARIANT_PALETTES: Record<
  Exclude<ParticleVariant, "custom">,
  {
    light: [string, string, string, string];
    dark: [string, string, string, string];
  }
> = {
  azure: {
    light: ["#0284c7", "#06b6d4", "#0284c7", "#0369a1"],
    dark: ["#00f2fe", "#4facfe", "#38bdf8", "#bae6fd"],
  },
  violet: {
    light: ["#7c3aed", "#9333ea", "#6d28d9", "#581c87"],
    dark: ["#a855f7", "#ec4899", "#d946ef", "#f5d0fe"],
  },
  emerald: {
    light: ["#059669", "#10b981", "#047857", "#065f46"],
    dark: ["#10b981", "#06b6d4", "#6ee7b7", "#a7f3d0"],
  },
  solar: {
    light: ["#ea580c", "#f97316", "#c2410c", "#9a3412"],
    dark: ["#f97316", "#fde047", "#fed7aa", "#ffedd5"],
  },
  aurora: {
    light: ["#0d9488", "#4f46e5", "#0f766e", "#4338ca"],
    dark: ["#2dd4bf", "#818cf8", "#c084fc", "#e0e7ff"],
  },
  monochrome: {
    light: ["#0f172a", "#334155", "#475569", "#1e293b"],
    dark: ["#ffffff", "#e2e8f0", "#94a3b8", "#cbd5e1"],
  },
};

/** Converts HEX color string ("#00F2FE") to RGB float array ([0, 0.949, 0.996]) */
function hexToRgb(hex: string): [number, number, number] {
  let c = hex.replace("#", "").trim();
  if (c.length === 3) {
    c = c.split("").map((x) => x + x).join("");
  }
  const num = parseInt(c, 16);
  if (isNaN(num)) return [1, 1, 1];
  return [((num >> 16) & 255) / 255, ((num >> 8) & 255) / 255, (num & 255) / 255];
}

/** Computes target coordinate on the 2D canvas for each shape formation */
function computeShapeTarget(
  targetShape: ParticleShape,
  i: number,
  total: number,
  w: number,
  h: number
): [number, number] {
  const minDim = Math.min(w, h);
  const cx = w * 0.5;
  const cy = h * 0.5;

  if (targetShape === "heart") {
    const t = Math.random() * Math.PI * 2;
    const r = Math.pow(Math.random(), 0.35);
    const scale = minDim * 0.021 * r;
    const hx = 16 * Math.pow(Math.sin(t), 3) * scale;
    const hy = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) * scale;
    return [cx + hx, cy + hy + minDim * 0.03];
  }

  if (targetShape === "star") {
    const angle = Math.random() * Math.PI * 2;
    const points = 5;
    const section = Math.PI / points;
    const aMod = ((angle % (section * 2)) + section * 2) % (section * 2);
    const rInner = 0.42;
    const rOuter = 1.0;
    const t = aMod / section;
    const baseR = t < 1 ? rInner + (rOuter - rInner) * t : rOuter - (rOuter - rInner) * (t - 1);
    const volumeR = Math.pow(Math.random(), 0.45) * baseR;
    const scale = minDim * 0.38;
    const sx = Math.cos(angle - Math.PI / 2) * volumeR * scale;
    const sy = Math.sin(angle - Math.PI / 2) * volumeR * scale;
    return [cx + sx, cy + sy];
  }

  if (targetShape === "saturn") {
    if (Math.random() < 0.48) {
      const angle = Math.random() * Math.PI * 2;
      const rRing = minDim * (0.30 + Math.random() * 0.14);
      const rx = Math.cos(angle) * rRing;
      const ry = Math.sin(angle) * rRing * 0.28;
      const tilt = -0.45;
      const tx = rx * Math.cos(tilt) - ry * Math.sin(tilt);
      const ty = rx * Math.sin(tilt) + ry * Math.cos(tilt);
      return [cx + tx, cy + ty];
    } else {
      const theta = Math.random() * Math.PI * 2;
      const r = Math.sqrt(Math.random()) * minDim * 0.19;
      return [cx + Math.cos(theta) * r, cy + Math.sin(theta) * r];
    }
  }

  if (targetShape === "ring") {
    const angle = Math.random() * Math.PI * 2;
    const r = minDim * (0.33 + (Math.random() - 0.5) * 0.06);
    return [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
  }

  if (targetShape === "infinity") {
    const t = Math.random() * Math.PI * 2;
    const scale = minDim * 0.44;
    const denom = 1 + Math.sin(t) * Math.sin(t);
    const jitter = (Math.random() - 0.5) * (minDim * 0.04);
    const ix = (scale * Math.cos(t)) / denom + jitter;
    const iy = (scale * Math.sin(t) * Math.cos(t)) / denom + jitter;
    return [cx + ix, cy + iy];
  }

  if (targetShape === "diamond") {
    const u = (Math.random() - 0.5) * 2.0;
    const maxV = 1.0 - Math.abs(u);
    const v = (Math.random() - 0.5) * 2.0 * maxV;
    const scale = minDim * 0.38;
    return [cx + u * scale, cy + v * scale * 1.15];
  }

  if (targetShape === "spiral") {
    const arm = Math.random() > 0.5 ? 0 : Math.PI;
    const r = Math.pow(Math.random(), 0.55) * minDim * 0.42;
    const theta = (r / minDim) * 12.0 + arm + (Math.random() - 0.5) * 0.22;
    return [cx + Math.cos(theta) * r, cy + Math.sin(theta) * r];
  }

  if (targetShape === "butterfly") {
    const t = (Math.random() - 0.5) * Math.PI * 2;
    const r = (Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.pow(Math.sin(t / 12), 5)) * (minDim * 0.08);
    const bx = Math.sin(t) * r * Math.pow(Math.random(), 0.3);
    const by = -Math.cos(t) * r * Math.pow(Math.random(), 0.3);
    return [cx + bx, cy + by];
  }

  // Default "random": Uniformly splitted across the full canvas
  return [Math.random() * w, Math.random() * h];
}

const VERTEX_SHADER = `
attribute vec2 a_origin;
attribute vec2 a_position;
attribute float a_life;
attribute float a_maxLife;
attribute float a_shape;
attribute vec3 a_color;

uniform vec2 u_resolution;
uniform float u_particleSize;
uniform float u_particleOpacity;

varying vec2 v_texCoord;
varying float v_alpha;
varying float v_shape;
varying vec3 v_color;

void main() {
    v_texCoord = vec2(a_origin.x, 1.0 - a_origin.y);
    float lifeRatio = clamp(a_life / a_maxLife, 0.0, 1.0);
    v_alpha = sin(lifeRatio * 3.14159265) * u_particleOpacity;
    v_shape = a_shape;
    v_color = a_color;
    
    vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;
    gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0);
    gl_PointSize = u_particleSize;
}
`;

const FRAGMENT_SHADER = `
precision highp float;
uniform sampler2D u_image;
uniform int u_useImage;

varying vec2 v_texCoord;
varying float v_alpha;
varying float v_shape;
varying vec3 v_color;

void main() {
    vec2 coord = gl_PointCoord - vec2(0.5);
    float dist = length(coord);
    int shapeType = int(floor(v_shape + 0.5));
    
    // Geometry shape masking
    if (shapeType == 0) {
        // Circle
        if (dist > 0.5) discard;
    } else if (shapeType == 1) {
        // 4-Point Star
        float r = dist;
        float a = atan(coord.y, coord.x);
        float starDist = r * (0.8 + 0.6 * pow(abs(sin(a * 2.0)), 0.5));
        if (starDist > 0.45) discard;
    } else if (shapeType == 2) {
        // Square / Pixel
        if (abs(coord.x) > 0.45 || abs(coord.y) > 0.45) discard;
    } else if (shapeType == 3) {
        // Diamond
        if (abs(coord.x) + abs(coord.y) > 0.5) discard;
    } else if (shapeType == 4) {
        // Ring / Donut
        if (dist > 0.5 || dist < 0.22) discard;
    } else if (shapeType == 5) {
        // Cross '+'
        bool horiz = abs(coord.y) < 0.16 && abs(coord.x) < 0.48;
        bool vert = abs(coord.x) < 0.16 && abs(coord.y) < 0.48;
        if (!horiz && !vert) discard;
    }
    
    vec4 baseColor;
    if (u_useImage == 1) {
        baseColor = texture2D(u_image, v_texCoord);
        if (baseColor.a < 0.05) discard;
    } else {
        baseColor = vec4(v_color, 1.0);
    }
    
    gl_FragColor = vec4(baseColor.rgb, baseColor.a * v_alpha);
}
`;

/**
 * AnimatedParticles
 *
 * A high-performance WebGL particle vector field component.
 * Supports full background random particle flow as well as morphing shape formations (Heart, Star, Saturn, Ring, Infinity, Diamond, Spiral, Butterfly).
 */
export function AnimatedParticles({
  className,
  children,
  shape = "random",
  glyph = "random",
  variant = "azure",
  imageUrl,
  particleCount = 45000,
  particleSize = 2.6,
  particleOpacity = 0.9,
  speed = 1.0,
  noiseScale = 0.004,
  noiseStrength = 0.06,
  springStiffness = 0.045,
  lifespan = 240,
  damping = 0.95,
  interactive = true,
  cursorMode = "disperse",
  cursorStrength = 0.15,
  cursorRadius = 140,
  backgroundColor,
  backdropImage,
  backdropOpacity = 0.15,
  backdropBlur = 20,
  colors,
}: AnimatedParticlesProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const mouseRef = useRef({ x: -9999, y: -9999, vx: 0, vy: 0, active: false });
  const { resolvedTheme, theme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [isLightMode, setIsLightMode] = useState(false);

  useEffect(() => {
    setMounted(true);
    const checkIsLight = () => {
      if (typeof document !== "undefined") {
        if (document.documentElement.classList.contains("dark")) return false;
        if (document.documentElement.classList.contains("light")) return true;
      }
      if (resolvedTheme) return resolvedTheme === "light";
      if (theme) return theme === "light";
      if (typeof window !== "undefined" && window.matchMedia) {
        return !window.matchMedia("(prefers-color-scheme: dark)").matches;
      }
      return false;
    };

    setIsLightMode(checkIsLight());

    if (typeof document !== "undefined") {
      const observer = new MutationObserver(() => {
        setIsLightMode(checkIsLight());
      });
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [resolvedTheme, theme]);

  const paletteKey = mounted && isLightMode ? "light" : "dark";
  const selectedPalette = VARIANT_PALETTES[variant === "custom" ? "azure" : variant][paletteKey];
  const activeColors = colors && colors.length > 0 ? colors : selectedPalette;

  const resolvedBg =
    backgroundColor ?? (mounted && isLightMode ? "#ffffff" : "#07090e");

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl =
      canvas.getContext("webgl") ||
      (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
    if (!gl) return;

    const createShader = (type: number, source: string) => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.warn("[AnimatedParticles] Shader error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vert = createShader(gl.VERTEX_SHADER, VERTEX_SHADER);
    const frag = createShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
    if (!vert || !frag) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vert);
    gl.attachShader(program, frag);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.warn("[AnimatedParticles] Program link error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    // Locations
    const aOrigin = gl.getAttribLocation(program, "a_origin");
    const aPosition = gl.getAttribLocation(program, "a_position");
    const aLife = gl.getAttribLocation(program, "a_life");
    const aMaxLife = gl.getAttribLocation(program, "a_maxLife");
    const aShape = gl.getAttribLocation(program, "a_shape");
    const aColor = gl.getAttribLocation(program, "a_color");

    const uResolution = gl.getUniformLocation(program, "u_resolution");
    const uParticleSize = gl.getUniformLocation(program, "u_particleSize");
    const uParticleOpacity = gl.getUniformLocation(program, "u_particleOpacity");
    const uUseImage = gl.getUniformLocation(program, "u_useImage");
    const uImage = gl.getUniformLocation(program, "u_image");

    // Optional texture loading
    const texture = gl.createTexture();
    let imageLoaded = false;

    if (imageUrl) {
      const image = new Image();
      image.crossOrigin = "anonymous";
      image.src = imageUrl;
      image.onload = () => {
        if (!gl) return;
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        imageLoaded = true;
      };
    }

    // Particle CPU State Arrays
    const count = Math.max(1000, Math.min(100000, particleCount));
    const origins = new Float32Array(count * 2);
    const positions = new Float32Array(count * 2);
    const targets = new Float32Array(count * 2);
    const velocities = new Float32Array(count * 2);
    const lives = new Float32Array(count);
    const maxLives = new Float32Array(count);
    const shapes = new Float32Array(count);
    const colorAttrs = new Float32Array(count * 3);

    const parsedColors = activeColors.map((c) => hexToRgb(c));

    const getGlyphIndex = (g: ParticleGlyph): number => {
      switch (g) {
        case "circle":
          return 0;
        case "star":
          return 1;
        case "square":
          return 2;
        case "diamond":
          return 3;
        case "ring":
          return 4;
        case "cross":
          return 5;
        case "random":
          return Math.floor(Math.random() * 6);
        default:
          return 0;
      }
    };

    const initParticle = (i: number, w: number, h: number, respawnOnly: boolean = false) => {
      const [tx, ty] = computeShapeTarget(shape, i, count, w, h);
      targets[i * 2] = tx;
      targets[i * 2 + 1] = ty;

      origins[i * 2] = tx / Math.max(1, w);
      origins[i * 2 + 1] = ty / Math.max(1, h);

      if (!respawnOnly) {
        if (shape === "random") {
          positions[i * 2] = Math.random() * w;
          positions[i * 2 + 1] = Math.random() * h;
          velocities[i * 2] = (Math.random() - 0.5) * 1.5;
          velocities[i * 2 + 1] = (Math.random() - 0.5) * 1.5;
        } else {
          positions[i * 2] = tx + (Math.random() - 0.5) * 20.0;
          positions[i * 2 + 1] = ty + (Math.random() - 0.5) * 20.0;
          velocities[i * 2] = (Math.random() - 0.5) * 0.4;
          velocities[i * 2 + 1] = (Math.random() - 0.5) * 0.4;
        }
      } else {
        if (shape === "random") {
          positions[i * 2] = Math.random() * w;
          positions[i * 2 + 1] = Math.random() * h;
        }
      }

      const mLife = lifespan * (0.8 + Math.random() * 0.4);
      maxLives[i] = mLife;
      lives[i] = Math.random() * mLife;
      shapes[i] = getGlyphIndex(glyph);

      const colorRGB = parsedColors[Math.floor(Math.random() * parsedColors.length)] || [1, 1, 1];
      colorAttrs[i * 3] = colorRGB[0];
      colorAttrs[i * 3 + 1] = colorRGB[1];
      colorAttrs[i * 3 + 2] = colorRGB[2];
    };

    // GPU Buffers
    const originBuffer = gl.createBuffer();
    const posBuffer = gl.createBuffer();
    const lifeBuffer = gl.createBuffer();
    const maxLifeBuffer = gl.createBuffer();
    const shapeBuffer = gl.createBuffer();
    const colorBuffer = gl.createBuffer();

    let animationFrameId: number;
    let time = 0;

    const bgRgb = hexToRgb(resolvedBg);

    const render = () => {
      if (!canvas || !gl) return;

      const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
      const displayWidth = Math.floor(canvas.clientWidth * dpr);
      const displayHeight = Math.floor(canvas.clientHeight * dpr);

      if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
        canvas.width = displayWidth;
        canvas.height = displayHeight;
        gl.viewport(0, 0, displayWidth, displayHeight);
        for (let i = 0; i < count; i++) {
          initParticle(i, displayWidth, displayHeight, false);
        }
      }

      time += 0.01 * speed;
      const isRandom = shape === "random";
      const spring = isRandom ? 0.0 : springStiffness;

      // Particle physics update
      for (let i = 0; i < count; i++) {
        lives[i] += 1;
        if (lives[i] >= maxLives[i]) {
          initParticle(i, displayWidth, displayHeight, true);
        }

        const px = positions[i * 2];
        const py = positions[i * 2 + 1];
        const tx = targets[i * 2];
        const ty = targets[i * 2 + 1];

        // Shape Spring Assembly Force
        let fx = (tx - px) * spring;
        let fy = (ty - py) * spring;

        // Curl noise flow field vector
        const angle =
          Math.sin(px * noiseScale + time) *
          Math.cos(py * noiseScale + time) *
          Math.PI *
          2;
        
        const curlMag = isRandom ? noiseStrength * 2.2 : noiseStrength * 0.4;
        fx += Math.cos(angle) * curlMag;
        fy += Math.sin(angle) * curlMag;

        velocities[i * 2] = (velocities[i * 2] + fx) * damping;
        velocities[i * 2 + 1] = (velocities[i * 2 + 1] + fy) * damping;

        // Interactive cursor physics
        if (interactive && mouseRef.current.active) {
          const dx = px - mouseRef.current.x;
          const dy = py - mouseRef.current.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < cursorRadius && dist > 0) {
            const factor = (1 - dist / cursorRadius) * cursorStrength;

            if (cursorMode === "disperse") {
              const pushX = (dx / dist) * factor * 16.0 + mouseRef.current.vx * factor * 0.8;
              const pushY = (dy / dist) * factor * 16.0 + mouseRef.current.vy * factor * 0.8;
              velocities[i * 2] += pushX;
              velocities[i * 2 + 1] += pushY;
            } else if (cursorMode === "attract") {
              const pullX = -(dx / dist) * factor * 12.0;
              const pullY = -(dy / dist) * factor * 12.0;
              velocities[i * 2] += pullX;
              velocities[i * 2 + 1] += pullY;
            } else if (cursorMode === "swirl") {
              const perpX = -dy / dist;
              const perpY = dx / dist;
              velocities[i * 2] += perpX * factor * 14.0;
              velocities[i * 2 + 1] += perpY * factor * 14.0;
            }
          }
        }

        positions[i * 2] += velocities[i * 2];
        positions[i * 2 + 1] += velocities[i * 2 + 1];

        // Wrap around canvas boundaries for random mode
        if (isRandom) {
          if (positions[i * 2] < -20) positions[i * 2] = displayWidth + 20;
          else if (positions[i * 2] > displayWidth + 20) positions[i * 2] = -20;

          if (positions[i * 2 + 1] < -20) positions[i * 2 + 1] = displayHeight + 20;
          else if (positions[i * 2 + 1] > displayHeight + 20) positions[i * 2 + 1] = -20;
        }
      }

      // Clear Canvas
      gl.clearColor(bgRgb[0], bgRgb[1], bgRgb[2], 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.enable(gl.BLEND);
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

      gl.uniform2f(uResolution, displayWidth, displayHeight);
      gl.uniform1f(uParticleSize, particleSize);
      gl.uniform1f(uParticleOpacity, particleOpacity);

      const useImg = imageUrl && imageLoaded ? 1 : 0;
      gl.uniform1i(uUseImage, useImg);

      if (useImg === 1) {
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.uniform1i(uImage, 0);
      }

      // Stream buffers to GPU
      gl.bindBuffer(gl.ARRAY_BUFFER, originBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, origins, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aOrigin);
      gl.vertexAttribPointer(aOrigin, 2, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aPosition);
      gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, lifeBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, lives, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aLife);
      gl.vertexAttribPointer(aLife, 1, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, maxLifeBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, maxLives, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aMaxLife);
      gl.vertexAttribPointer(aMaxLife, 1, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, shapeBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, shapes, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aShape);
      gl.vertexAttribPointer(aShape, 1, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, colorAttrs, gl.DYNAMIC_DRAW);
      gl.enableVertexAttribArray(aColor);
      gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);

      gl.drawArrays(gl.POINTS, 0, count);

      // Damp mouse velocities
      mouseRef.current.vx *= 0.88;
      mouseRef.current.vy *= 0.88;

      animationFrameId = requestAnimationFrame(render);
    };

    // Initialize all particle targets when shape or count changes
    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
    const initialW = (canvas.clientWidth || window.innerWidth) * dpr;
    const initialH = (canvas.clientHeight || window.innerHeight) * dpr;
    for (let i = 0; i < count; i++) {
      initParticle(i, initialW, initialH, false);
    }

    animationFrameId = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(animationFrameId);
      if (gl) {
        gl.deleteProgram(program);
        gl.deleteShader(vert);
        gl.deleteShader(frag);
        gl.deleteBuffer(originBuffer);
        gl.deleteBuffer(posBuffer);
        gl.deleteBuffer(lifeBuffer);
        gl.deleteBuffer(maxLifeBuffer);
        gl.deleteBuffer(shapeBuffer);
        gl.deleteBuffer(colorBuffer);
        gl.deleteTexture(texture);
      }
    };
  }, [
    shape,
    glyph,
    variant,
    imageUrl,
    particleCount,
    particleSize,
    particleOpacity,
    speed,
    noiseScale,
    noiseStrength,
    springStiffness,
    lifespan,
    damping,
    interactive,
    cursorMode,
    cursorStrength,
    cursorRadius,
    resolvedBg,
    activeColors,
  ]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!interactive || !canvasRef.current) return;
    const rect = canvasRef.current.getBoundingClientRect();
    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
    const newX = (e.clientX - rect.left) * dpr;
    const newY = (e.clientY - rect.top) * dpr;

    if (mouseRef.current.x !== -9999) {
      mouseRef.current.vx = newX - mouseRef.current.x;
      mouseRef.current.vy = newY - mouseRef.current.y;
    }
    mouseRef.current.x = newX;
    mouseRef.current.y = newY;
    mouseRef.current.active = true;
  };

  const handleMouseLeave = () => {
    if (!interactive) return;
    mouseRef.current.active = false;
    mouseRef.current.x = -9999;
    mouseRef.current.y = -9999;
  };

  return (
    <div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn("relative w-full h-full overflow-hidden bg-background", className)}
    >
      {/* Optional Ambient Backdrop Image */}
      {backdropImage && (
        <div
          className="absolute inset-0 w-full h-full pointer-events-none transition-all duration-300"
          style={{
            backgroundImage: `url(${backdropImage})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            opacity: backdropOpacity,
            filter: `blur(${backdropBlur}px) saturate(1.4)`,
            transform: "scale(1.08)",
          }}
        />
      )}

      {/* WebGL Particle Simulation Canvas */}
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full block pointer-events-none z-1"
      />

      {/* Children Layer */}
      {children && <div className="relative z-10 w-full h-full">{children}</div>}
    </div>
  );
}

export default AnimatedParticles;

```
--------------------------------------------------

### COMPONENT: animated-wave
Category: Background
Description: A professional 3D animated wave background component using Three.js with automatic background color detection, multiple quality settings, and customizable visual effects.
URL: https://lightswind.com/components/animated-wave
Import: import AnimatedWave from '@/components/lightswind/animated-wave';
Registry URL: https://lightswind.com/r/animated-wave.json
Install Command: npx lightswind@latest add animated-wave

Usage:
```tsx
<div className="relative h-64 bg-gray-900 rounded-lg overflow-hidden">
  <AnimatedWave className="!relative !z-0" />
</div>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { createNoise2D } from "simplex-noise";
import { cn } from "@/components/lib/utils";

export interface AnimatedWaveProps {
  className?: string;
  /** Primary wave color from (CSS hex or RGB) */
  colorFrom?: string;
  /** Secondary wave color to (CSS hex or RGB) */
  colorTo?: string;
  /** Wave animation speed factor (default: 0.8) */
  speed?: number;
  /** Wave amplitude scale (default: 20) */
  amplitude?: number;
  /** Show wireframe mesh lines (default: true) */
  wireframe?: boolean;
  /** Show floating particle points (default: true) */
  showParticles?: boolean;
  /** Size of the particle dots (default: 4) */
  particleSize?: number;
  /** Grid segments resolution (default: 60) */
  resolution?: number;
  /** Enable mouse interactive sways and ripples (default: true) */
  mouseInteraction?: boolean;
  /** Background color override (default: transparent) */
  backgroundColor?: string;
  /** Wave opacity (default: 0.6) */
  opacity?: number;
  /** Camera X coordinate (default: 0) */
  cameraX?: number;
  /** Camera Y coordinate (default: 160) */
  cameraY?: number;
  /** Camera Z coordinate (default: 250) */
  cameraZ?: number;
}

// Helper to create circular particle texture
const createCircleTexture = () => {
  const canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext("2d");
  if (ctx) {
    const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
    gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
    gradient.addColorStop(0.2, "rgba(255, 255, 255, 0.8)");
    gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.2)");
    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 32, 32);
  }
  return new THREE.CanvasTexture(canvas);
};

export const AnimatedWave: React.FC<AnimatedWaveProps> = ({
  className,
  colorFrom = "#6366f1", // indigo
  colorTo = "#06b6d4",   // cyan
  speed = 0.8,
  amplitude = 25,
  wireframe = true,
  showParticles = true,
  particleSize = 5,
  resolution = 70,
  mouseInteraction = true,
  backgroundColor = "transparent",
  opacity = 0.6,
  cameraX = 0,
  cameraY = 160,
  cameraZ = 250,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [webGLFailed, setWebGLFailed] = useState(false);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Dimensions based on parent container client size
    let width = container.clientWidth || 800;
    let height = container.clientHeight || 500;

    // 1. Create Scene
    const scene = new THREE.Scene();

    // 2. Create Camera
    const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 3000);
    camera.position.set(cameraX, cameraY, cameraZ);
    camera.lookAt(0, 0, 0);

    // 3. Create WebGL Renderer
    let renderer: THREE.WebGLRenderer;
    try {
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: "mediump",
      });
      renderer.setSize(width, height);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      renderer.setClearColor(0x000000, 0);
      container.appendChild(renderer.domElement);
    } catch (e) {
      console.error("WebGL initialization failed", e);
      setWebGLFailed(true);
      return;
    }

    // 4. Lights
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambientLight);

    const pointLight = new THREE.PointLight(0xffffff, 0.8, 1000);
    pointLight.position.set(0, 300, 200);
    scene.add(pointLight);

    // 5. Geometry setup (wide spacing to fully cover background borders)
    const gridSize = resolution;
    const gridSpacing = 45;

    const geometry = new THREE.BufferGeometry();
    const count = gridSize * gridSize;

    const positions = new Float32Array(count * 3);
    const colors = new Float32Array(count * 3);

    const cFrom = new THREE.Color(colorFrom);
    const cTo = new THREE.Color(colorTo);

    let index = 0;
    for (let x = 0; x < gridSize; x++) {
      for (let y = 0; y < gridSize; y++) {
        const posX = (x - gridSize / 2) * gridSpacing;
        const posZ = (y - gridSize / 2) * gridSpacing;

        positions[index] = posX;
        positions[index + 1] = 0;
        positions[index + 2] = posZ;

        // Gradient coloring
        const t = x / gridSize;
        const mixedColor = new THREE.Color().lerpColors(cFrom, cTo, t);
        colors[index] = mixedColor.r;
        colors[index + 1] = mixedColor.g;
        colors[index + 2] = mixedColor.b;

        index += 3;
      }
    }

    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

    // Optional Grid Mesh lines
    let lineSegments: THREE.LineSegments | null = null;
    if (wireframe) {
      const indices: number[] = [];
      for (let x = 0; x < gridSize; x++) {
        for (let y = 0; y < gridSize; y++) {
          const currentIdx = x * gridSize + y;
          if (x < gridSize - 1) {
            indices.push(currentIdx, (x + 1) * gridSize + y);
          }
          if (y < gridSize - 1) {
            indices.push(currentIdx, x * gridSize + (y + 1));
          }
        }
      }
      geometry.setIndex(indices);

      const lineMaterial = new THREE.LineBasicMaterial({
        vertexColors: true,
        transparent: true,
        opacity: opacity * 0.4,
        blending: THREE.NormalBlending,
      });
      lineSegments = new THREE.LineSegments(geometry, lineMaterial);
      scene.add(lineSegments);
    }

    // Glowing Particle Points
    let points: THREE.Points | null = null;
    if (showParticles) {
      const pointsMaterial = new THREE.PointsMaterial({
        size: particleSize,
        vertexColors: true,
        transparent: true,
        opacity: opacity,
        sizeAttenuation: true,
        map: createCircleTexture(),
        blending: THREE.AdditiveBlending,
        depthWrite: false,
      });
      points = new THREE.Points(geometry, pointsMaterial);
      scene.add(points);
    }

    // Simplex Noise Generator
    const noise2D = createNoise2D();
    const clock = new THREE.Clock();

    // Mouse Tracking
    const mouse = new THREE.Vector2(0, 0);
    const targetMouse = new THREE.Vector3(0, 0, 0);
    const raycaster = new THREE.Raycaster();
    const planeXZ = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);

    const onMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;
      mouse.x = (mouseX / rect.width) * 2 - 1;
      mouse.y = -(mouseY / rect.height) * 2 + 1;
    };

    if (mouseInteraction) {
      container.addEventListener("mousemove", onMouseMove);
    }

    // Resize Observer (resizes WebGL relative to parent bounds, NOT full screen)
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { width: w, height: h } = entry.contentRect;
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        renderer.setSize(w, h);
      }
    });
    resizeObserver.observe(container);

    // Camera Sway Interpolations
    const targetCamera = new THREE.Vector3(cameraX, cameraY, cameraZ);

    // Animation Loop
    let animationFrameId: number;
    const animate = () => {
      const time = clock.getElapsedTime() * speed;

      // Project Mouse to XZ Plane
      if (mouseInteraction) {
        raycaster.setFromCamera(mouse, camera);
        raycaster.ray.intersectPlane(planeXZ, targetMouse);
        
        // Camera parallax movement
        targetCamera.x = cameraX + mouse.x * 90;
        targetCamera.y = cameraY + mouse.y * 50;
        camera.position.x += (targetCamera.x - camera.position.x) * 0.05;
        camera.position.y += (targetCamera.y - camera.position.y) * 0.05;
        camera.lookAt(0, -30, 0);
      }

      // Height displacement
      const posArray = geometry.attributes.position.array as Float32Array;
      let idx = 0;
      for (let x = 0; x < gridSize; x++) {
        for (let y = 0; y < gridSize; y++) {
          const posX = posArray[idx];
          const posZ = posArray[idx + 2];

          // Natural waves (scaled for gridSpacing = 45)
          const n1 = noise2D(posX * 0.0004, posZ * 0.0004 + time) * amplitude;
          const n2 = Math.sin(posX * 0.001 + time * 2) * Math.cos(posZ * 0.001 + time) * (amplitude * 0.4);
          let height = n1 + n2;

          // Mouse distortion ripple
          if (mouseInteraction) {
            const dx = posX - targetMouse.x;
            const dz = posZ - targetMouse.z;
            const dist = Math.sqrt(dx * dx + dz * dz);
            if (dist < 280) {
              const rippleFactor = (1 - dist / 280);
              height += Math.sin(dist * 0.04 - time * 6) * (amplitude * 1.5) * rippleFactor;
            }
          }

          posArray[idx + 1] = height;
          idx += 3;
        }
      }

      geometry.attributes.position.needsUpdate = true;

      renderer.render(scene, camera);
      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

    // Cleanup on unmount
    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      if (mouseInteraction) {
        container.removeEventListener("mousemove", onMouseMove);
      }
      
      geometry.dispose();
      if (renderer && container.contains(renderer.domElement)) {
        container.removeChild(renderer.domElement);
      }
    };
  }, [
    colorFrom,
    colorTo,
    speed,
    amplitude,
    wireframe,
    showParticles,
    particleSize,
    resolution,
    mouseInteraction,
    opacity,
    cameraX,
    cameraY,
    cameraZ,
  ]);

  return (
    <div
      ref={containerRef}
      className={cn(
        "absolute inset-0 w-full h-full z-0 overflow-hidden select-none",
        !mouseInteraction && "pointer-events-none",
        className
      )}
      style={{ backgroundColor }}
    >
      {webGLFailed && (
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-6 bg-background/90 text-foreground z-20">
          <p className="text-sm font-semibold">🚫 WebGL Support Required</p>
          <p className="text-xs text-muted-foreground mt-1 max-w-xs">
            Unable to render the 3D animated wave. Please enable hardware acceleration in your browser settings.
          </p>
        </div>
      )}
    </div>
  );
};

export default AnimatedWave;
```
--------------------------------------------------

### COMPONENT: animated-bubble-particles
Category: Background
Description: A high-performance HTML5 Canvas-based background animation engine. Features HSL color gradients, glow effects, cursor repulsion physics, and click-to-pop interactive explosions.
URL: https://lightswind.com/components/animated-bubble-particles
Import: import { AnimatedBubbleParticles } from "@/components/lightswind/animated-bubble-particles"
Registry URL: https://lightswind.com/r/animated-bubble-particles.json
Install Command: npx lightswind@latest add animated-bubble-particles

Usage:
```tsx
import { AnimatedBubbleParticles } from "@/components/lightswind/animated-bubble-particles";

// Basic usage
<AnimatedBubbleParticles />

// With custom colors and effects
<AnimatedBubbleParticles 
  colorHueStart={200}
  colorHueEnd={260}
  saturation={80}
  lightness={65}
  mouseInteraction={true}
  enablePop={true}
/>

// Custom particle size and speed
<AnimatedBubbleParticles 
  minRadius={10}
  maxRadius={45}
  speed={0.8}
  maxBubbles={40}
  spawnInterval={200}
/>
```

Source Code:
```tsx
"use client";

import React, {
  useEffect,
  useRef,
  useCallback,
  useState,
} from "react";
import { cn } from "@/components/lib/utils";

// ─── Types ──────────────────────────────────────────────────────────────────

interface Bubble {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
  baseRadius: number;
  opacity: number;
  color: string;
  hue: number;
  phase: number;      // sin-wave phase for wobble
  wobble: number;     // horizontal oscillation amplitude
  depth: number;      // 0 (far) → 1 (close) — controls size & opacity
  glowIntensity: number;
  shimmerOffset: number;
  life: number;       // 0-1, decreases as bubble rises
  popped: boolean;
  popProgress: number;
}

export interface AnimatedBubbleParticlesProps {
  className?: string;
  /** Primary gradient color (hue start, 0-360) */
  colorHueStart?: number;
  /** Secondary gradient color (hue end, 0-360) */
  colorHueEnd?: number;
  /** Saturation of bubble colors (0-100) */
  saturation?: number;
  /** Lightness of bubble colors (0-100) */
  lightness?: number;
  /** Max number of simultaneous bubbles */
  maxBubbles?: number;
  /** Bubble spawn rate in ms */
  spawnInterval?: number;
  /** Min bubble radius in px */
  minRadius?: number;
  /** Max bubble radius in px */
  maxRadius?: number;
  /** Rise speed multiplier */
  speed?: number;
  /** Mouse push repulsion radius */
  mouseRepelRadius?: number;
  /** Enable mouse interaction */
  mouseInteraction?: boolean;
  /** Enable glow effect */
  enableGlow?: boolean;
  /** Enable pop animation on click */
  enablePop?: boolean;
  /** Background color (CSS value) */
  backgroundColor?: string;
  /** Z-index of the canvas layer */
  zIndex?: number;
  children?: React.ReactNode;
}

// ─── Helpers ────────────────────────────────────────────────────────────────

const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
const clamp = (v: number, lo: number, hi: number) =>
  Math.max(lo, Math.min(hi, v));
const rand = (min: number, max: number) => min + Math.random() * (max - min);

function createBubble(
  w: number,
  h: number,
  hueStart: number,
  hueEnd: number,
  sat: number,
  lit: number,
  minR: number,
  maxR: number
): Bubble {
  const depth = rand(0.15, 1);
  const baseRadius = lerp(minR, maxR, depth) * rand(0.7, 1.3);
  const hue = rand(hueStart, hueEnd);
  return {
    x: rand(baseRadius, w - baseRadius),
    y: h + baseRadius + rand(0, 80),
    vx: rand(-0.4, 0.4),
    vy: -rand(0.5, 1.8) * (0.4 + depth * 0.8),
    radius: baseRadius,
    baseRadius,
    opacity: rand(0.25, 0.7) * depth,
    color: `hsl(${hue}, ${sat}%, ${lit}%)`,
    hue,
    phase: rand(0, Math.PI * 2),
    wobble: rand(8, 40) * (1 - depth * 0.6),
    depth,
    glowIntensity: rand(6, 22) * depth,
    shimmerOffset: rand(0, Math.PI * 2),
    life: 1,
    popped: false,
    popProgress: 0,
  };
}

// ─── Component ──────────────────────────────────────────────────────────────

const AnimatedBubbleParticles: React.FC<AnimatedBubbleParticlesProps> = ({
  className,
  colorHueStart = 200,
  colorHueEnd = 260,
  saturation = 80,
  lightness = 65,
  maxBubbles = 55,
  spawnInterval = 280,
  minRadius = 8,
  maxRadius = 55,
  speed = 1,
  mouseRepelRadius = 120,
  mouseInteraction = true,
  enableGlow = true,
  enablePop = true,
  backgroundColor = "transparent",
  zIndex = 0,
  children,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const bubblesRef = useRef<Bubble[]>([]);
  const mouseRef = useRef({ x: -9999, y: -9999, active: false });
  const rafRef = useRef<number>(0);
  const lastSpawnRef = useRef<number>(0);
  const [dims, setDims] = useState({ w: 0, h: 0 });

  // ── Resize ──────────────────────────────────────────────────────────────
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const updateSize = () => {
      const w = container.clientWidth || container.offsetWidth || (typeof window !== "undefined" ? window.innerWidth : 0);
      const h = container.clientHeight || container.offsetHeight || (typeof window !== "undefined" ? window.innerHeight : 0);
      if (w > 0 && h > 0) {
        setDims({ w, h });
        if (canvasRef.current) {
          canvasRef.current.width = w;
          canvasRef.current.height = h;
        }
      }
    };

    // Initial check
    updateSize();

    const ro = new ResizeObserver((entries) => {
      for (const e of entries) {
        const { width, height } = e.contentRect;
        const w = Math.round(width) || container.clientWidth || container.offsetWidth;
        const h = Math.round(height) || container.clientHeight || container.offsetHeight;
        if (w > 0 && h > 0) {
          setDims({ w, h });
          if (canvasRef.current) {
            canvasRef.current.width = w;
            canvasRef.current.height = h;
          }
        }
      }
    });
    ro.observe(container);
    if (typeof window !== "undefined") {
      window.addEventListener("resize", updateSize);
    }

    return () => {
      ro.disconnect();
      if (typeof window !== "undefined") {
        window.removeEventListener("resize", updateSize);
      }
    };
  }, []);

  // ── Mouse ────────────────────────────────────────────────────────────────
  useEffect(() => {
    if (!mouseInteraction) return;
    const container = containerRef.current;
    if (!container) return;

    const onMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      mouseRef.current = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
        active: true,
      };
    };
    const onLeave = () => {
      mouseRef.current.active = false;
    };
    const onClick = (e: MouseEvent) => {
      if (!enablePop) return;
      const rect = container.getBoundingClientRect();
      const cx = e.clientX - rect.left;
      const cy = e.clientY - rect.top;
      bubblesRef.current.forEach((b) => {
        const dx = b.x - cx;
        const dy = b.y - cy;
        if (Math.sqrt(dx * dx + dy * dy) < b.radius * 1.4 && !b.popped) {
          b.popped = true;
        }
      });
    };

    container.addEventListener("mousemove", onMove);
    container.addEventListener("mouseleave", onLeave);
    container.addEventListener("click", onClick);
    return () => {
      container.removeEventListener("mousemove", onMove);
      container.removeEventListener("mouseleave", onLeave);
      container.removeEventListener("click", onClick);
    };
  }, [mouseInteraction, enablePop]);

  // ── Draw bubble ─────────────────────────────────────────────────────────
  const drawBubble = useCallback(
    (ctx: CanvasRenderingContext2D, b: Bubble, t: number) => {
      if (b.popped) {
        // Pop burst — ring expanding
        const p = b.popProgress;
        const r = b.radius * (1 + p * 1.6);
        ctx.save();
        ctx.globalAlpha = (1 - p) * b.opacity * 1.2;
        ctx.beginPath();
        ctx.arc(b.x, b.y, r, 0, Math.PI * 2);
        ctx.strokeStyle = b.color;
        ctx.lineWidth = lerp(3, 0.5, p);
        ctx.stroke();
        // Spray dots
        for (let i = 0; i < 7; i++) {
          const angle = (i / 7) * Math.PI * 2 + p * 2;
          const dist = r * 0.9 * p;
          const sx = b.x + Math.cos(angle) * dist;
          const sy = b.y + Math.sin(angle) * dist;
          ctx.beginPath();
          ctx.arc(sx, sy, lerp(3, 0.5, p), 0, Math.PI * 2);
          ctx.fillStyle = b.color;
          ctx.fill();
        }
        ctx.restore();
        return;
      }

      const shimmer = Math.sin(t * 1.6 + b.shimmerOffset);
      const wobbleX = Math.sin(t * 0.9 + b.phase) * b.wobble * 0.1;

      // Glow
      if (enableGlow && b.glowIntensity > 0) {
        ctx.save();
        ctx.globalAlpha = b.opacity * 0.35;
        const glowGrad = ctx.createRadialGradient(
          b.x + wobbleX,
          b.y,
          b.radius * 0.1,
          b.x + wobbleX,
          b.y,
          b.radius + b.glowIntensity
        );
        glowGrad.addColorStop(0, b.color);
        glowGrad.addColorStop(1, "transparent");
        ctx.fillStyle = glowGrad;
        ctx.beginPath();
        ctx.arc(
          b.x + wobbleX,
          b.y,
          b.radius + b.glowIntensity,
          0,
          Math.PI * 2
        );
        ctx.fill();
        ctx.restore();
      }

      ctx.save();
      ctx.globalAlpha = clamp(b.opacity * (0.8 + shimmer * 0.2), 0, 1);

      // Main bubble body
      const bodyGrad = ctx.createRadialGradient(
        b.x + wobbleX - b.radius * 0.3,
        b.y - b.radius * 0.3,
        b.radius * 0.05,
        b.x + wobbleX,
        b.y,
        b.radius
      );
      bodyGrad.addColorStop(0, `hsla(${b.hue}, ${saturation}%, 95%, 0.9)`);
      bodyGrad.addColorStop(0.35, `${b.color}`);
      bodyGrad.addColorStop(0.75, `hsla(${b.hue + 20}, ${saturation}%, ${lightness - 15}%, 0.85)`);
      bodyGrad.addColorStop(1, `hsla(${b.hue + 40}, ${saturation}%, ${lightness - 25}%, 0.5)`);

      ctx.fillStyle = bodyGrad;
      ctx.beginPath();
      ctx.arc(b.x + wobbleX, b.y, b.radius, 0, Math.PI * 2);
      ctx.fill();

      // Rim highlight
      ctx.strokeStyle = `hsla(${b.hue}, ${saturation}%, 95%, ${0.3 + shimmer * 0.15})`;
      ctx.lineWidth = clamp(b.radius * 0.07, 0.5, 2.5);
      ctx.stroke();

      // Inner specular highlight
      const specR = b.radius * 0.38;
      const specGrad = ctx.createRadialGradient(
        b.x + wobbleX - b.radius * 0.28,
        b.y - b.radius * 0.35,
        0,
        b.x + wobbleX - b.radius * 0.28,
        b.y - b.radius * 0.35,
        specR
      );
      specGrad.addColorStop(0, `rgba(255,255,255,${0.7 + shimmer * 0.15})`);
      specGrad.addColorStop(0.6, `rgba(255,255,255,0.12)`);
      specGrad.addColorStop(1, `rgba(255,255,255,0)`);
      ctx.globalAlpha = 1;
      ctx.fillStyle = specGrad;
      ctx.beginPath();
      ctx.arc(
        b.x + wobbleX - b.radius * 0.28,
        b.y - b.radius * 0.35,
        specR,
        0,
        Math.PI * 2
      );
      ctx.fill();

      // Bottom reflection
      const refGrad = ctx.createRadialGradient(
        b.x + wobbleX + b.radius * 0.2,
        b.y + b.radius * 0.5,
        0,
        b.x + wobbleX + b.radius * 0.2,
        b.y + b.radius * 0.5,
        b.radius * 0.25
      );
      refGrad.addColorStop(0, `rgba(255,255,255,0.18)`);
      refGrad.addColorStop(1, `rgba(255,255,255,0)`);
      ctx.fillStyle = refGrad;
      ctx.beginPath();
      ctx.arc(
        b.x + wobbleX + b.radius * 0.2,
        b.y + b.radius * 0.5,
        b.radius * 0.25,
        0,
        Math.PI * 2
      );
      ctx.fill();

      ctx.restore();
    },
    [enableGlow, saturation, lightness]
  );

  // ── Main loop ────────────────────────────────────────────────────────────
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || dims.w === 0 || dims.h === 0) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let running = true;
    const { w, h } = dims;

    const tick = (ts: number) => {
      if (!running) return;
      const t = ts / 1000;

      // Spawn
      if (
        t - lastSpawnRef.current > spawnInterval / 1000 &&
        bubblesRef.current.length < maxBubbles
      ) {
        bubblesRef.current.push(
          createBubble(
            w,
            h,
            colorHueStart,
            colorHueEnd,
            saturation,
            lightness,
            minRadius,
            maxRadius
          )
        );
        lastSpawnRef.current = t;
      }

      ctx.clearRect(0, 0, w, h);

      const mx = mouseRef.current.x;
      const my = mouseRef.current.y;
      const mActive = mouseRef.current.active && mouseInteraction;

      // Update + draw (back-to-front by depth)
      bubblesRef.current.sort((a, b) => a.depth - b.depth);

      bubblesRef.current = bubblesRef.current.filter((b) => {
        if (b.popped) {
          b.popProgress += 0.055;
          drawBubble(ctx, b, t);
          return b.popProgress < 1;
        }

        // Physics
        const wobble = Math.sin(t * 0.9 + b.phase) * b.wobble * 0.012;
        b.x += b.vx + wobble;
        b.y += b.vy * speed;

        // Mouse repel
        if (mActive) {
          const dx = b.x - mx;
          const dy = b.y - my;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < mouseRepelRadius && dist > 0) {
            const force = ((mouseRepelRadius - dist) / mouseRepelRadius) * 1.8;
            b.vx += (dx / dist) * force * 0.06;
            b.vy += (dy / dist) * force * 0.04;
          }
        }

        // Velocity damping + drift correction
        b.vx *= 0.978;
        b.vy = lerp(b.vy, -rand(0.5, 1.8) * (0.4 + b.depth * 0.8) * speed, 0.015);

        // Boundary bounce
        const xOff = Math.sin(t * 0.9 + b.phase) * b.wobble * 0.1;
        if (b.x + xOff < b.radius || b.x + xOff > w - b.radius) {
          b.vx *= -0.5;
        }

        // Pulse radius
        b.radius = b.baseRadius * (1 + Math.sin(t * 1.1 + b.shimmerOffset) * 0.035);

        drawBubble(ctx, b, t);

        // Remove when fully off-screen top
        return b.y + b.radius > -80;
      });

      rafRef.current = requestAnimationFrame(tick);
    };

    rafRef.current = requestAnimationFrame(tick);
    return () => {
      running = false;
      cancelAnimationFrame(rafRef.current);
    };
  }, [
    dims,
    colorHueStart,
    colorHueEnd,
    saturation,
    lightness,
    maxBubbles,
    spawnInterval,
    minRadius,
    maxRadius,
    speed,
    mouseRepelRadius,
    mouseInteraction,
    enableGlow,
    drawBubble,
  ]);

  return (
    <div
      ref={containerRef}
      className={cn("relative overflow-hidden w-full min-w-[50vw] h-full", className)}
      style={{ backgroundColor, zIndex }}
    >
      <canvas
        ref={canvasRef}
        width={dims.w}
        height={dims.h}
        className="absolute inset-0 w-full h-full pointer-events-none"
        style={{ zIndex: 0 }}
      />
      {children && (
        <div className="absolute inset-0 z-10 flex items-center justify-center">
          {children}
        </div>
      )}
    </div>
  );
};

export { AnimatedBubbleParticles };
export default AnimatedBubbleParticles;
```
--------------------------------------------------

### COMPONENT: aurora-shader
Category: Background
Description: A high-performance, interactive aurora shader effect rendered with WebGL via OGL. It displays dynamic, colorful aurora waves that respond smoothly to mouse movement and time, creating an immersive visual effect suitable for backgrounds or hero sections.
URL: https://lightswind.com/components/aurora-shader
Import: import AuroraShader from '@/components/lightswind/aurora-shader';
Registry URL: https://lightswind.com/r/aurora-shader.json
Install Command: npx lightswind@latest add aurora-shader

Usage:
```tsx
import AuroraShader from '@/components/lightswind/aurora-shader';

<AuroraShader
  colorStops={['#5227FF', '#7cff67', '#5227FF']}
  amplitude={1.0}
  blend={0.5}
  speed={1.0}
/>
```

Source Code:
```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { Renderer, Program, Mesh, Color, Triangle } from "ogl";
import { useTheme } from "next-themes";

interface AuroraProps {
  colorStops?: string[];
  amplitude?: number;
  blend?: number;
  speed?: number;
  theme?: "light" | "dark" | "system";
}

const VERTEX_SHADER = `#version 300 es
in vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}`;

const FRAGMENT_SHADER = `#version 300 es
precision highp float;

uniform float uTime;
uniform float uAmplitude;
uniform vec3 uColorStops[3];
uniform vec2 uResolution;
uniform float uBlend;
uniform vec2 uMouse;
uniform float uIsLight;

out vec4 fragColor;

vec3 permute(vec3 x){return mod(((x*34.0)+1.0)*x,289.0);}

float snoise(vec2 v){
  const vec4 C=vec4(0.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);
  vec2 i=floor(v+dot(v,C.yy));
  vec2 x0=v-i+dot(i,C.xx);
  vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
  vec4 x12=x0.xyxy+C.xxzz;
  x12.xy-=i1;
  i=mod(i,289.0);
  vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
  vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
  m=m*m; m=m*m;
  vec3 x=2.0*fract(p*C.www)-1.0;
  vec3 h=abs(x)-0.5;
  vec3 ox=floor(x+0.5);
  vec3 a0=x-ox;
  m*=1.79284291400159-0.85373472095314*(a0*a0+h*h);
  vec3 g; g.x=a0.x*x0.x+h.x*x0.y; g.yz=a0.yz*x12.xz+h.yz*x12.yw;
  return 130.0*dot(m,g);
}

struct ColorStop { vec3 color; float position; };
#define COLOR_RAMP(colors,factor,finalColor){ \
  int index=0; \
  for(int i=0;i<2;i++){ \
    ColorStop currentColor=colors[i]; \
    bool inBetween=currentColor.position<=factor; \
    index=int(mix(float(index),float(i),float(inBetween))); \
  } \
  ColorStop currentColor=colors[index]; \
  ColorStop nextColor=colors[index+1]; \
  float range=nextColor.position-currentColor.position; \
  float lerpFactor=(factor-currentColor.position)/range; \
  finalColor=mix(currentColor.color,nextColor.color,lerpFactor); \
}

void main(){
  vec2 uv=gl_FragCoord.xy/uResolution;
  vec2 m = uMouse / uResolution;

  ColorStop colors[3];
  colors[0]=ColorStop(uColorStops[0],0.0);
  colors[1]=ColorStop(uColorStops[1],0.5);
  colors[2]=ColorStop(uColorStops[2],1.0);

  vec3 rampColor;
  COLOR_RAMP(colors, uv.x, rampColor);

  // Apply noise to create the wave shape
  float noise = snoise(vec2(uv.x * 3.0, uTime * 0.2 + m.x * 0.5));
  float waveHeight = uv.y - (noise * 0.15 * uAmplitude);

  // Fade the wave out at the bottom
  float fade = smoothstep(0.0, 0.4, uv.y);
  waveHeight = mix(uv.y, waveHeight, fade);

  // Define the core of the aurora
  float core = 0.5;
  float intensity = smoothstep(core - uBlend, core + uBlend, waveHeight);
  
  if (uIsLight > 0.5) {
    // Light mode: Replace dark black shadow with pure white background blending
    vec3 col = mix(vec3(1.0), rampColor, intensity * 0.85);
    float alpha = smoothstep(0.01, 0.85, intensity);
    fragColor = vec4(col * alpha, alpha);
  } else {
    // Dark mode: Deep black background with glowing vibrant aurora waves
    vec3 auroraColor = intensity * rampColor;
    float auroraAlpha = intensity;
    fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
  }
}
`;

export default function AuroraShader({
  colorStops = ["#5227FF", "#7cff67", "#5227FF"],
  amplitude = 1.0,
  blend = 0.5,
  speed = 1.0,
  theme: customTheme,
}: AuroraProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mouseRef = useRef({ x: 0, y: 0 });
  const { resolvedTheme, theme: nextTheme } = useTheme();

  const [isLightMode, setIsLightMode] = useState<boolean>(() => {
    if (customTheme === "light") return true;
    if (customTheme === "dark") return false;
    if (typeof document !== "undefined") {
      if (document.documentElement.classList.contains("dark")) return false;
      if (document.documentElement.classList.contains("light")) return true;
    }
    return false;
  });

  useEffect(() => {
    const checkIsLight = () => {
      if (customTheme === "light") return true;
      if (customTheme === "dark") return false;
      if (typeof document !== "undefined") {
        if (document.documentElement.classList.contains("dark")) return false;
        if (document.documentElement.classList.contains("light")) return true;
      }
      if (resolvedTheme) return resolvedTheme === "light";
      if (nextTheme) return nextTheme === "light";
      if (typeof window !== "undefined" && window.matchMedia) {
        return !window.matchMedia("(prefers-color-scheme: dark)").matches;
      }
      return false;
    };

    setIsLightMode(checkIsLight());

    if (typeof document !== "undefined") {
      const observer = new MutationObserver(() => {
        setIsLightMode(checkIsLight());
      });
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [resolvedTheme, nextTheme, customTheme]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const renderer = new Renderer({ alpha: true, antialias: true });
    const gl = renderer.gl;
    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    const geometry = new Triangle(gl);
    if (geometry.attributes.uv) delete geometry.attributes.uv;

    const program = new Program(gl, {
      vertex: VERTEX_SHADER,
      fragment: FRAGMENT_SHADER,
      uniforms: {
        uTime: { value: 0 },
        uAmplitude: { value: amplitude },
        uBlend: { value: blend },
        uResolution: { value: [container.offsetWidth, container.offsetHeight] },
        uColorStops: {
          value: colorStops.map((hex) => {
            const c = new Color(hex);
            return [c.r, c.g, c.b];
          }),
        },
        uMouse: { value: [0, 0] },
        uIsLight: { value: isLightMode ? 1.0 : 0.0 },
      },
    });

    const mesh = new Mesh(gl, { geometry, program });
    container.appendChild(gl.canvas);

    const resize = () => {
      const width = container.offsetWidth;
      const height = container.offsetHeight;
      renderer.setSize(width, height);
      program.uniforms.uResolution.value = [width, height];
    };
    window.addEventListener("resize", resize);
    resize();

    const onMouseMove = (e: MouseEvent) => {
      mouseRef.current.x += (e.clientX - mouseRef.current.x) * 0.05;
      mouseRef.current.y += (e.clientY - mouseRef.current.y) * 0.05;
    };
    window.addEventListener("mousemove", onMouseMove);

    let animationId: number;

    const animate = (t: number) => {
      animationId = requestAnimationFrame(animate);

      program.uniforms.uTime.value = t * 0.001 * speed;
      program.uniforms.uAmplitude.value = amplitude;
      program.uniforms.uBlend.value = blend;
      program.uniforms.uMouse.value = [mouseRef.current.x, mouseRef.current.y];
      program.uniforms.uIsLight.value = isLightMode ? 1.0 : 0.0;

      renderer.render({ scene: mesh });
    };
    animate(0);

    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener("resize", resize);
      window.removeEventListener("mousemove", onMouseMove);
      if (gl.canvas.parentNode === container) container.removeChild(gl.canvas);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [amplitude, blend, colorStops, speed, isLightMode]);

  return <div ref={containerRef} className="w-full h-full absolute bottom-0" />;
}

```
--------------------------------------------------

### COMPONENT: beam-grid-background
Category: Background
Description: A visually dynamic grid background with animated beam effects and interactive highlights. Beams move across the grid in both X and Y directions, with optional glow effects and multi-level highlights around the mouse pointer. Supports light/dark mode, idle animations, and optional fade overlays. Ideal for hero sections, dashboards, or any immersive UI background.
URL: https://lightswind.com/components/beam-grid-background
Import: import BeamGridBackground from "@/components/lightswind/beam-grid-background";
Registry URL: https://lightswind.com/r/beam-grid-background.json
Install Command: npx lightswind@latest add beam-grid-background

Usage:
```tsx
// 1. Default Beam Grid Background
<BeamGridBackground />

// 2. Custom beam colors, speed, glow, and count
<BeamGridBackground
  gridSize={40}
  gridColor="#d1d5db"
  darkGridColor="#1f2937"
  beamColor="rgba(0,180,255,0.8)"
  darkBeamColor="rgba(0,255,255,0.8)"
  beamCount={8}
  extraBeamCount={3}
  beamThickness={3}
  beamGlow
  glowIntensity={50}
  idleSpeed={1.15}
/>

// 3. Render as a regular container (not background) with children overlay
<BeamGridBackground asBackground={false}>
  <h1 className="text-white text-3xl">Welcome!</h1>
</BeamGridBackground>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";

export interface BeamGridBackgroundProps extends React.HTMLProps<HTMLDivElement> {
    gridSize?: number;
    gridColor?: string;
    darkGridColor?: string;
    beamColor?: string;
    darkBeamColor?: string;
    beamSpeed?: number;
    beamThickness?: number;
    beamGlow?: boolean;
    glowIntensity?: number;
    beamCount?: number;
    extraBeamCount?: number;
    idleSpeed?: number;
    interactive?: boolean;
    asBackground?: boolean;
    className?: string;
    children?: React.ReactNode;
    showFade?: boolean;
    fadeIntensity?: number;
}

const BeamGridBackground: React.FC<BeamGridBackgroundProps> = ({
    gridSize = 40,
    gridColor = "#e5e7eb",
    darkGridColor = "#27272a",
    beamColor = "rgba(0, 180, 255, 0.8)",
    darkBeamColor = "rgba(0, 255, 255, 0.8)",
    beamSpeed = 0.1,
    beamThickness = 3,
    beamGlow = true,
    glowIntensity = 50,
    beamCount = 8,
    extraBeamCount = 3,
    idleSpeed = 1.15,
    interactive = true,
    asBackground = true,
    showFade = true,
    fadeIntensity = 20,
    className,
    children,
    ...props
}) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);
    const bgCanvasRef = useRef<HTMLCanvasElement | null>(null); // Buffer for static grid
    const [isDarkMode, setIsDarkMode] = useState(false);
    const mouseRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
    const lastMouseMoveRef = useRef(Date.now());

    // --- Dark Mode Detection ---
    useEffect(() => {
        const updateDarkMode = () => {
            const prefersDark =
                window.matchMedia &&
                window.matchMedia("(prefers-color-scheme: dark)").matches;
            setIsDarkMode(
                document.documentElement.classList.contains("dark") || prefersDark
            );
        };
        updateDarkMode();
        const observer = new MutationObserver(() => updateDarkMode());
        observer.observe(document.documentElement, { attributes: true });
        return () => observer.disconnect();
    }, []);

    // --- Drawing Logic ---
    useEffect(() => {
        const canvas = canvasRef.current;
        const container = containerRef.current;
        if (!canvas || !container) return;

        const ctx = canvas.getContext("2d")!;
        const rect = container.getBoundingClientRect();

        // Handle high-DPI displays for crisp rendering
        const dpr = window.devicePixelRatio || 1;
        canvas.width = rect.width * dpr;
        canvas.height = rect.height * dpr;
        canvas.style.width = `${rect.width}px`;
        canvas.style.height = `${rect.height}px`;
        ctx.scale(dpr, dpr);

        const cols = Math.floor(rect.width / gridSize);
        const rows = Math.floor(rect.height / gridSize);

        // Pre-render static grid to off-screen canvas
        if (!bgCanvasRef.current) {
            bgCanvasRef.current = document.createElement("canvas");
        }
        const bgCanvas = bgCanvasRef.current;
        bgCanvas.width = canvas.width;
        bgCanvas.height = canvas.height;
        const bgCtx = bgCanvas.getContext("2d")!;
        bgCtx.scale(dpr, dpr);

        const lineColor = isDarkMode ? darkGridColor : gridColor;
        bgCtx.strokeStyle = lineColor;
        bgCtx.lineWidth = 1;
        bgCtx.beginPath();
        for (let x = 0; x <= rect.width; x += gridSize) {
            bgCtx.moveTo(x, 0);
            bgCtx.lineTo(x, rect.height);
        }
        for (let y = 0; y <= rect.height; y += gridSize) {
            bgCtx.moveTo(0, y);
            bgCtx.lineTo(rect.width, y);
        }
        bgCtx.stroke();

        // Initialize beams
        const primaryBeams = Array.from({ length: beamCount }).map(() => ({
            x: Math.floor(Math.random() * cols),
            y: Math.floor(Math.random() * rows),
            dir: Math.random() > 0.5 ? "x" : "y" as "x" | "y",
            offset: Math.random() * gridSize,
            speed: beamSpeed + Math.random() * 0.3,
            type: 'primary'
        }));

        const extraBeams = Array.from({ length: extraBeamCount }).map(() => ({
            x: Math.floor(Math.random() * cols),
            y: Math.floor(Math.random() * rows),
            dir: Math.random() > 0.5 ? "x" : "y" as "x" | "y",
            offset: Math.random() * gridSize,
            speed: beamSpeed * 0.5 + Math.random() * 0.1,
            type: 'extra'
        }));

        const allBeams = [...primaryBeams, ...extraBeams];

        const updateMouse = (e: MouseEvent) => {
            const rect = container.getBoundingClientRect();
            mouseRef.current.x = e.clientX - rect.left;
            mouseRef.current.y = e.clientY - rect.top;
            lastMouseMoveRef.current = Date.now();
        };

        if (interactive) window.addEventListener("mousemove", updateMouse);

        let animationFrameId: number;

        const draw = () => {
            // Clear main canvas
            ctx.clearRect(0, 0, rect.width, rect.height);

            // 1. Draw pre-rendered grid (super fast)
            ctx.drawImage(bgCanvas, 0, 0, rect.width, rect.height);

            const activeBeamColor = isDarkMode ? darkBeamColor : beamColor;
            const now = Date.now();
            const idle = now - lastMouseMoveRef.current > 2000;

            // 2. Draw Beams
            allBeams.forEach((beam) => {
                ctx.strokeStyle = activeBeamColor;
                ctx.lineWidth = beam.type === 'extra' ? beamThickness * 0.75 : beamThickness;

                if (beamGlow) {
                    ctx.shadowBlur = glowIntensity;
                    ctx.shadowColor = activeBeamColor;
                } else {
                    ctx.shadowBlur = 0;
                }

                ctx.beginPath();
                if (beam.dir === "x") {
                    const y = beam.y * gridSize;
                    const beamLength = gridSize * 1.5;
                    const start = -beamLength + (beam.offset % (rect.width + beamLength));

                    ctx.moveTo(start, y);
                    ctx.lineTo(start + beamLength, y);
                    ctx.stroke();

                    beam.offset += idle ? beam.speed * idleSpeed * 60 * 0.016 : beam.speed * 60 * 0.016;
                    if (beam.offset > rect.width + beamLength) beam.offset = -beamLength;
                } else {
                    const x = beam.x * gridSize;
                    const beamLength = gridSize * 1.5;
                    const start = -beamLength + (beam.offset % (rect.height + beamLength));

                    ctx.moveTo(x, start);
                    ctx.lineTo(x, start + beamLength);
                    ctx.stroke();

                    beam.offset += idle ? beam.speed * idleSpeed * 60 * 0.016 : beam.speed * 60 * 0.016;
                    if (beam.offset > rect.height + beamLength) beam.offset = -beamLength;
                }
            });

            // Reset shadow
            ctx.shadowBlur = 0;

            // 3. Draw Interactive Highlights
            if (interactive && !idle) {
                const targetX = mouseRef.current.x;
                const targetY = mouseRef.current.y;
                const centerGx = Math.floor(targetX / gridSize) * gridSize;
                const centerGy = Math.floor(targetY / gridSize) * gridSize;

                const highlights = [
                    { x: centerGx, y: centerGy, radius: 0, lineWidth: beamThickness * 3, glowFactor: 3 },
                    { x: centerGx, y: centerGy, radius: 1, lineWidth: beamThickness * 1.5, glowFactor: 1.5 },
                    { x: centerGx, y: centerGy, radius: 2, lineWidth: beamThickness * 0.75, glowFactor: 0.75 },
                ];

                highlights.forEach(({ x, y, radius, lineWidth, glowFactor }) => {
                    ctx.strokeStyle = activeBeamColor;
                    ctx.lineWidth = lineWidth;
                    ctx.shadowBlur = glowIntensity * glowFactor;
                    ctx.shadowColor = activeBeamColor;

                    for (let dx = -radius; dx <= radius; dx++) {
                        for (let dy = -radius; dy <= radius; dy++) {
                            if (radius === 1 && Math.abs(dx) === 0 && Math.abs(dy) === 0) continue;
                            if (radius === 2 && Math.abs(dx) <= 1 && Math.abs(dy) <= 1) continue;

                            const cellX = x + dx * gridSize;
                            const cellY = y + dy * gridSize;

                            if (cellX >= 0 && cellX < rect.width && cellY >= 0 && cellY < rect.height) {
                                ctx.beginPath();
                                ctx.rect(cellX, cellY, gridSize, gridSize);
                                ctx.stroke();
                            }
                        }
                    }
                });
            }

            animationFrameId = requestAnimationFrame(draw);
        };

        draw();

        return () => {
            if (interactive) window.removeEventListener("mousemove", updateMouse);
            cancelAnimationFrame(animationFrameId);
        };
    }, [
        gridSize, beamColor, darkBeamColor, gridColor, darkGridColor,
        beamSpeed, beamCount, extraBeamCount, beamThickness, glowIntensity,
        beamGlow, isDarkMode, idleSpeed, interactive
    ]);

    return (
        <div
            ref={containerRef}
            className={`relative ${className || ""}`}
            {...props}
            style={{
                position: asBackground ? "absolute" : "relative",
                top: asBackground ? 0 : undefined,
                left: asBackground ? 0 : undefined,
                width: "100%",
                height: "100%",
                overflow: "hidden",
                ...(props.style || {}),
            }}
        >
            <canvas
                ref={canvasRef}
                className="absolute top-0 left-0 w-full h-full z-0 pointer-events-none"
            />
            {showFade && (
                <div
                    className="pointer-events-none absolute inset-0 bg-white dark:bg-black"
                    style={{
                        maskImage: `radial-gradient(ellipse at center, transparent ${fadeIntensity}%, black)`,
                        WebkitMaskImage: `radial-gradient(ellipse at center, transparent ${fadeIntensity}%, black)`,
                    }}
                />
            )}
            {!asBackground && (
                <div className="relative z-0 w-full h-full">{children}</div>
            )}
        </div>
    );
};

export default BeamGridBackground;
```
--------------------------------------------------

### COMPONENT: dot-grid-background
Category: Background
Description: An interactive hexagonal dot-grid background. Drag in any direction — dots scale by proximity to center with smooth inertia physics. Fully configurable: dot size, color, spacing, scale falloff, and momentum. Built on Canvas API for 60 FPS with zero layout cost.
URL: https://lightswind.com/components/dot-grid-background
Import: import DotGridBackground from "@/components/lightswind/dot-grid-background"
Registry URL: https://lightswind.com/r/dot-grid-background.json
Install Command: npx lightswind@latest add dot-grid-background

Usage:
```tsx
import DotGridBackground from "@/components/lightswind/dot-grid-background";

export default function Page() {
  return (
    <div className="w-full h-screen">
      <DotGridBackground
        cols={20}
        dotSize={7}
        dotSpacing={3.6}
        dotColor="#ffffff"
        backgroundColor="#000000"
        scaleFactor={6}
        inertiaDamping={0.92}
        inertia
      >
        {/* Your content layered on top */}
        <div className="flex items-center justify-center h-full">
          <h1 className="text-white text-4xl font-bold">Hello World</h1>
        </div>
      </DotGridBackground>
    </div>
  );
}
```

Source Code:
```tsx
"use client";
import React, { useEffect, useRef } from "react";

export interface DotGridBackgroundProps {
  /** Number of dot columns */
  cols?: number;
  /** Dot diameter in pixels */
  dotSize?: number;
  /** Spacing multiplier relative to dotSize */
  dotSpacing?: number;
  /** Dot fill color */
  dotColor?: string;
  /** Canvas background color */
  backgroundColor?: string;
  /** Radial scale falloff exponent */
  scaleFactor?: number;
  /** Inertia friction after drag (0–1) */
  inertiaDamping?: number;
  /** Enable inertia after drag */
  inertia?: boolean;
  /** Minimum dot scale floor */
  minScale?: number;
  /** Extra CSS classes on the wrapper */
  className?: string;
  /** Content layered above the grid */
  children?: React.ReactNode;
}

const DotGridBackground: React.FC<DotGridBackgroundProps> = ({
  cols = 20,
  dotSize = 12,
  dotSpacing = 3.6,
  dotColor,
  backgroundColor = "transparent",
  scaleFactor = 6,
  inertiaDamping = 0.92,
  inertia = true,
  minScale = 0.04,
  className = "",
  children,
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const wrapper = wrapperRef.current;
    if (!canvas || !wrapper) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const cellSize = dotSize * dotSpacing;
    // Grid must be at least 3× the container in BOTH axes for full drag range
    const MULTIPLIER = 3;

    // Resolve foreground color once per resize to avoid computedStyle overhead in draw loop
    let resolvedDotColor = dotColor || "#ffffff";

    // Compute dots based on measured container size
    let dots: Float32Array = new Float32Array(0);
    let gridW = 0;
    let gridH = 0;

    const buildGrid = (wW: number, wH: number) => {
      const totalCols = Math.ceil((wW * MULTIPLIER) / cellSize) + 2;
      const totalRows = Math.ceil((wH * MULTIPLIER) / (cellSize * 0.866)) + 2;
      gridW = totalCols * cellSize + cellSize;
      gridH = totalRows * cellSize * 0.866 + cellSize;

      dots = new Float32Array(totalCols * totalRows * 2);
      let di = 0;
      for (let r = 0; r < totalRows; r++) {
        for (let c = 0; c < totalCols; c++) {
          dots[di++] = c * cellSize + (r % 2 ? cellSize * 0.5 : 0) + cellSize * 0.5;
          dots[di++] = r * cellSize * 0.866 + cellSize * 0.5;
        }
      }
    };

    // Grid state
    const gridPos = { x: 0, y: 0 };
    const velocity = { x: 0, y: 0 };
    let isDragging = false;
    let dragStart = { mouseX: 0, mouseY: 0, gridX: 0, gridY: 0 };
    let lastMouse = { x: 0, y: 0 };
    let animId = 0;

    /** Clamp so the grid always covers the full container in X and Y */
    const clamp = (x: number, y: number) => {
      const wW = wrapper.clientWidth;
      const wH = wrapper.clientHeight;
      return {
        x: Math.min(0, Math.max(wW - gridW, x)),
        y: Math.min(0, Math.max(wH - gridH, y)),
      };
    };

    const draw = () => {
      const { width, height } = canvas;
      ctx.clearRect(0, 0, width, height);
      if (backgroundColor && backgroundColor !== "transparent") {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);
      }

      const cx = width / 2;
      const cy = height / 2;
      const maxDist = Math.hypot(cx, cy) * 1.15;
      const gx = gridPos.x;
      const gy = gridPos.y;
      const halfDot = dotSize * 0.5;
      const margin = dotSize * 6;

      ctx.fillStyle = resolvedDotColor;

      for (let i = 0; i < dots.length; i += 2) {
        const sx = dots[i] + gx;
        const sy = dots[i + 1] + gy;
        if (sx < -margin || sx > width + margin) continue;
        if (sy < -margin || sy > height + margin) continue;

        const dx = sx - cx;
        const dy = sy - cy;
        const dist = Math.sqrt(dx * dx + dy * dy);
        const scale = Math.max(minScale, (1.05 - dist / maxDist) ** scaleFactor);
        if (scale < 0.005) continue;

        ctx.beginPath();
        ctx.arc(sx, sy, halfDot * scale, 0, 6.2832);
        ctx.fill();
      }
    };

    const updateColorAndDraw = () => {
      if (!dotColor) {
        resolvedDotColor = getComputedStyle(wrapper).color || "#ffffff";
      } else {
        resolvedDotColor = dotColor;
      }
      draw();
    };

    const resize = () => {
      const wW = wrapper.clientWidth;
      const wH = wrapper.clientHeight;
      canvas.width = wW;
      canvas.height = wH;
      buildGrid(wW, wH);
      const c = clamp((wW - gridW) / 2, (wH - gridH) / 2);
      gridPos.x = c.x;
      gridPos.y = c.y;
      updateColorAndDraw();
    };

    // Watch for theme changes (dark/light mode toggle on html element)
    const observer = new MutationObserver(() => updateColorAndDraw());
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] });

    // Inertia loop
    const tick = () => {
      if (!isDragging && inertia) {
        const speed = Math.abs(velocity.x) + Math.abs(velocity.y);
        if (speed > 0.05) {
          velocity.x *= inertiaDamping;
          velocity.y *= inertiaDamping;
          const c = clamp(gridPos.x + velocity.x, gridPos.y + velocity.y);
          gridPos.x = c.x;
          gridPos.y = c.y;
          draw();
        }
      }
      animId = requestAnimationFrame(tick);
    };
    animId = requestAnimationFrame(tick);

    // Pointer handlers
    const onDown = (e: PointerEvent) => {
      isDragging = true;
      velocity.x = 0;
      velocity.y = 0;
      dragStart = { mouseX: e.clientX, mouseY: e.clientY, gridX: gridPos.x, gridY: gridPos.y };
      lastMouse = { x: e.clientX, y: e.clientY };
      wrapper.style.cursor = "grabbing";
      wrapper.setPointerCapture(e.pointerId);
    };

    const onMove = (e: PointerEvent) => {
      if (!isDragging) return;
      // Track velocity in BOTH axes for any-angle drag
      velocity.x = e.clientX - lastMouse.x;
      velocity.y = e.clientY - lastMouse.y;
      lastMouse = { x: e.clientX, y: e.clientY };
      const c = clamp(
        dragStart.gridX + e.clientX - dragStart.mouseX,
        dragStart.gridY + e.clientY - dragStart.mouseY,
      );
      gridPos.x = c.x;
      gridPos.y = c.y;
      draw();
    };

    const onUp = () => {
      isDragging = false;
      wrapper.style.cursor = "grab";
    };

    wrapper.addEventListener("pointerdown", onDown);
    wrapper.addEventListener("pointermove", onMove);
    wrapper.addEventListener("pointerup", onUp);
    wrapper.addEventListener("pointercancel", onUp);
    window.addEventListener("resize", resize);

    resize();

    return () => {
      cancelAnimationFrame(animId);
      observer.disconnect();
      wrapper.removeEventListener("pointerdown", onDown);
      wrapper.removeEventListener("pointermove", onMove);
      wrapper.removeEventListener("pointerup", onUp);
      wrapper.removeEventListener("pointercancel", onUp);
      window.removeEventListener("resize", resize);
    };
  }, [cols, dotSize, dotSpacing, dotColor, backgroundColor, scaleFactor, inertiaDamping, inertia, minScale]);

  return (
    <div
      ref={wrapperRef}
      className={`relative w-full h-full overflow-hidden cursor-grab select-none ${className}`}
    >
      <canvas ref={canvasRef} className="absolute inset-0 block w-full h-full" />
      {children && (
        <div className="absolute inset-0 z-10 pointer-events-none">
          {children}
        </div>
      )}
    </div>
  );
};

export default DotGridBackground;

```
--------------------------------------------------

### COMPONENT: fall-beam-background
Category: Background
Description: A lightweight, animated background effect featuring vertical, glowing 'beams' or lines that continuously fall. Ideal for subtle data-stream, matrix, or sci-fi themes. It supports custom colors and line density.
URL: https://lightswind.com/components/fall-beam-background
Import: import FallBeamBackground from "@/components/lightswind/fall-beam-background";
Registry URL: https://lightswind.com/r/fall-beam-background.json
Install Command: npx lightswind@latest add fall-beam-background

Usage:
```tsx
// 1. Default (20 Lines, Cyan Glow) with Content
<div className="relative h-96 w-full overflow-hidden rounded-xl bg-gray-900">
  <FallBeamBackground lineCount={20} beamColorClass="cyan-400">
    <h2 className="relative z-20 text-white text-3xl font-bold">
      Data Stream Active
    </h2>
  </FallBeamBackground>
</div>

// 2. Red Glow with Dense Lines
<div className="relative h-72 w-full overflow-hidden bg-black">
  <FallBeamBackground 
    lineCount={50} 
    beamColorClass="red-400" 
    displayText="Warning: System Offline"
  />
</div>

// 3. Subtle Green Glow
<div className="relative h-64 w-full overflow-hidden rounded-lg bg-gray-800">
  <FallBeamBackground lineCount={15} beamColorClass="green-400" />
</div>

// 4. Using the className prop for custom sizing/margins
<FallBeamBackground 
  lineCount={30} 
  beamColorClass="blue-400" 
  className="h-full w-full absolute top-0 left-0" 
/>
```

Source Code:
```tsx
import React, { useEffect, useRef } from 'react';
import { motion } from 'framer-motion';

// Define the component's props for flexibility and professionalism
interface FallBeamBackgroundProps {
    /**
     * Optional Tailwind CSS class name to apply to the main container.
     * Useful for layout adjustments or margins.
     */
    className?: string;
    /**
     * Number of lines (beams) to render. Default is 20.
     */
    lineCount?: number;
    /**
     * Text to display over the beam effect.
     */
    displayText?: string;
    /**
     * Tailwind color class for the glowing beam trail.
     * E.g., 'blue-400', 'green-400', 'red-400'. Default is 'cyan-400'.
     */
    beamColorClass?: string;
}

/**
 * A lightweight, theme-aware falling beam background component.
 * It dynamically creates vertical beam lines via JavaScript/React and applies CSS animations.
 *
 * NOTE: Ensure the parent container has a defined height/width and `position: relative`
 * for the background to cover it correctly.
 */
const FallBeamBackground: React.FC<FallBeamBackgroundProps> = ({
    className = '',
    lineCount = 20,
    displayText,
    // Note: Changed default to 'cyan-400' as per original comment suggestion
    beamColorClass = 'cyan-400', 
}) => {
    // 💡 FIX: Corrected the type from HTMLDivDivElement to HTMLDivElement
    const containerRef = useRef<HTMLDivElement>(null);

    // --- CSS Styles for the effect ---
    const dynamicStyles = `
    .fall-beam-line {
      position: absolute;
      width: 1px;
      /* Background for the line itself (dim white) */
      height: 100%; /* Cover the full height of the container */
      z-index: 10;
    }

    .fall-beam-line::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 80px;
      /* Dynamic beam glow color gradient */
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        var(--beam-glow-color)
      );
      animation: fall var(--ani-duration) var(--ani-delay) linear infinite;
    }

    @keyframes fall {
      0% { top: -100px; }
      100% { top: 100%; }
    }
    `;

    // Map Tailwind color to an RGB or RGBA value for the CSS variable
    // This function might need expansion for broader color support.
    const getColorValue = (colorClass: string): string => {
        switch (colorClass) {
            case 'green-400': return 'rgba(74, 222, 128, 0.8)'; // green-400
            case 'cyan-400': return 'rgba(34, 211, 238, 0.8)';  // cyan-400
            case 'blue-400': return 'rgba(96, 165, 250, 0.8)';  // blue-400
            case 'red-400': return 'rgba(248, 113, 113, 0.8)';  // red-400
            case 'indigo-400': return 'rgba(129, 140, 248, 0.8)'; // indigo-400
            default: return 'rgba(34, 211, 238, 0.8)'; // Default to cyan
        }
    };

    useEffect(() => {
        if (!containerRef.current) return;

        const container = containerRef.current;

        // Clear any previous lines before rendering new ones (important for re-renders)
        container.querySelectorAll('.fall-beam-line').forEach(line => line.remove());

        const glowColor = getColorValue(beamColorClass);

        for (let i = 1; i <= lineCount; i++) {
            const line = document.createElement("div");
            line.classList.add("fall-beam-line");

            // Calculate the 'left' position with a slight random jitter
            const leftPosition = `${i * (100 / lineCount) + Math.random() * 5 - 5}%`;

            // Random animation duration and delay for a natural look
            const duration = 8 + Math.random() * 10 + "s";
            const delay = -Math.random() * 10 + "s";

            // Apply CSS variables for the animation and color
            line.style.setProperty("left", leftPosition);
            line.style.setProperty("--ani-duration", duration);
            line.style.setProperty("--ani-delay", delay);
            line.style.setProperty("--beam-glow-color", glowColor);

            container.appendChild(line);
        }

        // Cleanup function to remove elements when component unmounts
        return () => {
            container.querySelectorAll('.fall-beam-line').forEach(line => line.remove());
        };
    }, [lineCount, beamColorClass]); // Re-run effect if these props change

    return (
        <>
            {/* Apply dynamic styles once */}
            <style>{dynamicStyles}</style>

            {/* Main container: 
            - absolute inset-0 covers the parent fully.
            - bg-transparent allows parent background to show through.
            */}
            <motion.div
                ref={containerRef}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 2, ease: "easeOut" }}
                className={`absolute inset-0 z-0 overflow-hidden bg-transparent ${className}`}
            >
                {displayText && (
                    // Text overlay
                    <h1 className="relative z-20 grid place-content-center h-full font-sans text-4xl sm:text-5xl lg:text-7xl font-bold text-white p-4 text-center">
                        {displayText}
                        {/* Gradient to fade the text bottom into the background */}
                        <div className="absolute inset-0 z-30 pointer-events-none" style={{
                            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%)'
                        }} />
                    </h1>
                )}

                {/* The lines are rendered dynamically in the useEffect hook */}
            </motion.div>
        </>
    );
};

export default FallBeamBackground;
```
--------------------------------------------------

### COMPONENT: grid-dot-backgrounds
Category: Background
Description: Professional grid and dot background components with customizable patterns, colors, and fade effects. Perfect for hero sections, landing pages, and content backgrounds with both light and dark mode support.
URL: https://lightswind.com/components/grid-dot-backgrounds
Import: import { GridBackground, DotBackground } from "@/components/lightswind/grid-dot-background"
Registry URL: https://lightswind.com/r/grid-dot-backgrounds.json
Install Command: npx lightswind@latest add grid-dot-backgrounds

Usage:
```tsx
import { GridBackground, DotBackground } from "@/components/lightswind/grid-dot-background";

// Grid Background
<GridBackground 
  gridSize={20}
  gridColor="#e4e4e7"
  darkGridColor="#262626"
  showFade={true}
  fadeIntensity={20}
  className="h-[500px]"
>
  <div className="text-center">
    <h1 className="text-4xl font-bold">Grid Background</h1>
    <p className="text-gray-600">Perfect for structured layouts</p>
  </div>
</GridBackground>

// Dot Background
<DotBackground 
  dotSize={1}
  dotColor="#d4d4d4"
  darkDotColor="#404040"
  spacing={20}
  showFade={true}
  fadeIntensity={20}
  className="h-[500px]"
>
  <div className="text-center">
    <h1 className="text-4xl font-bold">Dot Background</h1>
    <p className="text-gray-600">Subtle and elegant patterns</p>
  </div>
</DotBackground>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useState } from "react";
import { cn } from "@/components/lib/utils";

// Grid Background Component
export interface GridBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  gridSize?: number;
  gridColor?: string;
  darkGridColor?: string;
  showFade?: boolean;
  fadeIntensity?: number;
  children?: React.ReactNode;
}

export const GridBackground = ({
  className,
  children,
  gridSize = 20,
  gridColor = "#e4e4e7",
  darkGridColor = "#262626",
  showFade = true,
  fadeIntensity = 20,
  ...props
}: GridBackgroundProps) => {
  const [currentGridColor, setCurrentGridColor] = useState(gridColor);

  useEffect(() => {
    const prefersDarkMode =
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches;
    const isDarkModeActive =
      document.documentElement.classList.contains("dark") || prefersDarkMode;
    setCurrentGridColor(isDarkModeActive ? darkGridColor : gridColor);

    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (mutation.attributeName === "class") {
          const updatedIsDarkModeActive =
            document.documentElement.classList.contains("dark");
          setCurrentGridColor(
            updatedIsDarkModeActive ? darkGridColor : gridColor
          );
        }
      });
    });

    observer.observe(document.documentElement, { attributes: true });

    return function () {
      return observer.disconnect();
    };
  }, [gridColor, darkGridColor]);

  return (
    <div
      className={cn(
        "relative flex h-[50rem] w-full items-center justify-center bg-transparent",
        className
      )}
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundSize: gridSize + "px " + gridSize + "px", // String concatenation
          backgroundImage:
            "linear-gradient(to right, " +
            currentGridColor +
            " 1px, transparent 1px), " +
            "linear-gradient(to bottom, " +
            currentGridColor +
            " 1px, transparent 1px)", // String concatenation
        }}
      />

      {showFade && (
        <div
          className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white dark:bg-black"
          style={{
            maskImage:
              "radial-gradient(ellipse at center, transparent " +
              fadeIntensity +
              "%, black)", // String concatenation
            WebkitMaskImage:
              "radial-gradient(ellipse at center, transparent " +
              fadeIntensity +
              "%, black)", // String concatenation
          }}
        />
      )}

      <div className="relative z-20">{children}</div>
    </div>
  );
};

// Dot Background Component
export interface DotBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  dotSize?: number;
  dotColor?: string;
  darkDotColor?: string;
  spacing?: number;
  showFade?: boolean;
  fadeIntensity?: number;
  children?: React.ReactNode;
}

export const DotBackground = ({
  className,
  children,
  dotSize = 1,
  dotColor = "#000",
  darkDotColor = "#fff",
  spacing = 20,
  showFade = true,
  fadeIntensity = 20,
  ...props
}: DotBackgroundProps) => {
  const [currentDotColor, setCurrentDotColor] = useState(dotColor);

  useEffect(() => {
    const prefersDarkMode =
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches;
    const isDarkModeActive =
      document.documentElement.classList.contains("dark") || prefersDarkMode;
    setCurrentDotColor(isDarkModeActive ? darkDotColor : dotColor);

    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (mutation.attributeName === "class") {
          const updatedIsDarkModeActive =
            document.documentElement.classList.contains("dark");
          setCurrentDotColor(updatedIsDarkModeActive ? darkDotColor : dotColor);
        }
      });
    });

    observer.observe(document.documentElement, { attributes: true });

    return function () {
      return observer.disconnect();
    };
  }, [dotColor, darkDotColor]);

  return (
    <div
      className={cn(
        "relative flex h-[50rem] w-full items-center justify-center bg-white dark:bg-black",
        className
      )}
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundSize: spacing + "px " + spacing + "px", // String concatenation
          backgroundImage:
            "radial-gradient(" +
            currentDotColor +
            " " +
            dotSize +
            "px, transparent " +
            dotSize +
            "px)", // String concatenation
        }}
      />

      {showFade && (
        <div
          className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white dark:bg-black"
          style={{
            maskImage:
              "radial-gradient(ellipse at center, transparent " +
              fadeIntensity +
              "%, black)", // String concatenation
            WebkitMaskImage:
              "radial-gradient(ellipse at center, transparent " +
              fadeIntensity +
              "%, black)", // String concatenation
          }}
        />
      )}

      <div className="relative z-20">{children}</div>
    </div>
  );
};

export default { GridBackground, DotBackground };

```
--------------------------------------------------

### COMPONENT: gradient-background
Category: Background
Description: A vibrant animated WebGL gradient background with customizable backdrop blur, ideal for immersive UI experiences. Provides dynamic color wave distortion with subtle vignette and extrusion glow. Suited for modern and expressive design themes.
URL: https://lightswind.com/components/gradient-background
Import: import GradientBackground from '@/components/lightswind/gradient-background';
Registry URL: https://lightswind.com/r/gradient-background.json
Install Command: npx lightswind@latest add gradient-background

Usage:
```tsx
import GradientBackground from '@/components/lightswind/gradient-background';

// Basic usage with default (no) blur
<GradientBackground />

// With a medium backdrop blur
<GradientBackground backdropBlurAmount="md" />

// With maximum blur and a custom class for border styling
<GradientBackground backdropBlurAmount="3xl" className="border-2 border-indigo-700 rounded-2xl" />

// With a responsive height and full screen width
<GradientBackground className="h-[60vh] w-screen" />

// Combining all props
<GradientBackground backdropBlurAmount="xl" className="rounded-xl shadow-xl border border-neutral-800" />
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";

/**
 * Valid blur sizes supported by Tailwind CSS.
 */
export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

/**
 * @typedef {Object} HellBackgroundProps
 * @property {BlurSize} [backdropBlurAmount] - The size of the backdrop blur to apply.
 * @property {string} [className] - Additional CSS classes to apply to the container div.
 */
interface HellBackgroundProps {
  backdropBlurAmount?: string;
  className?: string;
}

/**
 * A mapping from simplified blur size names to full Tailwind CSS backdrop-blur classes.
 */
const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 iResolution;
uniform float iTime;

float cosRange(float amt, float range, float minimum) {
  return (((1.0 + cos(radians(amt))) * 0.5) * range) + minimum;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  const int zoom = 40;
  const float brightness = 0.975;
  float time = iTime * 1.25;
  vec2 uv = fragCoord.xy / iResolution.xy;
  vec2 p  = (2.0 * fragCoord.xy - iResolution.xy) / max(iResolution.x, iResolution.y);
  float ct = cosRange(time * 5.0, 3.0, 1.1);
  float xBoost = cosRange(time * 0.2, 5.0, 5.0);
  float yBoost = cosRange(time * 0.1, 10.0, 5.0);
  float fScale = cosRange(time * 15.5, 1.25, 0.5);

  for (int i = 1; i < zoom; i++) {
    float _i = float(i);
    vec2 newp = p;
    newp.x += 0.25 / _i * sin(_i * p.y + time * cos(ct) * 0.5 / 20.0 + 0.005 * _i) * fScale + xBoost;
    newp.y += 0.25 / _i * sin(_i * p.x + time * ct * 0.3 / 40.0 + 0.03 * float(i + 15)) * fScale + yBoost;
    p = newp;
  }

  vec3 col = vec3(
    0.5 * sin(3.0 * p.x) + 0.5,
    0.5 * sin(3.0 * p.y) + 0.5,
    sin(p.x + p.y)
  );
  col *= brightness;

  float vigAmt = 5.0;
  float vignette = (1. - vigAmt * (uv.y - 0.5) * (uv.y - 0.5)) * (1. - vigAmt * (uv.x - 0.5) * (uv.x - 0.5));
  float extrusion = (col.x + col.y + col.z) / 4.0;
  extrusion *= 1.5;
  extrusion *= vignette;

  fragColor = vec4(col, extrusion);
}

void main() {
  mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;


function GradientBackground({
  backdropBlurAmount = "none",
  className = "",
}: HellBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");

    let startTime = Date.now();

    const render = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;
      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      requestAnimationFrame(render);
    };

    render();
  }, []);

  const finalBlurClass = blurClassMap[backdropBlurAmount as BlurSize] || blurClassMap["sm"];

return (
  <div className={`w-full max-w-screen h-full overflow-hidden bg-black dark:bg-black ${className}`}>
    <canvas
      ref={canvasRef}
      className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
      style={{ display: "block" }}
    />
    <div className={`absolute inset-0 ${finalBlurClass}`} />
  </div>
);

}

export default GradientBackground;

```
--------------------------------------------------

### COMPONENT: hell-background
Category: Background
Description: An immersive WebGL shader background with a hellish glow and turbulence effect that reacts to cursor movement. Ideal for dark, moody UI themes with a dramatic impact. It supports backdrop blur and customizable glow color.
URL: https://lightswind.com/components/hell-background
Import: import HellBackground from '@/components/lightswind/hell-background';
Registry URL: https://lightswind.com/r/hell-background.json
Install Command: npx lightswind@latest add hell-background

Usage:
```tsx
import HellBackground from '@/components/lightswind/hell-background';

// Basic usage with default blur and red glow
<HellBackground />

// With a larger backdrop blur
<HellBackground backdropBlurAmount="xl" />

// With no backdrop blur and a custom orange flame glow
<HellBackground backdropBlurAmount="none" color="#FF4500" />

// With a custom class name for additional styling
<HellBackground className="border border-red-700 rounded-xl" />

// Combining all props
<HellBackground backdropBlurAmount="md" color="#FF0000" className="shadow-xl" />
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";

/**
 * Valid blur sizes supported by Tailwind CSS.
 */
export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface HellBackgroundProps {
  backdropBlurAmount?: BlurSize;
  className?: string;
  color?: string; // e.g., "#FF0000"
}

/**
 * A mapping from simplified blur size names to full Tailwind CSS backdrop-blur classes.
 */
const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  uniform vec2 iResolution;
  uniform float iTime;
  uniform vec3 uColor;

  #define SPIN_ROTATION -2.0
  #define SPIN_SPEED 7.0
  #define OFFSET vec2(0.0)
  #define COLOUR_1 vec4(uColor.rgb, 1.0)
  #define COLOUR_2 vec4(0.0, 0.42, 0.706, 1.0)
  #define COLOUR_3 vec4(0.086, 0.137, 0.145, 1.0)
  #define CONTRAST 3.5
  #define LIGTHING 0.4
  #define SPIN_AMOUNT 0.25
  #define PIXEL_FILTER 745.0
  #define SPIN_EASE 1.0
  #define PI 3.14159265359
  #define IS_ROTATE false

  vec4 effect(vec2 screenSize, vec2 screen_coords) {
      float pixel_size = length(screenSize.xy) / PIXEL_FILTER;
      vec2 uv = (floor(screen_coords.xy*(1./pixel_size))*pixel_size - 0.5*screenSize.xy)/length(screenSize.xy) - OFFSET;
      float uv_len = length(uv);

      float speed = (SPIN_ROTATION*SPIN_EASE*0.2);
      if(IS_ROTATE){
         speed = iTime * speed;
      }
      speed += 302.2;

      float new_pixel_angle = atan(uv.y, uv.x) + speed - SPIN_EASE*20.*(1.*SPIN_AMOUNT*uv_len + (1. - 1.*SPIN_AMOUNT));
      vec2 mid = (screenSize.xy/length(screenSize.xy))/2.;
      uv = (vec2((uv_len * cos(new_pixel_angle) + mid.x), (uv_len * sin(new_pixel_angle) + mid.y)) - mid);

      uv *= 30.;
      speed = iTime*(SPIN_SPEED);
      vec2 uv2 = vec2(uv.x+uv.y);

      for(int i=0; i < 5; i++) {
          uv2 += sin(max(uv.x, uv.y)) + uv;
          uv  += 0.5*vec2(cos(5.1123314 + 0.353*uv2.y + speed*0.131121),sin(uv2.x - 0.113*speed));
          uv  -= 1.0*cos(uv.x + uv.y) - 1.0*sin(uv.x*0.711 - uv.y);
      }

      float contrast_mod = (0.25*CONTRAST + 0.5*SPIN_AMOUNT + 1.2);
      float paint_res = min(2., max(0.,length(uv)*(0.035)*contrast_mod));
      float c1p = max(0.,1. - contrast_mod*abs(1.-paint_res));
      float c2p = max(0.,1. - contrast_mod*abs(paint_res));
      float c3p = 1. - min(1., c1p + c2p);
      float light = (LIGTHING - 0.2)*max(c1p*5. - 4., 0.) + LIGTHING*max(c2p*5. - 4., 0.);

      return (0.3/CONTRAST)*COLOUR_1 + (1. - 0.3/CONTRAST)*(COLOUR_1*c1p + COLOUR_2*c2p + vec4(c3p*COLOUR_3.rgb, c3p*COLOUR_1.a)) + light;
  }

  void mainImage(out vec4 fragColor, in vec2 fragCoord) {
      vec2 uv = fragCoord/iResolution.xy;
      fragColor = effect(iResolution.xy, uv * iResolution.xy);
  }

  void main() {
      mainImage(gl_FragColor, gl_FragCoord.xy);
  }
`;

function HellBackground({
  backdropBlurAmount = "none",
  className = "",
  color = "#DE443B",
}: HellBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const uColorLocation = gl.getUniformLocation(program, "uColor");

    const hexToRgb = (hex: string) => {
      const bigint = parseInt(hex.replace("#", ""), 16);
      return {
        r: ((bigint >> 16) & 255) / 255,
        g: ((bigint >> 8) & 255) / 255,
        b: (bigint & 255) / 255,
      };
    };

    let startTime = Date.now();

    const render = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;
      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);

      const rgb = hexToRgb(color);
      gl.uniform3f(uColorLocation, rgb.r, rgb.g, rgb.b);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      requestAnimationFrame(render);
    };

    render();
  }, [color]);

  const finalBlurClass = blurClassMap[backdropBlurAmount as BlurSize] || blurClassMap["sm"];

  return (
    <div className={`w-full max-w-screen h-full overflow-hidden ${className}`}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
        style={{ display: "block" }}
      />
      <div className={`absolute inset-0 ${finalBlurClass}`} />
    </div>
  );
}

export default HellBackground;

```
--------------------------------------------------

### COMPONENT: interactive-grid-background
Category: Background
Description: A fully interactive grid background component with glowing trails and idle animations. The grid reacts to mouse movement, creating a smooth trail effect, and automatically animates random cells when idle. Supports light/dark mode, glow effects, and optional fade overlays for visual depth.
URL: https://lightswind.com/components/interactive-grid-background
Import: import InteractiveGridBackground from "@/components/lightswind/interactive-grid-background";
Registry URL: https://lightswind.com/r/interactive-grid-background.json
Install Command: npx lightswind@latest add interactive-grid-background

Usage:
```tsx
// 1. Default interactive grid background
<InteractiveGridBackground />

// 2. Custom grid size, colors, trail, and glow
<InteractiveGridBackground
  gridSize={40}
  gridColor="#d1d5db"
  darkGridColor="#1f2937"
  effectColor="rgba(0,255,255,0.5)"
  darkEffectColor="rgba(255,0,255,0.5)"
  trailLength={5}
  glow
  glowRadius={30}
  showFade
  fadeIntensity={25}
/>

// 3. With overlay content
<InteractiveGridBackground>
  <h1 className="text-white text-3xl">Welcome!</h1>
</InteractiveGridBackground>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";

export interface InteractiveGridBackgroundProps
  extends React.HTMLProps<HTMLDivElement> {
  gridSize?: number;
  gridColor?: string;
  darkGridColor?: string;
  effectColor?: string;
  darkEffectColor?: string;
  trailLength?: number;
  width?: number;
  height?: number;
  idleSpeed?: number;
  glow?: boolean;
  glowRadius?: number;
  children?: React.ReactNode;
  showFade?: boolean;
  fadeIntensity?: number;
  idleRandomCount?: number; // ✅ how many random cells move during idle
}

const InteractiveGridBackground: React.FC<InteractiveGridBackgroundProps> = ({
  gridSize = 50,
  gridColor = "#cbcbcb",
  darkGridColor = "#303030",
  effectColor = "rgba(0, 0, 0, 0.6)",
  darkEffectColor = "rgba(255, 255, 255, 0.6)",
  trailLength = 3,
  width,
  height,
  idleSpeed = 0.2,
  glow = true,
  glowRadius = 20,
  children,
  showFade = true,
  fadeIntensity = 20,
  idleRandomCount = 5,
  className,
  ...props
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isDarkMode, setIsDarkMode] = useState(false);

  const lineColor = isDarkMode ? darkGridColor : gridColor;

  const trailRef = useRef<{ x: number; y: number }[]>([]);
  const idleTargetsRef = useRef<{ x: number; y: number }[]>([]);
  const idlePositionsRef = useRef<{ x: number; y: number }[]>([]);
  const mouseActiveRef = useRef(false);
  const lastMouseTimeRef = useRef(Date.now());

  // Detect dark mode
  useEffect(() => {
    const updateDarkMode = () => {
      setIsDarkMode(document.documentElement.classList.contains("dark"));
    };
    updateDarkMode();
    const observer = new MutationObserver(() => updateDarkMode());
    observer.observe(document.documentElement, { attributes: true });
    return () => observer.disconnect();
  }, []);

  // Mouse tracking (zero layout thrashing during scroll)
  useEffect(() => {
    let rect: DOMRect | null = null;
    const container = containerRef.current;

    const onScrollOrResize = () => {
      // Invalidate cached rect without calling getBoundingClientRect() during scroll!
      rect = null;
    };

    window.addEventListener("resize", onScrollOrResize);
    window.addEventListener("scroll", onScrollOrResize, { passive: true });

    const handleMouseMove = (e: MouseEvent) => {
      if (!container) return;
      if (!rect) {
        rect = container.getBoundingClientRect();
      }

      const rawX = e.clientX - rect.left;
      const rawY = e.clientY - rect.top;

      if (rawX < 0 || rawY < 0 || rawX > rect.width || rawY > rect.height)
        return;

      mouseActiveRef.current = true;
      lastMouseTimeRef.current = Date.now();

      const snappedX = Math.floor(rawX / gridSize);
      const snappedY = Math.floor(rawY / gridSize);

      const last = trailRef.current[0];
      if (!last || last.x !== snappedX || last.y !== snappedY) {
        trailRef.current.unshift({ x: snappedX, y: snappedY });
        if (trailRef.current.length > trailLength) trailRef.current.pop();
      }
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("resize", onScrollOrResize);
      window.removeEventListener("scroll", onScrollOrResize);
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, [gridSize, trailLength]);

  // Drawing logic
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const canvasWidth = width || window.innerWidth;
    const canvasHeight = height || window.innerHeight;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    const cols = Math.floor(canvasWidth / gridSize);
    const rows = Math.floor(canvasHeight / gridSize);

    const glowColor = isDarkMode ? darkEffectColor : effectColor;

    // Initialize idle positions
    idleTargetsRef.current = Array.from({ length: idleRandomCount }, () => ({
      x: Math.floor(Math.random() * cols),
      y: Math.floor(Math.random() * rows),
    }));
    idlePositionsRef.current = idleTargetsRef.current.map((p) => ({ ...p }));

    const draw = () => {
       ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
       // Idle animation logic
      const idleThreshold = 2000;
      if (Date.now() - lastMouseTimeRef.current > idleThreshold) {
        mouseActiveRef.current = false;

        idlePositionsRef.current.forEach((pos, i) => {
          const target = idleTargetsRef.current[i];
          const dx = target.x - pos.x;
          const dy = target.y - pos.y;

          if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01) {
            // new random target when reached
            idleTargetsRef.current[i] = {
              x: Math.floor(Math.random() * cols),
              y: Math.floor(Math.random() * rows),
            };
          } else {
            pos.x += dx * idleSpeed;
            pos.y += dy * idleSpeed;
          }

          const roundedX = Math.round(pos.x);
          const roundedY = Math.round(pos.y);
          const last = trailRef.current[0];
          if (!last || last.x !== roundedX || last.y !== roundedY) {
            trailRef.current.unshift({ x: roundedX, y: roundedY });
            if (trailRef.current.length > trailLength * idleRandomCount)
              trailRef.current.pop();
          }
        });
      }

      // Draw trail glow
      trailRef.current.forEach((cell, idx) => {
        const alpha = 1 - idx * (1 / (trailLength + 1));
        const rgbaColor = glowColor.replace(/[\d.]+\)$/g, `${alpha})`);

        ctx.fillStyle = rgbaColor;
        if (glow) {
          ctx.shadowColor = rgbaColor;
          ctx.shadowBlur = glowRadius;
        } else {
          ctx.shadowBlur = 0;
        }

        ctx.fillRect(cell.x * gridSize, cell.y * gridSize, gridSize, gridSize);
      });
      ctx.shadowBlur = 0;

      if (isVisible) {
        animationFrameId = requestAnimationFrame(draw);
      }
    };

    let animationFrameId: number;
    let isVisible = true;

    const container = containerRef.current;
    let observer: IntersectionObserver | null = null;

    if (container && typeof IntersectionObserver !== "undefined") {
      observer = new IntersectionObserver(
        ([entry]) => {
          const wasVisible = isVisible;
          isVisible = entry && entry.isIntersecting;
          if (isVisible && !wasVisible) {
            cancelAnimationFrame(animationFrameId);
            animationFrameId = requestAnimationFrame(draw);
          }
        },
        { rootMargin: "150px" }
      );
      observer.observe(container);
    }

    draw();

    return () => {
      cancelAnimationFrame(animationFrameId);
      if (observer) observer.disconnect();
    };
  }, [
    gridSize,
    width,
    height,
    gridColor,
    darkGridColor,
    effectColor,
    darkEffectColor,
    isDarkMode,
    trailLength,
    idleSpeed,
    glow,
    glowRadius,
    idleRandomCount,
  ]);

  return (
    <div
      ref={containerRef}
      className={`relative ${className}`}
      style={{ width: width || "99vw", height: height || "100vh" }}
      {...props}
    >
      <canvas
        ref={canvasRef}
        className="absolute top-0 left-0 z-0 pointer-events-none"
        style={{
          backgroundImage: `linear-gradient(to right, ${lineColor} 1px, transparent 1px), linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`,
          backgroundSize: `${gridSize}px ${gridSize}px`,
        }}
      />

      {showFade && (
        <div
          className="pointer-events-none absolute inset-0 bg-white dark:bg-black"
          style={{
            maskImage: `radial-gradient(ellipse at center, transparent ${fadeIntensity}%, black)`,
            WebkitMaskImage: `radial-gradient(ellipse at center, transparent ${fadeIntensity}%, black)`,
          }}
        />
      )}
      <div className="relative z-0 w-full h-full">{children}</div>
    </div>
  );
};

export default InteractiveGridBackground;
```
--------------------------------------------------

### COMPONENT: particles-background
Category: Background
Description: A customizable and responsive particle animation background using particles.js. Ideal for adding dynamic visual flair to hero sections or full-page layouts. Supports custom particle colors, sizes, count per device type, and styling options.
URL: https://lightswind.com/components/particles-background
Import: import ParticlesBackground from '@/components/lightswind/particles-background';
Registry URL: https://lightswind.com/r/particles-background.json
Install Command: npx lightswind@latest add particles-background

Usage:
```tsx
import ParticlesBackground from '@/components/lightswind/particles-background';

// Basic usage with default values
<ParticlesBackground />

// Custom colors, size, count, and z-index
<ParticlesBackground
  colors={['#00ffff', '#ff00ff', '#ffaa00']}
  size={4}
  countDesktop={80}
  countTablet={60}
  countMobile={40}
  zIndex={-1}
  height="100vh"
/>;
```

Source Code:
```tsx
import React, { useLayoutEffect } from 'react';

declare global {
  interface Window {
    particlesJS: any;
  }
}

interface ParticlesBackgroundProps {
  colors?: string[];
  size?: number;
  countDesktop?: number;
  countTablet?: number;
  countMobile?: number;
  zIndex?: number;
  height?: string;
}

const ParticlesBackground: React.FC<ParticlesBackgroundProps> = ({
  colors = ['#ff223e', '#5d1eb2', '#ff7300'],
  size = 3,
  countDesktop = 60,
  countTablet = 50,
  countMobile = 40,
  zIndex = 0,
  height = '100vh',
}) => {
  useLayoutEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
    script.onload = () => {
      const particlesElement = document.getElementById('js-particles');
      if (particlesElement && window.particlesJS) {
        const getParticleCount = () => {
          const screenWidth = window.innerWidth;
          if (screenWidth > 1024) return countDesktop;
          if (screenWidth > 768) return countTablet;
          return countMobile;
        };

        window.particlesJS('js-particles', {
          particles: {
            number: {
              value: getParticleCount(),
            },
            color: {
              value: colors,
            },
            shape: {
              type: 'circle',
            },
            opacity: {
              value: 1,
              random: false,
            },
            size: {
              value: size,
              random: true,
            },
            line_linked: {
              enable: false,
            },
            move: {
              enable: true,
              speed: 2,
              direction: 'none',
              random: true,
              straight: false,
              out_mode: 'out',
            },
          },
          interactivity: {
            detect_on: 'canvas',
            events: {
              onhover: {
                enable: false,
              },
              onclick: {
                enable: false,
              },
              resize: true,
            },
          },
          retina_detect: true,
        });
      }
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [colors, size, countDesktop, countTablet, countMobile]);

  return (
    <div
      id="js-particles"
      style={{
        width: '100%',
        height: height,
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: zIndex,
        pointerEvents: 'none',
      }}
    >
      <style>{`
        #js-particles canvas {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .particles-js-canvas-el {
          position: absolute;
        }

        .particles-js-canvas-el circle {
          fill: currentColor;
          filter: url(#glow);
        }
      `}</style>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="glow">
            <feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
      </svg>
    </div>
  );
};

export default ParticlesBackground;

```
--------------------------------------------------

### COMPONENT: rays-background
Category: Background
Description: A vibrant, conic and radial-based animated background effect inspired by cosmic light rays. Perfect for hero sections, modals, or theme transitions with full Tailwind and dark/light mode support.
URL: https://lightswind.com/components/rays-background
Import: import RaysBackground from "@/components/lightswind/rays-background";
Registry URL: https://lightswind.com/r/rays-background.json
Install Command: npx lightswind@latest add rays-background

Usage:
```tsx
// 1. Default Animated Dark Rays Background
<RaysBackground>
  <div className="flex items-center justify-center h-screen text-white text-3xl">
    Radiant Energy
  </div>
</RaysBackground>

// 2. Static Light Rays Background
<RaysBackground theme="light" animated={false}>
  <div className="flex items-center justify-center h-screen text-black text-3xl">
    Calm Glow
  </div>
</RaysBackground>

// 3. Custom Colors and Blur Intensity
<RaysBackground
  colors={{
    purple: "#9b5de5",
    yellow: "#f9c74f",
    pink: "#f15bb5",
    teal: "#00f5d4",
    blue: "#4361ee",
  }}
  blurAmount={10}
  opacity={0.8}
>
  <div className="flex items-center justify-center h-screen text-white text-3xl">
    Custom Spectrum
  </div>
</RaysBackground>

// 4. Faster Animation with Higher Speed
<RaysBackground animationSpeed={2}>
  <div className="flex items-center justify-center h-screen text-white text-3xl">
    Fast Rays
  </div>
</RaysBackground>

// 5. Using as a Layered Background Wrapper
<div className="relative h-screen">
  <RaysBackground opacity={0.6} className="z-0" />
  <div className="relative z-10 flex items-center justify-center h-full text-white text-3xl">
    Foreground Content
  </div>
</div>
```

Source Code:
```tsx
"use client";

import React from "react";
import { motion, useReducedMotion } from "framer-motion";
import type { Transition } from "framer-motion";
import { cn } from "@/components/lib/utils";

interface RaysBackgroundProps {
  theme?: "light" | "dark";
  animated?: boolean;
  animationSpeed?: number;
  opacity?: number;
  colors?: {
    purple?: string;
    yellow?: string;
    pink?: string;
    teal?: string;
    blue?: string;
  };
  blurAmount?: number;
  children?: React.ReactNode;
  className?: string;
}

/**
 * Performance notes:
 * - Framer Motion uses the Web Animations API (WAAPI) for `rotate`, running on
 *   the compositor thread with zero JS per frame.
 * - `filter: blur()` is only on a static non-animated outer div, so the GPU
 *   composites it once — never re-blurs a moving element.
 * - `useReducedMotion` respects system accessibility settings.
 * - `will-change: transform` on rotating divs promotes them to their own layer.
 * - `contain: layout style` isolates repaints without blocking compositing.
 * - blend modes (color-dodge, hard-light) are kept but on GPU-promoted layers
 *   so the browser can accelerate them via hardware blending on most GPUs.
 */
const RaysBackground: React.FC<RaysBackgroundProps> = ({
  theme = "dark",
  animated = true,
  animationSpeed = 1,
  opacity = 0.7,
  colors = {
    purple: "rgba(169, 73, 207, 1)",
    yellow: "rgba(238, 248, 86, 1)",
    pink: "rgba(248, 72, 202, 1)",
    teal: "rgba(119, 235, 195, 1)",
    blue: "rgba(77, 71, 214, 1)",
  },
  blurAmount = 6,
  children,
  className = "",
}) => {
  const prefersReduced = useReducedMotion();
  const shouldAnimate = animated && !prefersReduced;
  const isLightTheme = theme === "light";

  // Durations in seconds
  const cwDur = 10 / animationSpeed;
  const ccwDur = 8 / animationSpeed;
  const slowDur = 80 / animationSpeed;

  const radialMask =
    "radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 1%, rgba(0,0,0,.7) 5%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.15) 35%, transparent 50%)";

  const colorMask =
    "radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 6%, rgba(0,0,0,.7) 11%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.3) 26%, rgba(0,0,0,.15) 35%, transparent 70%)";

  const innerColorMask =
    "radial-gradient(circle at 50% 50%, rgba(0,0,0,.9) 5%, rgba(0,0,0,.7) 13%, rgba(0,0,0,.5) 22%, rgba(0,0,0,.3) 29%, rgba(0,0,0,.15) 37%, transparent 46%)";

  const outerAccentMask =
    "radial-gradient(circle at 50% 50%, rgba(0,0,0,.9) 9%, rgba(0,0,0,.7) 17%, rgba(0,0,0,.5) 25%, rgba(0,0,0,.3) 33%, rgba(0,0,0,.15) 41%, transparent 50%)";

  // Per-direction typed animation configs
  const spinAnimate = (dir: 1 | -1) =>
    shouldAnimate ? { rotate: 360 * dir } : ({} as Record<string, never>);

  const spinTransition = (dur: number): Transition => shouldAnimate
    ? { repeat: Infinity, ease: "linear" as const, duration: dur }
    : {};

  const animatedStyle: React.CSSProperties = {
    willChange: shouldAnimate ? "transform" : "auto",
  };

  // Shared container style for the scaled ray group
  const rayGroupStyle = (blur?: number): React.CSSProperties => ({
    position: "absolute",
    width: "45%",
    height: "100%",
    top: "-50%",
    left: "50%",
    // Scale + center: this never changes so no repaint from transform
    transform: "translateX(-50%) scaleX(3.5) scaleY(3)",
    overflow: "hidden",
    pointerEvents: "none",
    // Blur on the STATIC wrapper — GPU composites this once
    ...(blur ? { filter: `blur(${blur}px)` } : {}),
    // Isolate this subtree's repaints
    contain: "layout style",
  });

  return (
    <div
      className={cn(
        "absolute left-0 top-0 w-full min-h-screen max-h-screen overflow-hidden bg-background",
        className
      )}
    >
      {/* ── Group 1: Light / Monochrome Rays ────────────────────────────── */}
      <div
        style={{
          ...rayGroupStyle(),
          mixBlendMode: isLightTheme ? "darken" : "normal",
        }}
      >
        {/* Static radial bg + masked container — no blur here */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "radial-gradient(rgba(255,255,255,.6), rgba(0,0,0,.7))",
            overflow: "hidden",
            WebkitMaskImage: radialMask,
            maskImage: radialMask,
            WebkitMaskRepeat: "no-repeat",
            maskRepeat: "no-repeat",
            mixBlendMode: "color-burn",
            opacity: 0.6,
          }}
        >
          {/* CW spinning ray disc */}
          <motion.div
            animate={spinAnimate(1)}
            transition={spinTransition(cwDur)}
            style={{
              ...animatedStyle,
              position: "absolute",
              top: "50%",
              left: "50%",
              margin: "-100vmax",
              width: "200vmax",
              height: "200vmax",
              opacity: 0.45,
              background: `conic-gradient(
                from 20deg at 50% 50%,
                rgba(3,10,0,0.1), transparent,
                rgba(3,10,0,1), transparent,
                rgba(3,10,0,0.5), transparent,
                rgba(3,10,0,0.68), transparent,
                rgba(3,10,0,0.1), transparent,
                rgba(3,10,0,0.68), transparent,
                rgba(3,10,0,0.1)
              )`,
              mixBlendMode: "hard-light",
              WebkitMaskImage: radialMask,
              maskImage: radialMask,
            }}
          />

          {/* CCW spinning ray disc */}
          <motion.div
            animate={spinAnimate(-1)}
            transition={spinTransition(ccwDur)}
            style={{
              ...animatedStyle,
              position: "absolute",
              top: "50%",
              left: "50%",
              margin: "-100vmax",
              width: "200vmax",
              height: "200vmax",
              opacity: 0.45,
              background: `conic-gradient(
                from 0deg at 50% 50%,
                rgba(3,10,0,0.5), transparent,
                rgba(3,10,0,1), transparent,
                rgba(3,10,0,0.5), transparent,
                rgba(3,10,0,0.1), transparent,
                rgba(3,10,0,0.5)
              )`,
              mixBlendMode: "color-burn",
              WebkitMaskImage: radialMask,
              maskImage: radialMask,
            }}
          />
        </div>
      </div>

      {/* ── Group 2: Color Rays ──────────────────────────────────────────── */}
      {/* blur lives on THIS static wrapper — never re-blurs a moving element */}
      <div
        style={{
          ...rayGroupStyle(blurAmount),
          opacity: opacity,
          WebkitMaskImage: colorMask,
          maskImage: colorMask,
          WebkitMaskRepeat: "no-repeat",
          maskRepeat: "no-repeat",
          mixBlendMode: "hard-light",
        }}
      >
        {/* Primary color wheel — CCW */}
        <motion.div
          animate={spinAnimate(-1)}
          transition={spinTransition(ccwDur)}
          style={{
            ...animatedStyle,
            position: "absolute",
            width: "100%",
            height: "100%",
            top: 0,
            left: 0,
            background: `conic-gradient(
              from 90deg at 50% 50%,
              ${colors.purple},
              ${colors.yellow},
              ${colors.pink},
              ${colors.teal},
              ${colors.blue},
              ${colors.purple}
            )`,
            WebkitMaskImage: innerColorMask,
            maskImage: innerColorMask,
            WebkitMaskRepeat: "no-repeat",
            maskRepeat: "no-repeat",
            mixBlendMode: isLightTheme ? "overlay" : "color-dodge",
          }}
        />

        {/* Slow accent overlay — CCW */}
        <motion.div
          animate={spinAnimate(-1)}
          transition={spinTransition(slowDur)}
          style={{
            ...animatedStyle,
            position: "absolute",
            width: "100%",
            height: "100%",
            top: "-1.5%",
            left: 0,
            background: `conic-gradient(
              from 45deg at 50% 50%,
              ${colors.blue},
              ${colors.purple},
              ${colors.teal},
              ${colors.pink},
              ${colors.yellow},
              ${colors.blue}
            )`,
            WebkitMaskImage: outerAccentMask,
            maskImage: outerAccentMask,
            WebkitMaskRepeat: "no-repeat",
            maskRepeat: "no-repeat",
            mixBlendMode: isLightTheme ? "hard-light" : "multiply",
            opacity: 0.5,
          }}
        />
      </div>

      {/* Content */}
      <div className="relative z-10 w-full h-full">{children}</div>
    </div>
  );
};

export default RaysBackground;
```
--------------------------------------------------

### COMPONENT: reflect-background
Category: Background
Description: A vibrant animated WebGL background that simulates reflected light and fluid motion using a custom shader. Includes optional customizable backdrop blur overlay for immersive depth and layering. Ideal for modern UIs requiring expressive, animated visuals.
URL: https://lightswind.com/components/reflect-background
Import: import ReflectBackground from '@/components/lightswind/reflect-background';
Registry URL: https://lightswind.com/r/reflect-background.json
Install Command: npx lightswind@latest add reflect-background

Usage:
```tsx
import ReflectBackground from '@/components/lightswind/reflect-background';

// Basic usage with default (sm) blur
<ReflectBackground />

// With a medium backdrop blur
<ReflectBackground backdropBlurAmount="md" />

// With maximum blur and custom border styling
<ReflectBackground backdropBlurAmount="3xl" className="border-2 border-primarylw rounded-2xl" />

// With responsive height and full screen width
<ReflectBackground className="h-[60vh] w-screen" />

// Combining all props
<ReflectBackground backdropBlurAmount="xl" className="rounded-xl shadow-lg border border-neutral-700" />
```

Source Code:
```tsx
"use client";
import { useEffect, useRef } from "react";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;

#define TAU 6.28318530718
#define MAX_ITER 5

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    float time = iTime * 0.5 + 23.0;

    vec2 uv = fragCoord.xy / iResolution.xy;

    vec2 p = mod(uv * TAU, TAU) - 250.0;
    vec2 i = vec2(p);
    float c = 1.0;
    float inten = 0.005;

    for (int n = 0; n < MAX_ITER; n++) {
        float t = time * (1.0 - (3.5 / float(n + 1)));
        i = p + vec2(
            cos(t - i.x) + sin(t + i.y),
            sin(t - i.y) + cos(t + i.x)
        );
        c += 1.0 / length(vec2(
            p.x / (sin(i.x + t) / inten),
            p.y / (cos(i.y + t) / inten)
        ));
    }

    c /= float(MAX_ITER);
    c = 1.17 - pow(c, 1.4);

    vec3 colour = vec3(pow(abs(c), 8.0));
    colour = clamp(colour + vec3(0.0, 0.35, 0.5), 0.0, 1.0);

    fragColor = vec4(colour, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;


export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface ReflectBackgroundProps {
  backdropBlurAmount?: BlurSize;
  className?: string;
}

const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

function ReflectBackground({
  backdropBlurAmount = "sm",
  className = "",
}: ReflectBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");

    let startTime = Date.now();

    const render = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      requestAnimationFrame(render);
    };

    render();
  }, []);

  const finalBlurClass = blurClassMap[backdropBlurAmount] || blurClassMap["sm"];

  return (
    <div className={`w-full max-w-screen h-full overflow-hidden ${className}`}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
        style={{ display: "block" }}
      />
      <div className={`absolute inset-0 ${finalBlurClass}`} />
    </div>
  );
}

export default ReflectBackground;

```
--------------------------------------------------

### COMPONENT: smokey-background
Category: Background
Description: A reusable WebGL-powered background component that renders a glowing, interactive smokey wave effect. Responds to mouse movement and supports dynamic color and backdrop blur customization. Ideal for modern, ambient visual sections.
URL: https://lightswind.com/components/smokey-background
Import: import SmokeyBackground from '@/components/lightswind/smokey-background';
Registry URL: https://lightswind.com/r/smokey-background.json
Install Command: npx lightswind@latest add smokey-background

Usage:
```tsx
import SmokeyBackground from '@/components/lightswind/smokey-background';

<SmokeyBackground
  backdropBlurAmount="lg"
  color="#471CE2"
  className="rounded-xl"
/>
```

Source Code:
```tsx
"use client";
import { useEffect, useRef, useState } from "react";

const vertexSmokeySource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentSmokeySource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform vec3 u_color;

void mainImage(out vec4 fragColor, in vec2 fragCoord){
    vec2 uv = fragCoord / iResolution;
    vec2 centeredUV = (2.0 * fragCoord - iResolution.xy) / min(iResolution.x, iResolution.y);

    float time = iTime * 0.5;

    // Normalize mouse input (0.0 - 1.0)
    vec2 mouse = iMouse / iResolution;
    vec2 rippleCenter = 2.0 * mouse - 1.0; // remap to -1.0 ~ 1.0

    vec2 distortion = centeredUV;
    for (float i = 1.0; i < 8.0; i++) {
        distortion.x += 0.5 / i * cos(i * 2.0 * distortion.y + time + rippleCenter.x * 3.1415);
        distortion.y += 0.5 / i * cos(i * 2.0 * distortion.x + time + rippleCenter.y * 3.1415);
    }

    float wave = abs(sin(distortion.x + distortion.y + time));
    float glow = smoothstep(0.9, 0.2, wave);

    fragColor = vec4(u_color * glow, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

/**
 * Valid blur sizes supported by Tailwind CSS.
 */
export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

/**
 * @typedef {Object} SmokeyBackgroundProps
 * @property {BlurSize} [backdropBlurAmount] - The size of the backdrop blur to apply.
 * Valid values are "none", "sm", "md", "lg", "xl", "2xl", "3xl".
 * Defaults to "sm" if not provided.
 * @property {string} [color] - The color of the shader's glow in hexadecimal format (e.g., "#RRGGBB").
 * Defaults to "#471CE2" (purple) if not provided.
 * @property {string} [className] - Additional CSS classes to apply to the container div.
 */
interface SmokeyBackgroundProps {
  backdropBlurAmount?: string; // Accept any string from UI (validated internally)
  color?: string;
  className?: string;
}

/**
 * A mapping from simplified blur size names to full Tailwind CSS backdrop-blur classes.
 * This ensures Tailwind's JIT mode can correctly detect and generate the CSS.
 */
const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

/**
 * A React component that renders an interactive WebGL shader background.
 * The background features a turbulent, glowing wave pattern that responds to mouse movement.
 * An optional backdrop blur can be applied over the shader.
 *
 * @param {SmokeyBackgroundProps} props - The component props.
 * @returns {JSX.Element} The rendered SmokeyBackground component.
 */
function SmokeyBackground({
  backdropBlurAmount = "sm",
  color = "#fff", // Default purple color
  className = "",
}: SmokeyBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovering, setIsHovering] = useState(false);

  // Helper to convert hex color to RGB (0-1 range)
  const hexToRgb = (hex: string): [number, number, number] => {
    const r = parseInt(hex.substring(1, 3), 16) / 255;
    const g = parseInt(hex.substring(3, 5), 16) / 255;
    const b = parseInt(hex.substring(5, 7), 16) / 255;
    return [r, g, b];
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (
      type: number,
      source: string
    ): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexSmokeySource);
    const fragmentShader = compileShader(
      gl.FRAGMENT_SHADER,
      fragmentSmokeySource
    );
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const uColorLocation = gl.getUniformLocation(program, "u_color"); // Get uniform location for custom color

    let startTime = Date.now();

    // Set the initial color
    const [r, g, b] = hexToRgb(color);
    gl.uniform3f(uColorLocation, r, g, b);

    const render = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(
        iMouseLocation,
        isHovering ? mousePosition.x : 0,
        isHovering ? height - mousePosition.y : 0
      );

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      requestAnimationFrame(render);
    };

    const handleMouseMove = (event: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      setMousePosition({
        x: event.clientX - rect.left,
        y: event.clientY - rect.top,
      });
    };

    const handleMouseEnter = () => {
      setIsHovering(true);
    };

    const handleMouseLeave = () => {
      setIsHovering(false);
      setMousePosition({ x: 0, y: 0 });
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    render();

    return () => {
      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [isHovering, mousePosition, color]); // Add color to the dependency array

  // Get the correct Tailwind CSS class from the map
  const finalBlurClass =
    blurClassMap[backdropBlurAmount as BlurSize] || blurClassMap["sm"];

  return (
    <div className={`w-full max-w-screen h-full overflow-hidden ${className}`}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
        style={{ display: "block" }}
      />
      {/* Apply the mapped Tailwind CSS class for backdrop blur */}
      <div className={`absolute inset-0 ${finalBlurClass}`}></div>
    </div>
  );
}

export default SmokeyBackground;
```
--------------------------------------------------

### COMPONENT: liquid-surface
Category: Background
Description: A premium 3D interactive background featuring liquid surface displacement and dynamic color mixing. Powered by WebGL and Three.js.
URL: https://lightswind.com/components/liquid-surface
Import: import LiquidSurface from "@/components/lightswind/liquid-surface"
Registry URL: https://lightswind.com/r/liquid-surface.json
Install Command: npx lightswind@latest add liquid-surface

Usage:
```tsx
import LiquidSurface from "@/components/lightswind/liquid-surface";

export function LiquidSurfaceDemo() {
  return (
    <div className="relative w-full h-[400px] bg-black overflow-hidden rounded-xl">
      <LiquidSurface 
        heading="LIQUID SURFACE"
        scheme={1}
        speed={1.2}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import gsap from "gsap";
import { cn } from "@/components/lib/utils";

// --- Types ---
export interface LiquidSurfaceProps {
    className?: string;
    style?: React.CSSProperties;
    colors?: string[];
    speed?: number;
    intensity?: number;
    grainIntensity?: number;
    zoom?: number;
    gradientSize?: number;
    gradientCount?: number;
    color1Weight?: number;
    color2Weight?: number;
    darkNavyColor?: string;
    scheme?: number;
    heading?: string;
    showCursor?: boolean;
}

// --- Utils ---
function hexToRgb(hex: string) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
        ? {
            r: parseInt(result[1], 16) / 255,
            g: parseInt(result[2], 16) / 255,
            b: parseInt(result[3], 16) / 255,
        }
        : null;
}

function rgbToHex(r: number, g: number, b: number) {
    const toHex = (n: number) => {
        const hex = Math.round(n * 255).toString(16);
        return hex.length === 1 ? "0" + hex : hex;
    };
    return "#" + toHex(r) + toHex(g) + toHex(b);
}

// --- Classes ---
class TouchTexture {
    size: number;
    width: number;
    height: number;
    maxAge: number;
    radius: number;
    speed: number;
    trail: any[];
    last: any;
    canvas!: HTMLCanvasElement;
    ctx!: CanvasRenderingContext2D;
    texture!: THREE.Texture;

    constructor() {
        this.size = 64;
        this.width = this.height = this.size;
        this.maxAge = 64;
        this.radius = 0.25 * this.size;
        this.speed = 1 / this.maxAge;
        this.trail = [];
        this.last = null;
        this.initTexture();
    }

    initTexture() {
        this.canvas = document.createElement("canvas");
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.ctx = this.canvas.getContext("2d")!;
        this.ctx.fillStyle = "black";
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        this.texture = new THREE.CanvasTexture(this.canvas);
    }

    update() {
        this.clear();
        let speed = this.speed;
        for (let i = this.trail.length - 1; i >= 0; i--) {
            const point = this.trail[i];
            let f = point.force * speed * (1 - point.age / this.maxAge);
            point.x += point.vx * f;
            point.y += point.vy * f;
            point.age++;
            if (point.age > this.maxAge) {
                this.trail.splice(i, 1);
            } else {
                this.drawPoint(point);
            }
        }
        this.texture.needsUpdate = true;
    }

    clear() {
        this.ctx.fillStyle = "black";
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }

    addTouch(point: { x: number; y: number }) {
        let force = 0;
        let vx = 0;
        let vy = 0;
        const last = this.last;
        if (last) {
            const dx = point.x - last.x;
            const dy = point.y - last.y;
            if (dx === 0 && dy === 0) return;
            const dd = dx * dx + dy * dy;
            let d = Math.sqrt(dd);
            vx = dx / d;
            vy = dy / d;
            force = Math.min(dd * 20000, 2.0);
        }
        this.last = { x: point.x, y: point.y };
        this.trail.push({ x: point.x, y: point.y, age: 0, force, vx, vy });
    }

    drawPoint(point: any) {
        const pos = {
            x: point.x * this.width,
            y: (1 - point.y) * this.height,
        };

        let intensity = 1;
        if (point.age < this.maxAge * 0.3) {
            intensity = Math.sin((point.age / (this.maxAge * 0.3)) * (Math.PI / 2));
        } else {
            const t = 1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7);
            intensity = -t * (t - 2);
        }
        intensity *= point.force;

        const radius = this.radius;
        let color = `${((point.vx + 1) / 2) * 255}, ${((point.vy + 1) / 2) * 255}, ${intensity * 255}`;
        let offset = this.size * 5;
        this.ctx.shadowOffsetX = offset;
        this.ctx.shadowOffsetY = offset;
        this.ctx.shadowBlur = radius * 1;
        this.ctx.shadowColor = `rgba(${color},${0.2 * intensity})`;

        this.ctx.beginPath();
        this.ctx.fillStyle = "rgba(255,0,0,1)";
        this.ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);
        this.ctx.fill();
    }
}

class GradientBackground {
    sceneManager: any;
    mesh: THREE.Mesh | null;
    uniforms: any;

    constructor(sceneManager: any, props: LiquidSurfaceProps) {
        this.sceneManager = sceneManager;
        this.mesh = null;
        this.uniforms = {
            uTime: { value: 0 },
            uResolution: { value: new THREE.Vector2(100, 100) },
            uColor1: { value: new THREE.Vector3(0.945, 0.353, 0.133) },
            uColor2: { value: new THREE.Vector3(0.039, 0.055, 0.153) },
            uColor3: { value: new THREE.Vector3(0.945, 0.353, 0.133) },
            uColor4: { value: new THREE.Vector3(0.039, 0.055, 0.153) },
            uColor5: { value: new THREE.Vector3(0.945, 0.353, 0.133) },
            uColor6: { value: new THREE.Vector3(0.039, 0.055, 0.153) },
            uSpeed: { value: props.speed || 1.2 },
            uIntensity: { value: props.intensity || 1.8 },
            uTouchTexture: { value: null },
            uGrainIntensity: { value: props.grainIntensity || 0.08 },
            uZoom: { value: props.zoom || 1.0 },
            uDarkNavy: { value: new THREE.Vector3(0.039, 0.055, 0.153) },
            uGradientSize: { value: props.gradientSize || 1.0 },
            uGradientCount: { value: props.gradientCount || 6.0 },
            uColor1Weight: { value: props.color1Weight || 1.0 },
            uColor2Weight: { value: props.color2Weight || 1.0 },
        };
    }

    init() {
        const viewSize = this.sceneManager.getViewSize();
        const geometry = new THREE.PlaneGeometry(viewSize.width, viewSize.height, 1, 1);
        const material = new THREE.ShaderMaterial({
            uniforms: this.uniforms,
            vertexShader: `
                varying vec2 vUv;
                void main() {
                    vec3 pos = position.xyz;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
                    vUv = uv;
                }
            `,
            fragmentShader: `
                uniform float uTime;
                uniform vec2 uResolution;
                uniform vec3 uColor1; uniform vec3 uColor2; uniform vec3 uColor3;
                uniform vec3 uColor4; uniform vec3 uColor5; uniform vec3 uColor6;
                uniform float uSpeed; uniform float uIntensity; uniform sampler2D uTouchTexture;
                uniform float uGrainIntensity; uniform float uZoom; uniform vec3 uDarkNavy;
                uniform float uGradientSize; uniform float uGradientCount;
                uniform float uColor1Weight; uniform float uColor2Weight;
                
                varying vec2 vUv;
                #define PI 3.14159265359
                
                float grain(vec2 uv, float time) {
                    vec2 grainUv = uv * uResolution * 0.5;
                    float grainValue = fract(sin(dot(grainUv + time, vec2(12.9898, 78.233))) * 43758.5453);
                    return grainValue * 2.0 - 1.0;
                }
                
                vec3 getGradientColor(vec2 uv, float time) {
                    float gradientRadius = uGradientSize;
                    vec2 center1 = vec2(0.5 + sin(time * uSpeed * 0.4) * 0.4, 0.5 + cos(time * uSpeed * 0.5) * 0.4);
                    vec2 center2 = vec2(0.5 + cos(time * uSpeed * 0.6) * 0.5, 0.5 + sin(time * uSpeed * 0.45) * 0.5);
                    vec2 center3 = vec2(0.5 + sin(time * uSpeed * 0.35) * 0.45, 0.5 + cos(time * uSpeed * 0.55) * 0.45);
                    vec2 center4 = vec2(0.5 + cos(time * uSpeed * 0.5) * 0.4, 0.5 + sin(time * uSpeed * 0.4) * 0.4);
                    vec2 center5 = vec2(0.5 + sin(time * uSpeed * 0.7) * 0.35, 0.5 + cos(time * uSpeed * 0.6) * 0.35);
                    vec2 center6 = vec2(0.5 + cos(time * uSpeed * 0.45) * 0.5, 0.5 + sin(time * uSpeed * 0.65) * 0.5);
                    vec2 center7 = vec2(0.5 + sin(time * uSpeed * 0.55) * 0.38, 0.5 + cos(time * uSpeed * 0.48) * 0.42);
                    vec2 center8 = vec2(0.5 + cos(time * uSpeed * 0.65) * 0.36, 0.5 + sin(time * uSpeed * 0.52) * 0.44);
                    vec2 center9 = vec2(0.5 + sin(time * uSpeed * 0.42) * 0.41, 0.5 + cos(time * uSpeed * 0.58) * 0.39);
                    vec2 center10 = vec2(0.5 + cos(time * uSpeed * 0.48) * 0.37, 0.5 + sin(time * uSpeed * 0.62) * 0.43);
                    vec2 center11 = vec2(0.5 + sin(time * uSpeed * 0.68) * 0.33, 0.5 + cos(time * uSpeed * 0.44) * 0.46);
                    vec2 center12 = vec2(0.5 + cos(time * uSpeed * 0.38) * 0.39, 0.5 + sin(time * uSpeed * 0.56) * 0.41);
                    
                    float dist1 = length(uv - center1); float dist2 = length(uv - center2);
                    float dist3 = length(uv - center3); float dist4 = length(uv - center4);
                    float dist5 = length(uv - center5); float dist6 = length(uv - center6);
                    float dist7 = length(uv - center7); float dist8 = length(uv - center8);
                    float dist9 = length(uv - center9); float dist10 = length(uv - center10);
                    float dist11 = length(uv - center11); float dist12 = length(uv - center12);
                    
                    float influence1 = 1.0 - smoothstep(0.0, gradientRadius, dist1);
                    float influence2 = 1.0 - smoothstep(0.0, gradientRadius, dist2);
                    float influence3 = 1.0 - smoothstep(0.0, gradientRadius, dist3);
                    float influence4 = 1.0 - smoothstep(0.0, gradientRadius, dist4);
                    float influence5 = 1.0 - smoothstep(0.0, gradientRadius, dist5);
                    float influence6 = 1.0 - smoothstep(0.0, gradientRadius, dist6);
                    float influence7 = 1.0 - smoothstep(0.0, gradientRadius, dist7);
                    float influence8 = 1.0 - smoothstep(0.0, gradientRadius, dist8);
                    float influence9 = 1.0 - smoothstep(0.0, gradientRadius, dist9);
                    float influence10 = 1.0 - smoothstep(0.0, gradientRadius, dist10);
                    float influence11 = 1.0 - smoothstep(0.0, gradientRadius, dist11);
                    float influence12 = 1.0 - smoothstep(0.0, gradientRadius, dist12);
                    
                    vec2 rotatedUv1 = uv - 0.5;
                    float angle1 = time * uSpeed * 0.15;
                    rotatedUv1 = vec2(rotatedUv1.x * cos(angle1) - rotatedUv1.y * sin(angle1), rotatedUv1.x * sin(angle1) + rotatedUv1.y * cos(angle1)) + 0.5;
                    
                    vec2 rotatedUv2 = uv - 0.5;
                    float angle2 = -time * uSpeed * 0.12;
                    rotatedUv2 = vec2(rotatedUv2.x * cos(angle2) - rotatedUv2.y * sin(angle2), rotatedUv2.x * sin(angle2) + rotatedUv2.y * cos(angle2)) + 0.5;
                    
                    float radialGradient1 = length(rotatedUv1 - 0.5);
                    float radialGradient2 = length(rotatedUv2 - 0.5);
                    float radialInfluence1 = 1.0 - smoothstep(0.0, 0.8, radialGradient1);
                    float radialInfluence2 = 1.0 - smoothstep(0.0, 0.8, radialGradient2);
                    
                    vec3 color = vec3(0.0);
                    color += uColor1 * influence1 * (0.55 + 0.45 * sin(time * uSpeed)) * uColor1Weight;
                    color += uColor2 * influence2 * (0.55 + 0.45 * cos(time * uSpeed * 1.2)) * uColor2Weight;
                    color += uColor3 * influence3 * (0.55 + 0.45 * sin(time * uSpeed * 0.8)) * uColor1Weight;
                    color += uColor4 * influence4 * (0.55 + 0.45 * cos(time * uSpeed * 1.3)) * uColor2Weight;
                    color += uColor5 * influence5 * (0.55 + 0.45 * sin(time * uSpeed * 1.1)) * uColor1Weight;
                    color += uColor6 * influence6 * (0.55 + 0.45 * cos(time * uSpeed * 0.9)) * uColor2Weight;
                    
                    if (uGradientCount > 6.0) {
                        color += uColor1 * influence7 * (0.55 + 0.45 * sin(time * uSpeed * 1.4)) * uColor1Weight;
                        color += uColor2 * influence8 * (0.55 + 0.45 * cos(time * uSpeed * 1.5)) * uColor2Weight;
                        color += uColor3 * influence9 * (0.55 + 0.45 * sin(time * uSpeed * 1.6)) * uColor1Weight;
                        color += uColor4 * influence10 * (0.55 + 0.45 * cos(time * uSpeed * 1.7)) * uColor2Weight;
                    }
                    if (uGradientCount > 10.0) {
                        color += uColor5 * influence11 * (0.55 + 0.45 * sin(time * uSpeed * 1.8)) * uColor1Weight;
                        color += uColor6 * influence12 * (0.55 + 0.45 * cos(time * uSpeed * 1.9)) * uColor2Weight;
                    }
                    
                    color += mix(uColor1, uColor3, radialInfluence1) * 0.45 * uColor1Weight;
                    color += mix(uColor2, uColor4, radialInfluence2) * 0.4 * uColor2Weight;
                    
                    color = clamp(color, vec3(0.0), vec3(1.0)) * uIntensity;
                    float luminance = dot(color, vec3(0.299, 0.587, 0.114));
                    color = mix(vec3(luminance), color, 1.35);
                    color = pow(color, vec3(0.92));
                    
                    float brightness1 = length(color);
                    float mixFactor1 = max(brightness1 * 1.2, 0.15);
                    color = mix(uDarkNavy, color, mixFactor1);
                    
                    float brightness = length(color);
                    if (brightness > 1.0) color = color * (1.0 / brightness);
                    
                    return color;
                }
                
                void main() {
                    vec2 uv = vUv;
                    vec4 touchTex = texture2D(uTouchTexture, uv);
                    float vx = -(touchTex.r * 2.0 - 1.0);
                    float vy = -(touchTex.g * 2.0 - 1.0);
                    float intensity = touchTex.b;
                    
                    uv.x += vx * 0.8 * intensity;
                    uv.y += vy * 0.8 * intensity;
                    
                    vec2 center = vec2(0.5);
                    float dist = length(uv - center);
                    float ripple = sin(dist * 20.0 - uTime * 3.0) * 0.04 * intensity;
                    float wave = sin(dist * 15.0 - uTime * 2.0) * 0.03 * intensity;
                    uv += vec2(ripple + wave);
                    
                    vec3 color = getGradientColor(uv, uTime);
                    color += grain(uv, uTime) * uGrainIntensity;
                    
                    float timeShift = uTime * 0.5;
                    color.r += sin(timeShift) * 0.02;
                    color.g += cos(timeShift * 1.4) * 0.02;
                    color.b += sin(timeShift * 1.2) * 0.02;
                    
                    float brightness2 = length(color);
                    float mixFactor2 = max(brightness2 * 1.2, 0.15);
                    color = mix(uDarkNavy, color, mixFactor2);
                    color = clamp(color, vec3(0.0), vec3(1.0));
                    
                    float brightness = length(color);
                    if (brightness > 1.0) color = color * (1.0 / brightness);
                    
                    gl_FragColor = vec4(color, 1.0);
                }
            `,
        });

        this.mesh = new THREE.Mesh(geometry, material);
        this.mesh.position.z = 0;
        this.sceneManager.scene.add(this.mesh);
    }

    update(delta: number) {
        if (this.uniforms.uTime) {
            this.uniforms.uTime.value += delta;
        }
    }

    onResize(width: number, height: number) {
        const viewSize = this.sceneManager.getViewSize();
        if (this.mesh) {
            this.mesh.geometry.dispose();
            this.mesh.geometry = new THREE.PlaneGeometry(viewSize.width, viewSize.height, 1, 1);
        }
        if (this.uniforms.uResolution) {
            this.uniforms.uResolution.value.set(width, height);
        }
    }
}

class WebGLApp {
    renderer: THREE.WebGLRenderer;
    camera: THREE.PerspectiveCamera;
    scene: THREE.Scene;
    clock: THREE.Clock;
    touchTexture: TouchTexture;
    gradientBackground: GradientBackground;
    colorSchemes: Record<number, any>;
    currentScheme: number;
    mouse: { x: number; y: number };
    animationId: number = 0;
    props: LiquidSurfaceProps;

    constructor(container: HTMLDivElement, props: LiquidSurfaceProps) {
        this.props = props;
        this.renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

        // Safety check: remove any existing canvases to prevent duplicates
        if (container.children.length > 0) {
            container.innerHTML = "";
        }
        container.appendChild(this.renderer.domElement);

        this.camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 10000);
        this.camera.position.z = 50;
        this.scene = new THREE.Scene();

        const bgHex = props.darkNavyColor ? parseInt(props.darkNavyColor.replace("#", ""), 16) : 0x0a0e27;
        this.scene.background = new THREE.Color(bgHex);
        this.clock = new THREE.Clock();

        this.touchTexture = new TouchTexture();
        this.gradientBackground = new GradientBackground(this, props);
        this.gradientBackground.uniforms.uTouchTexture.value = this.touchTexture.texture;

        this.colorSchemes = {
            1: { color1: new THREE.Vector3(0.945, 0.353, 0.133), color2: new THREE.Vector3(0.039, 0.055, 0.153) },
            2: { color1: new THREE.Vector3(1.0, 0.424, 0.314), color2: new THREE.Vector3(0.251, 0.878, 0.816) },
            3: {
                color1: new THREE.Vector3(0.945, 0.353, 0.133),
                color2: new THREE.Vector3(0.039, 0.055, 0.153),
                color3: new THREE.Vector3(0.251, 0.878, 0.816),
            },
            4: {
                color1: new THREE.Vector3(0.949, 0.4, 0.2),
                color2: new THREE.Vector3(0.176, 0.42, 0.427),
                color3: new THREE.Vector3(0.82, 0.686, 0.612),
            },
            5: {
                color1: new THREE.Vector3(0.945, 0.353, 0.133),
                color2: new THREE.Vector3(0.0, 0.259, 0.22),
                color3: new THREE.Vector3(0.945, 0.353, 0.133),
                color4: new THREE.Vector3(0.0, 0.0, 0.0),
                color5: new THREE.Vector3(0.945, 0.353, 0.133),
                color6: new THREE.Vector3(0.0, 0.0, 0.0),
            },
        };
        this.currentScheme = props.scheme || 1;
        this.mouse = { x: 0, y: 0 };
        this.init();
    }

    setColorScheme(scheme: number) {
        if (!this.colorSchemes[scheme]) return;
        this.currentScheme = scheme;
        const colors = this.colorSchemes[scheme];
        const uniforms = this.gradientBackground.uniforms;

        if (scheme === 3) {
            uniforms.uColor1.value.copy(colors.color1);
            uniforms.uColor2.value.copy(colors.color2);
            uniforms.uColor3.value.copy(colors.color3);
            uniforms.uColor4.value.copy(colors.color1);
            uniforms.uColor5.value.copy(colors.color2);
            uniforms.uColor6.value.copy(colors.color3);
        } else if (scheme === 4) {
            uniforms.uColor1.value.copy(colors.color1);
            uniforms.uColor2.value.copy(colors.color2);
            uniforms.uColor3.value.copy(colors.color3);
            uniforms.uColor4.value.copy(colors.color1);
            uniforms.uColor5.value.copy(colors.color2);
            uniforms.uColor6.value.copy(colors.color3);
        } else if (scheme === 5) {
            uniforms.uColor1.value.copy(colors.color1);
            uniforms.uColor2.value.copy(colors.color2);
            uniforms.uColor3.value.copy(colors.color3);
            uniforms.uColor4.value.copy(colors.color4);
            uniforms.uColor5.value.copy(colors.color5);
            uniforms.uColor6.value.copy(colors.color6);
        } else {
            uniforms.uColor1.value.copy(colors.color1);
            uniforms.uColor2.value.copy(colors.color2);
            uniforms.uColor3.value.copy(colors.color1);
            uniforms.uColor4.value.copy(colors.color2);
            uniforms.uColor5.value.copy(colors.color1);
            uniforms.uColor6.value.copy(colors.color2);
        }

        if (scheme === 1 || scheme === 6 || scheme === 7 || scheme === 8 || scheme === 5) {
            const bgHex = this.props.darkNavyColor ? parseInt(this.props.darkNavyColor.replace("#", ""), 16) : 0x0a0e27;
            this.scene.background = new THREE.Color(bgHex);
            const darkRgb = hexToRgb(this.props.darkNavyColor || "#0a0e27");
            if (darkRgb) uniforms.uDarkNavy.value.set(darkRgb.r, darkRgb.g, darkRgb.b);
            uniforms.uGradientSize.value = 0.45;
            uniforms.uGradientCount.value = 12.0;
            uniforms.uSpeed.value = 1.5;
            uniforms.uColor1Weight.value = 0.5;
            uniforms.uColor2Weight.value = 1.8;
        } else if (scheme === 4) {
            this.scene.background = new THREE.Color(0xffffff);
            uniforms.uDarkNavy.value.set(0, 0, 0);
        } else {
            const bgHex = this.props.darkNavyColor ? parseInt(this.props.darkNavyColor.replace("#", ""), 16) : 0x0a0e27;
            this.scene.background = new THREE.Color(bgHex);
            const darkRgb = hexToRgb(this.props.darkNavyColor || "#0a0e27");
            if (darkRgb) uniforms.uDarkNavy.value.set(darkRgb.r, darkRgb.g, darkRgb.b);
            uniforms.uGradientSize.value = 1.0;
            uniforms.uGradientCount.value = 6.0;
            uniforms.uSpeed.value = 1.2;
            uniforms.uColor1Weight.value = 1.0;
            uniforms.uColor2Weight.value = 1.0;
        }
    }

    updateColors(colorArray: string[]) {
        const uniforms = this.gradientBackground.uniforms;
        colorArray.forEach((hex, i) => {
            const rgb = hexToRgb(hex);
            if (rgb) {
                const u = uniforms[`uColor${i + 1}`];
                if (u) u.value.set(rgb.r, rgb.g, rgb.b);
            }
        });
    }

    init() {
        this.gradientBackground.init();
        this.setColorScheme(this.currentScheme);
        if (this.props.colors) {
            this.updateColors(this.props.colors);
        }
        this.tick();
    }

    getViewSize() {
        const fovInRadians = (this.camera.fov * Math.PI) / 180;
        const height = Math.abs(this.camera.position.z * Math.tan(fovInRadians / 2) * 2);
        return { width: height * this.camera.aspect, height };
    }

    tick() {
        const delta = Math.min(this.clock.getDelta(), 0.1);
        this.touchTexture.update();
        this.gradientBackground.update(delta);
        this.renderer.render(this.scene, this.camera);
        this.animationId = requestAnimationFrame(() => this.tick());
    }

    onResize(width: number, height: number) {
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(width, height);
        this.gradientBackground.onResize(width, height);
    }

    handleTouch(x: number, y: number, width: number, height: number) {
        this.touchTexture.addTouch({ x: x / width, y: 1 - y / height });
    }

    dispose() {
        cancelAnimationFrame(this.animationId);
        this.renderer.dispose();
    }
}

export default function LiquidSurface({
    className,
    style,
    colors,
    speed,
    intensity,
    grainIntensity,
    zoom,
    gradientSize,
    gradientCount,
    color1Weight,
    color2Weight,
    darkNavyColor,
    scheme,
    heading,
    showCursor = true,
}: LiquidSurfaceProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const cursorRef = useRef<HTMLDivElement>(null);
    const appRef = useRef<WebGLApp | null>(null);

    useEffect(() => {
        if (!containerRef.current) return;

        const app = new WebGLApp(containerRef.current, {
            speed,
            intensity,
            grainIntensity,
            zoom,
            gradientSize,
            gradientCount,
            color1Weight,
            color2Weight,
            darkNavyColor,
            scheme,
            colors,
        });
        appRef.current = app;

        const onResize = () => {
            if (containerRef.current) {
                app.onResize(containerRef.current.clientWidth, containerRef.current.clientHeight);
            }
        };
        const onMouseMove = (e: MouseEvent) => {
            if (containerRef.current) {
                const rect = containerRef.current.getBoundingClientRect();
                app.handleTouch(e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height);
            }

            if (showCursor && cursorRef.current) {
                gsap.to(cursorRef.current, {
                    x: e.clientX,
                    y: e.clientY,
                    duration: 0.1,
                    ease: "power2.out",
                });
            }
        };
        const onTouchMove = (e: TouchEvent) => {
            if (containerRef.current) {
                const rect = containerRef.current.getBoundingClientRect();
                app.handleTouch(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, rect.width, rect.height);
            }
        };

        const containerNode = containerRef.current.parentElement;
        if (containerNode) {
            containerNode.addEventListener("mousemove", onMouseMove);
            containerNode.addEventListener("touchmove", onTouchMove, { passive: false });
        }
        window.addEventListener("resize", onResize);

        // Initial resize with a small delay to ensure container has dimensions
        const timeoutId = setTimeout(onResize, 50);

        return () => {
            clearTimeout(timeoutId);
            window.removeEventListener("resize", onResize);
            if (containerNode) {
                containerNode.removeEventListener("mousemove", onMouseMove);
                containerNode.removeEventListener("touchmove", onTouchMove);
            }
            // Use local app instance for cleanup to ensure correct disposal in React Strict Mode
            app.dispose();
            if (containerRef.current) {
                containerRef.current.innerHTML = "";
            }
        };
    }, []); // Only initialize once

    // Handle prop updates
    useEffect(() => {
        if (appRef.current) {
            if (scheme !== undefined) appRef.current.setColorScheme(scheme);
            if (colors) appRef.current.updateColors(colors);

            const uniforms = appRef.current.gradientBackground.uniforms;
            if (speed !== undefined) uniforms.uSpeed.value = speed;
            if (intensity !== undefined) uniforms.uIntensity.value = intensity;
            if (grainIntensity !== undefined) uniforms.uGrainIntensity.value = grainIntensity;
            if (zoom !== undefined) uniforms.uZoom.value = zoom;
            if (gradientSize !== undefined) uniforms.uGradientSize.value = gradientSize;
            if (gradientCount !== undefined) uniforms.uGradientCount.value = gradientCount;
            if (color1Weight !== undefined) uniforms.uColor1Weight.value = color1Weight;
            if (color2Weight !== undefined) uniforms.uColor2Weight.value = color2Weight;

            if (darkNavyColor) {
                const darkRgb = hexToRgb(darkNavyColor);
                if (darkRgb) uniforms.uDarkNavy.value.set(darkRgb.r, darkRgb.g, darkRgb.b);
            }
        }
    }, [scheme, colors, speed, intensity, grainIntensity, zoom, gradientSize, gradientCount, color1Weight, color2Weight, darkNavyColor]);

    // Hover for custom cursor
    const handleMouseEnter = () => {
        if (showCursor) gsap.to(cursorRef.current, { width: 50, height: 50, borderWidth: 3, duration: 0.2 });
    };
    const handleMouseLeave = () => {
        if (showCursor) gsap.to(cursorRef.current, { width: 40, height: 40, borderWidth: 2, duration: 0.2 });
    };

    return (
        <div
            className={cn("relative w-full h-full overflow-hidden bg-black font-sans", className)}
            style={{ ...style, cursor: showCursor ? "none" : "auto" }}
        >
            {showCursor && (
                <div
                    ref={cursorRef}
                    className="fixed top-0 left-0 w-10 h-10 border-2 border-white rounded-full pointer-events-none z-[1000] mix-blend-difference -translate-x-1/2 -translate-y-1/2 flex items-center justify-center"
                >
                    <div className="w-2 h-2 bg-white rounded-full" />
                </div>
            )}

            {/* Three.js Canvas Container */}
            <div ref={containerRef} className="absolute inset-0 z-0" />

            {heading && (
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center z-10 w-full h-full text-white text-center">
                    <h1
                        className="font-bold tracking-tight px-4"
                        style={{ fontFamily: '"Syne", sans-serif', fontSize: "clamp(3.5rem, 9vw, 9rem)" }}
                        dangerouslySetInnerHTML={{ __html: heading }}
                    />
                </div>
            )}

        </div>
    );
}

```
--------------------------------------------------

### COMPONENT: shader-background
Category: Background
Description: An interactive WebGL shader background featuring a turbulent, glowing wave pattern that responds to mouse movement. It offers an optional backdrop blur for versatile integration into modern UIs.
URL: https://lightswind.com/components/shader-background
Import: import ShaderBackground from '@/components/lightswind/shader-background';
Registry URL: https://lightswind.com/r/shader-background.json
Install Command: npx lightswind@latest add shader-background

Usage:
```tsx
import ShaderBackground from '@/components/lightswind/shader-background';

// Basic usage with default blur and purple glow
<ShaderBackground />

// With a larger backdrop blur
<ShaderBackground backdropBlurAmount="xl" />

// With no backdrop blur and a custom green glow
<ShaderBackground backdropBlurAmount="none" color="#00FF00" />

// With a custom class name for additional styling
<ShaderBackground className="border border-primarylw rounded-lg" />

// Combining all props
<ShaderBackground backdropBlurAmount="md" color="#FF00FF" className="shadow-lg" />
```

Source Code:
```tsx
"use client";
import { useEffect, useRef, useState } from "react";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;
uniform vec2 iResolution; // Canvas resolution (width, height)
uniform float iTime;       // Time in seconds since the animation started
uniform vec2 iMouse;      // Mouse coordinates (x, y)
uniform vec3 u_color;     // Custom color uniform

void mainImage(out vec4 fragColor, in vec2 fragCoord){
    vec2 uv = (1.0 * fragCoord - iResolution.xy) / min(iResolution.x, iResolution.y);
    float t = iTime * 0.5;

    vec2 mouse_uv = (4.0 * iMouse - iResolution.xy) / min(iResolution.x, iResolution.y);

    float mouseInfluence = 0.0;
    if (length(iMouse) > 0.0) {
        float dist_to_mouse = distance(uv, mouse_uv);
        mouseInfluence = smoothstep(0.8, 0.0, dist_to_mouse);
    }

    for(float i = 8.0; i < 20.0; i++) {
        uv.x += 0.6 / i * cos(i * 2.5 * uv.y + t);
        uv.y += 0.6 / i * cos(i * 1.5 * uv.x + t);
    }

    float wave = abs(sin(t - uv.y - uv.x + mouseInfluence * 8.0));
    float glow = smoothstep(0.9, 0.0, wave);

    vec3 color = glow * u_color; // Use the custom color here

    fragColor = vec4(color, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

/**
 * Valid blur sizes supported by Tailwind CSS.
 */
export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

/**
 * @typedef {Object} ShaderBackgroundProps
 * @property {BlurSize} [backdropBlurAmount] - The size of the backdrop blur to apply.
 * Valid values are "none", "sm", "md", "lg", "xl", "2xl", "3xl".
 * Defaults to "sm" if not provided.
 * @property {string} [color] - The color of the shader's glow in hexadecimal format (e.g., "#RRGGBB").
 * Defaults to "#471CE2" (purple) if not provided.
 * @property {string} [className] - Additional CSS classes to apply to the container div.
 */
interface ShaderBackgroundProps {
  backdropBlurAmount?: string; // Accept any string from UI (validated internally)
  color?: string;
  className?: string;
}

/**
 * A mapping from simplified blur size names to full Tailwind CSS backdrop-blur classes.
 * This ensures Tailwind's JIT mode can correctly detect and generate the CSS.
 */
const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

/**
 * A React component that renders an interactive WebGL shader background.
 * The background features a turbulent, glowing wave pattern that responds to mouse movement.
 * An optional backdrop blur can be applied over the shader.
 *
 * @param {ShaderBackgroundProps} props - The component props.
 * @returns {JSX.Element} The rendered ShaderBackground component.
 */
function ShaderBackground({
  backdropBlurAmount = "sm",
  color = "#07eae6ff", // Default purple color
  className = "",
}: ShaderBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovering, setIsHovering] = useState(false);

  // Helper to convert hex color to RGB (0-1 range)
  const hexToRgb = (hex: string): [number, number, number] => {
    const r = parseInt(hex.substring(1, 3), 16) / 255;
    const g = parseInt(hex.substring(3, 5), 16) / 255;
    const b = parseInt(hex.substring(5, 7), 16) / 255;
    return [r, g, b];
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (
      type: number,
      source: string
    ): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(
      gl.FRAGMENT_SHADER,
      fragmentShaderSource
    );
    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const uColorLocation = gl.getUniformLocation(program, "u_color"); // Get uniform location for custom color

    let startTime = Date.now();

    // Set the initial color
    const [r, g, b] = hexToRgb(color);
    gl.uniform3f(uColorLocation, r, g, b);

    const render = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(
        iMouseLocation,
        isHovering ? mousePosition.x : 0,
        isHovering ? height - mousePosition.y : 0
      );

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      requestAnimationFrame(render);
    };

    const handleMouseMove = (event: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      setMousePosition({
        x: event.clientX - rect.left,
        y: event.clientY - rect.top,
      });
    };

    const handleMouseEnter = () => {
      setIsHovering(true);
    };

    const handleMouseLeave = () => {
      setIsHovering(false);
      setMousePosition({ x: 0, y: 0 });
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    render();

    return () => {
      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [isHovering, mousePosition, color]); // Add color to the dependency array

  // Get the correct Tailwind CSS class from the map
  const finalBlurClass =
    blurClassMap[backdropBlurAmount as BlurSize] || blurClassMap["sm"];

  return (
    <div className={`w-full max-w-screen h-full overflow-hidden ${className}`}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
        style={{ display: "block" }}
      />
      {/* Apply the mapped Tailwind CSS class for backdrop blur */}
      <div className={`absolute inset-0 ${finalBlurClass}`}></div>
    </div>
  );
}

export default ShaderBackground;
```
--------------------------------------------------

### COMPONENT: satin-flow
Category: Background
Description: A premium WebGL background shader rendering a luxurious flowing satin fabric fold pattern with mouse interactive currents and custom colors.
URL: https://lightswind.com/components/satin-flow
Import: import SatinFlow from '@/components/lightswind/satin-flow';
Registry URL: https://lightswind.com/r/satin-flow.json
Install Command: npx lightswind@latest add satin-flow

Usage:
```tsx
import SatinFlow from '@/components/lightswind/satin-flow';

// Basic usage with default purple velvet theme
<SatinFlow />

// Custom colors and faster wave flow
<SatinFlow 
  colors={["#02111d", "#083754", "#0ea5e9"]} 
  speed={1.5} 
  scale={0.8}
/>

// Disable hover interaction and set backdrop blur
<SatinFlow 
  interactive={false} 
  backdropBlurAmount="md" 
/>
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform float iMouseStrength;

// Custom Uniforms
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform vec3 uColor3;
uniform float uSpeed;
uniform float uScale;
uniform float uNoiseIntensity;
uniform float uInteractive;

// Hash function for pseudo-random gradient vectors
vec3 hash(vec3 p) {
    p = vec3(dot(p, vec3(127.1, 311.7, 74.7)),
             dot(p, vec3(269.5, 183.3, 246.1)),
             dot(p, vec3(113.5, 271.9, 124.6)));
    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}

// 3D Gradient Noise
float noise(vec3 p) {
    vec3 i = floor(p);
    vec3 f = fract(p);
    
    vec3 u = f * f * (3.0 - 2.0 * f);

    return mix(mix(mix(dot(hash(i + vec3(0.0,0.0,0.0)), f - vec3(0.0,0.0,0.0)), 
                       dot(hash(i + vec3(1.0,0.0,0.0)), f - vec3(1.0,0.0,0.0)), u.x),
                   mix(dot(hash(i + vec3(0.0,1.0,0.0)), f - vec3(0.0,1.0,0.0)), 
                       dot(hash(i + vec3(1.0,1.0,0.0)), f - vec3(1.0,1.0,0.0)), u.x), u.y),
               mix(mix(dot(hash(i + vec3(0.0,0.0,1.0)), f - vec3(0.0,0.0,1.0)), 
                       dot(hash(i + vec3(1.0,0.0,1.0)), f - vec3(1.0,0.0,1.0)), u.x),
                   mix(dot(hash(i + vec3(0.0,1.0,1.0)), f - vec3(0.0,1.0,1.0)), 
                       dot(hash(i + vec3(1.0,1.0,1.0)), f - vec3(1.0,1.0,1.0)), u.x), u.y), u.z);
}

// Fractional Brownian Motion (fbm) for premium satin/silk fabric fold details
float fbm(vec3 p) {
    float v = 0.0;
    float a = 0.5;
    vec3 shift = vec3(100.0);
    for (int i = 0; i < 4; ++i) {
        v += a * noise(p);
        p = p * 2.0 + shift;
        a *= 0.5;
    }
    return v;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 p = (2.0 * fragCoord.xy - iResolution.xy) / min(iResolution.x, iResolution.y);
    
    // Interactive mouse distortion
    vec2 mouseUV = (2.0 * iMouse - iResolution.xy) / min(iResolution.x, iResolution.y);
    float mouseDist = length(p - mouseUV);
    float interact = exp(-mouseDist * mouseDist * 3.5) * iMouseStrength * uInteractive;
    
    // Distort coordinates smoothly around cursor
    p += (p - mouseUV) / (mouseDist + 0.001) * interact * 0.18;

    // Time scaling based on speed uniform
    float t = iTime * uSpeed * 0.05;
    
    // Scale waves
    float scale = uScale * 2.2;
    vec3 p3 = vec3(p * scale, t);
    
    // Domain Warping to get luxurious silk-like ribbons/folds
    float n1 = fbm(p3);
    float n2 = fbm(p3 + vec3(n1 * 1.5, n1 * 1.2, 0.5));
    float n3 = fbm(p3 + vec3(n2 * 2.0, n2 * 1.0, 0.8));
    
    // Create wave pattern from FBM noise layers
    float pattern = 0.5 + 0.5 * sin(p.y * scale + n3 * 6.28);
    
    // Fabric shadow / highlights
    float shadow = clamp(n3 * 1.1, -0.5, 0.5);
    float highlight = pow(max(0.0, 1.0 - abs(n2)), 3.5) * 0.42;
    
    // Blend colors for a professional velvet/silk sheen
    vec3 baseCol = mix(uColor1, uColor2, clamp(pattern + shadow, 0.0, 1.0));
    baseCol = mix(baseCol, uColor3, clamp(n1 * 1.4 + 0.5, 0.0, 1.0));
    
    // Add satin gloss & mouse feedback highlight
    vec3 col = baseCol + vec3(highlight) + vec3(interact * 0.08);
    
    // Fine-grained high-end noise overlay
    float rnd = fract(sin(dot(fragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
    col -= (rnd - 0.5) * 0.04 * uNoiseIntensity;
    
    // Clamp to valid rgb range
    col = clamp(col, 0.0, 1.0);

    fragColor = vec4(col, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface SatinFlowProps {
  colors?: string[];
  speed?: number;
  scale?: number;
  noiseIntensity?: number;
  interactive?: boolean;
  backdropBlurAmount?: BlurSize;
  className?: string;
}

const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const hexToRgb = (hex: string): [number, number, number] => {
  try {
    const cleaned = hex.replace("#", "");
    const num = parseInt(cleaned, 16);
    return [
      ((num >> 16) & 255) / 255,
      ((num >> 8) & 255) / 255,
      (num & 255) / 255,
    ];
  } catch {
    return [0, 0, 0];
  }
};

const defaultColors = ["#150921", "#371569", "#7822d6"]; // Deep luxurious violet satin colors

const SatinFlow: React.FC<SatinFlowProps> = ({
  colors = defaultColors,
  speed = 1.0,
  scale = 1.0,
  noiseIntensity = 0.5,
  interactive = true,
  backdropBlurAmount = "none",
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const visibilityRef = useRef(true);

  // Mouse coords and active strength refs
  const mouseRef = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });
  const mouseStrengthRef = useRef({ value: 0, targetValue: 0 });

  useEffect(() => {
    visibilityRef.current = isInView;
  }, [isInView]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Parse custom colors
    const colorRGBs: [number, number, number][] = [];
    const parsed = colors.map(hexToRgb);
    colorRGBs.push(parsed[0] || [0.0, 0.0, 0.0]);
    colorRGBs.push(parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);
    colorRGBs.push(parsed[2] || parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const iMouseStrengthLocation = gl.getUniformLocation(program, "iMouseStrength");

    const uColor1Location = gl.getUniformLocation(program, "uColor1");
    const uColor2Location = gl.getUniformLocation(program, "uColor2");
    const uColor3Location = gl.getUniformLocation(program, "uColor3");
    
    const uSpeedLocation = gl.getUniformLocation(program, "uSpeed");
    const uScaleLocation = gl.getUniformLocation(program, "uScale");
    const uNoiseIntensityLocation = gl.getUniformLocation(program, "uNoiseIntensity");
    const uInteractiveLocation = gl.getUniformLocation(program, "uInteractive");

    // Native mouse and touch listeners
    const handleMouseMove = (e: MouseEvent) => {
      if (!interactive) return;
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = rect.height - (e.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleMouseEnter = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
    };

    const handleMouseLeave = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (!interactive || e.touches.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const touch = e.touches[0];
      const x = touch.clientX - rect.left;
      const y = rect.height - (touch.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleTouchStart = (e: TouchEvent) => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
      handleTouchMove(e);
    };

    const handleTouchEnd = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });

    let startTime = Date.now();
    let animationFrameId: number;

    const render = () => {
      if (!visibilityRef.current) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      // Handle resize and match resolution
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
      }

      gl.useProgram(program);
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      // Lerp mouse coordinates and strength for smooth momentum
      const mouse = mouseRef.current;
      const mouseStrength = mouseStrengthRef.current;

      mouse.x += (mouse.targetX - mouse.x) * 0.08;
      mouse.y += (mouse.targetY - mouse.y) * 0.08;
      mouseStrength.value += (mouseStrength.targetValue - mouseStrength.value) * 0.08;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(iMouseLocation, mouse.x, mouse.y);
      gl.uniform1f(iMouseStrengthLocation, mouseStrength.value);

      // Set custom colors & configuration uniforms
      gl.uniform3fv(uColor1Location, colorRGBs[0]);
      gl.uniform3fv(uColor2Location, colorRGBs[1]);
      gl.uniform3fv(uColor3Location, colorRGBs[2]);

      gl.uniform1f(uSpeedLocation, speed);
      gl.uniform1f(uScaleLocation, scale);
      gl.uniform1f(uNoiseIntensityLocation, noiseIntensity);
      gl.uniform1f(uInteractiveLocation, interactive ? 1.0 : 0.0);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animationFrameId = requestAnimationFrame(render);
    };

    render();

    return () => {
      cancelAnimationFrame(animationFrameId);
      gl.deleteProgram(program);
      gl.deleteShader(vertexShader);
      gl.deleteShader(fragmentShader);
      gl.deleteBuffer(positionBuffer);

      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
      canvas.removeEventListener("touchstart", handleTouchStart);
      canvas.removeEventListener("touchmove", handleTouchMove);
      canvas.removeEventListener("touchend", handleTouchEnd);
    };
  }, [colors, speed, scale, noiseIntensity, interactive]);

  const finalBlurClass = blurClassMap[backdropBlurAmount] || blurClassMap["none"];

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{ display: "block", pointerEvents: "auto" }}
      />
      <div className={`absolute inset-0 pointer-events-none ${finalBlurClass}`} />
    </div>
  );
};

export default SatinFlow;

```
--------------------------------------------------

### COMPONENT: nebula-flow
Category: Background
Description: A breathtaking WebGL space nebula background shader with interactive gravitational swirls and stars density customization.
URL: https://lightswind.com/components/nebula-flow
Import: import NebulaFlow from '@/components/lightswind/nebula-flow';
Registry URL: https://lightswind.com/r/nebula-flow.json
Install Command: npx lightswind@latest add nebula-flow

Usage:
```tsx
import NebulaFlow from '@/components/lightswind/nebula-flow';

// Basic usage with default pink-purple space theme
<NebulaFlow />

// Custom space colors and faster speed
<NebulaFlow 
  colors={["#030f14", "#093d3b", "#f59e0b"]} 
  speed={1.2} 
  scale={0.85}
/>

// Adjust density of cosmic dust stars
<NebulaFlow 
  density={1.5} 
  interactive={true} 
/>
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform float iMouseStrength;

// Colors
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform vec3 uColor3;

// Configurations
uniform float uSpeed;
uniform float uScale;
uniform float uDensity;
uniform float uInteractive;

// Hash function
float hash(vec2 p) {
    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

// 2D Noise
float noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f * f * (3.0 - 2.0 * f);
    return mix(mix(hash(i + vec2(0.0,0.0)), hash(i + vec2(1.0,0.0)), u.x),
               mix(hash(i + vec2(0.0,1.0)), hash(i + vec2(1.0,1.0)), u.x), u.y);
}

// Fractal Brownian Motion (FBM) with rotation to create cosmic swirls
float fbm(vec2 p) {
    float value = 0.0;
    float amplitude = 0.55;
    float frequency = 1.0;
    mat2 rot = mat2(0.8, 0.6, -0.6, 0.8);
    for (int i = 0; i < 5; i++) {
        value += amplitude * noise(p * frequency);
        p = rot * p;
        frequency *= 2.0;
        amplitude *= 0.5;
    }
    return value;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord.xy / iResolution.xy;
    vec2 p = (2.0 * fragCoord.xy - iResolution.xy) / min(iResolution.x, iResolution.y);
    
    // Smooth interactive mouse gravity / swirl force
    vec2 mouseUV = (2.0 * iMouse - iResolution.xy) / min(iResolution.x, iResolution.y);
    float mouseDist = length(p - mouseUV);
    
    float influence = exp(-mouseDist * mouseDist * 2.5) * iMouseStrength * uInteractive;
    
    // Swirl rotation matrix
    float angle = influence * 2.2 * sin(iTime * 1.2);
    mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
    p = swirl * p;
    
    // Displace coordinates towards mouse (gravitational pull)
    p -= (p - mouseUV) * influence * 0.12;

    // Nebula time flow
    float t = iTime * uSpeed * 0.15;
    
    // Double domain warping FBM to simulate detailed cosmic gas clouds
    vec2 q = vec2(fbm(p * uScale + vec2(t, t * 0.5)),
                  fbm(p * uScale + vec2(t * 0.2, t)));
                  
    vec2 r = vec2(fbm(p * uScale + 4.0 * q + vec2(1.7, 9.2) + t * 0.15),
                  fbm(p * uScale + 4.0 * q + vec2(8.3, 2.8) + t * 0.12));
                  
    float f = fbm(p * uScale + 4.0 * r);
    
    // Interpolate cosmic color gas layers
    vec3 col = mix(uColor1, uColor2, clamp(f * f * 4.0, 0.0, 1.0));
    col = mix(col, uColor3, clamp(length(q), 0.0, 1.0));
    
    // High-energy core highlights (cosmic dust stars)
    float stars = pow(f, 3.5) * uDensity * 0.75;
    col += vec3(stars * 1.2, stars * 1.0, stars * 1.3);
    
    // Vignette
    float vignette = 1.0 - dot(uv - 0.5, uv - 0.5) * 1.3;
    col *= max(0.0, vignette);

    // Final color grading
    col = clamp(col, 0.0, 1.0);
    fragColor = vec4(col, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface NebulaFlowProps {
  colors?: string[];
  speed?: number;
  scale?: number;
  density?: number; // Cosmic dust star density factor
  interactive?: boolean;
  backdropBlurAmount?: BlurSize;
  className?: string;
}

const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const hexToRgb = (hex: string): [number, number, number] => {
  try {
    const cleaned = hex.replace("#", "");
    const num = parseInt(cleaned, 16);
    return [
      ((num >> 16) & 255) / 255,
      ((num >> 8) & 255) / 255,
      (num & 255) / 255,
    ];
  } catch {
    return [0, 0, 0];
  }
};

const defaultColors = ["#0c061a", "#290d54", "#ec4899"]; // Deep space pink-purple nebula colors

const NebulaFlow: React.FC<NebulaFlowProps> = ({
  colors = defaultColors,
  speed = 1.0,
  scale = 1.0,
  density = 1.0,
  interactive = true,
  backdropBlurAmount = "none",
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const visibilityRef = useRef(true);

  // Mouse coords and active strength refs
  const mouseRef = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });
  const mouseStrengthRef = useRef({ value: 0, targetValue: 0 });

  useEffect(() => {
    visibilityRef.current = isInView;
  }, [isInView]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Parse custom colors
    const colorRGBs: [number, number, number][] = [];
    const parsed = colors.map(hexToRgb);
    colorRGBs.push(parsed[0] || [0.0, 0.0, 0.0]);
    colorRGBs.push(parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);
    colorRGBs.push(parsed[2] || parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const iMouseStrengthLocation = gl.getUniformLocation(program, "iMouseStrength");

    const uColor1Location = gl.getUniformLocation(program, "uColor1");
    const uColor2Location = gl.getUniformLocation(program, "uColor2");
    const uColor3Location = gl.getUniformLocation(program, "uColor3");
    
    const uSpeedLocation = gl.getUniformLocation(program, "uSpeed");
    const uScaleLocation = gl.getUniformLocation(program, "uScale");
    const uDensityLocation = gl.getUniformLocation(program, "uDensity");
    const uInteractiveLocation = gl.getUniformLocation(program, "uInteractive");

    // Native mouse and touch listeners
    const handleMouseMove = (e: MouseEvent) => {
      if (!interactive) return;
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = rect.height - (e.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleMouseEnter = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
    };

    const handleMouseLeave = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (!interactive || e.touches.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const touch = e.touches[0];
      const x = touch.clientX - rect.left;
      const y = rect.height - (touch.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleTouchStart = (e: TouchEvent) => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
      handleTouchMove(e);
    };

    const handleTouchEnd = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });

    let startTime = Date.now();
    let animationFrameId: number;

    const render = () => {
      if (!visibilityRef.current) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      // Handle resize and match resolution
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
      }

      gl.useProgram(program);
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      // Lerp mouse coordinates and strength for smooth momentum
      const mouse = mouseRef.current;
      const mouseStrength = mouseStrengthRef.current;

      mouse.x += (mouse.targetX - mouse.x) * 0.08;
      mouse.y += (mouse.targetY - mouse.y) * 0.08;
      mouseStrength.value += (mouseStrength.targetValue - mouseStrength.value) * 0.08;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(iMouseLocation, mouse.x, mouse.y);
      gl.uniform1f(iMouseStrengthLocation, mouseStrength.value);

      // Set uniforms
      gl.uniform3fv(uColor1Location, colorRGBs[0]);
      gl.uniform3fv(uColor2Location, colorRGBs[1]);
      gl.uniform3fv(uColor3Location, colorRGBs[2]);

      gl.uniform1f(uSpeedLocation, speed);
      gl.uniform1f(uScaleLocation, scale);
      gl.uniform1f(uDensityLocation, density);
      gl.uniform1f(uInteractiveLocation, interactive ? 1.0 : 0.0);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animationFrameId = requestAnimationFrame(render);
    };

    render();

    return () => {
      cancelAnimationFrame(animationFrameId);
      gl.deleteProgram(program);
      gl.deleteShader(vertexShader);
      gl.deleteShader(fragmentShader);
      gl.deleteBuffer(positionBuffer);

      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
      canvas.removeEventListener("touchstart", handleTouchStart);
      canvas.removeEventListener("touchmove", handleTouchMove);
      canvas.removeEventListener("touchend", handleTouchEnd);
    };
  }, [colors, speed, scale, density, interactive]);

  const finalBlurClass = blurClassMap[backdropBlurAmount] || blurClassMap["none"];

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{ display: "block", pointerEvents: "auto" }}
      />
      <div className={`absolute inset-0 pointer-events-none ${finalBlurClass}`} />
    </div>
  );
};

export default NebulaFlow;

```
--------------------------------------------------

### COMPONENT: sparkle-particles
Category: Background
Description: Highly customizable particle animation built with `@tsparticles/react`. Supports dynamic theming, motion direction, interactivity, collisions, and advanced customization. Ideal for background visual effects or interactive UI embellishments.
URL: https://lightswind.com/components/sparkle-particles
Import: import { SparkleParticles } from '@/components/lightswind/sparkle-particles';
Registry URL: https://lightswind.com/r/sparkle-particles.json
Install Command: npx lightswind@latest add sparkle-particles

Usage:
```tsx
import { SparkleParticles } from '@/components/lightswind/sparkle-particles';

// Basic usage
<SparkleParticles />

// Custom usage
<SparkleParticles
  className="absolute inset-0 z-0"
  maxParticleSize={2.5}
  minParticleSize={1}
  baseDensity={600}
  maxSpeed={2}
  minMoveSpeed={0.2}
  maxOpacity={0.8}
  customDirection="top"
  opacityAnimationSpeed={5}
  minParticleOpacity={0.2}
  particleColor="#00ffcc"
  enableParallax={true}
  enableHoverGrab={true}
  backgroundColor="transparent"
  zIndexLevel={-1}
  clickEffect={true}
  hoverMode="repulse"
  particleCount={6}
  particleShape="star"
  enableCollisions={true}
/>
```

Source Code:
```tsx
"use client";

import { useEffect, useId, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";
import type { IOptions, RecursivePartial, MoveDirection } from "@tsparticles/engine"; // Import MoveDirection

interface SparkleParticlesProps {
  className?: string;
  maxParticleSize?: number;
  minParticleSize?: number | null;
  baseDensity?: number;
  maxSpeed?: number;
  minMoveSpeed?: number | null;
  maxOpacity?: number;
  customDirection?: MoveDirection | "none" | "" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "right" | "top" | "topLeft" | "topRight"; // Allow string literals for common directions
  opacityAnimationSpeed?: number;
  minParticleOpacity?: number | null;
  particleColor?: string;
  enableParallax?: boolean;
  enableHoverGrab?: boolean;
  backgroundColor?: string;
  userOptions?: Record<string, any>;
  zIndexLevel?: number;
  clickEffect?: boolean;
  hoverMode?: "grab" | "bubble" | "repulse";
  particleCount?: number;
  particleShape?: "circle" | "square" | "triangle" | "star" | "edge";
  enableCollisions?: boolean;
}

export function SparkleParticles({
  className,
  maxParticleSize = 1.2,
  minParticleSize = null,
  baseDensity = 800,
  maxSpeed = 1.5,
  minMoveSpeed = null,
  maxOpacity = 1,
  customDirection = "",
  opacityAnimationSpeed = 3,
  minParticleOpacity = null,
  particleColor,
  enableParallax = false,
  enableHoverGrab = false,
  backgroundColor = "transparent",
  userOptions = {},
  zIndexLevel = 1,
  clickEffect = true,
  hoverMode = "grab",
  particleCount = 4,
  particleShape = "circle",
  enableCollisions = false,
}: SparkleParticlesProps) {
  const [isEngineReady, setIsEngineReady] = useState(false);
  const [activeColor, setActiveColor] = useState("#000000");
  const instanceId = useId();

  useEffect(() => {
    const resolveThemeColor = () => {
      if (particleColor) return particleColor;
      return document.documentElement.classList.contains("dark")
        ? "#ffffff"
        : "#000000";
    };

    setActiveColor(resolveThemeColor());

    initParticlesEngine(async (engine) => {
      await loadSlim(engine);
    }).then(() => {
      setIsEngineReady(true);
    });

    const observer = new MutationObserver(() => {
      setActiveColor(resolveThemeColor());
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, [particleColor]);

  const mergedOptions: RecursivePartial<IOptions> = {
    background: {
      color: {
        value: backgroundColor,
      },
    },
    fullScreen: {
      enable: false,
      zIndex: zIndexLevel,
    },
    fpsLimit: 300,
    interactivity: {
      events: {
        onClick: {
          enable: clickEffect,
          mode: "push",
        },
        onHover: {
          enable: enableHoverGrab,
          mode: hoverMode,
          parallax: {
            enable: enableParallax,
            force: 60,
            smooth: 10,
          },
        },
        resize: {
          enable: true,
        },
      },
      modes: {
        push: { quantity: particleCount },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: activeColor,
      },
      shape: {
        type: particleShape,
      },
      move: {
        enable: true,
        direction: customDirection === "" ? "none" : customDirection, // Type assertion for customDirection
        speed: {
          min: minMoveSpeed || maxSpeed / 130,
          max: maxSpeed,
        },
        straight: true,
      },
      collisions: {
        enable: enableCollisions,
        mode: "bounce" as const,
        bounce: {
          horizontal: { value: 1 },
          vertical: { value: 1 },
        },
      },
      number: {
        value: baseDensity,
      },
      opacity: {
        value: {
          min: minParticleOpacity || maxOpacity / 10,
          max: maxOpacity,
        },
        animation: {
          enable: true,
          sync: false,
          speed: opacityAnimationSpeed,
        },
      },
      size: {
        value: {
          min: minParticleSize || maxParticleSize / 1.5,
          max: maxParticleSize,
        },
      },
    },
    detectRetina: true,
    ...userOptions,
  };

  return (
    isEngineReady && (
      <Particles
        id={instanceId}
        options={mergedOptions}
        className={className}
      />
    )
  );
}
```
--------------------------------------------------

### COMPONENT: stripes-background
Category: Background
Description: A reusable background component that applies diagonal striped patterns for visual enhancement. Supports dynamic positioning, sizing, and light/dark theme adaptation. Ideal for decorative backgrounds or section separators.
URL: https://lightswind.com/components/stripes-background
Import: import StripesBackground from '@/components/lightswind/stripes-background';
Registry URL: https://lightswind.com/r/stripes-background.json
Install Command: npx lightswind@latest add stripes-background

Usage:
```tsx
import StripesBackground from '@/components/lightswind/stripes-background';

<StripesBackground
  position="right"
  width="w-1/2"
  height="h-full"
  opacity="opacity-60"
/>
```

Source Code:
```tsx
// components/ui/StripesBackground.tsx
import React from "react";
import clsx from "clsx";

interface StripesBackgroundProps {
  className?: string;
  position?: "left" | "right" | "top" | "bottom" | "full";
  width?: string;
  height?: string;
  opacity?: string;
}

const StripesBackground: React.FC<StripesBackgroundProps> = ({
  className,
  position = "right",
  width = "w-full",
  height = "h-full",
  opacity = "opacity-30", // This opacity applies to the div itself
}) => {
  const positionStyles = {
    right: "absolute top-0 right-0",
    left: "absolute top-0 left-0",
    top: "absolute top-0 left-0 w-full h-32",
    bottom: "absolute bottom-0 left-0 w-full h-32",
    full: "absolute inset-0",
  };

  return (
    <div
      className={clsx(
        "pointer-events-none z-0",
        "bg-[repeating-linear-gradient(45deg,_#00000066_0px,_#00000066_1px,_transparent_1px,_transparent_6px)]",
        "dark:bg-[repeating-linear-gradient(45deg,_#ffffff66_0px,_#ffffff66_1px,_transparent_1px,_transparent_6px)]",
        positionStyles[position],
        width,
        height,
        opacity,
        className
      )}
    />
  );
};

export default StripesBackground;

```
--------------------------------------------------

### COMPONENT: wave-background
Category: Background
Description: An animated WebGL background featuring fluid wave 
      distortions with vibrant color shifting. Supports optional 
      customizable backdrop blur overlay for enhanced visual layering. 
      Ideal for dynamic, modern UIs that require an artistic background element.
URL: https://lightswind.com/components/wave-background
Import: import WaveBackground from '@/components/lightswind/wave-background';
Registry URL: https://lightswind.com/r/wave-background.json
Install Command: npx lightswind@latest add wave-background

Usage:
```tsx
import WaveBackground from '@/components/lightswind/wave-background';

// Basic usage with default (sm) blur
<WaveBackground />

// With a medium backdrop blur
<WaveBackground backdropBlurAmount="md" />

// With maximum blur and custom border styling
<WaveBackground backdropBlurAmount="3xl" className="border-2 border-cyan-600 rounded-2xl" />

// With responsive height and full screen width
<WaveBackground className="h-[60vh] w-screen" />

// Combining all props
<WaveBackground backdropBlurAmount="xl" className="rounded-xl shadow-lg border border-neutral-700" />
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform float iMouseStrength;

uniform vec3 u_color1;
uniform vec3 u_color2;
uniform vec3 u_color3;
uniform float u_has_custom_colors;

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = (2.0 * fragCoord - iResolution.xy) / min(iResolution.x, iResolution.y);
    vec2 mouseUV = (2.0 * iMouse - iResolution.xy) / min(iResolution.x, iResolution.y);

    float dist = length(uv - mouseUV);
    vec2 dir = (uv - mouseUV) / (dist + 0.0001);

    // Wave distortion radiating outwards from mouse position
    float influence = exp(-dist * dist * 3.5) * iMouseStrength;
    uv += dir * influence * 0.2 * sin(dist * 10.0 - iTime * 4.0);

    for(float i = 1.0; i < 8.0; i++) {
        uv.y += i * 0.1 / i * 
            sin(uv.x * i * i + iTime * 0.5) * sin(uv.y * i * i + iTime * 0.5);
    }

    vec3 defaultCol;
    defaultCol.r = uv.y - 0.1;
    defaultCol.g = uv.y + 0.3;
    defaultCol.b = uv.y + 0.95;

    float t = clamp(uv.y + 0.5, 0.0, 1.0);
    vec3 customCol = mix(u_color1, u_color2, t);
    customCol = mix(customCol, u_color3, clamp(uv.y, 0.0, 1.0));

    vec3 col = mix(defaultCol, customCol, clamp(u_has_custom_colors, 0.0, 1.0));

    // Subtle glow highlight around mouse position
    float glow = exp(-dist * dist * 5.0) * iMouseStrength;
    vec3 glowColor = mix(vec3(0.5, 0.8, 1.0), u_color2, clamp(u_has_custom_colors, 0.0, 1.0));
    col += glowColor * glow * 0.35;

    fragColor = vec4(col, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface WaveBackgroundProps {
  backdropBlurAmount?: BlurSize;
  className?: string;
  colors?: string[];
  interactive?: boolean;
}

const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const hexToRgb = (hex: string): [number, number, number] => {
  try {
    const cleaned = hex.replace("#", "");
    const num = parseInt(cleaned, 16);
    return [
      ((num >> 16) & 255) / 255,
      ((num >> 8) & 255) / 255,
      (num & 255) / 255,
    ];
  } catch {
    return [0, 0, 0];
  }
};

function WaveBackground({
  backdropBlurAmount = "sm",
  className = "",
  colors,
  interactive = true,
}: WaveBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const visibilityRef = useRef(true);

  const mouseRef = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });
  const mouseStrengthRef = useRef({ value: 0, targetValue: 0 });
  const startRenderRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    visibilityRef.current = isInView;
    if (isInView && startRenderRef.current) {
      startRenderRef.current();
    }
  }, [isInView]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Convert colors prop if specified
    const hasCustomColors = colors && colors.length > 0;
    const colorRGBs: [number, number, number][] = [];
    if (hasCustomColors) {
      const parsed = colors!.map(hexToRgb);
      colorRGBs.push(parsed[0] || [0.0, 0.0, 0.0]);
      colorRGBs.push(parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);
      colorRGBs.push(parsed[2] || parsed[1] || parsed[0] || [0.0, 0.0, 0.0]);
    }

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const iMouseStrengthLocation = gl.getUniformLocation(program, "iMouseStrength");

    const uColor1Location = gl.getUniformLocation(program, "u_color1");
    const uColor2Location = gl.getUniformLocation(program, "u_color2");
    const uColor3Location = gl.getUniformLocation(program, "u_color3");
    const uHasCustomColorsLocation = gl.getUniformLocation(program, "u_has_custom_colors");

    // Track mouse events natively to keep high performance
    const handleMouseMove = (e: MouseEvent) => {
      if (!interactive) return;
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = rect.height - (e.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleMouseEnter = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
    };

    const handleMouseLeave = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (!interactive || e.touches.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const touch = e.touches[0];
      const x = touch.clientX - rect.left;
      const y = rect.height - (touch.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleTouchStart = (e: TouchEvent) => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
      handleTouchMove(e);
    };

    const handleTouchEnd = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });

    let startTime = Date.now();
    let animationFrameId: number;

    let width = canvas.clientWidth || 300;
    let height = canvas.clientHeight || 200;
    canvas.width = width;
    canvas.height = height;

    const handleResize = () => {
      width = canvas.clientWidth || 300;
      height = canvas.clientHeight || 200;
      canvas.width = width;
      canvas.height = height;
    };
    window.addEventListener("resize", handleResize);

    const render = () => {
      if (!visibilityRef.current) {
        // Completely halt rAF scheduling when not in view
        return;
      }

      gl.useProgram(program);
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      // Lerp mouse target values for high class fluid movement
      const mouse = mouseRef.current;
      const mouseStrength = mouseStrengthRef.current;

      mouse.x += (mouse.targetX - mouse.x) * 0.08;
      mouse.y += (mouse.targetY - mouse.y) * 0.08;
      mouseStrength.value += (mouseStrength.targetValue - mouseStrength.value) * 0.08;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(iMouseLocation, mouse.x, mouse.y);
      gl.uniform1f(iMouseStrengthLocation, mouseStrength.value);

      if (hasCustomColors) {
        gl.uniform1f(uHasCustomColorsLocation, 1.0);
        gl.uniform3fv(uColor1Location, colorRGBs[0]);
        gl.uniform3fv(uColor2Location, colorRGBs[1]);
        gl.uniform3fv(uColor3Location, colorRGBs[2]);
      } else {
        gl.uniform1f(uHasCustomColorsLocation, 0.0);
      }

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animationFrameId = requestAnimationFrame(render);
    };

    startRenderRef.current = render;
    if (visibilityRef.current) {
      render();
    }

    return () => {
      startRenderRef.current = null;
      window.removeEventListener("resize", handleResize);
      cancelAnimationFrame(animationFrameId);
      gl.deleteProgram(program);
      gl.deleteShader(vertexShader);
      gl.deleteShader(fragmentShader);
      gl.deleteBuffer(positionBuffer);

      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
      canvas.removeEventListener("touchstart", handleTouchStart);
      canvas.removeEventListener("touchmove", handleTouchMove);
      canvas.removeEventListener("touchend", handleTouchEnd);
    };
  }, [colors, interactive]);

  const finalBlurClass = blurClassMap[backdropBlurAmount] || blurClassMap["sm"];

  return (
    <div ref={containerRef} className={`w-full max-w-screen h-full overflow-hidden ${className}`}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full max-w-screen h-full overflow-hidden"
        style={{ display: "block" }}
      />
      <div className={`absolute inset-0 ${finalBlurClass}`} />
    </div>
  );
}

export default WaveBackground;

```
--------------------------------------------------

### COMPONENT: quantum-field
Category: Background
Description: An interactive WebGL background rendering a field of floating energy nodes that warp dynamically around the cursor coordinates.
URL: https://lightswind.com/components/quantum-field
Import: import QuantumField from '@/components/lightswind/quantum-field';
Registry URL: https://lightswind.com/r/quantum-field.json
Install Command: npx lightswind@latest add quantum-field

Usage:
```tsx
import QuantumField from '@/components/lightswind/quantum-field';

// Basic usage with technological cyan presets
<QuantumField />

// High density nodes field with custom colors
<QuantumField 
  colorNodes="#f59e0b" 
  gridDensity={20.0} 
  warpStrength={1.5} 
/>

// Disable hover interaction and set backdrop blur
<QuantumField 
  interactive={false} 
  backdropBlurAmount="md" 
/>
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform float iMouseStrength;

// Colors
uniform vec3 uColorGrid;
uniform vec3 uColorNodes;

// Configurations
uniform float uSpeed;
uniform float uGridDensity;
uniform float uWarpStrength;
uniform float uInteractive;

float hash(vec2 p) {
    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    // Normalized coordinates (-1 to 1)
    vec2 uv = (2.0 * fragCoord.xy - iResolution.xy) / min(iResolution.x, iResolution.y);
    vec2 mouseUV = (2.0 * iMouse - iResolution.xy) / min(iResolution.x, iResolution.y);
    
    float mouseDist = length(uv - mouseUV);
    
    // Warp coordinates based on cursor proximity (creates a gravity well / indentation)
    float warpFactor = exp(-mouseDist * mouseDist * 3.0) * iMouseStrength * uWarpStrength * uInteractive;
    
    // Displace uv coordinate towards mouse (pulling the grid lines)
    vec2 warpedUV = uv;
    if (mouseDist > 0.001) {
        warpedUV = uv - normalize(uv - mouseUV) * warpFactor * 0.15;
    }
    
    // Scale for grid density
    vec2 gridSpace = warpedUV * uGridDensity;
    
    // Simple robust grid lines (no fwidth needed)
    float lineThickness = 0.04;
    float gridX = smoothstep(0.5 - lineThickness, 0.5, abs(fract(gridSpace.x) - 0.5));
    float gridY = smoothstep(0.5 - lineThickness, 0.5, abs(fract(gridSpace.y) - 0.5));
    float lineVal = (1.0 - gridX) + (1.0 - gridY);
    lineVal = clamp(lineVal, 0.0, 1.0);
    
    // Grid glow based on proximity to mouse
    float gridGlow = exp(-mouseDist * mouseDist * 1.5) * iMouseStrength * uInteractive;
    vec3 col = mix(uColorGrid * 0.25, uColorGrid * 1.3, gridGlow) * lineVal;
    
    // Add pulsing quantum nodes at grid intersections
    vec2 ipos = floor(gridSpace);
    vec2 fpos = fract(gridSpace);
    
    // Node animation pulse
    float pulse = 0.5 + 0.5 * sin(iTime * uSpeed * 2.0 + hash(ipos) * 6.28);
    
    float nodeDist = length(fpos - 0.5);
    float nodeGlow = exp(-nodeDist * nodeDist * 40.0);
    
    // Add nodes light to color
    col += uColorNodes * nodeGlow * (0.35 + 0.65 * pulse);
    
    // Add bright highlight tracking the cursor
    float mouseGlow = exp(-mouseDist * mouseDist * 8.0) * iMouseStrength * uInteractive;
    col += uColorNodes * mouseGlow * 0.5;
    
    // Dark vignette
    vec2 centerUV = fragCoord.xy / iResolution.xy;
    float vignette = 1.0 - dot(centerUV - 0.5, centerUV - 0.5) * 1.5;
    vignette = max(0.0, vignette);

    // Calculate alpha transparency based on line density, nodes, and cursor glow
    float alpha = clamp(lineVal * 0.8 + nodeGlow * (0.35 + 0.65 * pulse) + mouseGlow * 0.5, 0.0, 1.0);

    col *= vignette;
    alpha *= vignette;

    fragColor = vec4(col, alpha);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`;

export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

interface QuantumFieldProps {
  colorGrid?: string;
  colorNodes?: string;
  speed?: number;
  gridDensity?: number;
  warpStrength?: number;
  interactive?: boolean;
  backdropBlurAmount?: BlurSize;
  className?: string;
}

const blurClassMap: Record<BlurSize, string> = {
  none: "backdrop-blur-none",
  sm: "backdrop-blur-sm",
  md: "backdrop-blur-md",
  lg: "backdrop-blur-lg",
  xl: "backdrop-blur-xl",
  "2xl": "backdrop-blur-2xl",
  "3xl": "backdrop-blur-3xl",
};

const hexToRgb = (hex: string): [number, number, number] => {
  try {
    const cleaned = hex.replace("#", "");
    const num = parseInt(cleaned, 16);
    return [
      ((num >> 16) & 255) / 255,
      ((num >> 8) & 255) / 255,
      (num & 255) / 255,
    ];
  } catch {
    return [0, 0, 0];
  }
};

const defaultColorGrid = "#0e4b85";  // Deep technological blue
const defaultColorNodes = "#00f0ff"; // Bright cyan pulse

const QuantumField: React.FC<QuantumFieldProps> = ({
  colorGrid = defaultColorGrid,
  colorNodes = defaultColorNodes,
  speed = 1.0,
  gridDensity = 12.0,
  warpStrength = 1.0,
  interactive = true,
  backdropBlurAmount = "none",
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const visibilityRef = useRef(true);

  // Mouse coords and active strength refs
  const mouseRef = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });
  const mouseStrengthRef = useRef({ value: 0, targetValue: 0 });

  useEffect(() => {
    visibilityRef.current = isInView;
  }, [isInView]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Parse colors
    const parsedGrid = hexToRgb(colorGrid);
    const parsedNodes = hexToRgb(colorNodes);

    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported");
      return;
    }

    const compileShader = (type: number, source: string): WebGLShader | null => {
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    };

    const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader) return;

    const program = gl.createProgram();
    if (!program) return;

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error("Program linking error:", gl.getProgramInfoLog(program));
      return;
    }

    gl.useProgram(program);

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
      gl.STATIC_DRAW
    );

    const positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
    const iTimeLocation = gl.getUniformLocation(program, "iTime");
    const iMouseLocation = gl.getUniformLocation(program, "iMouse");
    const iMouseStrengthLocation = gl.getUniformLocation(program, "iMouseStrength");

    const uColorGridLocation = gl.getUniformLocation(program, "uColorGrid");
    const uColorNodesLocation = gl.getUniformLocation(program, "uColorNodes");
    
    const uSpeedLocation = gl.getUniformLocation(program, "uSpeed");
    const uGridDensityLocation = gl.getUniformLocation(program, "uGridDensity");
    const uWarpStrengthLocation = gl.getUniformLocation(program, "uWarpStrength");
    const uInteractiveLocation = gl.getUniformLocation(program, "uInteractive");

    // Native mouse and touch listeners
    const handleMouseMove = (e: MouseEvent) => {
      if (!interactive) return;
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = rect.height - (e.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleMouseEnter = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
    };

    const handleMouseLeave = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (!interactive || e.touches.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const touch = e.touches[0];
      const x = touch.clientX - rect.left;
      const y = rect.height - (touch.clientY - rect.top);
      mouseRef.current.targetX = x;
      mouseRef.current.targetY = y;
    };

    const handleTouchStart = (e: TouchEvent) => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 1.0;
      handleTouchMove(e);
    };

    const handleTouchEnd = () => {
      if (!interactive) return;
      mouseStrengthRef.current.targetValue = 0.0;
    };

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseenter", handleMouseEnter);
    canvas.addEventListener("mouseleave", handleMouseLeave);

    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });

    let startTime = Date.now();
    let animationFrameId: number;

    const render = () => {
      if (!visibilityRef.current) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      // Handle resize and match resolution
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
      }

      gl.useProgram(program);
      gl.viewport(0, 0, width, height);

      const currentTime = (Date.now() - startTime) / 1000;

      // Lerp mouse coordinates and strength for smooth momentum
      const mouse = mouseRef.current;
      const mouseStrength = mouseStrengthRef.current;

      mouse.x += (mouse.targetX - mouse.x) * 0.08;
      mouse.y += (mouse.targetY - mouse.y) * 0.08;
      mouseStrength.value += (mouseStrength.targetValue - mouseStrength.value) * 0.08;

      gl.uniform2f(iResolutionLocation, width, height);
      gl.uniform1f(iTimeLocation, currentTime);
      gl.uniform2f(iMouseLocation, mouse.x, mouse.y);
      gl.uniform1f(iMouseStrengthLocation, mouseStrength.value);

      // Set uniforms
      gl.uniform3fv(uColorGridLocation, parsedGrid);
      gl.uniform3fv(uColorNodesLocation, parsedNodes);

      gl.uniform1f(uSpeedLocation, speed);
      gl.uniform1f(uGridDensityLocation, gridDensity);
      gl.uniform1f(uWarpStrengthLocation, warpStrength);
      gl.uniform1f(uInteractiveLocation, interactive ? 1.0 : 0.0);

      gl.drawArrays(gl.TRIANGLES, 0, 6);
      animationFrameId = requestAnimationFrame(render);
    };

    render();

    return () => {
      cancelAnimationFrame(animationFrameId);
      gl.deleteProgram(program);
      gl.deleteShader(vertexShader);
      gl.deleteShader(fragmentShader);
      gl.deleteBuffer(positionBuffer);

      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseenter", handleMouseEnter);
      canvas.removeEventListener("mouseleave", handleMouseLeave);
      canvas.removeEventListener("touchstart", handleTouchStart);
      canvas.removeEventListener("touchmove", handleTouchMove);
      canvas.removeEventListener("touchend", handleTouchEnd);
    };
  }, [colorGrid, colorNodes, speed, gridDensity, warpStrength, interactive]);

  const finalBlurClass = blurClassMap[backdropBlurAmount] || blurClassMap["none"];

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{ display: "block", pointerEvents: "auto" }}
      />
      <div className={`absolute inset-0 pointer-events-none ${finalBlurClass}`} />
    </div>
  );
};

export default QuantumField;

```
--------------------------------------------------

### COMPONENT: vector-flow
Category: Background
Description: A premium interactive background component featuring a high-density, multi-layered particle flow field simulation driven by domain-warped classic 2D Perlin noise. Includes dynamic speed-based color interpolation, physical velocity cursor drag, and transparent double-pass neon volumetric glow trails that fit perfectly on any page theme.
URL: https://lightswind.com/components/vector-flow
Import: import VectorFlow from "@/components/lightswind/vector-flow"
Registry URL: https://lightswind.com/r/vector-flow.json
Install Command: npx lightswind@latest add vector-flow

Usage:
```tsx
import VectorFlow from "@/components/lightswind/vector-flow";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-955">
      <VectorFlow
        colorParticles={["#00f0ff", "#d946ef", "#a855f7"]}
        particleCount={1000}
        particleSpeed={1.0}
        particleSize={1.5}
        interactionMode="vortex"
        interactive={true}
        trailLength={0.08}
        blurAmount={1.5}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Interactive Flow</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

export type InteractionMode = "attract" | "repel" | "vortex" | "none";

interface VectorFlowProps {
  colorParticles?: string[]; // Array of Hex colors to pick for particles
  particleCount?: number;
  particleSpeed?: number;
  particleSize?: number;
  interactionMode?: InteractionMode;
  interactive?: boolean;
  trailLength?: number; // trail opacity, e.g. 0.08
  blurAmount?: number; // Blur in pixels
  className?: string;
}

interface Particle {
  x: number;
  y: number;
  lastX: number;
  lastY: number;
  vx: number;
  vy: number;
  color: string;
  size: number;
  speed: number;
  life: number;
  maxLife: number;
}

const defaultColors = ["#00f0ff", "#d946ef", "#3b82f6"]; // Cyan, Magenta, Blue

// Classic 2D Perlin Noise Permutation Table Setup
const perm = new Uint8Array(512);
const grad2 = [
  [1, 1], [-1, 1], [1, -1], [-1, -1],
  [1, 0], [-1, 0], [0, 1], [0, -1]
];

const initNoise = () => {
  const p = Array.from({ length: 256 }, (_, i) => i);
  // Linear congruential generator for deterministic shuffle
  let seed = 42;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x80000000;
  };
  for (let i = 255; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    const tmp = p[i];
    p[i] = p[j];
    p[j] = tmp;
  }
  for (let i = 0; i < 512; i++) {
    perm[i] = p[i & 255];
  }
};
initNoise();

const fade = (t: number) => t * t * t * (t * (t * 6 - 15) + 10);
const lerp = (t: number, a: number, b: number) => a + t * (b - a);

const noise2D = (x: number, y: number) => {
  const X = Math.floor(x) & 255;
  const Y = Math.floor(y) & 255;
  const xf = x - Math.floor(x);
  const yf = y - Math.floor(y);

  const u = fade(xf);
  const v = fade(yf);

  const aa = perm[perm[X] + Y];
  const ab = perm[perm[X] + Y + 1];
  const ba = perm[perm[X] + 1 + Y];
  const bb = perm[perm[X] + 1 + Y + 1];

  const g_aa = grad2[aa & 7];
  const g_ab = grad2[ab & 7];
  const g_ba = grad2[ba & 7];
  const g_bb = grad2[bb & 7];

  const n_aa = g_aa[0] * xf + g_aa[1] * yf;
  const n_ba = g_ba[0] * (xf - 1) + g_ba[1] * yf;
  const n_ab = g_ab[0] * xf + g_ab[1] * (yf - 1);
  const n_bb = g_bb[0] * (xf - 1) + g_bb[1] * (yf - 1);

  const x1 = lerp(u, n_aa, n_ba);
  const x2 = lerp(u, n_ab, n_bb);

  return lerp(v, x1, x2);
};

// Dynamic color contrast adjustment for Light Theme readability
const getThemeColor = (color: string, isDark: boolean): string => {
  if (isDark) return color;
  
  const lowColor = color.toLowerCase();
  if (lowColor === "#00f0ff" || lowColor === "#00ffff") return "#0284c7"; // Cyan -> Deep Sky Blue
  if (lowColor === "#d946ef") return "#b55fe6"; // Magenta -> Darker Magenta/Orchid
  if (lowColor === "#a855f7") return "#7c3aed"; // Purple -> Violet
  if (lowColor === "#f97316") return "#c2410c"; // Orange -> Rust Orange
  if (lowColor === "#f59e0b") return "#d97706"; // Yellow -> Darker Amber
  if (lowColor === "#ef4444") return "#dc2626"; // Red -> Crimson
  if (lowColor === "#14b8a6") return "#0d9488"; // Teal -> Deep Teal
  if (lowColor === "#3b82f6") return "#2563eb"; // Blue -> Medium Blue
  return color;
};

const VectorFlow: React.FC<VectorFlowProps> = ({
  colorParticles = defaultColors,
  particleCount = 1000,
  particleSpeed = 1.0,
  particleSize = 1.5,
  interactionMode = "vortex",
  interactive = true,
  trailLength = 0.08,
  blurAmount = 1.5,
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const isDarkModeRef = useRef(true);

  // Mouse coords, velocities, and active state refs
  const mouseRef = useRef({ 
    x: 0, 
    y: 0, 
    vx: 0, 
    vy: 0, 
    active: false, 
    radius: 160 
  });

  // Monitor theme mutations
  useEffect(() => {
    const checkTheme = () => {
      isDarkModeRef.current = document.documentElement.classList.contains("dark");
    };
    checkTheme();

    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let particles: Particle[] = [];

    const createParticle = (width: number, height: number): Particle => {
      const maxLife = 100 + Math.random() * 150;
      const x = Math.random() * width;
      const y = Math.random() * height;
      return {
        x,
        y,
        lastX: x,
        lastY: y,
        vx: 0,
        vy: 0,
        color: colorParticles[Math.floor(Math.random() * colorParticles.length)],
        size: (0.4 + Math.random() * 1.0) * particleSize,
        speed: (0.6 + Math.random() * 1.0) * particleSpeed,
        life: 0,
        maxLife,
      };
    };

    const resizeCanvas = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      const width = rect?.width || window.innerWidth;
      const height = rect?.height || window.innerHeight;

      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;

        // Initialize particles
        particles = [];
        for (let i = 0; i < particleCount; i++) {
          particles.push(createParticle(width, height));
        }

        // Clean initial clear
        ctx.fillStyle = isDarkModeRef.current ? "#000000" : "#ffffff";
        ctx.fillRect(0, 0, width, height);
      }
    };

    resizeCanvas();

    // Listeners for mouse interaction & velocity calculation
    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      const newX = e.clientX - rect.left;
      const newY = e.clientY - rect.top;
      
      const mouse = mouseRef.current;
      if (mouse.active) {
        // Capture swipe speeds
        mouse.vx = (newX - mouse.x) * 0.4;
        mouse.vy = (newY - mouse.y) * 0.4;
      }
      mouse.x = newX;
      mouse.y = newY;
      mouse.active = true;
    };

    const handleMouseLeave = () => {
      const mouse = mouseRef.current;
      mouse.active = false;
      mouse.vx = 0;
      mouse.vy = 0;
    };

    const handleTouchMove = (e: TouchEvent) => {
      if (e.touches.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const touch = e.touches[0];
      const newX = touch.clientX - rect.left;
      const newY = touch.clientY - rect.top;
      
      const mouse = mouseRef.current;
      if (mouse.active) {
        mouse.vx = (newX - mouse.x) * 0.4;
        mouse.vy = (newY - mouse.y) * 0.4;
      }
      mouse.x = newX;
      mouse.y = newY;
      mouse.active = true;
    };

    const handleTouchEnd = () => {
      const mouse = mouseRef.current;
      mouse.active = false;
      mouse.vx = 0;
      mouse.vy = 0;
    };

    if (interactive) {
      canvas.addEventListener("mousemove", handleMouseMove);
      canvas.addEventListener("mouseleave", handleMouseLeave);
      canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
      canvas.addEventListener("touchend", handleTouchEnd, { passive: true });
    }

    let lastTime = performance.now();
    let time = 0;

    const render = () => {
      if (!isInView) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      const width = canvas.width;
      const height = canvas.height;

      const now = performance.now();
      const dt = Math.min((now - lastTime) / 1000, 0.1);
      lastTime = now;
      time += dt * particleSpeed;

      const isDark = isDarkModeRef.current;

      // 1. Transparent trail fading using destination-out
      ctx.globalCompositeOperation = "destination-out";
      ctx.fillStyle = `rgba(0, 0, 0, ${trailLength})`;
      ctx.fillRect(0, 0, width, height);

      // 2. Set composite operation for particles drawing
      ctx.globalCompositeOperation = isDark ? "screen" : "source-over";

      const mouse = mouseRef.current;
      // Damp mouse velocities
      mouse.vx *= 0.95;
      mouse.vy *= 0.95;

      // Update and draw particles
      for (let i = 0; i < particles.length; i++) {
        const p = particles[i];

        // Advanced math: classic Perlin noise + octave synthesis + domain warping
        const qx = noise2D(p.x * 0.0025 + 1.2, p.y * 0.0025 + time * 0.04);
        const qy = noise2D(p.x * 0.0025 + 5.7, p.y * 0.0025 + time * 0.04);

        const baseAngle = noise2D(
          p.x * 0.0018 + qx * 0.35, 
          p.y * 0.0018 + qy * 0.35 + time * 0.05
        ) * Math.PI * 2.5;

        // Apply base velocity
        let fx = Math.cos(baseAngle) * p.speed;
        let fy = Math.sin(baseAngle) * p.speed;

        // Mouse interactive force fields
        if (interactive && mouse.active) {
          const dx = mouse.x - p.x;
          const dy = mouse.y - p.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < mouse.radius && dist > 1) {
            const normalizedDist = dist / mouse.radius;
            const force = Math.pow(1.0 - normalizedDist, 1.5); // smoother falloff

            // Velocity drag (mouse sweeps particles in its swipe direction)
            const speedSq = mouse.vx * mouse.vx + mouse.vy * mouse.vy;
            if (speedSq > 0.1) {
              fx += mouse.vx * force * 1.8;
              fy += mouse.vy * force * 1.8;
            }

            if (interactionMode === "attract") {
              fx += (dx / dist) * force * p.speed * 2.5;
              fy += (dy / dist) * force * p.speed * 2.5;
            } else if (interactionMode === "repel") {
              fx -= (dx / dist) * force * p.speed * 3.0;
              fy -= (dy / dist) * force * p.speed * 3.0;
            } else if (interactionMode === "vortex") {
              const vx = -dy / dist;
              const vy = dx / dist;
              fx += vx * force * p.speed * 3.5;
              fy += vy * force * p.speed * 3.5;
            }
          }
        }

        // Momentum damping accumulation
        p.vx += (fx - p.vx) * 0.08;
        p.vy += (fy - p.vy) * 0.08;

        p.x += p.vx;
        p.y += p.vy;

        // Wrap edges protection
        let wrapped = false;
        if (p.x < 0) { p.x = width; wrapped = true; }
        else if (p.x > width) { p.x = 0; wrapped = true; }
        if (p.y < 0) { p.y = height; wrapped = true; }
        else if (p.y > height) { p.y = 0; wrapped = true; }

        if (Math.abs(p.x - p.lastX) > width * 0.3 || Math.abs(p.y - p.lastY) > height * 0.3) {
          wrapped = true;
        }

        p.life++;
        if (p.life >= p.maxLife) {
          particles[i] = createParticle(width, height);
          continue;
        }

        if (wrapped) {
          p.lastX = p.x;
          p.lastY = p.y;
          continue;
        }

        const alpha = Math.sin((p.life / p.maxLife) * Math.PI) * 0.85;
        const mappedColor = getThemeColor(p.color, isDark);

        // Three-pass rendering pipeline for realistic volumetric neon glow
        
        // 1. Soft Glow outer sheath
        ctx.beginPath();
        ctx.moveTo(p.lastX, p.lastY);
        ctx.lineTo(p.x, p.y);
        ctx.strokeStyle = mappedColor;
        ctx.lineWidth = p.size * 3.5;
        ctx.globalAlpha = alpha * 0.14;
        ctx.stroke();

        // 2. Vibrant core fiber
        ctx.beginPath();
        ctx.moveTo(p.lastX, p.lastY);
        ctx.lineTo(p.x, p.y);
        ctx.strokeStyle = mappedColor;
        ctx.lineWidth = p.size * 1.4;
        ctx.globalAlpha = alpha * 0.7;
        ctx.stroke();

        // 3. Hot laser center core
        ctx.beginPath();
        ctx.moveTo(p.lastX, p.lastY);
        ctx.lineTo(p.x, p.y);
        ctx.strokeStyle = "#ffffff";
        ctx.lineWidth = p.size * 0.6;
        ctx.globalAlpha = alpha * 0.95;
        ctx.stroke();

        p.lastX = p.x;
        p.lastY = p.y;
      }

      ctx.globalAlpha = 1.0;
      animationFrameId = requestAnimationFrame(render);
    };

    render();

    const resizeObserver = new ResizeObserver(() => {
      resizeCanvas();
    });
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      if (interactive) {
        canvas.removeEventListener("mousemove", handleMouseMove);
        canvas.removeEventListener("mouseleave", handleMouseLeave);
        canvas.removeEventListener("touchmove", handleTouchMove);
        canvas.removeEventListener("touchend", handleTouchEnd);
      }
    };
  }, [colorParticles, particleCount, particleSpeed, particleSize, interactionMode, interactive, trailLength, isInView]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{
          display: "block",
          pointerEvents: "auto",
          filter: blurAmount > 0 ? `blur(${blurAmount}px)` : "none",
        }}
      />
    </div>
  );
};

export default VectorFlow;

```
--------------------------------------------------

### COMPONENT: neural-link
Category: Background
Description: An advanced interactive background component simulating a neural net connection grid. Floating node connections dynamically route glowing data packets along paths to cursor coordinates.
URL: https://lightswind.com/components/neural-link
Import: import NeuralLinkBackground from "@/components/lightswind/neural-link"
Registry URL: https://lightswind.com/r/neural-link.json
Install Command: npx lightswind@latest add neural-link

Usage:
```tsx
import NeuralLinkBackground from "@/components/lightswind/neural-link";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-950">
      <NeuralLinkBackground
        nodeColor="#a855f7"
        lineColor="#cbd5e1"
        packetColor="#00f0ff"
        nodeCount={80}
        maxDistance={110}
        interactionMode="router"
        interactive={true}
        packetFrequency={2000}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Neural Nexus</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

export type NeuralInteraction = "router" | "pulse" | "gravity" | "none";

interface NeuralLinkProps {
  nodeColor?: string;      // Base node color (Hex or CSS)
  lineColor?: string;      // Base connection line color (Hex or CSS)
  packetColor?: string;    // Base packet color (Hex or CSS)
  nodeCount?: number;      // Number of floating nodes
  maxDistance?: number;    // Distance threshold to connect nodes
  interactionMode?: NeuralInteraction;
  interactive?: boolean;
  packetFrequency?: number; // Automatic packet spawn interval in ms (0 to disable)
  className?: string;
}

interface Node {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
  baseSpeed: number;
  pulseScale: number;
}

interface Packet {
  id: number;
  x: number;
  y: number;
  path: number[];
  pathIndex: number;
  progress: number;
  speed: number;
  size: number;
  color: string;
}

const NeuralLinkBackground: React.FC<NeuralLinkProps> = ({
  nodeColor = "#a855f7", // default violet
  lineColor = "#cbd5e1", // slate-300
  packetColor = "#00f0ff", // cyan
  nodeCount = 100,
  maxDistance = 110,
  interactionMode = "router",
  interactive = true,
  packetFrequency = 2000,
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const isDarkModeRef = useRef(true);

  // Mouse tracking state
  const mouseRef = useRef({
    x: 0,
    y: 0,
    active: false,
    radius: 180,
    lastInjectedX: 0,
    lastInjectedY: 0,
  });

  // Monitor theme changes
  useEffect(() => {
    const checkTheme = () => {
      isDarkModeRef.current = document.documentElement.classList.contains("dark");
    };
    checkTheme();

    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let nodes: Node[] = [];
    let packets: Packet[] = [];
    let lastTime = performance.now();
    let packetIdCounter = 0;
    let autoSpawnTimer = 0;

    const createNode = (width: number, height: number): Node => {
      const angle = Math.random() * Math.PI * 2;
      const baseSpeed = 0.2 + Math.random() * 0.4;
      return {
        x: Math.random() * width,
        y: Math.random() * height,
        vx: Math.cos(angle) * baseSpeed,
        vy: Math.sin(angle) * baseSpeed,
        radius: 1.5 + Math.random() * 2.5,
        baseSpeed,
        pulseScale: 1.0,
      };
    };

    const resizeCanvas = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      const width = rect?.width || window.innerWidth;
      const height = rect?.height || window.innerHeight;

      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;

        // Initialize nodes
        nodes = [];
        for (let i = 0; i < nodeCount; i++) {
          nodes.push(createNode(width, height));
        }
        packets = [];
      }
    };

    resizeCanvas();

    // Helper: Find neighbors of a node
    const getNeighbors = (nodeIdx: number): number[] => {
      const neighbors: number[] = [];
      const n1 = nodes[nodeIdx];
      if (!n1) return neighbors;

      for (let i = 0; i < nodes.length; i++) {
        if (i === nodeIdx) continue;
        const n2 = nodes[i];
        const dx = n2.x - n1.x;
        const dy = n2.y - n1.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < maxDistance) {
          neighbors.push(i);
        }
      }
      return neighbors;
    };

    // Helper: Spawn a path-hopping packet
    const spawnPacket = (startIdx: number, fromCursor = false) => {
      if (nodes.length === 0) return;
      
      // Build a random connected neighbor path
      const path: number[] = [startIdx];
      let currentIdx = startIdx;
      const maxHops = 4 + Math.floor(Math.random() * 3); // 4-6 hops

      for (let hop = 0; hop < maxHops; hop++) {
        const neighbors = getNeighbors(currentIdx).filter(n => !path.includes(n));
        if (neighbors.length === 0) break;
        // Pick random connected neighbor
        const next = neighbors[Math.floor(Math.random() * neighbors.length)];
        path.push(next);
        currentIdx = next;
      }

      if (path.length > 1) {
        const speed = 0.04 + Math.random() * 0.03; // travel progress step per frame
        const size = 2.0 + Math.random() * 2.0;
        
        // If starting from cursor, animate it originating from mouse coordinates
        const mouse = mouseRef.current;
        const startX = fromCursor ? mouse.x : nodes[startIdx].x;
        const startY = fromCursor ? mouse.y : nodes[startIdx].y;

        packets.push({
          id: packetIdCounter++,
          x: startX,
          y: startY,
          path,
          pathIndex: 0,
          progress: 0.0,
          speed,
          size,
          color: packetColor,
        });

        // Trigger visual pulse on starting node
        nodes[startIdx].pulseScale = 2.5;
      }
    };

    // Listeners
    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      const mouse = mouseRef.current;
      mouse.x = e.clientX - rect.left;
      mouse.y = e.clientY - rect.top;
      mouse.active = true;

      // In Router mode, inject packets on cursor movement
      if (interactionMode === "router" && nodes.length > 0) {
        const dx = mouse.x - mouse.lastInjectedX;
        const dy = mouse.y - mouse.lastInjectedY;
        const dist = Math.sqrt(dx * dx + dy * dy);

        if (dist > 35) { // throttle spawn density
          // Find closest node to inject packet into
          let closestIdx = 0;
          let minDist = Infinity;
          for (let i = 0; i < nodes.length; i++) {
            const ndx = nodes[i].x - mouse.x;
            const ndy = nodes[i].y - mouse.y;
            const d = Math.sqrt(ndx * ndx + ndy * ndy);
            if (d < minDist) {
              minDist = d;
              closestIdx = i;
            }
          }

          if (minDist < mouse.radius) {
            spawnPacket(closestIdx, true);
            mouse.lastInjectedX = mouse.x;
            mouse.lastInjectedY = mouse.y;
          }
        }
      }
    };

    const handleMouseLeave = () => {
      mouseRef.current.active = false;
    };

    const handleClick = () => {
      if (!interactive || nodes.length === 0) return;
      const mouse = mouseRef.current;
      if (!mouse.active) return;

      // Pulse Mode: Surge multiple packets outward from closest nodes
      if (interactionMode === "pulse" || interactionMode === "router") {
        // Find top 4 closest nodes to the click coordinates
        const nodeDists = nodes.map((n, idx) => {
          const dx = n.x - mouse.x;
          const dy = n.y - mouse.y;
          return { idx, dist: Math.sqrt(dx * dx + dy * dy) };
        });

        nodeDists.sort((a, b) => a.dist - b.dist);
        const count = Math.min(4, nodeDists.length);
        for (let i = 0; i < count; i++) {
          if (nodeDists[i].dist < mouse.radius * 1.5) {
            spawnPacket(nodeDists[i].idx, true);
          }
        }
      }
    };

    if (interactive) {
      canvas.addEventListener("mousemove", handleMouseMove);
      canvas.addEventListener("mouseleave", handleMouseLeave);
      canvas.addEventListener("click", handleClick);
    }

    const render = () => {
      if (!isInView) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      const width = canvas.width;
      const height = canvas.height;

      const now = performance.now();
      const dt = now - lastTime;
      lastTime = now;

      const isDark = isDarkModeRef.current;

      // Theme-adaptive styling overrides
      const currentBgFill = isDark ? "rgba(0, 0, 0, 1.0)" : "rgba(255, 255, 255, 1.0)";
      
      // Node and synapse line styling adjustments
      const finalNodeColor = isDark ? nodeColor : "#4f46e5"; // indigo in light mode
      const finalLineStyle = isDark ? "255, 255, 255" : "79, 70, 229"; // white vs indigo
      const finalPacketColor = isDark ? packetColor : "#0d9488"; // deep teal in light mode

      // Clear transparently
      ctx.clearRect(0, 0, width, height);

      // Handle auto-spawning packets
      if (packetFrequency > 0) {
        autoSpawnTimer += dt;
        if (autoSpawnTimer >= packetFrequency) {
          autoSpawnTimer = 0;
          if (nodes.length > 0) {
            // Spawn packet at a random node
            const startIdx = Math.floor(Math.random() * nodes.length);
            spawnPacket(startIdx, false);
          }
        }
      }

      const mouse = mouseRef.current;

      // 1. Move and update nodes
      for (let i = 0; i < nodes.length; i++) {
        const n = nodes[i];

        // Gravitational drag interaction
        if (interactive && mouse.active && interactionMode === "gravity") {
          const dx = mouse.x - n.x;
          const dy = mouse.y - n.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < mouse.radius) {
            const pull = (1.0 - dist / mouse.radius) * 0.15;
            n.vx += (dx / dist) * pull;
            n.vy += (dy / dist) * pull;
          }
        }

        // Apply friction & boundary wrap
        n.x += n.vx;
        n.y += n.vy;

        // Apply friction to velocities so they settle back to base speed
        const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
        if (speed > n.baseSpeed) {
          n.vx *= 0.95;
          n.vy *= 0.95;
        }

        if (n.x < 0) n.x = width;
        else if (n.x > width) n.x = 0;
        if (n.y < 0) n.y = height;
        else if (n.y > height) n.y = 0;

        // Decay visual scale animations
        if (n.pulseScale > 1.0) {
          n.pulseScale -= 0.05;
        } else {
          n.pulseScale = 1.0;
        }
      }

      // 2. Draw connections (synapse lines)
      ctx.lineWidth = 0.5;
      for (let i = 0; i < nodes.length; i++) {
        const n1 = nodes[i];
        for (let j = i + 1; j < nodes.length; j++) {
          const n2 = nodes[j];
          const dx = n2.x - n1.x;
          const dy = n2.y - n1.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < maxDistance) {
            const alpha = (1.0 - dist / maxDistance) * (isDark ? 0.14 : 0.08);
            ctx.strokeStyle = `rgba(${finalLineStyle}, ${alpha})`;
            ctx.beginPath();
            ctx.moveTo(n1.x, n1.y);
            ctx.lineTo(n2.x, n2.y);
            ctx.stroke();
          }
        }

        // Connection from cursor to nearby nodes
        if (interactive && mouse.active) {
          const dx = mouse.x - n1.x;
          const dy = mouse.y - n1.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < mouse.radius) {
            const alpha = (1.0 - dist / mouse.radius) * (isDark ? 0.22 : 0.14);
            ctx.strokeStyle = `rgba(${finalLineStyle}, ${alpha})`;
            ctx.lineWidth = 0.7;
            ctx.beginPath();
            ctx.moveTo(mouse.x, mouse.y);
            ctx.lineTo(n1.x, n1.y);
            ctx.stroke();
          }
        }
      }

      // 3. Draw nodes
      for (let i = 0; i < nodes.length; i++) {
        const n = nodes[i];
        ctx.fillStyle = finalNodeColor;

        // Render nodes with scale animation when data travels through
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.radius * n.pulseScale, 0, Math.PI * 2);
        ctx.fill();

        // Extra outer halo for pulsing active nodes
        if (n.pulseScale > 1.1) {
          ctx.strokeStyle = finalNodeColor;
          ctx.lineWidth = 1.0;
          ctx.globalAlpha = (n.pulseScale - 1.0) / 1.5;
          ctx.beginPath();
          ctx.arc(n.x, n.y, n.radius * n.pulseScale * 1.8, 0, Math.PI * 2);
          ctx.stroke();
          ctx.globalAlpha = 1.0;
        }
      }

      // 4. Update and draw packets (hopping signals)
      for (let i = packets.length - 1; i >= 0; i--) {
        const p = packets[i];
        p.progress += p.speed;

        // If segment completed, hop to next
        if (p.progress >= 1.0) {
          p.progress = 0.0;
          p.pathIndex++;

          // If reached final node, terminate packet
          if (p.pathIndex >= p.path.length - 1) {
            packets.splice(i, 1);
            continue;
          }

          // Trigger pulse on the current hop node
          const reachedNodeIdx = p.path[p.pathIndex];
          if (nodes[reachedNodeIdx]) {
            nodes[reachedNodeIdx].pulseScale = 2.0;
          }
        }

        // Interpolate coordinates along the segment line
        const nodeA = nodes[p.path[p.pathIndex]];
        const nodeB = nodes[p.path[p.pathIndex + 1]];

        if (!nodeA || !nodeB) {
          packets.splice(i, 1);
          continue;
        }

        p.x = nodeA.x + (nodeB.x - nodeA.x) * p.progress;
        p.y = nodeA.y + (nodeB.y - nodeA.y) * p.progress;

        // Draw packet glowing dot
        ctx.shadowBlur = 8;
        ctx.shadowColor = finalPacketColor;
        ctx.fillStyle = finalPacketColor;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();

        // Reset shadows
        ctx.shadowBlur = 0;
      }

      animationFrameId = requestAnimationFrame(render);
    };

    render();

    const resizeObserver = new ResizeObserver(() => {
      resizeCanvas();
    });
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      if (interactive) {
        canvas.removeEventListener("mousemove", handleMouseMove);
        canvas.removeEventListener("mouseleave", handleMouseLeave);
        canvas.removeEventListener("click", handleClick);
      }
    };
  }, [nodeColor, lineColor, packetColor, nodeCount, maxDistance, interactionMode, interactive, packetFrequency, isInView]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{
          display: "block",
          pointerEvents: "auto",
        }}
      />
    </div>
  );
};

export default NeuralLinkBackground;

```
--------------------------------------------------

### COMPONENT: magnetic-field
Category: Background
Description: An advanced interactive background component simulating a physical magnetic vector field. Needle lines representing compass vectors rotate dynamically to align with magnetic flux, and glowing tracer particles travel along the lines of force.
URL: https://lightswind.com/components/magnetic-field
Import: import MagneticFieldBackground from "@/components/lightswind/magnetic-field"
Registry URL: https://lightswind.com/r/magnetic-field.json
Install Command: npx lightswind@latest add magnetic-field

Usage:
```tsx
import MagneticFieldBackground from "@/components/lightswind/magnetic-field";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-955">
      <MagneticFieldBackground
        gridScale={28}
        needleLength={12}
        particleCount={60}
        particleSpeed={1.8}
        cursorMode="north"
        interactive={true}
        baseColor="#64748b"
        accentColor="#00f0ff"
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Magnetic Flux</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";

export type CursorPole = "north" | "south" | "none";

interface MagneticFieldProps {
  gridScale?: number;         // Cell spacing in pixels (e.g. 25)
  needleLength?: number;      // Length of compass needles in pixels (e.g. 12)
  particleCount?: number;     // Number of flowing tracer particles
  particleSpeed?: number;     // Speed of tracers
  cursorMode?: CursorPole;    // Cursor pole type: North (Attractor) or South (Repeller)
  interactive?: boolean;
  baseColor?: string;         // Default needle color
  accentColor?: string;       // Active pole region needle color
  className?: string;
  isInView?: boolean;
}

interface Pole {
  x: number;
  y: number;
  vx: number;
  vy: number;
  strength: number; // positive = North (Attractor/Source), negative = South (Sink/Repeller)
}

interface Tracer {
  x: number;
  y: number;
  history: { x: number; y: number }[]; // Trail path coordinates
  life: number;
  maxLife: number;
  color: string;
  size: number;
}

interface FluxRing {
  x: number;
  y: number;
  radius: number;
  maxRadius: number;
  opacity: number;
  color: string;
}

// Classic 2D Perlin Noise Permutation Table Setup
const perm = new Uint8Array(512);
const grad2 = [
  [1, 1], [-1, 1], [1, -1], [-1, -1],
  [1, 0], [-1, 0], [0, 1], [0, -1]
];

const initNoise = () => {
  const p = Array.from({ length: 256 }, (_, i) => i);
  let seed = 99;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x80000000;
  };
  for (let i = 255; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    const tmp = p[i];
    p[i] = p[j];
    p[j] = tmp;
  }
  for (let i = 0; i < 512; i++) {
    perm[i] = p[i & 255];
  }
};
initNoise();

const fade = (t: number) => t * t * t * (t * (t * 6 - 15) + 10);
const lerp = (t: number, a: number, b: number) => a + t * (b - a);

const noise2D = (x: number, y: number) => {
  const X = Math.floor(x) & 255;
  const Y = Math.floor(y) & 255;
  const xf = x - Math.floor(x);
  const yf = y - Math.floor(y);

  const u = fade(xf);
  const v = fade(yf);

  const aa = perm[perm[X] + Y];
  const ab = perm[perm[X] + Y + 1];
  const ba = perm[perm[X] + 1 + Y];
  const bb = perm[perm[X] + 1 + Y + 1];

  const g_aa = grad2[aa & 7];
  const g_ab = grad2[ab & 7];
  const g_ba = grad2[ba & 7];
  const g_bb = grad2[bb & 7];

  const n_aa = g_aa[0] * xf + g_aa[1] * yf;
  const n_ba = g_ba[0] * (xf - 1) + g_ba[1] * yf;
  const n_ab = g_ab[0] * xf + g_ab[1] * (yf - 1);
  const n_bb = g_bb[0] * (xf - 1) + g_bb[1] * (yf - 1);

  const x1 = lerp(u, n_aa, n_ba);
  const x2 = lerp(u, n_ab, n_bb);

  return lerp(v, x1, x2);
};

const MagneticFieldBackground: React.FC<MagneticFieldProps> = ({
  gridScale = 26,
  needleLength = 13,
  particleCount = 100,      // More particles for richer animation
  particleSpeed = 1.7,
  cursorMode = "south",
  interactive = true,
  baseColor = "#64748b",   // slate-500
  accentColor = "#00f0ff", // cyan
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef);
  const isDarkModeRef = useRef(true);

  // Mouse coordinate refs
  const mouseRef = useRef({
    x: 0,
    y: 0,
    active: false,
    radius: 200,
  });

  // Monitor theme alterations
  useEffect(() => {
    const checkTheme = () => {
      isDarkModeRef.current = document.documentElement.classList.contains("dark");
    };
    checkTheme();

    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let poles: Pole[] = [];
    let tracers: Tracer[] = [];
    let rings: FluxRing[] = [];
    let ringTimer = 0;
    let lastTime = performance.now();
    let time = 0;
    let poleFactor = 1.0;
    let isMouseMoving = false;
    let mouseMoveTimeout: ReturnType<typeof setTimeout> | undefined;

    // Helper: Calculate magnetic field vector B = (Bx, By) at coordinate (x, y)
    const getFieldAt = (x: number, y: number, mouseActive: boolean, mouseX: number, mouseY: number) => {
      let Bx = 0;
      let By = 0;

      // Add contributions from drifting poles
      for (let i = 0; i < poles.length; i++) {
        const p = poles[i];
        const dx = x - p.x;
        const dy = y - p.y;
        const distSq = dx * dx + dy * dy + 1500; // soften center
        const dist = Math.sqrt(distSq);

        const force = (p.strength * poleFactor) / distSq;
        Bx += (dx / dist) * force;
        By += (dy / dist) * force;
      }

      // Add contribution from active cursor pole
      if (interactive && mouseActive && cursorMode !== "none") {
        const dx = x - mouseX;
        const dy = y - mouseY;
        const distSq = dx * dx + dy * dy + 2000;
        const dist = Math.sqrt(distSq);

        const strength = cursorMode === "north" ? 28000 : -28000;
        const force = strength / distSq;
        Bx += (dx / dist) * force;
        By += (dy / dist) * force;
      }

      const strength = Math.sqrt(Bx * Bx + By * By);
      const angle = Math.atan2(By, Bx);

      return { Bx, By, angle, strength };
    };

    const initializeEntities = (width: number, height: number) => {
      // Create drifting poles (1 North, 1 South, 1 Weak North)
      poles = [
        { x: width * 0.25, y: height * 0.35, vx: 0.35, vy: -0.22, strength: 16000 },  // N (Source)
        { x: width * 0.75, y: height * 0.65, vx: -0.28, vy: 0.38, strength: -16000 }, // S (Sink)
        { x: width * 0.5, y: height * 0.5, vx: 0.18, vy: -0.18, strength: 8000 },    // Weak N
      ];

      // Initialize flow tracers
      tracers = [];
      for (let i = 0; i < particleCount; i++) {
        tracers.push(resetTracer(width, height));
      }
      rings = [];
    };

    const resetTracer = (width: number, height: number): Tracer => {
      let spawnX = Math.random() * width;
      let spawnY = Math.random() * height;

      const mouse = mouseRef.current;
      const spawnAtMouse = interactive && mouse.active && cursorMode === "north" && (Math.random() < 0.6 || poleFactor < 0.3);

      if (spawnAtMouse) {
        const angle = Math.random() * Math.PI * 2;
        const dist = 5 + Math.random() * 45;
        spawnX = mouse.x + Math.cos(angle) * dist;
        spawnY = mouse.y + Math.sin(angle) * dist;
      } else {
        const northPoles = poles.filter(p => p.strength > 0);
        if (northPoles.length > 0 && poleFactor > 0.15) {
          const source = northPoles[Math.floor(Math.random() * northPoles.length)];
          const angle = Math.random() * Math.PI * 2;
          const dist = 5 + Math.random() * 55;
          spawnX = source.x + Math.cos(angle) * dist;
          spawnY = source.y + Math.sin(angle) * dist;
        }
      }

      return {
        x: spawnX,
        y: spawnY,
        history: [{ x: spawnX, y: spawnY }],
        life: 0,
        maxLife: 100 + Math.floor(Math.random() * 120),
        color: Math.random() > 0.5 ? accentColor : "#a855f7",
        size: 0.8 + Math.random() * 0.8,
      };
    };

    const resizeCanvas = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      const width = rect?.width || window.innerWidth;
      const height = rect?.height || window.innerHeight;

      if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
        initializeEntities(width, height);
      }
    };

    resizeCanvas();

    // Mouse Listeners
    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      mouseRef.current.x = e.clientX - rect.left;
      mouseRef.current.y = e.clientY - rect.top;
      mouseRef.current.active = true;

      isMouseMoving = true;
      if (mouseMoveTimeout) {
        clearTimeout(mouseMoveTimeout);
      }
      mouseMoveTimeout = setTimeout(() => {
        isMouseMoving = false;
      }, 1500);
    };

    const handleMouseLeave = () => {
      mouseRef.current.active = false;
      isMouseMoving = false;
      if (mouseMoveTimeout) {
        clearTimeout(mouseMoveTimeout);
      }
    };

    if (interactive) {
      canvas.addEventListener("mousemove", handleMouseMove);
      canvas.addEventListener("mouseleave", handleMouseLeave);
    }

    const render = () => {
      if (!isInView) {
        animationFrameId = requestAnimationFrame(render);
        return;
      }

      const width = canvas.width;
      const height = canvas.height;
      const isDark = isDarkModeRef.current;

      const now = performance.now();
      const dt = Math.min((now - lastTime) / 1000, 0.1);
      lastTime = now;
      time += dt;

      // Clean background
      ctx.clearRect(0, 0, width, height);

      // Move poles inside screen bounds
      for (let i = 0; i < poles.length; i++) {
        const p = poles[i];
        p.x += p.vx;
        p.y += p.vy;

        if (p.x < width * 0.1 || p.x > width * 0.9) p.vx *= -1;
        if (p.y < height * 0.1 || p.y > height * 0.9) p.vy *= -1;
      }

      const mouse = mouseRef.current;

      // Interpolate poleFactor: 0 if mouse is active and moving, 1 otherwise
      const targetFactor = (mouse.active && isMouseMoving) ? 0.0 : 1.0;
      poleFactor += (targetFactor - poleFactor) * 0.08;

      // Theme-adaptive colors
      const finalBaseColor = isDark ? baseColor : "#94a3b8"; // slate-400
      const finalAccentColor = isDark ? accentColor : "#0284c7"; // deep sky blue
      const secondaryColor = isDark ? "#d946ef" : "#7c3aed"; // magenta-pink remapping

      // 1. Spawning concentric expanding Flux Rings
      ringTimer += dt;
      if (ringTimer > 1.3) {
        ringTimer = 0;
        if (poleFactor > 0.5) {
          poles.forEach(p => {
            rings.push({
              x: p.x,
              y: p.y,
              radius: 10,
              maxRadius: 160 + Math.random() * 80,
              opacity: 1.0,
              color: p.strength > 0 ? finalAccentColor : secondaryColor,
            });
          });
        }
      }

      // Draw Flux Rings
      ctx.lineWidth = 0.6;
      for (let i = rings.length - 1; i >= 0; i--) {
        const r = rings[i];
        r.radius += 1.3;
        r.opacity = (1.0 - r.radius / r.maxRadius) * poleFactor;

        if (r.opacity <= 0) {
          rings.splice(i, 1);
          continue;
        }

        ctx.strokeStyle = r.color;
        ctx.globalAlpha = r.opacity * (isDark ? 0.08 : 0.05);
        ctx.beginPath();
        ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
        ctx.stroke();
      }
      ctx.globalAlpha = 1.0;

      // 2. Draw Force Poles glowing halos
      if (poleFactor > 0.01) {
        for (let i = 0; i < poles.length; i++) {
          const p = poles[i];
          const isNorth = p.strength > 0;
          
          ctx.beginPath();
          const pulse = 1.0 + Math.sin(time * 3 + i) * 0.15;
          const radius = Math.max(0.1, 28 * pulse * poleFactor);
          const grad = ctx.createRadialGradient(p.x, p.y, 1, p.x, p.y, radius);
          
          if (isNorth) {
            grad.addColorStop(0, isDark ? `rgba(0, 240, 255, ${0.22 * poleFactor})` : `rgba(2, 132, 199, ${0.18 * poleFactor})`);
            grad.addColorStop(1, "rgba(0, 240, 255, 0)");
          } else {
            grad.addColorStop(0, isDark ? `rgba(217, 70, 239, ${0.22 * poleFactor})` : `rgba(124, 58, 237, ${0.18 * poleFactor})`);
            grad.addColorStop(1, "rgba(217, 70, 239, 0)");
          }
          
          ctx.fillStyle = grad;
          ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      // Draw Cursor halo
      if (interactive && mouse.active && cursorMode !== "none") {
        ctx.beginPath();
        const pulse = 1.0 + Math.sin(time * 5) * 0.1;
        const grad = ctx.createRadialGradient(mouse.x, mouse.y, 2, mouse.x, mouse.y, 40 * pulse);
        
        if (cursorMode === "north") {
          grad.addColorStop(0, isDark ? "rgba(0, 240, 255, 0.26)" : "rgba(2, 132, 199, 0.22)");
          grad.addColorStop(1, "rgba(0, 240, 255, 0)");
        } else {
          grad.addColorStop(0, isDark ? "rgba(217, 70, 239, 0.26)" : "rgba(124, 58, 237, 0.22)");
          grad.addColorStop(1, "rgba(217, 70, 239, 0)");
        }
        
        ctx.fillStyle = grad;
        ctx.arc(mouse.x, mouse.y, 40 * pulse, 0, Math.PI * 2);
        ctx.fill();
      }

      // 3. Render Compass Grid with Quadratic Needles & Jittered coordinates
      ctx.lineWidth = 0.9;
      for (let y = gridScale / 2; y < height; y += gridScale) {
        for (let x = gridScale / 2; x < width; x += gridScale) {
          
          // Coordinate jitter to make layout look organic/molecular
          const seedX = (x * 12.9898 + y * 78.233) * 43758.5453;
          const jitterX = (seedX - Math.floor(seedX) - 0.5) * 5.0; // +/-2.5px jitter
          
          const seedY = (y * 12.9898 + x * 78.233) * 43758.5453;
          const jitterY = (seedY - Math.floor(seedY) - 0.5) * 5.0;

          const cx = x + jitterX;
          const cy = y + jitterY;

          // Organic Perlin noise sway
          const sway = noise2D(cx * 0.002, cy * 0.002 + time * 0.12) * 0.28;

          // Find distance to closest North Pole (source) to calculate wave pulse
          let minSourceDist = Infinity;
          if (poleFactor > 0.15) {
            for (let i = 0; i < poles.length; i++) {
              if (poles[i].strength > 0) {
                const dx = cx - poles[i].x;
                const dy = cy - poles[i].y;
                const d = Math.sqrt(dx * dx + dy * dy);
                if (d < minSourceDist) minSourceDist = d;
              }
            }
          }
          if (interactive && mouse.active && cursorMode === "north") {
            const dx = cx - mouse.x;
            const dy = cy - mouse.y;
            const d = Math.sqrt(dx * dx + dy * dy);
            if (d < minSourceDist) minSourceDist = d;
          }

          // Calculate light wave propagation pulsing along field direction
          const wave = minSourceDist === Infinity ? 0.5 : Math.sin(minSourceDist * 0.024 - time * 5.5) * 0.5 + 0.5;

          const field = getFieldAt(cx, cy, mouse.active, mouse.x, mouse.y);
          const t = Math.min(field.strength * 1.8, 1.0);
          
          ctx.strokeStyle = t > 0.3
            ? (t > 0.7 ? finalAccentColor : secondaryColor)
            : finalBaseColor;

          const len = needleLength * (0.75 + wave * 0.55);
          ctx.globalAlpha = (isDark ? (0.16 + t * 0.44) : (0.08 + t * 0.3)) * (0.35 + wave * 0.65);

          // Calculate start & end points centered around (cx, cy)
          const finalAngle = field.angle + sway;
          const cos = Math.cos(finalAngle);
          const sin = Math.sin(finalAngle);

          // Quadratic curve endpoints: bend lines slightly along the field curvature
          // Calculate B field direction slightly offset forwards and backwards
          const step = len / 2;
          const ax = cx + cos * step;
          const ay = cy + sin * step;
          const bx = cx - cos * step;
          const by = cy - sin * step;

          // Calculate a control point shifted slightly towards the perpendicular vector
          const perpX = -sin * (len * 0.16); // curvature bending multiplier
          const perpY = cos * (len * 0.16);
          const controlX = cx + perpX;
          const controlY = cy + perpY;

          // Render curved vector needle
          ctx.beginPath();
          ctx.moveTo(bx, by);
          ctx.quadraticCurveTo(controlX, controlY, ax, ay);
          ctx.stroke();

          // Draw micro terminal dot
          ctx.fillStyle = ctx.strokeStyle;
          ctx.beginPath();
          ctx.arc(ax, ay, 1.1, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      ctx.globalAlpha = 1.0;

      // 4. Move & Render Flow Tracer Ribbon Trails
      for (let i = 0; i < tracers.length; i++) {
        const t = tracers[i];
        const field = getFieldAt(t.x, t.y, mouse.active, mouse.x, mouse.y);

        if (field.strength < 0.01) {
          tracers[i] = resetTracer(width, height);
          continue;
        }

        // Travel along magnetic lines of force
        const vx = (field.Bx / field.strength) * particleSpeed;
        const vy = (field.By / field.strength) * particleSpeed;

        t.x += vx;
        t.y += vy;
        t.life++;

        // Store history coordinate path
        t.history.push({ x: t.x, y: t.y });
        if (t.history.length > 5) {
          t.history.shift();
        }

        let nearSink = false;
        if (poleFactor > 0.15) {
          const southPoles = poles.filter(p => p.strength < 0);
          for (let j = 0; j < southPoles.length; j++) {
            const s = southPoles[j];
            const dx = t.x - s.x;
            const dy = t.y - s.y;
            if (dx * dx + dy * dy < 480) {
              nearSink = true;
              break;
            }
          }
        }

        if (interactive && mouse.active && cursorMode === "south") {
          const dx = t.x - mouse.x;
          const dy = t.y - mouse.y;
          if (dx * dx + dy * dy < 580) {
            nearSink = true;
          }
        }

        if (t.life >= t.maxLife || nearSink || t.x < 0 || t.x > width || t.y < 0 || t.y > height) {
          tracers[i] = resetTracer(width, height);
          continue;
        }

        const alpha = Math.sin((t.life / t.maxLife) * Math.PI) * 0.85;
        const mappedColor = t.color === accentColor ? finalAccentColor : secondaryColor;

        // Render continuous ribbon trail connecting the history array points
        if (t.history.length > 1) {
          // Three-pass volumetric ribbon pipeline:
          
          // 1. Glow outer sheath
          ctx.beginPath();
          ctx.moveTo(t.history[0].x, t.history[0].y);
          for (let k = 1; k < t.history.length; k++) {
            ctx.lineTo(t.history[k].x, t.history[k].y);
          }
          ctx.strokeStyle = mappedColor;
          ctx.lineWidth = t.size * 3.8;
          ctx.globalAlpha = isDark ? alpha * 0.16 : alpha * 0.12;
          ctx.stroke();

          // 2. Vibrant core fiber
          ctx.beginPath();
          ctx.moveTo(t.history[0].x, t.history[0].y);
          for (let k = 1; k < t.history.length; k++) {
            ctx.lineTo(t.history[k].x, t.history[k].y);
          }
          ctx.strokeStyle = mappedColor;
          ctx.lineWidth = t.size * 1.5;
          ctx.globalAlpha = isDark ? alpha * 0.7 : alpha * 0.6;
          ctx.stroke();

          // 3. Hot laser core
          ctx.beginPath();
          ctx.moveTo(t.history[0].x, t.history[0].y);
          for (let k = 1; k < t.history.length; k++) {
            ctx.lineTo(t.history[k].x, t.history[k].y);
          }
          ctx.strokeStyle = "#ffffff";
          ctx.lineWidth = t.size * 0.6;
          ctx.globalAlpha = alpha * 0.95;
          ctx.stroke();
        }
      }

      ctx.globalAlpha = 1.0;
      animationFrameId = requestAnimationFrame(render);
    };

    render();

    const resizeObserver = new ResizeObserver(() => {
      resizeCanvas();
    });
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      if (mouseMoveTimeout) {
        clearTimeout(mouseMoveTimeout);
      }
      if (interactive) {
        canvas.removeEventListener("mousemove", handleMouseMove);
        canvas.removeEventListener("mouseleave", handleMouseLeave);
      }
    };
  }, [gridScale, needleLength, particleCount, particleSpeed, cursorMode, interactive, baseColor, accentColor, isInView]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{ pointerEvents: "none" }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{
          display: "block",
          pointerEvents: "auto",
        }}
      />
    </div>
  );
};

export default MagneticFieldBackground;

```
--------------------------------------------------

### COMPONENT: ether-waves
Category: Background
Description: An interactive WebGL background rendering a 3D cybernetic constellation wave field. It projects a flowing net of glowing star nodes and micro-thin lines that warp, tilt, and glow white-hot near the cursor coordinates.
URL: https://lightswind.com/components/ether-waves
Import: import EtherWavesBackground from "@/components/lightswind/ether-waves"
Registry URL: https://lightswind.com/r/ether-waves.json
Install Command: npx lightswind@latest add ether-waves

Usage:
```tsx
import EtherWavesBackground from "@/components/lightswind/ether-waves";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-950">
      <EtherWavesBackground
        linesGradient={["#00f0ff", "#a855f7", "#d946ef", "#3b82f6"]}
        lineCount={6}
        animationSpeed={1.0}
        interactive={true}
        bendStrength={-0.6}
        bendRadius={0.5}
        transparentBg={true}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Ether Waves</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";
import {
  Clock,
  Mesh,
  OrthographicCamera,
  PlaneGeometry,
  Scene,
  ShaderMaterial,
  Vector2,
  Vector3,
  WebGLRenderer
} from "three";

export type WavePosition = {
  x: number;
  y: number;
  rotate: number;
};

interface EtherWavesProps {
  linesGradient?: string[];
  enabledWaves?: Array<"top" | "middle" | "bottom">; 
  lineCount?: number | number[];                     // Represents grid/particle density
  lineDistance?: number | number[];
  topWavePosition?: WavePosition;
  middleWavePosition?: WavePosition;
  bottomWavePosition?: WavePosition;
  animationSpeed?: number;
  interactive?: boolean;
  bendRadius?: number;                               // Mouse gravity influence radius
  bendStrength?: number;                             // Bending multiplier
  mouseDamping?: number;
  parallax?: boolean;
  parallaxStrength?: number;
  mixBlendMode?: React.CSSProperties["mixBlendMode"];
  transparentBg?: boolean;
  className?: string;
}

const vertexShader = `
precision highp float;
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}
`;

const fragmentShader = `
precision highp float;

varying vec2 vUv;

uniform float iTime;
uniform vec3  iResolution;
uniform float animationSpeed;

uniform int topLineCount; // Grid density selector

uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;

uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;

uniform vec3 lineGradient[8];
uniform int lineGradientCount;

uniform bool transparentBg;

mat2 rotate(float r) {
  return mat2(cos(r), sin(r), -sin(r), cos(r));
}

vec3 getLineColor(float t) {
  if (lineGradientCount <= 0) {
    return vec3(0.0, 0.94, 1.0); // Cyan fallback
  }
  
  if (lineGradientCount == 1) {
    return lineGradient[0];
  }
  
  float clampedT = clamp(t, 0.0, 0.9999);
  float scaled = clampedT * float(lineGradientCount - 1);
  int idx = int(floor(scaled));
  float f = fract(scaled);
  
  vec3 c1 = vec3(0.0);
  vec3 c2 = vec3(0.0);
  
  for (int i = 0; i < 8; i++) {
    if (i == idx) {
      c1 = lineGradient[i];
    }
    if (i == idx + 1) {
      c2 = lineGradient[i];
    }
  }
  
  return mix(c1, c2, f);
}

float getHeight(vec2 p) {
  float time = iTime * animationSpeed;
  
  // Complex multi-layered wave functions for organic liquid motion
  float w1 = sin(p.x * 0.7 + time * 0.4) * cos(p.y * 0.6 + time * 0.3) * 0.5;
  float w2 = cos(p.x * 1.3 - time * 0.6) * sin(p.y * 1.0 + time * 0.4) * 0.25;
  float w3 = sin(p.x * 2.8 + time * 1.1) * cos(p.y * 2.2 - time * 0.8) * 0.08;
  
  float h = w1 + w2 + w3;
  
  if (interactive) {
    // Coordinate mapping for 3D cursor position
    vec2 mouseNorm = (iMouse.xy / iResolution.xy) - 0.5;
    vec2 mouseP = vec2(mouseNorm.x * 5.5, -mouseNorm.y * 4.2);
    
    float d = length(p - mouseP);
    float influence = exp(-d * d * bendRadius);
    
    // Displace wave landscape
    h += influence * bendStrength * 1.5 * bendInfluence;
  }
  
  return h;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
  baseUv.y *= -1.0;
  
  if (parallax) {
    baseUv += parallaxOffset;
  }

  vec3 col = vec3(0.0);

  // Setup Camera Ray
  vec3 ro = vec3(0.0, 1.9, 3.4); 
  vec3 rd = normalize(vec3(baseUv, -1.8)); 
  
  // Slow camera orbit
  float rx = 0.44;
  float ry = iTime * 0.035; 
  
  if (interactive) {
    vec2 mUv = (iMouse.xy / iResolution.xy) - 0.5;
    rx += mUv.y * 0.14;
    ry += mUv.x * 0.20;
  }
  
  mat2 rotX = rotate(rx);
  mat2 rotY = rotate(ry);
  
  ro.yz *= rotX; rd.yz *= rotX;
  ro.xz *= rotY; rd.xz *= rotY;
  
  float t = 0.01;
  float maxD = 25.0;
  bool hit = false;
  vec3 p;
  
  // Raymarch terrain surface
  for (int i = 0; i < 48; i++) {
    p = ro + rd * t;
    float h = getHeight(p.xz);
    float diff = p.y - h;
    
    if (diff < 0.01) {
      hit = true;
      t += diff * 0.5;
      break;
    }
    t += max(diff * 0.4, 0.05);
    if (t > maxD) break;
  }

  if (hit) {
    // Grid density scale mapping
    float gridScale = float(topLineCount) * 0.28;
    
    float valX = abs(fract(p.x * gridScale - 0.5) - 0.5);
    float valZ = abs(fract(p.z * gridScale - 0.5) - 0.5);
    
    // Distance to the nearest grid node intersection
    float distToNode = length(vec2(valX, valZ));
    
    // Adaptive dot node size in perspective
    float nodeRadius = 0.038 / (t * 0.12 + 0.4);
    float nodeGlow = exp(-distToNode * distToNode / (nodeRadius * nodeRadius));
    
    // Micro-thin constellation lines connecting nodes
    float lineThickness = 0.0022 + t * 0.0004;
    float lineX = smoothstep(lineThickness, 0.0, valX);
    float lineZ = smoothstep(lineThickness, 0.0, valZ);
    float lines = max(lineX, lineZ) * 0.26; // Faint connection line scale
    
    float grid = max(nodeGlow * 1.5, lines);
    
    // Map vertical height to color gradient stop
    float heightPercent = clamp((p.y + 0.65) / 1.3, 0.0, 1.0);
    vec3 lineCol = getLineColor(heightPercent);
    
    // Cursor proximity glow
    float glow = 0.0;
    if (interactive) {
      vec2 mouseNorm = (iMouse.xy / iResolution.xy) - 0.5;
      vec2 mouseP = vec2(mouseNorm.x * 5.5, -mouseNorm.y * 4.2);
      float d = length(p.xz - mouseP);
      glow = exp(-d * d * 1.6) * bendInfluence;
    }
    
    vec3 finalNodeCol = mix(lineCol, vec3(1.4), glow * 0.85);
    
    // Depth fog fade out
    float depthFade = smoothstep(maxD, 2.2, t);
    
    col = finalNodeCol * grid * depthFade;
    
    // Subtle background nebula fog
    vec3 nebulaFog = lineCol * 0.045 * (1.0 - depthFade);
    col += nebulaFog;
    
    if (transparentBg) {
      float alpha = smoothstep(0.0, 0.12, max(max(col.r, col.g), col.b));
      fragColor = vec4(col, alpha);
    } else {
      vec3 bgCol = vec3(0.01, 0.012, 0.018) + baseUv.y * 0.01;
      fragColor = vec4(col + bgCol, 1.0);
    }
  } else {
    // Subtle space dust twinkling in background
    float spaceDust = 0.0;
    vec3 dustPos = (ro + rd * maxD) * 1.6;
    float n = sin(floor(dustPos.x) * 12.98 + floor(dustPos.y) * 78.23 + floor(dustPos.z) * 43.7) * 43758.5453;
    if (fract(n) > 0.992) {
      vec3 localPos = fract(dustPos) - 0.5;
      spaceDust = exp(-length(localPos) * length(localPos) * 35.0) * (0.2 + sin(iTime * 1.6 + n) * 0.15);
    }

    if (transparentBg) {
      fragColor = vec4(vec3(1.0) * spaceDust * 0.35, spaceDust * 0.15);
    } else {
      vec3 bgCol = vec3(0.01, 0.012, 0.018) + baseUv.y * 0.01 + vec3(1.0) * spaceDust * 0.25;
      fragColor = vec4(bgCol, 1.0);
    }
  }
}

void main() {
  vec4 color = vec4(0.0);
  mainImage(color, gl_FragCoord.xy);
  gl_FragColor = color;
}
`;

const MAX_GRADIENT_STOPS = 8;
const DEFAULT_GRADIENT = ["#00f0ff", "#a855f7", "#d946ef", "#3b82f6"];

function hexToVec3(hex: string): Vector3 {
  let value = hex.trim();
  if (value.startsWith("#")) {
    value = value.slice(1);
  }
  let r = 255;
  let g = 255;
  let b = 255;
  if (value.length === 3) {
    r = parseInt(value[0] + value[0], 16);
    g = parseInt(value[1] + value[1], 16);
    b = parseInt(value[2] + value[2], 16);
  } else if (value.length === 6) {
    r = parseInt(value.slice(0, 2), 16);
    g = parseInt(value.slice(2, 4), 16);
    b = parseInt(value.slice(4, 6), 16);
  }
  return new Vector3(r / 255, g / 255, b / 255);
}

export default function EtherWavesBackground({
  linesGradient = DEFAULT_GRADIENT,
  enabledWaves = ["top", "middle", "bottom"],
  lineCount = [6],
  lineDistance = [5],
  topWavePosition = { x: 10.0, y: 0.5, rotate: -0.4 },
  middleWavePosition = { x: 5.0, y: 0.0, rotate: 0.2 },
  bottomWavePosition = { x: 2.0, y: -0.7, rotate: 0.4 },
  animationSpeed = 1.0,
  interactive = true,
  bendRadius = 0.5, 
  bendStrength = -0.6,
  mouseDamping = 0.06,
  parallax = true,
  parallaxStrength = 0.18,
  mixBlendMode = "normal",
  transparentBg = true,
  className = "",
}: EtherWavesProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(containerRef);

  const targetMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const currentMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const targetInfluenceRef = useRef<number>(0);
  const currentInfluenceRef = useRef<number>(0);
  const targetParallaxRef = useRef<Vector2>(new Vector2(0, 0));
  const currentParallaxRef = useRef<Vector2>(new Vector2(0, 0));

  const density = typeof lineCount === "number" ? lineCount : (lineCount[0] ?? 6);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let active = true;
    const scene = new Scene();

    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    camera.position.z = 1;

    const renderer = new WebGLRenderer({ antialias: true, alpha: transparentBg });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    
    if (transparentBg) {
      renderer.setClearColor(0x000000, 0);
    }
    
    renderer.domElement.style.width = "100%";
    renderer.domElement.style.height = "100%";
    renderer.domElement.style.display = "block";
    container.appendChild(renderer.domElement);

    const uniforms = {
      iTime: { value: 0 },
      iResolution: { value: new Vector3(1, 1, 1) },
      animationSpeed: { value: animationSpeed },

      topLineCount: { value: density },

      iMouse: { value: new Vector2(-1000, -1000) },
      interactive: { value: interactive },
      bendRadius: { value: bendRadius },
      bendStrength: { value: bendStrength },
      bendInfluence: { value: 0 },

      parallax: { value: parallax },
      parallaxStrength: { value: parallaxStrength },
      parallaxOffset: { value: new Vector2(0, 0) },

      lineGradient: {
        value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
      },
      lineGradientCount: { value: 0 },
      transparentBg: { value: transparentBg },
    };

    if (linesGradient && linesGradient.length > 0) {
      const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS);
      uniforms.lineGradientCount.value = stops.length;
      stops.forEach((hex, i) => {
        const color = hexToVec3(hex);
        uniforms.lineGradient.value[i].set(color.x, color.y, color.z);
      });
    }

    const material = new ShaderMaterial({
      uniforms,
      vertexShader,
      fragmentShader,
      transparent: transparentBg,
      depthWrite: false,
      depthTest: false,
    });

    const geometry = new PlaneGeometry(2, 2);
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    const clock = new Clock();

    const setSize = () => {
      if (!active) return;
      const width = container.clientWidth || 1;
      const height = container.clientHeight || 1;

      renderer.setSize(width, height, false);
      const canvasWidth = renderer.domElement.width;
      const canvasHeight = renderer.domElement.height;
      uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1);
    };

    setSize();

    const resizeObserver = new ResizeObserver(() => {
      if (active) setSize();
    });
    resizeObserver.observe(container);

    const handlePointerMove = (event: PointerEvent) => {
      const rect = renderer.domElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const dpr = renderer.getPixelRatio();

      targetMouseRef.current.set(x * dpr, (rect.height - y) * dpr);
      targetInfluenceRef.current = 1.0;

      if (parallax) {
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const offsetX = (x - centerX) / rect.width;
        const offsetY = -(y - centerY) / rect.height;
        targetParallaxRef.current.set(offsetX * parallaxStrength, offsetY * parallaxStrength);
      }
    };

    const handlePointerLeave = () => {
      targetInfluenceRef.current = 0.0;
      targetParallaxRef.current.set(0, 0);
    };

    if (interactive) {
      container.addEventListener("pointermove", handlePointerMove);
      container.addEventListener("pointerleave", handlePointerLeave);
    }

    let rafId = 0;
    const renderLoop = () => {
      if (!active) return;
      
      if (isInView) {
        uniforms.iTime.value = clock.getElapsedTime();

        if (interactive) {
          currentMouseRef.current.lerp(targetMouseRef.current, mouseDamping);
          uniforms.iMouse.value.copy(currentMouseRef.current);

          currentInfluenceRef.current += (targetInfluenceRef.current - currentInfluenceRef.current) * mouseDamping;
          uniforms.bendInfluence.value = currentInfluenceRef.current;
        }

        if (parallax) {
          currentParallaxRef.current.lerp(targetParallaxRef.current, mouseDamping);
          uniforms.parallaxOffset.value.copy(currentParallaxRef.current);
        }

        renderer.render(scene, camera);
      }
      
      rafId = requestAnimationFrame(renderLoop);
    };

    renderLoop();

    return () => {
      active = false;
      cancelAnimationFrame(rafId);
      resizeObserver.disconnect();

      if (interactive) {
        container.removeEventListener("pointermove", handlePointerMove);
        container.removeEventListener("pointerleave", handlePointerLeave);
      }

      geometry.dispose();
      material.dispose();
      renderer.dispose();
      renderer.forceContextLoss();

      if (renderer.domElement.parentElement) {
        renderer.domElement.parentElement.removeChild(renderer.domElement);
      }
    };
  }, [
    linesGradient,
    enabledWaves,
    density,
    lineDistance,
    topWavePosition,
    middleWavePosition,
    bottomWavePosition,
    animationSpeed,
    interactive,
    bendRadius,
    bendStrength,
    mouseDamping,
    parallax,
    parallaxStrength,
    transparentBg,
    isInView,
  ]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{
        mixBlendMode,
        pointerEvents: "auto",
      }}
    />
  );
}

```
--------------------------------------------------

### COMPONENT: fluid-chrome
Category: Background
Description: An advanced, interactive WebGL-based background component simulating a highly reflective liquid metallic chrome surface. Time-based fractional Brownian motion (FBM) noise drives organic waves, while mouse movements create expanding dynamic ripple deformations. Illumination is computed via Blinn-Phong specular reflections and iridescent normal mapping.
URL: https://lightswind.com/components/fluid-chrome
Import: import FluidChromeBackground from "@/components/lightswind/fluid-chrome"
Registry URL: https://lightswind.com/r/fluid-chrome.json
Install Command: npx lightswind@latest add fluid-chrome

Usage:
```tsx
import FluidChromeBackground from "@/components/lightswind/fluid-chrome";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-950">
      <FluidChromeBackground
        linesGradient={["#ffffff", "#cbd5e1", "#94a3b8", "#475569", "#1e293b"]}
        animationSpeed={1.0}
        interactive={true}
        bendRadius={1.5}
        bendStrength={-0.5}
        shininess={50.0}
        specStrength={1.0}
        transparentBg={false}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Fluid Chrome</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";
import {
  Clock,
  Mesh,
  OrthographicCamera,
  PlaneGeometry,
  Scene,
  ShaderMaterial,
  Vector2,
  Vector3,
  WebGLRenderer
} from "three";

interface FluidChromeProps {
  linesGradient?: string[];
  animationSpeed?: number;
  interactive?: boolean;
  bendRadius?: number;      // Mouse ripple speed/spread scale
  bendStrength?: number;    // Ripple height displacement
  shininess?: number;       // Specular hardness
  specStrength?: number;    // Specular brightness
  mouseDamping?: number;
  parallax?: boolean;
  parallaxStrength?: number;
  mixBlendMode?: React.CSSProperties["mixBlendMode"];
  transparentBg?: boolean;
  className?: string;
}

const vertexShader = `
precision highp float;
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}
`;

const fragmentShader = `
precision highp float;

varying vec2 vUv;

uniform float iTime;
uniform vec3  iResolution;
uniform float animationSpeed;

uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;

uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;

uniform float shininess;
uniform float specStrength;

uniform vec3 lineGradient[8];
uniform int lineGradientCount;

uniform bool transparentBg;

// 2D Noise helper
float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x),
             mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);
}

// Fractional Brownian Motion (FBM)
float fbm(vec2 p) {
  float v = 0.0;
  float a = 0.5;
  vec2 shift = vec2(100.0);
  mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));
  for (int i = 0; i < 4; i++) {
    v += a * noise(p);
    p = rot * p * 2.0 + shift;
    a *= 0.5;
  }
  return v;
}

vec3 getLineColor(float t) {
  if (lineGradientCount <= 0) {
    return vec3(0.8, 0.82, 0.85); // Silver fallback
  }
  
  if (lineGradientCount == 1) {
    return lineGradient[0];
  }
  
  float clampedT = clamp(t, 0.0, 0.9999);
  float scaled = clampedT * float(lineGradientCount - 1);
  int idx = int(floor(scaled));
  float f = fract(scaled);
  
  vec3 c1 = vec3(0.0);
  vec3 c2 = vec3(0.0);
  
  for (int i = 0; i < 8; i++) {
    if (i == idx) {
      c1 = lineGradient[i];
    }
    if (i == idx + 1) {
      c2 = lineGradient[i];
    }
  }
  
  return mix(c1, c2, f);
}

float getHeight(vec2 p) {
  float time = iTime * animationSpeed;
  vec2 coord = p * 2.0;
  
  // Turbulent noise heightmap
  float n1 = fbm(coord + vec2(time * 0.15, time * 0.12));
  float n2 = fbm(coord - vec2(time * 0.08, -time * 0.16) + n1 * 0.4);
  
  float h = n2 * 0.32;
  
  if (interactive && bendInfluence > 0.01) {
    vec2 mouseNorm = (iMouse.xy / iResolution.xy) - 0.5;
    // Map mouse screen aspect relative to canvas viewport coords
    vec2 mouseP = vec2(mouseNorm.x * 2.0, -mouseNorm.y * 1.5) * 1.5;
    
    float d = length(p - mouseP);
    
    // Wave ripple distortion
    float ripple = sin(d * 18.0 - time * 6.5) * exp(-d * d * bendRadius);
    h += ripple * bendStrength * 0.15 * bendInfluence;
  }
  
  return h;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
  
  if (parallax) {
    uv += parallaxOffset;
  }

  // Calculate high-fidelity surface normals using central difference
  vec2 eps = vec2(0.008, 0.0);
  float hL = getHeight(uv - eps.xy);
  float hR = getHeight(uv + eps.xy);
  float hB = getHeight(uv - eps.yx);
  float hT = getHeight(uv + eps.yx);
  
  vec3 normal = normalize(vec3(hL - hR, 0.08, hB - hT));
  
  // Shifting color index based on normal slope & local height
  float colorIdx = normal.x * 0.45 + normal.z * 0.45 + getHeight(uv) * 0.5 + 0.5;
  vec3 baseColor = getLineColor(colorIdx);
  
  // Specular lighting (Blinn-Phong)
  vec3 lightDir = normalize(vec3(0.5, 1.2, 0.6));
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  vec3 halfDir = normalize(lightDir + viewDir);
  
  float ndotl = max(dot(normal, lightDir), 0.0);
  float spec = pow(max(dot(normal, halfDir), 0.0), shininess);
  
  // Combine base color shading with glossy specular light reflection
  vec3 finalColor = baseColor * (0.3 + ndotl * 0.45) + vec3(spec * specStrength);
  
  if (transparentBg) {
    float alpha = smoothstep(0.0, 0.12, max(max(finalColor.r, finalColor.g), finalColor.b));
    fragColor = vec4(finalColor, alpha);
  } else {
    fragColor = vec4(finalColor, 1.0);
  }
}

void main() {
  vec4 color = vec4(0.0);
  mainImage(color, gl_FragCoord.xy);
  gl_FragColor = color;
}
`;

const MAX_GRADIENT_STOPS = 8;
const DEFAULT_GRADIENT = ["#ffffff", "#cbd5e1", "#94a3b8", "#475569"]; // Silver chrome default

function hexToVec3(hex: string): Vector3 {
  let value = hex.trim();
  if (value.startsWith("#")) {
    value = value.slice(1);
  }
  let r = 255;
  let g = 255;
  let b = 255;
  if (value.length === 3) {
    r = parseInt(value[0] + value[0], 16);
    g = parseInt(value[1] + value[1], 16);
    b = parseInt(value[2] + value[2], 16);
  } else if (value.length === 6) {
    r = parseInt(value.slice(0, 2), 16);
    g = parseInt(value.slice(2, 4), 16);
    b = parseInt(value.slice(4, 6), 16);
  }
  return new Vector3(r / 255, g / 255, b / 255);
}

export default function FluidChromeBackground({
  linesGradient = DEFAULT_GRADIENT,
  animationSpeed = 1.0,
  interactive = true,
  bendRadius = 1.5,
  bendStrength = -0.5,
  shininess = 50.0,
  specStrength = 1.0,
  mouseDamping = 0.05,
  parallax = true,
  parallaxStrength = 0.15,
  mixBlendMode = "normal",
  transparentBg = false, // Set to false by default for chrome backgrounds to render solid metallic reflections
  className = "",
}: FluidChromeProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(containerRef);

  const targetMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const currentMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const targetInfluenceRef = useRef<number>(0);
  const currentInfluenceRef = useRef<number>(0);
  const targetParallaxRef = useRef<Vector2>(new Vector2(0, 0));
  const currentParallaxRef = useRef<Vector2>(new Vector2(0, 0));

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let active = true;
    const scene = new Scene();

    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    camera.position.z = 1;

    const renderer = new WebGLRenderer({ antialias: true, alpha: transparentBg });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    
    if (transparentBg) {
      renderer.setClearColor(0x000000, 0);
    }
    
    renderer.domElement.style.width = "100%";
    renderer.domElement.style.height = "100%";
    renderer.domElement.style.display = "block";
    container.appendChild(renderer.domElement);

    const uniforms = {
      iTime: { value: 0 },
      iResolution: { value: new Vector3(1, 1, 1) },
      animationSpeed: { value: animationSpeed },

      iMouse: { value: new Vector2(-1000, -1000) },
      interactive: { value: interactive },
      bendRadius: { value: bendRadius },
      bendStrength: { value: bendStrength },
      bendInfluence: { value: 0 },

      parallax: { value: parallax },
      parallaxStrength: { value: parallaxStrength },
      parallaxOffset: { value: new Vector2(0, 0) },

      shininess: { value: shininess },
      specStrength: { value: specStrength },

      lineGradient: {
        value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
      },
      lineGradientCount: { value: 0 },
      transparentBg: { value: transparentBg },
    };

    if (linesGradient && linesGradient.length > 0) {
      const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS);
      uniforms.lineGradientCount.value = stops.length;
      stops.forEach((hex, i) => {
        const color = hexToVec3(hex);
        uniforms.lineGradient.value[i].set(color.x, color.y, color.z);
      });
    }

    const material = new ShaderMaterial({
      uniforms,
      vertexShader,
      fragmentShader,
      transparent: transparentBg,
      depthWrite: false,
      depthTest: false,
    });

    const geometry = new PlaneGeometry(2, 2);
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    const clock = new Clock();

    const setSize = () => {
      if (!active) return;
      const width = container.clientWidth || 1;
      const height = container.clientHeight || 1;

      renderer.setSize(width, height, false);
      const canvasWidth = renderer.domElement.width;
      const canvasHeight = renderer.domElement.height;
      uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1);
    };

    setSize();

    const resizeObserver = new ResizeObserver(() => {
      if (active) setSize();
    });
    resizeObserver.observe(container);

    const handlePointerMove = (event: PointerEvent) => {
      const rect = renderer.domElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const dpr = renderer.getPixelRatio();

      targetMouseRef.current.set(x * dpr, (rect.height - y) * dpr);
      targetInfluenceRef.current = 1.0;

      if (parallax) {
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const offsetX = (x - centerX) / rect.width;
        const offsetY = -(y - centerY) / rect.height;
        targetParallaxRef.current.set(offsetX * parallaxStrength, offsetY * parallaxStrength);
      }
    };

    const handlePointerLeave = () => {
      targetInfluenceRef.current = 0.0;
      targetParallaxRef.current.set(0, 0);
    };

    if (interactive) {
      container.addEventListener("pointermove", handlePointerMove);
      container.addEventListener("pointerleave", handlePointerLeave);
    }

    let rafId = 0;
    const renderLoop = () => {
      if (!active) return;
      
      if (isInView) {
        uniforms.iTime.value = clock.getElapsedTime();

        if (interactive) {
          currentMouseRef.current.lerp(targetMouseRef.current, mouseDamping);
          uniforms.iMouse.value.copy(currentMouseRef.current);

          currentInfluenceRef.current += (targetInfluenceRef.current - currentInfluenceRef.current) * mouseDamping;
          uniforms.bendInfluence.value = currentInfluenceRef.current;
        }

        if (parallax) {
          currentParallaxRef.current.lerp(targetParallaxRef.current, mouseDamping);
          uniforms.parallaxOffset.value.copy(currentParallaxRef.current);
        }

        renderer.render(scene, camera);
      }
      
      rafId = requestAnimationFrame(renderLoop);
    };

    renderLoop();

    return () => {
      active = false;
      cancelAnimationFrame(rafId);
      resizeObserver.disconnect();

      if (interactive) {
        container.removeEventListener("pointermove", handlePointerMove);
        container.removeEventListener("pointerleave", handlePointerLeave);
      }

      geometry.dispose();
      material.dispose();
      renderer.dispose();
      renderer.forceContextLoss();

      if (renderer.domElement.parentElement) {
        renderer.domElement.parentElement.removeChild(renderer.domElement);
      }
    };
  }, [
    linesGradient,
    animationSpeed,
    interactive,
    bendRadius,
    bendStrength,
    shininess,
    specStrength,
    mouseDamping,
    parallax,
    parallaxStrength,
    transparentBg,
    isInView,
  ]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{
        mixBlendMode,
        pointerEvents: "auto",
      }}
    />
  );
}

```
--------------------------------------------------

### COMPONENT: cyber-hive
Category: Background
Description: An advanced interactive WebGL hexagonal grid background. The tiles pulse with customized breathing speeds and warp in scale, bevel specular reflection, and glow intensity when hovered by the cursor.
URL: https://lightswind.com/components/cyber-hive
Import: import CyberHiveBackground from "@/components/lightswind/cyber-hive"
Registry URL: https://lightswind.com/r/cyber-hive.json
Install Command: npx lightswind@latest add cyber-hive

Usage:
```tsx
import CyberHiveBackground from "@/components/lightswind/cyber-hive";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-950">
      <CyberHiveBackground
        colorGrid="#022c22"
        colorNodes="#10b981"
        speed={1.0}
        gridDensity={1.0}
        warpRadius={1.0}
        warpStrength={1.0}
        interactive={true}
        transparentBg={true}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold text-white font-mono">Cyber Hive</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";
import {
  Clock,
  Mesh,
  OrthographicCamera,
  PlaneGeometry,
  Scene,
  ShaderMaterial,
  Vector2,
  Vector3,
  WebGLRenderer
} from "three";

interface CyberHiveProps {
  colorGrid?: string;        // Rest state cell color (e.g. dark teal/blue)
  colorNodes?: string;       // Hover state cell color (e.g. bright green/gold)
  speed?: number;            // Breathing animation speed
  gridDensity?: number;      // Density / frequency of hexagonal tiling
  warpRadius?: number;       // Radius of cursor hover gravity swell
  warpStrength?: number;     // Physical tile scaling indentation strength
  interactive?: boolean;     // Enable mouse/touch tracking
  mouseDamping?: number;     // Pointer movement lerp speed
  parallax?: boolean;        // Parallax depth offset shifting
  parallaxStrength?: number; // Parallax translation multiplier
  transparentBg?: boolean;   // Draw transparent background (transparent empty cell gaps)
  className?: string;
}

const vertexShader = `
precision highp float;
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}
`;

const fragmentShader = `
precision highp float;

varying vec2 vUv;

uniform float iTime;
uniform vec3  iResolution;
uniform float animationSpeed;

uniform vec2 iMouse;
uniform bool interactive;
uniform float warpRadius;
uniform float warpStrength;
uniform float hoverInfluence;

uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;

uniform vec3 uColorGrid;
uniform vec3 uColorNodes;

uniform bool transparentBg;
uniform float uGridDensity;

// Hash helper for cell random variations
float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

// Distance to the boundary of a regular hexagon
float hexDist(vec2 p) {
  p = abs(p);
  float d = dot(p, normalize(vec2(1.0, 1.7320508)));
  return max(d, p.x);
}

// Hex cell coordinate mapping
struct HexInfo {
  vec2 gv;
  vec2 id;
};

HexInfo getHexInfo(vec2 uv) {
  vec2 r = vec2(1.0, 1.7320508);
  vec2 h = r / 2.0;
  
  vec2 a = mod(uv, r) - h;
  vec2 b = mod(uv - h, r) - h;
  
  if (length(a) < length(b)) {
    return HexInfo(a, uv - a);
  } else {
    return HexInfo(b, uv - h - b);
  }
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
  
  if (parallax) {
    uv += parallaxOffset;
  }

  // Hex scaling based on resolution and density multiplier
  vec2 hexUv = uv * 3.5 * uGridDensity;
  HexInfo info = getHexInfo(hexUv);
  
  // Cursor coordinate warping
  float hover = 0.0;
  if (interactive) {
    vec2 mouseP = (2.0 * iMouse.xy - iResolution.xy) / iResolution.y;
    vec2 hexMouseP = mouseP * 3.5 * uGridDensity;
    float mouseDist = length(info.id - hexMouseP);
    hover = exp(-mouseDist * mouseDist * (1.2 / warpRadius)) * hoverInfluence;
  }
  
  // Physical scale warping on cell coordinates
  vec2 localGv = info.gv * (1.0 + hover * warpStrength * 0.28);
  float d = hexDist(localGv);
  
  // Pulse animation using unique cell ID hashes
  float cellHash = hash(info.id);
  float pulse = 0.5 + 0.5 * sin(iTime * animationSpeed * 1.6 + cellHash * 6.28);
  
  // Calculate pseudo-3D normals along hexagon borders for specular shading
  vec3 normal;
  if (d < 0.44) {
    normal = vec3(0.0, 0.0, 1.0); // Flat interior
  } else {
    // Slanted boundary normals
    vec2 dir = normalize(localGv);
    normal = normalize(mix(vec3(dir * 0.4, 0.85), vec3(0.0, 0.0, 1.0), smoothstep(0.44, 0.48, d)));
  }
  
  // Glossy specular highlight (Blinn-Phong)
  vec3 lightDir = normalize(vec3(0.4, 0.8, 1.0));
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  vec3 halfDir = normalize(lightDir + viewDir);
  float spec = pow(max(dot(normal, halfDir), 0.0), 32.0);
  
  // Shading colors
  vec3 baseCol = mix(uColorGrid, uColorNodes, hover);
  float emission = mix(0.12 * (0.4 + 0.6 * pulse), 1.0, hover);
  
  // Base tile lighting and specular reflection
  vec3 col = baseCol * emission * (0.65 + max(dot(normal, lightDir), 0.0) * 0.35) + vec3(spec * (0.3 + 0.7 * hover));
  
  // Edge border glow
  float borderRing = exp(-abs(d - 0.46) * 20.0);
  col += uColorNodes * borderRing * (0.15 + 0.85 * hover);
  
  // Alpha transparency masking
  float tileMask = smoothstep(0.48, 0.45, d);
  float alpha = clamp(tileMask * (0.2 + 0.8 * emission) + borderRing * (0.4 + 0.6 * hover), 0.0, 1.0);
  
  // Vignette
  vec2 centerUv = fragCoord / iResolution.xy;
  float vignette = 1.0 - dot(centerUv - 0.5, centerUv - 0.5) * 1.2;
  vignette = max(0.0, vignette);
  
  col *= vignette;
  alpha *= vignette;
  
  if (transparentBg) {
    fragColor = vec4(col, alpha);
  } else {
    vec3 bgCol = vec3(0.005, 0.007, 0.012) + (centerUv.y * 0.008);
    fragColor = vec4(mix(bgCol, col, alpha), 1.0);
  }
}

void main() {
  vec4 color = vec4(0.0);
  mainImage(color, gl_FragCoord.xy);
  gl_FragColor = color;
}
`;

const defaultColorGrid = "#092942";  // Sleek tech blue/gray
const defaultColorNodes = "#00f0ff"; // Glowing cyan nodes

function hexToVec3(hex: string): Vector3 {
  let value = hex.trim();
  if (value.startsWith("#")) {
    value = value.slice(1);
  }
  let r = 255;
  let g = 255;
  let b = 255;
  if (value.length === 3) {
    r = parseInt(value[0] + value[0], 16);
    g = parseInt(value[1] + value[1], 16);
    b = parseInt(value[2] + value[2], 16);
  } else if (value.length === 6) {
    r = parseInt(value.slice(0, 2), 16);
    g = parseInt(value.slice(2, 4), 16);
    b = parseInt(value.slice(4, 6), 16);
  }
  return new Vector3(r / 255, g / 255, b / 255);
}

export default function CyberHiveBackground({
  colorGrid = defaultColorGrid,
  colorNodes = defaultColorNodes,
  speed = 1.0,
  gridDensity = 1.0, // Multiplier for global hex cell density
  warpRadius = 1.0,
  warpStrength = 1.0,
  interactive = true,
  mouseDamping = 0.08,
  parallax = true,
  parallaxStrength = 0.16,
  transparentBg = true,
  className = "",
}: CyberHiveProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(containerRef);

  const targetMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const currentMouseRef = useRef<Vector2>(new Vector2(-1000, -1000));
  const targetInfluenceRef = useRef<number>(0);
  const currentInfluenceRef = useRef<number>(0);
  const targetParallaxRef = useRef<Vector2>(new Vector2(0, 0));
  const currentParallaxRef = useRef<Vector2>(new Vector2(0, 0));

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let active = true;
    const scene = new Scene();

    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    camera.position.z = 1;

    const renderer = new WebGLRenderer({ antialias: true, alpha: transparentBg });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

    if (transparentBg) {
      renderer.setClearColor(0x000000, 0);
    }

    renderer.domElement.style.width = "100%";
    renderer.domElement.style.height = "100%";
    renderer.domElement.style.display = "block";
    container.appendChild(renderer.domElement);

    const uniforms = {
      iTime: { value: 0 },
      iResolution: { value: new Vector3(1, 1, 1) },
      animationSpeed: { value: speed },

      iMouse: { value: new Vector2(-1000, -1000) },
      interactive: { value: interactive },
      warpRadius: { value: warpRadius },
      warpStrength: { value: warpStrength },
      hoverInfluence: { value: 0 },

      parallax: { value: parallax },
      parallaxStrength: { value: parallaxStrength },
      parallaxOffset: { value: new Vector2(0, 0) },

      uColorGrid: { value: hexToVec3(colorGrid) },
      uColorNodes: { value: hexToVec3(colorNodes) },

      transparentBg: { value: transparentBg },
      uGridDensity: { value: gridDensity },
    };

    const material = new ShaderMaterial({
      uniforms,
      vertexShader,
      fragmentShader,
      transparent: transparentBg,
      depthWrite: false,
      depthTest: false,
    });

    const geometry = new PlaneGeometry(2, 2);
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    const clock = new Clock();

    const setSize = () => {
      if (!active) return;
      const width = container.clientWidth || 1;
      const height = container.clientHeight || 1;

      renderer.setSize(width, height, false);
      const canvasWidth = renderer.domElement.width;
      const canvasHeight = renderer.domElement.height;
      
      uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1);
    };

    setSize();

    const resizeObserver = new ResizeObserver(() => {
      if (active) setSize();
    });
    resizeObserver.observe(container);

    const handlePointerMove = (event: PointerEvent) => {
      const rect = renderer.domElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const dpr = renderer.getPixelRatio();

      targetMouseRef.current.set(x * dpr, (rect.height - y) * dpr);
      targetInfluenceRef.current = 1.0;

      if (parallax) {
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const offsetX = (x - centerX) / rect.width;
        const offsetY = -(y - centerY) / rect.height;
        targetParallaxRef.current.set(offsetX * parallaxStrength, offsetY * parallaxStrength);
      }
    };

    const handlePointerLeave = () => {
      targetInfluenceRef.current = 0.0;
      targetParallaxRef.current.set(0, 0);
    };

    if (interactive) {
      container.addEventListener("pointermove", handlePointerMove);
      container.addEventListener("pointerleave", handlePointerLeave);
    }

    let rafId = 0;
    const renderLoop = () => {
      if (!active) return;

      if (isInView) {
        uniforms.iTime.value = clock.getElapsedTime();

        if (interactive) {
          currentMouseRef.current.lerp(targetMouseRef.current, mouseDamping);
          uniforms.iMouse.value.copy(currentMouseRef.current);

          currentInfluenceRef.current += (targetInfluenceRef.current - currentInfluenceRef.current) * mouseDamping;
          uniforms.hoverInfluence.value = currentInfluenceRef.current;
        }

        if (parallax) {
          currentParallaxRef.current.lerp(targetParallaxRef.current, mouseDamping);
          uniforms.parallaxOffset.value.copy(currentParallaxRef.current);
        }

        renderer.render(scene, camera);
      }

      rafId = requestAnimationFrame(renderLoop);
    };

    renderLoop();

    return () => {
      active = false;
      cancelAnimationFrame(rafId);
      resizeObserver.disconnect();

      if (interactive) {
        container.removeEventListener("pointermove", handlePointerMove);
        container.removeEventListener("pointerleave", handlePointerLeave);
      }

      geometry.dispose();
      material.dispose();
      renderer.dispose();
      renderer.forceContextLoss();

      if (renderer.domElement.parentElement) {
        renderer.domElement.parentElement.removeChild(renderer.domElement);
      }
    };
  }, [
    colorGrid,
    colorNodes,
    speed,
    gridDensity,
    warpRadius,
    warpStrength,
    interactive,
    mouseDamping,
    parallax,
    parallaxStrength,
    transparentBg,
    isInView,
  ]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{
        mixBlendMode: "normal",
        pointerEvents: "auto",
      }}
    />
  );
}

```
--------------------------------------------------

### COMPONENT: cosmic-singularity
Category: Background
Description: An advanced interactive WebGL particle accretion disk background. Features a split particle population where background stars drift in full view and get dynamically pulled by gravity to circulate around the cursor's gravity well.
URL: https://lightswind.com/components/cosmic-singularity
Import: import CosmicSingularityBackground from "@/components/lightswind/cosmic-singularity"
Registry URL: https://lightswind.com/r/cosmic-singularity.json
Install Command: npx lightswind@latest add cosmic-singularity

Usage:
```tsx
import CosmicSingularityBackground from "@/components/lightswind/cosmic-singularity";

export default function Demo() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-zinc-950">
      <CosmicSingularityBackground
        particleCount={25000}
        colorInner="#ffd700"
        colorOuter="#7a00ff"
        speed={1.0}
        gravity={1.0}
        interactive={true}
        transparentBg={true}
      />
      <div className="relative z-10 flex h-full items-center justify-center pointer-events-none">
        <h1 className="text-4xl font-bold text-white font-mono">Cosmic Singularity</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { useInView } from "framer-motion";
import {
  BufferAttribute,
  BufferGeometry,
  Clock,
  OrthographicCamera,
  Points,
  Scene,
  ShaderMaterial,
  Vector2,
  Vector3,
  WebGLRenderer
} from "three";

interface CosmicSingularityProps {
  particleCount?: number;   // Total particles (accretion disk + background dust)
  colorInner?: string;      // Color near singularity core (hex)
  colorOuter?: string;      // Color at outer edges of disk (hex)
  speed?: number;           // Rotation speed multiplier
  gravity?: number;         // Base gravitational pull
  interactive?: boolean;    // Enable pointer tracking
  mouseDamping?: number;    // Movement transition smoothness
  transparentBg?: boolean;  // Draw transparent canvas background
  className?: string;
}

const vertexShader = `
precision highp float;

attribute float aRadius;
attribute float aAngle;
attribute float aSpeed;
attribute float aRandom;
attribute float aSize;
attribute vec2 aAmbientPos;
attribute float aType; // 1.0 = permanent accretion disk, 0.0 = background starfield

uniform float iTime;
uniform float uSpeed;
uniform float uGravity;
uniform vec2 uSingularity;
uniform vec2 uVelocity;
uniform float uHoverActive; // 1.0 = hovered, 0.0 = spread/idle

varying vec3 vColor;
varying float vAlpha;

uniform vec3 uColorInner;
uniform vec3 uColorOuter;

void main() {
  vec2 finalPos;
  float visualDist;
  float localInfluence = 0.0;

  if (aType > 0.5) {
    // 1. Permanent Accretion Disk Particle (spreads out by default, condenses on hover)
    float orbitalSpeed = aSpeed * uSpeed * (0.95 / sqrt(max(aRadius, 0.05)));
    float angle = aAngle + iTime * orbitalSpeed;
    
    // Gravity contraction
    float r = aRadius * (1.0 - uGravity * 0.12 / (aRadius + 0.15));
    float wobble = sin(iTime * 1.5 + aRandom * 6.28) * 0.02 * aRadius;
    
    vec2 relativePos = vec2(
      cos(angle) * (r + wobble),
      sin(angle) * (r + wobble)
    );
    
    vec2 targetOrbitPos = uSingularity + relativePos;
    
    // Spread default position (ambient position with slow drift)
    vec2 p_spread = aAmbientPos;
    p_spread.x += sin(iTime * 0.07 + aRandom * 6.28) * 0.05;
    p_spread.y += cos(iTime * 0.05 + aRandom * 6.28) * 0.05;
    
    // Blend based on global hover active uniform
    finalPos = mix(p_spread, targetOrbitPos, uHoverActive);
    visualDist = mix(length(p_spread - uSingularity), r, uHoverActive);
    localInfluence = uHoverActive;
  } else {
    // 2. Interactive Background Particle (spreads out, gets pulled by gravity when cursor is close)
    vec2 p_ambient = aAmbientPos;
    
    // Ambient slow drift
    p_ambient.x += sin(iTime * 0.08 + aRandom * 6.28) * 0.04;
    p_ambient.y += cos(iTime * 0.06 + aRandom * 6.28) * 0.04;
    
    // Vector to singularity
    vec2 toSingularity = uSingularity - p_ambient;
    float dist = length(toSingularity);
    
    // Gravity pull radius
    float gravityRadius = 0.85;
    float influence = smoothstep(gravityRadius, 0.15, dist) * uHoverActive;
    localInfluence = influence;
    
    // Spin orbital mapping
    float initialAngle = atan(toSingularity.y, toSingularity.x);
    float spinSpeed = uSpeed * aSpeed * (1.4 / sqrt(max(dist, 0.08)));
    float angle = initialAngle + iTime * spinSpeed * influence;
    
    // Pull inwards
    float r_orbit = dist * (1.0 - influence * 0.4);
    vec2 orbitPos = uSingularity + vec2(cos(angle), sin(angle)) * r_orbit;
    
    finalPos = mix(p_ambient, orbitPos, influence);
    visualDist = mix(dist, r_orbit, influence);
  }

  // Velocity stretch / drag opposite of singularity motion direction
  float drag = exp(-visualDist * 1.5);
  finalPos -= uVelocity * drag * 1.2;

  // Accretion disk thermal color shift
  float colorMix = clamp(visualDist / 1.15, 0.0, 1.0);
  vec3 finalColor = mix(uColorInner, uColorOuter, colorMix);
  
  // White-hot core glow near event horizon (only when inside gravity well)
  float centerGlow = exp(-visualDist * 5.0) * localInfluence;
  finalColor = mix(finalColor, vec3(1.0, 0.97, 0.90), centerGlow * 0.9);
  
  vColor = finalColor;

  // Transparency fade near event horizon and far edge limits
  float innerFade = (aType > 0.5) ? mix(1.0, smoothstep(0.04, 0.12, visualDist), uHoverActive) : 1.0;
  float outerFade = smoothstep(2.5, 1.2, visualDist);
  
  vAlpha = innerFade * outerFade * (0.28 + 0.72 * aRandom);

  // Particle glow size (pulsates over time)
  gl_PointSize = aSize * (1.0 + centerGlow * 2.2) * (0.75 + 0.25 * sin(iTime * 2.0 + aRandom * 12.0));
  
  gl_Position = projectionMatrix * modelViewMatrix * vec4(finalPos, 0.0, 1.0);
}
`;

const fragmentShader = `
precision highp float;

varying vec3 vColor;
varying float vAlpha;

void main() {
  // Soft Gaussian-like circular particle shading
  vec2 uv = gl_PointCoord - vec2(0.5);
  float dist = length(uv);
  
  if (dist > 0.5) {
    discard;
  }
  
  float intensity = smoothstep(0.5, 0.0, dist);
  gl_FragColor = vec4(vColor, vAlpha * intensity);
}
`;

const defaultColorInner = "#ffd700"; // Glowing gold core
const defaultColorOuter = "#7a00ff"; // Violet outer ring

function hexToVec3(hex: string): Vector3 {
  let value = hex.trim();
  if (value.startsWith("#")) {
    value = value.slice(1);
  }
  let r = 255;
  let g = 255;
  let b = 255;
  if (value.length === 3) {
    r = parseInt(value[0] + value[0], 16);
    g = parseInt(value[1] + value[1], 16);
    b = parseInt(value[2] + value[2], 16);
  } else if (value.length === 6) {
    r = parseInt(value.slice(0, 2), 16);
    g = parseInt(value.slice(2, 4), 16);
    b = parseInt(value.slice(4, 6), 16);
  }
  return new Vector3(r / 255, g / 255, b / 255);
}

export default function CosmicSingularityBackground({
  particleCount = 25000,
  colorInner = defaultColorInner,
  colorOuter = defaultColorOuter,
  speed = 1.0,
  gravity = 1.0,
  interactive = true,
  mouseDamping = 0.08,
  transparentBg = true,
  className = "",
}: CosmicSingularityProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(containerRef);

  const targetMouseRef = useRef<Vector2>(new Vector2(0, 0));
  const currentMouseRef = useRef<Vector2>(new Vector2(0, 0));
  const lastMouseRef = useRef<Vector2>(new Vector2(0, 0));
  
  const velocityRef = useRef<Vector2>(new Vector2(0, 0));
  const currentVelocityRef = useRef<Vector2>(new Vector2(0, 0));
  
  const targetGravityRef = useRef<number>(gravity);
  const currentGravityRef = useRef<number>(gravity);
  const currentHoverActiveRef = useRef<number>(0.0);
  const isHoveredRef = useRef<boolean>(false);

  useEffect(() => {
    targetGravityRef.current = gravity;
  }, [gravity]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let active = true;
    const scene = new Scene();

    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    camera.position.z = 1;

    const renderer = new WebGLRenderer({ antialias: true, alpha: transparentBg });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

    if (transparentBg) {
      renderer.setClearColor(0x000000, 0);
    }

    renderer.domElement.style.width = "100%";
    renderer.domElement.style.height = "100%";
    renderer.domElement.style.display = "block";
    container.appendChild(renderer.domElement);

    // Initialize particle data structures
    const count = particleCount;
    const geometry = new BufferGeometry();

    const positions = new Float32Array(count * 3);
    const aAmbientPos = new Float32Array(count * 2);
    const aType = new Float32Array(count); // 1.0 = accretion, 0.0 = background
    const aRadius = new Float32Array(count);
    const aAngle = new Float32Array(count);
    const aSpeed = new Float32Array(count);
    const aRandom = new Float32Array(count);
    const aSize = new Float32Array(count);

    for (let i = 0; i < count; i++) {
      // Split population: 35% dense permanent accretion disk, 65% background dust starfield
      const isAccretion = Math.random() < 0.35;
      const typeVal = isAccretion ? 1.0 : 0.0;
      aType[i] = typeVal;

      let x = 0;
      let y = 0;
      let r = 0;
      let angle = 0;

      if (isAccretion) {
        // Permanent Accretion disk: power distribution clustered near singularity center
        r = Math.pow(Math.random(), 1.6) * 0.9 + 0.05;
        angle = Math.random() * Math.PI * 2;
        x = Math.cos(angle) * r;
        y = Math.sin(angle) * r;
      } else {
        // Wide-spread background dust: covers the full screen boundaries
        x = (Math.random() - 0.5) * 6.0;
        y = (Math.random() - 0.5) * 4.0;
        r = Math.sqrt(x * x + y * y);
        angle = Math.atan2(y, x);
      }

      // Populate ambient positions
      const ambientX = (Math.random() - 0.5) * 6.0;
      const ambientY = (Math.random() - 0.5) * 4.0;

      positions[i * 3] = x;
      positions[i * 3 + 1] = y;
      positions[i * 3 + 2] = 0;

      aAmbientPos[i * 2] = isAccretion ? ambientX : x;
      aAmbientPos[i * 2 + 1] = isAccretion ? ambientY : y;
      
      aRadius[i] = r;
      aAngle[i] = angle;
      aSpeed[i] = 0.5 + Math.random() * 0.8;
      aRandom[i] = Math.random();
      aSize[i] = 1.0 + Math.random() * 3.5;
    }

    geometry.setAttribute("position", new BufferAttribute(positions, 3));
    geometry.setAttribute("aAmbientPos", new BufferAttribute(aAmbientPos, 2));
    geometry.setAttribute("aType", new BufferAttribute(aType, 1));
    geometry.setAttribute("aRadius", new BufferAttribute(aRadius, 1));
    geometry.setAttribute("aAngle", new BufferAttribute(aAngle, 1));
    geometry.setAttribute("aSpeed", new BufferAttribute(aSpeed, 1));
    geometry.setAttribute("aRandom", new BufferAttribute(aRandom, 1));
    geometry.setAttribute("aSize", new BufferAttribute(aSize, 1));

    const uniforms = {
      iTime: { value: 0 },
      uSpeed: { value: speed },
      uGravity: { value: gravity },
      uSingularity: { value: new Vector2(0, 0) },
      uVelocity: { value: new Vector2(0, 0) },
      uHoverActive: { value: 0.0 },
      uColorInner: { value: hexToVec3(colorInner) },
      uColorOuter: { value: hexToVec3(colorOuter) },
    };

    const material = new ShaderMaterial({
      uniforms,
      vertexShader,
      fragmentShader,
      transparent: transparentBg,
      depthWrite: false,
      depthTest: false,
    });

    const points = new Points(geometry, material);
    scene.add(points);

    const clock = new Clock();

    const setSize = () => {
      if (!active) return;
      const width = container.clientWidth || 1;
      const height = container.clientHeight || 1;
      const aspect = width / height;

      renderer.setSize(width, height, false);
      
      // Dynamic camera updates to maintain circular shapes on aspect resize
      camera.left = -aspect;
      camera.right = aspect;
      camera.top = 1;
      camera.bottom = -1;
      camera.updateProjectionMatrix();
    };

    setSize();

    const resizeObserver = new ResizeObserver(() => {
      if (active) setSize();
    });
    resizeObserver.observe(container);

    const handlePointerMove = (event: PointerEvent) => {
      const rect = renderer.domElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const aspect = rect.width / rect.height;

      // Map canvas pixels to normalized orthographic camera coordinates
      const mouseX = (x / rect.width) * 2 * aspect - aspect;
      const mouseY = -(y / rect.height) * 2 + 1;

      targetMouseRef.current.set(mouseX, mouseY);
      isHoveredRef.current = true;
    };

    const handlePointerLeave = () => {
      isHoveredRef.current = false;
    };

    const handlePointerDown = () => {
      targetGravityRef.current = gravity * 2.5; // Strong gravity distortion on press
    };

    const handlePointerUp = () => {
      targetGravityRef.current = gravity;
    };

    if (interactive) {
      container.addEventListener("pointermove", handlePointerMove);
      container.addEventListener("pointerleave", handlePointerLeave);
      container.addEventListener("pointerdown", handlePointerDown);
      container.addEventListener("pointerup", handlePointerUp);
    }

    let rafId = 0;
    const renderLoop = () => {
      if (!active) return;

      if (isInView) {
        const time = clock.getElapsedTime();
        uniforms.iTime.value = time;

        let targetX = 0;
        let targetY = 0;

        if (interactive && isHoveredRef.current) {
          targetX = targetMouseRef.current.x;
          targetY = targetMouseRef.current.y;
        } else {
          // Centered wandering motion when not interacting
          const wanderTime = time * 0.45;
          targetX = Math.sin(wanderTime) * 0.16;
          targetY = Math.cos(wanderTime * 2.0) * 0.08;
        }

        // Interpolate coordinates
        currentMouseRef.current.x += (targetX - currentMouseRef.current.x) * mouseDamping;
        currentMouseRef.current.y += (targetY - currentMouseRef.current.y) * mouseDamping;
        uniforms.uSingularity.value.copy(currentMouseRef.current);

        // Interpolate hover active state
        const targetHoverActive = isHoveredRef.current ? 1.0 : 0.0;
        currentHoverActiveRef.current += (targetHoverActive - currentHoverActiveRef.current) * 0.05;
        uniforms.uHoverActive.value = currentHoverActiveRef.current;

        // Calculate singularity movement velocity
        const vx = currentMouseRef.current.x - lastMouseRef.current.x;
        const vy = currentMouseRef.current.y - lastMouseRef.current.y;
        lastMouseRef.current.copy(currentMouseRef.current);

        velocityRef.current.set(vx, vy);
        currentVelocityRef.current.lerp(velocityRef.current, 0.12);
        uniforms.uVelocity.value.copy(currentVelocityRef.current);

        // Interpolate gravity
        currentGravityRef.current += (targetGravityRef.current - currentGravityRef.current) * 0.1;
        uniforms.uGravity.value = currentGravityRef.current;

        renderer.render(scene, camera);
      }

      rafId = requestAnimationFrame(renderLoop);
    };

    renderLoop();

    return () => {
      active = false;
      cancelAnimationFrame(rafId);
      resizeObserver.disconnect();

      if (interactive) {
        container.removeEventListener("pointermove", handlePointerMove);
        container.removeEventListener("pointerleave", handlePointerLeave);
        container.removeEventListener("pointerdown", handlePointerDown);
        container.removeEventListener("pointerup", handlePointerUp);
      }

      geometry.dispose();
      material.dispose();
      renderer.dispose();
      renderer.forceContextLoss();

      if (renderer.domElement.parentElement) {
        renderer.domElement.parentElement.removeChild(renderer.domElement);
      }
    };
  }, [
    particleCount,
    colorInner,
    colorOuter,
    speed,
    gravity,
    interactive,
    mouseDamping,
    transparentBg,
    isInView,
  ]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full overflow-hidden ${className}`}
      style={{
        mixBlendMode: "normal",
        pointerEvents: "auto",
      }}
    />
  );
}

```
--------------------------------------------------

### COMPONENT: holographic-wave
Category: Background
Description: A premium WebGL-based holographic/iridescent wave shader background component. It renders flowing fluid wave ribbons with organic metallic light reflections that smoothly respond to mouse cursor coordinates. The component features automatic light and dark mode styling adjustments.
URL: https://lightswind.com/components/holographic-wave
Import: import HolographicWave from "@/components/lightswind/holographic-wave"
Registry URL: https://lightswind.com/r/holographic-wave.json
Install Command: npx lightswind@latest add holographic-wave

Usage:
```tsx
import HolographicWave from "@/components/lightswind/holographic-wave";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative">
      <HolographicWave speed={1.0} frequency={1.0} intensity={0.9} theme="system" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { Renderer, Program, Mesh, Triangle } from "ogl";

interface HolographicWaveProps {
  speed?: number;
  frequency?: number;
  intensity?: number;
  theme?: "light" | "dark" | "system";
}

const VERTEX_SHADER = `#version 300 es
in vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}`;

const FRAGMENT_SHADER = `#version 300 es
precision highp float;
out vec4 fragColor;

uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;
uniform float uSpeed;
uniform float uFrequency;
uniform float uIntensity;
uniform float uDarkTheme;

vec3 getRainbowColor(float t) {
  vec3 a = vec3(0.5, 0.5, 0.5);
  vec3 b = vec3(0.5, 0.5, 0.5);
  vec3 c = vec3(1.0, 1.0, 1.0);
  vec3 d = vec3(0.00, 0.33, 0.67);
  return a + b * cos(6.28318530718 * (c * t + d));
}

mat2 rotate2D(float angle) {
  float c = cos(angle);
  float s = sin(angle);
  return mat2(c, -s, s, c);
}

void main() {
  vec2 uv = gl_FragCoord.xy / uResolution.xy;
  vec2 m = uMouse / uResolution.xy;
  
  vec2 p = uv - 0.5;
  p.x *= uResolution.x / uResolution.y;
  
  vec2 mCorrected = m - 0.5;
  mCorrected.x *= uResolution.x / uResolution.y;
  
  float distToMouse = length(p - mCorrected);
  float t = uTime * uSpeed;
  
  // High-end fluid ripple displacement based on mouse distance
  float influence = smoothstep(0.6, 0.0, distToMouse);
  p += normalize(p - mCorrected + 0.001) * influence * 0.12 * sin(distToMouse * 10.0 - t * 3.0);
  
  for (float i = 1.0; i < 4.0; i++) {
    p.xy += sin(p.yx * 2.0 * uFrequency + t * i * 0.5) * 0.15;
    p = rotate2D(0.2) * p;
  }
  
  float wave1 = sin(p.x * 2.0 * uFrequency + t) * 0.5;
  float wave2 = cos(p.y * 3.0 * uFrequency - t * 0.8) * 0.3;
  
  float dist = length(p + vec2(wave1, wave2));
  vec3 col = getRainbowColor(dist * 0.5 - t * 0.1);
  
  float edge = 0.35 + sin(t * 0.3) * 0.1;
  float intensity = smoothstep(edge, 0.0, dist);
  
  vec3 finalCol = col;
  float alpha = intensity * uIntensity;
  
  // Boost transparency near mouse to highlight interaction
  alpha *= (1.0 + 0.15 * influence);
  
  if (uDarkTheme < 0.5) {
    finalCol = mix(finalCol, vec3(1.0), 0.2);
    alpha = clamp(alpha * 0.5, 0.0, 0.6);
  } else {
    finalCol = finalCol * 1.3;
    alpha = clamp(alpha * 0.85, 0.0, 0.95);
  }
  
  fragColor = vec4(finalCol * alpha, alpha);
}`;

export default function HolographicWave({
  speed = 1.0,
  frequency = 1.0,
  intensity = 1.0,
  theme = "system",
}: HolographicWaveProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mouseRef = useRef({ x: 0, y: 0 });
  const [darkThemeVal, setDarkThemeVal] = useState(1.0);

  useEffect(() => {
    // Check initial theme class
    const checkTheme = () => {
      if (theme === "system") {
        const isDark = document.documentElement.classList.contains("dark");
        setDarkThemeVal(isDark ? 1.0 : 0.0);
      } else {
        setDarkThemeVal(theme === "dark" ? 1.0 : 0.0);
      }
    };

    checkTheme();

    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const renderer = new Renderer({ alpha: true, antialias: true });
    const gl = renderer.gl;
    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    const geometry = new Triangle(gl);
    if (geometry.attributes.uv) delete geometry.attributes.uv;

    const program = new Program(gl, {
      vertex: VERTEX_SHADER,
      fragment: FRAGMENT_SHADER,
      uniforms: {
        uTime: { value: 0 },
        uSpeed: { value: speed },
        uFrequency: { value: frequency },
        uIntensity: { value: intensity },
        uDarkTheme: { value: darkThemeVal },
        uResolution: { value: [container.offsetWidth, container.offsetHeight] },
        uMouse: { value: [0, 0] },
      },
    });

    const mesh = new Mesh(gl, { geometry, program });
    container.appendChild(gl.canvas);

    const resize = () => {
      const width = container.offsetWidth;
      const height = container.offsetHeight;
      renderer.setSize(width, height);
      program.uniforms.uResolution.value = [width, height];
    };
    window.addEventListener("resize", resize);
    resize();

    const targetMouse = { x: 0, y: 0 };
    let hasMoved = false;

    const onMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      targetMouse.x = e.clientX - rect.left;
      targetMouse.y = rect.bottom - e.clientY;
      hasMoved = true;
    };
    window.addEventListener("mousemove", onMouseMove);

    let animationId: number;

    const animate = (t: number) => {
      animationId = requestAnimationFrame(animate);

      if (!hasMoved) {
        const cx = container.offsetWidth / 2;
        const cy = container.offsetHeight / 2;
        const radius = Math.min(container.offsetWidth, container.offsetHeight) * 0.15;
        targetMouse.x = cx + Math.cos(t * 0.001) * radius;
        targetMouse.y = cy + Math.sin(t * 0.001) * radius;
      }

      mouseRef.current.x += (targetMouse.x - mouseRef.current.x) * 0.05;
      mouseRef.current.y += (targetMouse.y - mouseRef.current.y) * 0.05;

      program.uniforms.uTime.value = t * 0.001;
      program.uniforms.uSpeed.value = speed;
      program.uniforms.uFrequency.value = frequency;
      program.uniforms.uIntensity.value = intensity;
      program.uniforms.uDarkTheme.value = darkThemeVal;
      program.uniforms.uMouse.value = [mouseRef.current.x, mouseRef.current.y];

      renderer.render({ scene: mesh });
    };
    animationId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener("resize", resize);
      window.removeEventListener("mousemove", onMouseMove);
      if (gl.canvas.parentNode === container) container.removeChild(gl.canvas);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [speed, frequency, intensity, darkThemeVal]);

  return <div ref={containerRef} className="w-full h-full absolute inset-0 -z-10 pointer-events-none" />;
}

```
--------------------------------------------------

### COMPONENT: cosmic-dust
Category: Background
Description: An advanced, neat, and highly interactive floating stardust particle background component built on HTML5 2D Canvas. It renders hundreds of microscopic dust grains with fading trailing lines. The dust is affected by gentle vector wind fields and swirls dynamically in a vortex around the cursor. It automatically adapts color palettes, opacity levels, and particle glows between light and dark themes.
URL: https://lightswind.com/components/cosmic-dust
Import: import CosmicDust from "@/components/lightswind/cosmic-dust"
Registry URL: https://lightswind.com/r/cosmic-dust.json
Install Command: npx lightswind@latest add cosmic-dust

Usage:
```tsx
import CosmicDust from "@/components/lightswind/cosmic-dust";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative overflow-hidden bg-background">
      <CosmicDust particleCount={150} speedMultiplier={1.0} particleSize={1.5} theme="system" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";

interface CosmicDustProps {
  particleCount?: number;
  speedMultiplier?: number;
  particleSize?: number;
  theme?: "light" | "dark" | "system";
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  size: number;
  color: string;
  opacity: number;
  history: { x: number; y: number }[];
}

export default function CosmicDust({
  particleCount = 120,
  speedMultiplier = 1.0,
  particleSize = 1.5,
  theme = "system",
}: CosmicDustProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const mouseRef = useRef({ x: 0, y: 0, targetX: 0, targetY: 0, hasMoved: false });
  const [isDarkMode, setIsDarkMode] = useState(true);

  // Theme detection mutation observer
  useEffect(() => {
    const checkTheme = () => {
      if (theme === "system") {
        setIsDarkMode(document.documentElement.classList.contains("dark"));
      } else {
        setIsDarkMode(theme === "dark");
      }
    };

    checkTheme();

    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationId: number;
    let width = (canvas.width = canvas.offsetWidth);
    let height = (canvas.height = canvas.offsetHeight);

    // Initialize default mouse position to center
    mouseRef.current.targetX = width / 2;
    mouseRef.current.targetY = height / 2;

    const colorsDark = [
      "rgba(34, 211, 238,", // cyan
      "rgba(168, 85, 247,", // purple
      "rgba(236, 72, 153,", // pink
      "rgba(234, 179, 8,",  // gold
    ];

    const colorsLight = [
      "rgba(99, 102, 241,", // indigo
      "rgba(139, 92, 246,", // violet
      "rgba(244, 63, 94,",  // rose
      "rgba(16, 185, 129,", // emerald
    ];

    // Helper to create a single particle
    const createParticle = (initRandom = false): Particle => {
      const pX = initRandom ? Math.random() * width : Math.random() * width;
      const pY = initRandom ? Math.random() * height : height + 10;
      
      const pColorSet = isDarkMode ? colorsDark : colorsLight;
      const baseColor = pColorSet[Math.floor(Math.random() * pColorSet.length)];

      return {
        x: pX,
        y: pY,
        vx: (Math.random() - 0.5) * 1.2 * speedMultiplier,
        vy: (-Math.random() - 0.2) * 1.5 * speedMultiplier,
        size: (Math.random() * 0.8 + 0.6) * particleSize,
        color: baseColor,
        opacity: Math.random() * 0.4 + 0.4,
        history: [],
      };
    };

    let particles: Particle[] = Array.from({ length: particleCount }, () => createParticle(true));

    // Handle resize
    const handleResize = () => {
      if (!canvas) return;
      width = canvas.width = canvas.offsetWidth;
      height = canvas.height = canvas.offsetHeight;
    };
    window.addEventListener("resize", handleResize);

    // Track mouse
    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      mouseRef.current.targetX = e.clientX - rect.left;
      mouseRef.current.targetY = e.clientY - rect.top;
      mouseRef.current.hasMoved = true;
    };
    window.addEventListener("mousemove", handleMouseMove);

    // Frame Loop
    const animate = (t: number) => {
      animationId = requestAnimationFrame(animate);

      // Clear canvas (fully transparent)
      ctx.clearRect(0, 0, width, height);

      // Interpolate mouse coordinates
      if (!mouseRef.current.hasMoved) {
        // Idle animation: soft circle orbit in the center
        const cx = width / 2;
        const cy = height / 2;
        const radius = Math.min(width, height) * 0.15;
        mouseRef.current.targetX = cx + Math.cos(t * 0.001) * radius;
        mouseRef.current.targetY = cy + Math.sin(t * 0.001) * radius;
      }

      mouseRef.current.x += (mouseRef.current.targetX - mouseRef.current.x) * 0.08;
      mouseRef.current.y += (mouseRef.current.targetY - mouseRef.current.y) * 0.08;

      const mX = mouseRef.current.x;
      const mY = mouseRef.current.y;

      particles.forEach((p, index) => {
        // Natural drift
        p.vx += Math.sin(t * 0.002 + index) * 0.02 * speedMultiplier;

        // Interaction Vortex/Gravity Field
        const dx = mX - p.x;
        const dY = mY - p.y;
        const dist = Math.sqrt(dx * dx + dY * dY);
        const influenceRadius = 180;

        if (dist < influenceRadius) {
          const force = (1.0 - dist / influenceRadius) * 0.8 * speedMultiplier;
          
          // Pull force towards mouse
          p.vx += (dx / dist) * force * 0.04;
          p.vy += (dY / dist) * force * 0.04;

          // Tangential Vortex swirl force
          const swirlAngle = 0.5 * Math.PI; // Tangent direction
          const tx = -dY / dist;
          const ty = dx / dist;
          
          p.vx += tx * force * 0.18;
          p.vy += ty * force * 0.18;
        }

        // Apply friction/drag
        p.vx *= 0.96;
        p.vy *= 0.96;

        // Apply velocities
        p.x += p.vx;
        p.y += p.vy;

        // Store trail history
        p.history.push({ x: p.x, y: p.y });
        if (p.history.length > 6) {
          p.history.shift();
        }

        // Check bounds (reset if offscreen)
        if (p.y < -10 || p.x < -10 || p.x > width + 10) {
          particles[index] = createParticle(false);
          return;
        }

        // Draw particle trail
        if (p.history.length > 1) {
          ctx.beginPath();
          ctx.moveTo(p.history[0].x, p.history[0].y);
          for (let i = 1; i < p.history.length; i++) {
            ctx.lineTo(p.history[i].x, p.history[i].y);
          }
          
          ctx.strokeStyle = `${p.color}${p.opacity * 0.35})`;
          ctx.lineWidth = p.size * 0.6;
          ctx.lineCap = "round";
          ctx.stroke();
        }

        // Draw particle core
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        
        if (isDarkMode) {
          ctx.shadowBlur = 5;
          ctx.shadowColor = `${p.color}0.8)`;
        } else {
          ctx.shadowBlur = 0;
        }

        ctx.fillStyle = `${p.color}${p.opacity})`;
        ctx.fill();
        ctx.shadowBlur = 0; // reset shadow for performance
      });
    };

    animationId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener("resize", handleResize);
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, [particleCount, speedMultiplier, particleSize, isDarkMode]);

  return <canvas ref={canvasRef} className="w-full h-full absolute inset-0 -z-10 pointer-events-none" />;
}

```
--------------------------------------------------

### COMPONENT: wavy-ripple-background
Category: Background
Description: An interactive WebGL shader background featuring concentric waving ripple rings that expand and fade. Responds smoothly to mouse movements and supports full theme customizability.
URL: https://lightswind.com/components/wavy-ripple-background
Import: import WavyRippleBackground from "@/components/lightswind/wavy-ripple-background";
Registry URL: https://lightswind.com/r/wavy-ripple-background.json
Install Command: npx lightswind@latest add wavy-ripple-background

Usage:
```tsx
import WavyRippleBackground from "@/components/lightswind/wavy-ripple-background";

export function Demo() {
  return (
    <div className="relative w-full h-[500px]">
      <WavyRippleBackground waveColor="#3b82f6" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useEffect, useRef } from "react";
import { Renderer, Program, Mesh, Color, Triangle } from "ogl";

interface WavyRippleBackgroundProps {
  className?: string;
  /** Primary wave color in CSS format (hex, rgb, etc.) */
  waveColor?: string;
  /** Background color of the container */
  backgroundColor?: string;
  /** Animation speed multiplier (default: 1.2) */
  speed?: number;
  /** Wave ripple frequency (default: 3.5) */
  frequency?: number;
  /** Thickness scaling/sharpness of the rings (default: 3.5) */
  ringSharpness?: number;
  /** Maximum opacity of the waves (default: 0.45) */
  maxOpacity?: number;
}

const VERTEX_SHADER = `#version 300 es
in vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}`;

const FRAGMENT_SHADER = `#version 300 es
precision highp float;

uniform float uTime;
uniform vec2 uResolution;
uniform vec3 uWaveColor;
uniform float uSpeed;
uniform float uFrequency;
uniform float uScale;
uniform float uMaxOpacity;

out vec4 fragColor;

void main() {
  vec2 uv = gl_FragCoord.xy / uResolution;
  
  // Center is locked to bottom-middle
  vec2 center = vec2(0.5, 0.0);
  
  // Apply aspect ratio correction for perfect concentric circular arcs
  float aspect = uResolution.x / uResolution.y;
  vec2 dir = uv - center;
  dir.x *= aspect;
  float dist = length(dir);
  
  // Concentric wave angle
  float angle = dist * uFrequency - uTime * uSpeed;
  float wave = sin(angle);
  float cosWave = cos(angle);
  
  // Map sin wave from [-1, 1] to [0, 1]
  float normWave = wave * 0.5 + 0.5;
  
  // Shape the wave to be thick and pillowy (wide peaks, thin valleys)
  float ringIntensity = pow(normWave, uScale);
  
  // High-fidelity 3D shading:
  // Compute height derivative (slope)
  float dH = uFrequency * cosWave * uScale * pow(normWave, max(0.01, uScale - 1.0)) * 0.5;
  
  // Radial normal mapping
  vec2 normal2D = normalize(dir) * dH;
  vec3 normal = normalize(vec3(normal2D.x, normal2D.y, 1.0));
  
  // Light from top-front
  vec3 lightDir = normalize(vec3(0.0, 1.0, 0.8));
  
  // Diffuse illumination
  float diffuse = max(0.0, dot(normal, lightDir));
  
  // Specular highlight for a glossy, premium plastic/glass finish
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  vec3 halfDir = normalize(lightDir + viewDir);
  float specular = pow(max(0.0, dot(normal, halfDir)), 24.0) * 0.3;
  
  // Combine wave color with 3D highlights and shadows
  vec3 litColor = uWaveColor * (0.35 + 0.65 * diffuse) + vec3(1.0) * specular;
  
  // Concentric half-ripple fade:
  // Fade out as it expands higher up the screen (uv.y: 0.0 -> 1.0) and further radially
  float distFade = smoothstep(0.85, 0.15, dist);
  float heightFade = smoothstep(0.85, 0.15, uv.y);
  
  float alpha = ringIntensity * distFade * heightFade * uMaxOpacity;
  
  fragColor = vec4(litColor, alpha);
}`;

export default function WavyRippleBackground({
  className = "",
  waveColor = "#3b82f6",
  backgroundColor = "transparent",
  speed = 0.8,
  frequency = 3.5, // adjusted to show exactly 4 concentric dome levels
  ringSharpness = 0.55, // lowered to make waves thick and cylindrical
  maxOpacity = 0.65,
}: WavyRippleBackgroundProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Create OGL context
    const renderer = new Renderer({ alpha: true, antialias: true });
    const gl = renderer.gl;
    
    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    // Dynamic full viewport geometry
    const geometry = new Triangle(gl);
    if (geometry.attributes.uv) delete geometry.attributes.uv;

    // Create shader program
    const program = new Program(gl, {
      vertex: VERTEX_SHADER,
      fragment: FRAGMENT_SHADER,
      uniforms: {
        uTime: { value: 0 },
        uResolution: { value: [container.offsetWidth, container.offsetHeight] },
        uWaveColor: {
          value: (() => {
            const c = new Color(waveColor);
            return [c.r, c.g, c.b];
          })(),
        },
        uSpeed: { value: speed },
        uFrequency: { value: frequency },
        uScale: { value: ringSharpness },
        uMaxOpacity: { value: maxOpacity },
      },
    });

    const mesh = new Mesh(gl, { geometry, program });
    container.appendChild(gl.canvas);

    // Handle resizing
    const resize = () => {
      const w = container.offsetWidth;
      const h = container.offsetHeight;
      renderer.setSize(w, h);
      program.uniforms.uResolution.value = [w, h];
    };
    window.addEventListener("resize", resize);
    resize();

    let animationId: number;
    const animate = (time: number) => {
      animationId = requestAnimationFrame(animate);

      program.uniforms.uTime.value = time * 0.001;
      program.uniforms.uWaveColor.value = (() => {
        const c = new Color(waveColor);
        return [c.r, c.g, c.b];
      })();
      program.uniforms.uSpeed.value = speed;
      program.uniforms.uFrequency.value = frequency;
      program.uniforms.uScale.value = ringSharpness;
      program.uniforms.uMaxOpacity.value = maxOpacity;

      renderer.render({ scene: mesh });
    };
    animate(0);

    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener("resize", resize);
      if (gl.canvas.parentNode === container) {
        container.removeChild(gl.canvas);
      }
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [waveColor, speed, frequency, ringSharpness, maxOpacity]);

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 w-full h-full z-0 overflow-hidden ${className}`}
      style={{ backgroundColor }}
    />
  );
}

```
--------------------------------------------------

## CATEGORY (FREE): Button (12)

### COMPONENT: border-beam
Category: Button
Description: A customizable animated border beam that moves around an element's border with gradient effects.
URL: https://lightswind.com/components/border-beam
Import: import { BorderBeam } from "@/components/lightswind/border-beam"
Registry URL: https://lightswind.com/r/border-beam.json
Install Command: npx lightswind@latest add border-beam

Usage:
```tsx
import { BorderBeam } from "@/components/lightswind/border-beam";

export default function BorderBeamDemo() {
  return (
    <div className="relative p-1 rounded-lg overflow-hidden">
      <BorderBeam 
        colorFrom="#7400ff" 
        colorTo="#9b41ff" 
        size={50}
        duration={6}
        borderThickness={2}
        glowIntensity={3}
      />
      <div className="relative bg-card p-4 rounded-md z-10">
        Content with animated border
      </div>
    </div>
  );
}
```

Source Code:
```tsx

"use client";

import React from "react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";

interface BorderBeamProps {
  /**
   * The size of the border beam.
   */
  size?: number;
  /**
   * The duration of the border beam.
   */
  duration?: number;
  /**
   * The delay of the border beam.
   */
  delay?: number;
  /**
   * The color of the border beam from.
   */
  colorFrom?: string;
  /**
   * The color of the border beam to.
   */
  colorTo?: string;
  /**
   * The motion transition of the border beam.
   */
  transition?: any;
  /**
   * The class name of the border beam.
   */
  className?: string;
  /**
   * The style of the border beam.
   */
  style?: React.CSSProperties;
  /**
   * Whether to reverse the animation direction.
   */
  reverse?: boolean;
  /**
   * The initial offset position (0-100).
   */
  initialOffset?: number;
  /**
   * The thickness of the border.
   */
  borderThickness?: number;
  /**
   * The opacity of the beam.
   */
  opacity?: number;
  /**
   * The intensity of the glow effect.
   */
  glowIntensity?: number;
  /**
   * Border radius of the beam in pixels.
   */
  beamBorderRadius?: number;
  /**
   * Whether to pause animation on hover.
   */
  pauseOnHover?: boolean;
  /**
   * Animation speed multiplier (higher is faster).
   */
  speedMultiplier?: number;
}

export const BorderBeam = ({
  className,
  size = 50,
  delay = 0,
  duration = 6,
  colorFrom = "#7400ff",
  colorTo = "#9b41ff",
  transition,
  style,
  reverse = false,
  initialOffset = 0,
  borderThickness = 1,
  opacity = 1,
  glowIntensity = 0,
  beamBorderRadius,
  pauseOnHover = false,
  speedMultiplier = 1,
}: BorderBeamProps) => {
  // Calculate actual duration based on speed multiplier
  const actualDuration = speedMultiplier ? duration / speedMultiplier : duration;
  
  // Generate box shadow for glow effect
  const glowEffect = glowIntensity > 0 
    ? `0 0 ${glowIntensity * 5}px ${glowIntensity * 2}px var(--color-from)` 
    : undefined;

  return (
 <div className="pointer-events-none absolute inset-0 rounded-[inherit] 
    border border-transparent [mask-clip:padding-box,border-box] 
    [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]"
 
      // style={{ 
      //   borderWidth: `${borderThickness}px`,
      // }}
    >
      <motion.div
        className={cn(
          "absolute aspect-square",
          "bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
          pauseOnHover && "group-hover:animation-play-state-paused",
          className,
        )}
        style={{
          width: size,
          offsetPath: `rect(0 auto auto 0 round ${beamBorderRadius ?? size}px)`,
          "--color-from": colorFrom,
          "--color-to": colorTo,
          opacity: opacity,
          boxShadow: glowEffect,
          borderRadius: beamBorderRadius ? `${beamBorderRadius}px` : undefined,
          ...style,
        } as any}
        initial={{ offsetDistance: `${initialOffset}%` }}
        animate={{
          offsetDistance: reverse
            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]
            : [`${initialOffset}%`, `${100 + initialOffset}%`],
        }}
        transition={{
          repeat: Infinity,
          ease: "linear",
          duration: actualDuration,
          delay: -delay,
          ...transition,
        }}
      />
    </div>
  );
};

```
--------------------------------------------------

### COMPONENT: confetti-button
Category: Button
Description: An interactive button that triggers a confetti animation effect when clicked or hovered.
URL: https://lightswind.com/components/confetti-button
Import: import { ConfettiButton } from "@/components/lightswind/confetti-button";
Registry URL: https://lightswind.com/r/confetti-button.json
Install Command: npx lightswind@latest add confetti-button

Usage:
```tsx
import { ConfettiButton } from "@/components/lightswind/confetti-button";
import { Sparkles } from "lucide-react";

export function ConfettiButtonDemo() {
  return (
    <ConfettiButton
      icon={<Sparkles className="h-4 w-4" />}
      confettiOptions={{
        particleCount: 100,
        spread: 70
      }}
    >
      Click for Confetti
    </ConfettiButton>
  );
}
```

Source Code:
```tsx
import React, { useEffect, useState, useRef } from "react";
import { cn } from "@/components/lib/utils";
import { Loader2 } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

// Confetti type
type ConfettiOptions = {
  particleCount?: number;
  spread?: number;
  startVelocity?: number;
  decay?: number;
  gravity?: number;
  drift?: number;
  ticks?: number;
  origin?: {
    x?: number;
    y?: number;
  };
  colors?: string[];
  shapes?: string[];
  scalar?: number;
  zIndex?: number;
  disableForReducedMotion?: boolean;
};

// Global declaration
declare global {
  interface Window {
    confetti?: (options?: ConfettiOptions) => void;
  }
}

// Variants for button styling
const confettiButtonVariants = cva(
  "inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
        outline: "border bg-background hover:bg-accent hover:text-accent-foreground",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        gradient: "bg-gradient-to-r from-primarylw to-purple-600 text-white hover:from-primarylw hover:to-purple-700",
      },
      size: {
        default: "h-10 px-4 py-2 rounded-md",
        sm: "h-8 px-3 py-1 rounded-md text-sm",
        lg: "h-12 px-6 py-3 rounded-md text-lg",
        xl: "h-14 px-8 py-4 rounded-md text-xl",
        icon: "h-10 w-10 rounded-full",
        pill: "h-10 px-6 py-2 rounded-full",
      },
      animation: {
        none: "",
        pulse: "animate-pulse",
        bounce: "hover:animate-bounce",
        scale: "active:scale-95",
        shake: "hover:animate-[wiggle_0.3s_ease-in-out]",
        glow: "hover:shadow-[0_0_15px_rgba(255,255,255,0.5)]",
        expand: "active:scale-110 transition-transform",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      animation: "scale",
    },
  }
);

export interface ConfettiButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof confettiButtonVariants> {
  asChild?: boolean;
  icon?: React.ReactNode;
  iconPosition?: "left" | "right";
  loading?: boolean;
  confettiOptions?: ConfettiOptions;
  autoConfetti?: boolean;
  triggerOnHover?: boolean;
}

const ConfettiButton = React.forwardRef<HTMLButtonElement, ConfettiButtonProps>(
  (
    {
      className,
      variant,
      size,
      animation,
      asChild = false,
      children,
      icon,
      iconPosition = "left",
      loading = false,
      confettiOptions = {
        particleCount: 100,
        spread: 70,
      },
      autoConfetti = false,
      triggerOnHover = false,
      ...props
    },
    ref
  ) => {
    const [scriptLoaded, setScriptLoaded] = useState(false);
    const buttonRef = useRef<HTMLButtonElement | null>(null);

    // Load confetti script dynamically
    useEffect(() => {
      if (window.confetti) {
        setScriptLoaded(true);
        return;
      }

      const existingScript = document.querySelector(
        'script[src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"]'
      ) as HTMLScriptElement;

      if (existingScript) {
        const handleLoad = () => setScriptLoaded(true);
        existingScript.addEventListener("load", handleLoad);
        if (window.confetti) {
          setScriptLoaded(true);
        }
        return () => {
          existingScript.removeEventListener("load", handleLoad);
        };
      }

      const script = document.createElement("script");
      script.src =
        "https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js";
      script.async = true;
      script.onload = () => setScriptLoaded(true);
      document.body.appendChild(script);
    }, []);

    // Auto confetti on mount if needed
    useEffect(() => {
      if ((scriptLoaded || window.confetti) && autoConfetti && buttonRef.current) {
        const rect = buttonRef.current.getBoundingClientRect();
        const x = (rect.left + rect.width / 2) / window.innerWidth;
        const y = (rect.top + rect.height / 2) / window.innerHeight;

        const confettiFn = window.confetti;
        if (confettiFn) {
          confettiFn({
            ...confettiOptions,
            origin: { x, y },
          });
        }
      }
    }, [scriptLoaded, autoConfetti, confettiOptions]);

    const triggerConfetti = () => {
      const confettiFn = window.confetti;
      if (confettiFn && buttonRef.current) {
        const rect = buttonRef.current.getBoundingClientRect();
        const x = (rect.left + rect.width / 2) / window.innerWidth;
        const y = (rect.top + rect.height / 2) / window.innerHeight;

        confettiFn({
          ...confettiOptions,
          origin: { x, y },
        });
      }
    };

    return (
      <button
        ref={(node) => {
          if (typeof ref === "function") ref(node);
          else if (ref) ref.current = node;
          buttonRef.current = node;
        }}
        className={cn(confettiButtonVariants({ variant, size, animation }), className)}
        onClick={(e) => {
          triggerConfetti();
          props.onClick?.(e);
        }}
        onMouseEnter={triggerOnHover ? () => triggerConfetti() : undefined}
        disabled={loading || props.disabled}
        {...props}
      >
        {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
        {!loading && icon && iconPosition === "left" && (
          <span className="mr-1">{icon}</span>
        )}
        {children}
        {!loading && icon && iconPosition === "right" && (
          <span className="ml-1">{icon}</span>
        )}
      </button>
    );
  }
);

ConfettiButton.displayName = "ConfettiButton";

export { ConfettiButton, confettiButtonVariants };

```
--------------------------------------------------

### COMPONENT: fluid-button
Category: Button
Description: An advanced, premium button component featuring magnetic cursor-attraction dynamics and a fluid, gooey SVG liquid blob backdrop. The button moves organically towards the cursor within range, and morphs its internal gradient liquid drops dynamically based on hover status. Includes full light and dark mode styling adaptability.
URL: https://lightswind.com/components/fluid-button
Import: import FluidButton from "@/components/lightswind/fluid-button"
Registry URL: https://lightswind.com/r/fluid-button.json
Install Command: npx lightswind@latest add fluid-button

Usage:
```tsx
import FluidButton from "@/components/lightswind/fluid-button";
import { Magnet } from "lucide-react";

export function Demo() {
  return (
    <FluidButton variant="primary" size="md">
      <Magnet className="w-4 h-4" />
      <span>Attract Core</span>
    </FluidButton>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useState, useEffect } from "react";

export interface FluidButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "primary" | "aurora" | "emerald" | "obsidian";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  magneticRange?: number; // Distance in px to trigger magnetic pull
  pullStrength?: number; // Multiplier (0.1 to 0.8)
  theme?: "light" | "dark" | "system";
}

export function FluidButton({
  children,
  variant = "primary",
  size = "md",
  className = "",
  magneticRange = 90,
  pullStrength = 0.45,
  theme = "system",
  ...props
}: FluidButtonProps) {
  const triggerRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [filterId, setFilterId] = useState("gooey-filter-id");

  // Create unique filter ID on mount to prevent SVG collisions
  useEffect(() => {
    setFilterId(`gooey-${Math.random().toString(36).substr(2, 9)}`);
  }, []);

  // Theme tracking
  useEffect(() => {
    const checkTheme = () => {
      if (theme === "system") {
        setIsDarkMode(document.documentElement.classList.contains("dark"));
      } else {
        setIsDarkMode(theme === "dark");
      }
    };
    checkTheme();
    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  // Magnetic tracking logic
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      const trigger = triggerRef.current;
      if (!trigger) return;

      const rect = trigger.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      const dx = e.clientX - centerX;
      const dy = e.clientY - centerY;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < magneticRange) {
        setIsHovered(true);
        const factor = (magneticRange - distance) / magneticRange;
        const targetX = dx * pullStrength * factor;
        const targetY = dy * pullStrength * factor;
        
        setOffset({
          x: targetX,
          y: targetY,
        });
      } else {
        setIsHovered(false);
        setOffset({ x: 0, y: 0 });
      }
    };

    const handleMouseLeave = () => {
      setIsHovered(false);
      setIsPressed(false);
      setOffset({ x: 0, y: 0 });
    };

    window.addEventListener("mousemove", handleMouseMove);
    triggerRef.current?.addEventListener("mouseleave", handleMouseLeave);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      triggerRef.current?.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [magneticRange, pullStrength]);

  // Size configurations
  const sizeClasses = {
    sm: "text-xs px-5 py-2.5 rounded-lg",
    md: "text-sm px-7 py-3 rounded-xl",
    lg: "text-base px-9 py-4 rounded-2xl",
    xl: "text-lg px-11 py-5 rounded-[22px]",
  };

  const getColors = () => {
    if (isDarkMode) {
      switch (variant) {
        case "aurora":
          return {
            bg: "bg-purple-950/15 dark:bg-purple-950/20 backdrop-blur-md",
            border: "border-purple-500/40 hover:border-purple-400/80",
            textColor: "text-purple-200 hover:text-white",
            blobs: ["bg-indigo-600", "bg-purple-500", "bg-pink-500"],
            glow: "shadow-[0_0_25px_rgba(168,85,247,0.25)]",
          };
        case "emerald":
          return {
            bg: "bg-emerald-950/15 dark:bg-emerald-950/20 backdrop-blur-md",
            border: "border-emerald-500/40 hover:border-emerald-400/80",
            textColor: "text-emerald-200 hover:text-white",
            blobs: ["bg-emerald-500", "bg-teal-500", "bg-lime-500"],
            glow: "shadow-[0_0_25px_rgba(16,185,129,0.25)]",
          };
        case "obsidian":
          return {
            bg: "bg-zinc-900/30 dark:bg-zinc-900/35 backdrop-blur-md",
            border: "border-zinc-700/60 hover:border-zinc-500/90",
            textColor: "text-zinc-300 hover:text-white",
            blobs: ["bg-zinc-600", "bg-zinc-700", "bg-zinc-500"],
            glow: "shadow-[0_0_20px_rgba(255,255,255,0.06)]",
          };
        case "primary":
        default:
          return {
            bg: "bg-blue-950/15 dark:bg-blue-950/20 backdrop-blur-md",
            border: "border-blue-500/40 hover:border-blue-400/80",
            textColor: "text-blue-200 hover:text-white",
            blobs: ["bg-blue-600", "bg-cyan-500", "bg-indigo-500"],
            glow: "shadow-[0_0_25px_rgba(59,130,246,0.25)]",
          };
      }
    } else {
      // Light Theme Colors
      switch (variant) {
        case "aurora":
          return {
            bg: "bg-purple-50/40 backdrop-blur-md",
            border: "border-purple-200 hover:border-purple-400/80",
            textColor: "text-purple-700 hover:text-purple-950",
            blobs: ["bg-indigo-300/70", "bg-purple-300/70", "bg-pink-300/70"],
            glow: "shadow-[0_0_15px_rgba(168,85,247,0.15)]",
          };
        case "emerald":
          return {
            bg: "bg-emerald-50/40 backdrop-blur-md",
            border: "border-emerald-200 hover:border-emerald-400/80",
            textColor: "text-emerald-700 hover:text-emerald-950",
            blobs: ["bg-emerald-300/70", "bg-teal-300/70", "bg-lime-300/70"],
            glow: "shadow-[0_0_15px_rgba(16,185,129,0.15)]",
          };
        case "obsidian":
          return {
            bg: "bg-zinc-100/40 backdrop-blur-md",
            border: "border-zinc-300 hover:border-zinc-500",
            textColor: "text-zinc-800 hover:text-black",
            blobs: ["bg-zinc-300/70", "bg-zinc-400/70", "bg-zinc-200/70"],
            glow: "shadow-[0_0_15px_rgba(0,0,0,0.05)]",
          };
        case "primary":
        default:
          return {
            bg: "bg-blue-50/40 backdrop-blur-md",
            border: "border-blue-200 hover:border-blue-400/80",
            textColor: "text-blue-700 hover:text-blue-950",
            blobs: ["bg-blue-300/70", "bg-cyan-300/70", "bg-indigo-300/70"],
            glow: "shadow-[0_0_15px_rgba(59,130,246,0.15)]",
          };
      }
    }
  };

  const style = getColors();

  return (
    <>
      {/* Gooey SVG Filter */}
      <svg className="hidden w-0 h-0" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
              result="goo"
            />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
          </filter>
        </defs>
      </svg>

      {/* Button styles */}
      <style
        dangerouslySetInnerHTML={{
          __html: `
            @keyframes blob-float-1 {
              0%, 100% { transform: translate(0, 0) scale(1); }
              33% { transform: translate(30px, -15px) scale(1.1); }
              66% { transform: translate(-15px, 20px) scale(0.9); }
            }
            @keyframes blob-float-2 {
              0%, 100% { transform: translate(0, 0) scale(1); }
              33% { transform: translate(-25px, 20px) scale(0.9); }
              66% { transform: translate(20px, -15px) scale(1.15); }
            }
            @keyframes blob-float-3 {
              0%, 100% { transform: translate(0, 0) scale(1); }
              33% { transform: translate(15px, 25px) scale(1.1); }
              66% { transform: translate(-30px, -10px) scale(0.85); }
            }
            .blob-anim-1 { animation: blob-float-1 8s infinite ease-in-out; }
            .blob-anim-2 { animation: blob-float-2 7s infinite ease-in-out 1s; }
            .blob-anim-3 { animation: blob-float-3 9s infinite ease-in-out 2s; }
          `,
        }}
      />

      {/* Magnetic Area Trigger Wrapper */}
      <div
        ref={triggerRef}
        className="relative flex items-center justify-center p-3 cursor-pointer"
        style={{
          perspective: 1000,
        }}
      >
        <button
          ref={buttonRef}
          onMouseDown={() => setIsPressed(true)}
          onMouseUp={() => setIsPressed(false)}
          className={`
            relative overflow-hidden group select-none transition-all duration-300
            flex items-center justify-center font-bold tracking-wide
            border border-solid backdrop-blur-[4px] ${style.border} ${style.bg} ${style.textColor}
            ${sizeClasses[size]} ${isHovered ? style.glow : "shadow-sm"}
            ${className}
          `}
          style={{
            transform: `translate3d(${offset.x}px, ${offset.y}px, 0px) scale(${isPressed ? 0.94 : isHovered ? 1.03 : 1})`,
            transition: isPressed ? "transform 0.08s ease" : "transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s",
          }}
          {...props}
        >
          {/* Gooey Liquid Blobs Backdrop */}
          <div
            className="absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit] transition-opacity duration-500"
            style={{
              filter: `url(#${filterId})`,
              opacity: isHovered ? 0.9 : 0.25,
            }}
          >
            {/* Blob 1 */}
            <div
              className={`absolute blob-anim-1 w-24 h-24 rounded-full blur-[2px] transition-all duration-500 ${style.blobs[0]}`}
              style={{
                top: "-10%",
                left: "15%",
                mixBlendMode: isDarkMode ? "screen" : "multiply",
                opacity: 1,
              }}
            />
            {/* Blob 2 */}
            <div
              className={`absolute blob-anim-2 w-28 h-28 rounded-full blur-[2px] transition-all duration-500 ${style.blobs[1]}`}
              style={{
                bottom: "-20%",
                right: "10%",
                mixBlendMode: isDarkMode ? "screen" : "multiply",
                opacity: 1,
              }}
            />
            {/* Blob 3 */}
            <div
              className={`absolute blob-anim-3 w-20 h-20 rounded-full blur-[2px] transition-all duration-500 ${style.blobs[2]}`}
              style={{
                top: "20%",
                right: "35%",
                mixBlendMode: isDarkMode ? "screen" : "multiply",
                opacity: 1,
              }}
            />
          </div>

          {/* Button Content */}
          <span className="relative z-10 flex items-center gap-2">
            {children}
          </span>
        </button>
      </div>
    </>
  );
}

export default FluidButton;

```
--------------------------------------------------

### COMPONENT: glitch-button
Category: Button
Description: A premium, cybernetic-themed button component featuring RGB displacement chromatic aberration text shadows, horizontal shearing slice animations, sweeping scanners, and custom chamfered cut-corner polygons. Includes full light and dark mode theme responsiveness.
URL: https://lightswind.com/components/glitch-button
Import: import GlitchButton from "@/components/lightswind/glitch-button"
Registry URL: https://lightswind.com/r/glitch-button.json
Install Command: npx lightswind@latest add glitch-button

Usage:
```tsx
import GlitchButton from "@/components/lightswind/glitch-button";

export function Demo() {
  return (
    <GlitchButton variant="cyber" size="md">
      Initialize System
    </GlitchButton>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect } from "react";

export interface GlitchButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: string;
  variant?: "cyber" | "neon" | "stealth" | "glass";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  glitchInterval?: number; // In ms
  theme?: "light" | "dark" | "system";
}

export function GlitchButton({
  children,
  variant = "cyber",
  size = "md",
  className = "",
  glitchInterval = 3000,
  theme = "system",
  ...props
}: GlitchButtonProps) {
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [isPressed, setIsPressed] = useState(false);
  const [activeGlitch, setActiveGlitch] = useState(false);

  // Theme tracking
  useEffect(() => {
    const checkTheme = () => {
      if (theme === "system") {
        setIsDarkMode(document.documentElement.classList.contains("dark"));
      } else {
        setIsDarkMode(theme === "dark");
      }
    };
    checkTheme();
    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  // Periodic subtle glitch effect when idle
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveGlitch(true);
      setTimeout(() => setActiveGlitch(false), 400);
    }, glitchInterval);

    return () => clearInterval(interval);
  }, [glitchInterval]);

  const sizeClasses = {
    sm: "text-xs px-4 py-2.5",
    md: "text-sm px-6 py-3.5",
    lg: "text-base px-8 py-4.5",
    xl: "text-lg px-10 py-5.5",
  };

  const getColors = () => {
    if (isDarkMode) {
      switch (variant) {
        case "neon":
          return {
            bg: "bg-zinc-950",
            border: "border-lime-500/35 hover:border-lime-400/90",
            textColor: "text-lime-400 hover:text-white",
            shadow: "shadow-[0_0_15px_rgba(132,204,22,0.15)]",
            glitchColors: ["#84cc16", "#eab308"], // Lime, Yellow
            scannerBg: "bg-lime-500/15",
          };
        case "stealth":
          return {
            bg: "bg-zinc-900",
            border: "border-zinc-700/50 hover:border-zinc-400/80",
            textColor: "text-zinc-200 hover:text-white",
            shadow: "shadow-[0_0_10px_rgba(255,255,255,0.05)]",
            glitchColors: ["#ffffff", "#52525b"], // White, Zinc
            scannerBg: "bg-white/10",
          };
        case "glass":
          return {
            bg: "bg-white/5 backdrop-blur-md",
            border: "border-white/10 hover:border-white/30",
            textColor: "text-zinc-100 hover:text-white",
            shadow: "shadow-none",
            glitchColors: ["#22d3ee", "#ec4899"], // Cyan, Fuchsia
            scannerBg: "bg-white/20",
          };
        case "cyber":
        default:
          return {
            bg: "bg-zinc-950",
            border: "border-cyan-500/35 hover:border-cyan-400/90",
            textColor: "text-cyan-400 hover:text-white",
            shadow: "shadow-[0_0_15px_rgba(6,182,212,0.15)]",
            glitchColors: ["#06b6d4", "#d946ef"], // Cyan, Fuchsia
            scannerBg: "bg-cyan-500/15",
          };
      }
    } else {
      // Light Mode colors
      switch (variant) {
        case "neon":
          return {
            bg: "bg-white",
            border: "border-lime-300 hover:border-lime-500",
            textColor: "text-lime-700 hover:text-lime-950",
            shadow: "shadow-[0_0_12px_rgba(132,204,22,0.08)]",
            glitchColors: ["#65a30d", "#ca8a04"], // Lime, Yellow
            scannerBg: "bg-lime-500/10",
          };
        case "stealth":
          return {
            bg: "bg-zinc-50",
            border: "border-zinc-300 hover:border-zinc-500",
            textColor: "text-zinc-800 hover:text-black",
            shadow: "shadow-[0_0_8px_rgba(0,0,0,0.04)]",
            glitchColors: ["#18181b", "#71717a"], // Zinc darks
            scannerBg: "bg-black/10",
          };
        case "glass":
          return {
            bg: "bg-black/5 backdrop-blur-md",
            border: "border-black/5 hover:border-black/20",
            textColor: "text-zinc-800 hover:text-black",
            shadow: "shadow-none",
            glitchColors: ["#0891b2", "#c084fc"], // Cyan, Purple
            scannerBg: "bg-black/15",
          };
        case "cyber":
        default:
          return {
            bg: "bg-white",
            border: "border-cyan-300 hover:border-cyan-500",
            textColor: "text-cyan-700 hover:text-cyan-950",
            shadow: "shadow-[0_0_12px_rgba(6,182,212,0.08)]",
            glitchColors: ["#0891b2", "#c026d3"], // Cyan, Fuchsia
            scannerBg: "bg-cyan-500/10",
          };
      }
    }
  };

  const style = getColors();

  return (
    <>
      {/* Premium Cyber Glitch CSS Keyframes */}
      <style
        dangerouslySetInnerHTML={{
          __html: `
            @keyframes glitch-anim-1 {
              0% { clip-path: inset(20% 0 50% 0); transform: translate(-4px, -2px) skew(2deg); }
              20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 1px) skew(-3deg); }
              40% { clip-path: inset(5% 0 75% 0); transform: translate(-2px, 3px) skew(1deg); }
              60% { clip-path: inset(80% 0 5% 0); transform: translate(4px, -1px) skew(-2deg); }
              80% { clip-path: inset(30% 0 45% 0); transform: translate(-3px, 2px) skew(3deg); }
              100% { clip-path: inset(20% 0 50% 0); transform: translate(0); }
            }
            @keyframes glitch-anim-2 {
              0% { clip-path: inset(50% 0 20% 0); transform: translate(4px, 2px) skew(-2deg); }
              20% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, -1px) skew(3deg); }
              40% { clip-path: inset(75% 0 5% 0); transform: translate(2px, -3px) skew(-1deg); }
              60% { clip-path: inset(5% 0 80% 0); transform: translate(-4px, 1px) skew(2deg); }
              80% { clip-path: inset(45% 0 30% 0); transform: translate(3px, -2px) skew(-3deg); }
              100% { clip-path: inset(50% 0 20% 0); transform: translate(0); }
            }
            @keyframes scan-sweep {
              0% { transform: translateY(-100%); }
              100% { transform: translateY(100%); }
            }
            .cyber-glitch-active-1 {
              animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
            }
            .cyber-glitch-active-2 {
              animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
            }
            .cyber-scanner-sweep {
              animation: scan-sweep 2s infinite linear;
            }
          `,
        }}
      />

      <button
        onMouseDown={() => setIsPressed(true)}
        onMouseUp={() => setIsPressed(false)}
        className={`
          relative overflow-hidden group select-none transition-all duration-200
          flex items-center justify-center font-bold tracking-widest uppercase
          border border-solid ${style.border} ${style.bg} ${style.textColor}
          ${sizeClasses[size]} ${style.shadow}
          ${className}
        `}
        style={{
          clipPath: "polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px)",
          transform: isPressed ? "scale(0.97)" : "scale(1)",
        }}
        {...props}
      >
        {/* Dynamic Scan Line sweep overlay */}
        <div
          className={`absolute inset-x-0 h-[2px] pointer-events-none opacity-0 group-hover:opacity-70 transition-opacity duration-300 cyber-scanner-sweep ${style.scannerBg}`}
          style={{
            boxShadow: `0 0 10px ${style.glitchColors[0]}`,
          }}
        />

        {/* Diagonal Corner Cut Accents */}
        <div
          className="absolute top-0 left-0 w-3 h-[1px] transition-transform duration-300"
          style={{
            backgroundColor: style.glitchColors[0],
            transform: "rotate(-45deg) translate(-2px, 3px)",
          }}
        />
        <div
          className="absolute bottom-0 right-0 w-3 h-[1px] transition-transform duration-300"
          style={{
            backgroundColor: style.glitchColors[1],
            transform: "rotate(-45deg) translate(2px, -3px)",
          }}
        />

        {/* Glitch Overlay Layer 1 */}
        <span
          className={`
            absolute inset-0 flex items-center justify-center pointer-events-none opacity-0
            ${(activeGlitch || isPressed) ? "opacity-90 cyber-glitch-active-1" : "group-hover:opacity-90 group-hover:cyber-glitch-active-1"}
            ${style.bg}
          `}
          style={{
            textShadow: `-2px 0 ${style.glitchColors[0]}`,
            color: isDarkMode ? "#fff" : "#000",
            left: "-2px",
          }}
        >
          {children}
        </span>

        {/* Glitch Overlay Layer 2 */}
        <span
          className={`
            absolute inset-0 flex items-center justify-center pointer-events-none opacity-0
            ${(activeGlitch || isPressed) ? "opacity-90 cyber-glitch-active-2" : "group-hover:opacity-90 group-hover:cyber-glitch-active-2"}
            ${style.bg}
          `}
          style={{
            textShadow: `2px 0 ${style.glitchColors[1]}`,
            color: isDarkMode ? "#fff" : "#000",
            left: "2px",
          }}
        >
          {children}
        </span>

        {/* Core button text */}
        <span className="relative z-10 flex items-center gap-2 group-hover:scale-[1.03] transition-transform duration-300">
          {children}
        </span>
      </button>
    </>
  );
}

export default GlitchButton;

```
--------------------------------------------------

### COMPONENT: gradient-button
Category: Button
Description: An animated button with gradient borders and optional glow effect.
URL: https://lightswind.com/components/gradient-button
Import: import { GradientButton } from '@/components/lightswind/gradient-button'
Registry URL: https://lightswind.com/r/gradient-button.json
Install Command: npx lightswind@latest add gradient-button

Usage:
```tsx
<GradientButton>
  Get Started
</GradientButton>
```

Source Code:
```tsx
"use client";
import React from "react";

export interface GradientButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  gradientColors?: string[];
  animationSpeed?: number;
  glowEffect?: boolean;
  glowSize?: number;
  variant?: "default" | "outline" | "ghost";
}

export function GradientButton({
  children,
  size = "md",
  className = "",
  gradientColors = [
    "#ff6d1b",
    "#ffee55",
    "#5bff89",
    "#4d8aff",
    "#6b5fff",
    "#ff64f9",
    "#ff6565",
  ],
  animationSpeed = 2,
  glowEffect = true,
  glowSize = 4,
  variant = "default",
  ...props
}: GradientButtonProps) {
  // Generate gradient string from colors
  const gradientString = gradientColors.join(", ");

  // Size classes mapping
  const sizeClasses = {
    sm: "text-sm px-4 py-2 rounded-full",
    md: "text-base px-6 py-2 rounded-full",
    lg: "text-lg px-8 py-3 rounded-full",
    xl: "text-2xl px-10 py-4 rounded-full",
  };

  // Border styles based on variant
  const borderStyles = {
    default: "border-transparent",
    outline: "border-current",
    ghost: "border-transparent bg-opacity-10",
  };

  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
          .btn-gradient::before {
            content: "";
            background: linear-gradient(90deg, ${gradientString});
            height: 30%;
            width: 80%;
            position: absolute;
            bottom: -20%;
            z-index: 0;
            background-size: 200%;
            animation: gradient-animate ${animationSpeed}s infinite linear;
            filter: blur(calc(${glowSize} * 0.2rem));
          }

          .btn-gradient:hover,
          .btn-gradient:hover::before {
            animation: gradient-animate ${animationSpeed / 4}s infinite linear;
          }

          @keyframes gradient-animate {
            0% {
              background-position: 0;
            }
            100% {
              background-position: 200%;
            }
          }

          .btn-gradient {
            animation: gradient-animate ${animationSpeed}s infinite linear;
          }
        `,
        }}
      />

      <button
        className={`
          btn-gradient relative bg-black dark:bg-white text-white dark:text-black 
          hover:bg-primary dark:hover:bg-primary/90
          flex items-center
           justify-center 
          border-[0.15rem] Z-20 ${borderStyles[variant]} ${sizeClasses[size]} 
          ${className}
        `}
        style={{
          background:
            variant === "ghost"
              ? `linear-gradient(90deg, ${gradientString})`
              : `
   
            `,
          backgroundOrigin: "border-box",
          backgroundClip: "padding-box, border-box, border-box",
          backgroundSize: "200%",
        }}
        {...props}
      >
        {glowEffect && (
          <div
            className="absolute bottom-[-20%] h-[30%] w-[60%] z-[-1] blur-3xl"
            style={{
              left: "50%",
              transform: "translateX(-50%)",
              background: `linear-gradient(90deg, ${gradientString})`,
              backgroundSize: "200%",
              animation: `gradient-animate ${animationSpeed}s infinite linear`,
            }}
          />
        )}

        {children}
      </button>
    </>
  );
}

export default GradientButton;

```
--------------------------------------------------

### COMPONENT: holo-button
Category: Button
Description: A premium, highly interactive button component featuring mouse-tracking radial flares, spinning gradient border beams, and responsive micro-interactions. The button adapts its color palette, glows, and flare gradients dynamically between light and dark themes, ensuring a spectacular, premium aesthetic in all states.
URL: https://lightswind.com/components/holo-button
Import: import HoloButton from "@/components/lightswind/holo-button"
Registry URL: https://lightswind.com/r/holo-button.json
Install Command: npx lightswind@latest add holo-button

Usage:
```tsx
import HoloButton from "@/components/lightswind/holo-button";
import { Sparkles } from "lucide-react";

export function Demo() {
  return (
    <HoloButton variant="primary" size="md">
      <Sparkles className="w-4 h-4" />
      <span>Launch Experience</span>
    </HoloButton>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useState, useEffect } from "react";

export interface HoloButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "primary" | "cyber" | "rosegold" | "glass";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  glowSize?: number; // Radius in px
  theme?: "light" | "dark" | "system";
}

export function HoloButton({
  children,
  variant = "primary",
  size = "md",
  className = "",
  glowSize = 120,
  theme = "system",
  ...props
}: HoloButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [coords, setCoords] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);

  // Theme tracking
  useEffect(() => {
    const checkTheme = () => {
      if (theme === "system") {
        setIsDarkMode(document.documentElement.classList.contains("dark"));
      } else {
        setIsDarkMode(theme === "dark");
      }
    };
    checkTheme();
    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
    const button = buttonRef.current;
    if (!button) return;

    const rect = button.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    setCoords({ x, y });
  };

  const handleMouseEnter = () => setIsHovered(true);
  const handleMouseLeave = () => {
    setIsHovered(false);
    setIsPressed(false);
  };
  const handleMouseDown = () => setIsPressed(true);
  const handleMouseUp = () => setIsPressed(false);

  // Size configurations
  const sizeClasses = {
    sm: "text-xs px-4 py-2 rounded-lg",
    md: "text-sm px-6 py-3 rounded-xl",
    lg: "text-base px-8 py-4 rounded-2xl",
    xl: "text-lg px-10 py-5 rounded-[20px]",
  };

  // Color profiles based on variant & dark/light theme
  const getColors = () => {
    if (isDarkMode) {
      switch (variant) {
        case "cyber":
          return {
            bg: "bg-zinc-955/80",
            border: "border-cyan-500/20 hover:border-cyan-400/40",
            textColor: "text-cyan-400 hover:text-white",
            flare: "radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 100%)",
            beam: "linear-gradient(90deg, #22d3ee, #a855f7, #eab308)",
            glow: "shadow-[0_0_20px_rgba(34,211,238,0.15)]",
          };
        case "rosegold":
          return {
            bg: "bg-stone-955/85",
            border: "border-rose-400/20 hover:border-rose-300/40",
            textColor: "text-rose-200 hover:text-white",
            flare: "radial-gradient(circle, rgba(251, 113, 133, 0.2) 0%, rgba(253, 186, 116, 0.2) 60%, transparent 100%)",
            beam: "linear-gradient(90deg, #fb7185, #fdba74, #fb7185)",
            glow: "shadow-[0_0_20px_rgba(251,113,133,0.1)]",
          };
        case "glass":
          return {
            bg: "bg-white/5 backdrop-blur-md",
            border: "border-white/10 hover:border-white/20",
            textColor: "text-zinc-200 hover:text-white",
            flare: "radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%)",
            beam: "linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05), rgba(255,255,255,0.2))",
            glow: "shadow-none",
          };
        case "primary":
        default:
          return {
            bg: "bg-zinc-900/90",
            border: "border-indigo-500/20 hover:border-indigo-400/40",
            textColor: "text-indigo-200 hover:text-white",
            flare: "radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(236, 72, 153, 0.25) 55%, transparent 100%)",
            beam: "linear-gradient(90deg, #6366f1, #ec4899, #a855f7)",
            glow: "shadow-[0_0_20px_rgba(99,102,241,0.15)]",
          };
      }
    } else {
      // Light Mode colors
      switch (variant) {
        case "cyber":
          return {
            bg: "bg-white/80",
            border: "border-cyan-500/10 hover:border-cyan-400/30",
            textColor: "text-cyan-600 hover:text-cyan-950",
            flare: "radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, rgba(168, 85, 247, 0.15) 50%, transparent 100%)",
            beam: "linear-gradient(90deg, #06b6d4, #c084fc, #eab308)",
            glow: "shadow-[0_0_15px_rgba(34,211,238,0.1)]",
          };
        case "rosegold":
          return {
            bg: "bg-rose-50/70",
            border: "border-rose-300/10 hover:border-rose-400/30",
            textColor: "text-rose-700 hover:text-rose-950",
            flare: "radial-gradient(circle, rgba(251, 113, 133, 0.15) 0%, rgba(253, 186, 116, 0.12) 60%, transparent 100%)",
            beam: "linear-gradient(90deg, #fda4af, #fde047, #fda4af)",
            glow: "shadow-[0_0_15px_rgba(251,113,133,0.08)]",
          };
        case "glass":
          return {
            bg: "bg-black/5 backdrop-blur-md",
            border: "border-black/5 hover:border-black/15",
            textColor: "text-zinc-800 hover:text-black",
            flare: "radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 60%, transparent 100%)",
            beam: "linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.03), rgba(0,0,0,0.1))",
            glow: "shadow-none",
          };
        case "primary":
        default:
          return {
            bg: "bg-zinc-50/90",
            border: "border-indigo-200/40 hover:border-indigo-300/60",
            textColor: "text-indigo-700 hover:text-indigo-950",
            flare: "radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.15) 55%, transparent 100%)",
            beam: "linear-gradient(90deg, #818cf8, #f472b6, #c084fc)",
            glow: "shadow-[0_0_15px_rgba(99,102,241,0.1)]",
          };
      }
    }
  };

  const style = getColors();

  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            @keyframes holo-beam-rotate {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
            .holo-beam-active {
              animation: holo-beam-rotate var(--beam-duration, 4s) infinite linear;
            }
          `,
        }}
      />

      <button
        ref={buttonRef}
        onMouseMove={handleMouseMove}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        className={`
          relative overflow-hidden group select-none transition-all duration-300
          flex items-center justify-center font-semibold tracking-wide
          border border-solid ${style.border} ${style.bg} ${style.textColor}
          ${sizeClasses[size]} ${isHovered ? style.glow : "shadow-sm"}
          ${className}
        `}
        style={{
          transform: isPressed ? "scale(0.96)" : isHovered ? "scale(1.02)" : "scale(1)",
          transition: "transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s",
        }}
        {...props}
      >
        {/* Iridescent Mouse-Tracking Radial Glow Overlay */}
        <div
          className="absolute pointer-events-none transition-opacity duration-500 ease-out"
          style={{
            left: coords.x - glowSize / 2,
            top: coords.y - glowSize / 2,
            width: glowSize,
            height: glowSize,
            background: style.flare,
            opacity: isHovered ? 1 : 0,
            mixBlendMode: isDarkMode ? "screen" : "multiply",
          }}
        />

        {/* Dynamic Border Gradient Loop */}
        <div
          className="absolute inset-0 pointer-events-none rounded-[inherit] transition-opacity duration-300 overflow-hidden"
          style={{
            margin: "-1px",
            padding: "1.5px",
            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
            maskComposite: "exclude",
            WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
            WebkitMaskComposite: "xor",
            opacity: isHovered ? 1 : 0.25,
          }}
        >
          <div
            className="holo-beam-active absolute w-[200%] h-[200%] top-[-50%] left-[-50%]"
            style={{
              backgroundImage: style.beam,
              "--beam-duration": isHovered ? "2.5s" : "5.0s",
            } as React.CSSProperties}
          />
        </div>

        {/* Shimmer line effect on hover */}
        <div
          className="absolute inset-0 w-[30%] h-full pointer-events-none bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-[-25deg] transition-all duration-1000 ease-in-out"
          style={{
            left: isHovered ? "120%" : "-40%",
            transitionProperty: "left",
          }}
        />

        {/* Button Content */}
        <span className="relative z-10 flex items-center gap-2">
          {children}
        </span>
      </button>
    </>
  );
}

export default HoloButton;

```
--------------------------------------------------

### COMPONENT: liquid-glass-button
Category: Button
Description: A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.
URL: https://lightswind.com/components/liquid-glass-button
Import: import { LiquidGlassButton, LiquidGlassInput, LiquidGlassSelect, LiquidGlassSwitch, LiquidGlassCard } from "@/components/lightswind/liquid-glass-button"
Registry URL: https://lightswind.com/r/liquid-glass-button.json
Install Command: npx lightswind@latest add liquid-glass-button

Usage:
```tsx
import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";

export function Demo() {
  return (
    <div className="flex items-center gap-4">
      <LiquidGlassButton variant="glass" size="md">
        Clear Glass
      </LiquidGlassButton>
      <LiquidGlassButton variant="primary" size="md">
        Start Project
      </LiquidGlassButton>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps } from "framer-motion";
import { Check, Search, Plus, ChevronDown } from "lucide-react";

/* ==========================================================================
   LIQUID GLASS BUTTON COMPONENT
   ========================================================================== */
export interface LiquidGlassButtonProps
  extends Omit<HTMLMotionProps<"button">, "size"> {
  variant?: "glass" | "primary" | "secondary" | "icon" | "accent" | "emerald" | "outline" | "aurora" | "cyan" | "purple";
  size?: "sm" | "md" | "lg" | "xl" | "icon";
  glow?: boolean;
  fullWidth?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassButton = React.forwardRef<
  HTMLButtonElement,
  LiquidGlassButtonProps
>(
  (
    {
      variant = "glass",
      size = "md",
      glow = true,
      fullWidth = false,
      children,
      icon,
      className,
      disabled,
      onClick,
      ...props
    },
    ref
  ) => {
    // Sizing presets — professional compact heights
    const sizeClasses = {
      sm: "h-8 px-4 text-xs rounded-full gap-1.5",
      md: "h-10 px-5 text-sm rounded-full gap-2",
      lg: "h-12 px-7 text-base rounded-full gap-2.5",
      xl: "h-14 px-9 text-lg rounded-[2rem] gap-3",
      icon: "w-10 h-10 p-0 rounded-full flex items-center justify-center shrink-0",
    };

    // Variant specific background and shadow styles (Realistic 3D Liquid Glass Crystal)
    const variantStyles = {
      // Pure Liquid Glass Crystal Effect (Clear Glass)
      glass: cn(
        "text-slate-900 dark:text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
        "backdrop-blur-md saturate-[220%]",
        "border border-white/85 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),0_6px_15px_-4px_rgba(15,23,42,0.15),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-4px_8px_0px_rgba(0,0,0,0.15),inset_3px_0_4px_0px_rgba(255,255,255,0.5),inset_-3px_0_4px_0px_rgba(255,255,255,0.5)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),0_8px_18px_-4px_rgba(0,0,0,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4),0_0_0_1px_rgba(255,255,255,0.2),inset_0_-4px_8px_0px_rgba(0,0,0,0.5)]",
        "hover:bg-gradient-to-b hover:from-white/65 hover:via-white/35 hover:to-white/15 dark:hover:from-white/35 dark:hover:via-white/15 dark:hover:to-white/10 hover:shadow-[0_22px_45px_-6px_rgba(15,23,42,0.3)] dark:hover:shadow-[0_25px_45px_-6px_rgba(0,0,0,0.85)]"
      ),
      primary: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-[#ff6a3d]/90 via-[#ee3e26]/85 to-[#c31e14]/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(238,62,38,0.65),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(255,230,220,0.95),0_0_0_1px_rgba(255,180,160,0.9),inset_0_-4px_8px_0px_rgba(130,15,0,0.5)]",
        "hover:shadow-[0_20px_40px_-4px_rgba(238,62,38,0.8),inset_0_2.5px_2px_0px_rgba(255,240,235,0.95)]"
      ),
      secondary: cn(
        "text-slate-800 dark:text-slate-100 font-semibold",
        "bg-gradient-to-b from-white/55 via-white/25 to-slate-200/20 dark:from-white/20 dark:via-white/10 dark:to-slate-900/40",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/75 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.2),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-4px_7px_0px_rgba(0,0,0,0.15)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4)]"
      ),
      icon: cn(
        "text-slate-800 dark:text-slate-100 font-semibold",
        "bg-gradient-to-b from-white/55 via-white/25 to-slate-200/20 dark:from-white/20 dark:via-white/10 dark:to-slate-900/40",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/75 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.2),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-4px_7px_0px_rgba(0,0,0,0.15)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4)]"
      ),
      accent: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-cyan-400/90 via-blue-600/85 to-indigo-700/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(0,114,255,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,245,255,0.95),0_0_0_1px_rgba(160,225,255,0.9),inset_0_-4px_8px_0px_rgba(0,40,130,0.5)]"
      ),
      emerald: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-emerald-400/90 via-emerald-600/85 to-teal-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(16,185,129,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,255,235,0.95),0_0_0_1px_rgba(160,255,200,0.9),inset_0_-4px_8px_0px_rgba(5,80,50,0.5)]"
      ),
      aurora: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-violet-400/90 via-fuchsia-500/85 to-violet-700/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(139,92,246,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(200,180,255,0.9),inset_0_-4px_8px_0px_rgba(70,20,120,0.5)]"
      ),
      cyan: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-sky-400/90 via-blue-500/85 to-indigo-600/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(14,165,233,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,240,255,0.95),0_0_0_1px_rgba(180,220,255,0.9),inset_0_-4px_8px_0px_rgba(10,50,130,0.5)]"
      ),
      purple: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-purple-400/90 via-purple-600/85 to-fuchsia-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(168,85,247,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(210,180,255,0.9),inset_0_-4px_8px_0px_rgba(70,20,120,0.5)]"
      ),
      outline: cn(
        "text-slate-800 dark:text-slate-100 font-semibold border border-white/80 dark:border-white/25",
        "bg-white/25 dark:bg-white/10 backdrop-blur-md saturate-[200%]",
        "shadow-[0_12px_28px_-5px_rgba(0,0,0,0.15),inset_0_2px_1px_0px_rgba(255,255,255,0.9)] dark:shadow-[0_12px_28px_-5px_rgba(0,0,0,0.6),inset_0_1.5px_1px_0px_rgba(255,255,255,0.3)]"
      ),
    };

    return (
      <motion.button
        ref={ref}
        whileHover={{ scale: 1.035, y: -2 }}
        whileTap={{ scale: 0.95, y: 3 }}
        transition={{ type: "spring", stiffness: 450, damping: 25 }}
        onClick={onClick}
        disabled={disabled}
        className={cn(
          "relative outline-none border-none cursor-pointer font-sans select-none overflow-hidden",
          "inline-flex items-center justify-center backdrop-blur-md saturate-[220%]",
          "transition-all duration-200 ease-out",
          sizeClasses[size === "icon" ? "icon" : size],
          variantStyles[variant],
          fullWidth && "w-full flex-1",
          disabled && "opacity-50 cursor-not-allowed pointer-events-none",
          className
        )}
        {...props}
      >
        {/* Top glossy curved glare reflection */}
        <span
          className={cn(
            "absolute top-[1px] left-1 right-1 h-[48%] pointer-events-none transition-all duration-200",
            size === "icon" || variant === "icon"
              ? "rounded-t-full rounded-b-[50%]"
              : "rounded-[100px_100px_45%_45%]"
          )}
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Bottom internal prism refraction ring */}
        <span
          className={cn(
            "absolute bottom-[1.5px] left-1.5 right-1.5 h-[28%] pointer-events-none transition-all duration-200",
            size === "icon" || variant === "icon"
              ? "rounded-b-full rounded-t-[30%]"
              : "rounded-[0_0_100px_100px]"
          )}
          style={{
            background:
              "linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Content */}
        <span className="relative z-10 flex items-center gap-2">
          {icon}
          {children}
        </span>
      </motion.button>
    );
  }
);
LiquidGlassButton.displayName = "LiquidGlassButton";

/* ==========================================================================
   LIQUID GLASS INPUT COMPONENT
   ========================================================================== */
export interface LiquidGlassInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  placeholder?: string;
  onAddClick?: () => void;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassInput = React.forwardRef<
  HTMLInputElement,
  LiquidGlassInputProps
>(({ placeholder = "Search...", onAddClick, icon, className, ...props }, ref) => {
  return (
    <div
      className={cn(
        "relative w-full h-14 rounded-full px-5 flex items-center justify-between gap-3 overflow-hidden",
        "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
        "backdrop-blur-md saturate-[220%]",
        "border border-white/85 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95)]",
        className
      )}
    >
      <span
        className="absolute top-[1px] left-1.5 right-1.5 h-[50%] pointer-events-none rounded-[100px_100px_45%_45%]"
        style={{
          background:
            "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
        }}
      />

      <div className="flex items-center gap-3 w-full relative z-10">
        {icon || <Search className="w-5 h-5 text-slate-600 dark:text-slate-300 shrink-0" />}
        <input
          ref={ref}
          type="text"
          placeholder={placeholder}
          className="w-full bg-transparent border-none outline-none text-slate-800 dark:text-slate-100 placeholder:text-slate-500 dark:placeholder:text-slate-400 font-medium text-base font-sans"
          {...props}
        />
      </div>

      {onAddClick && (
        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={onAddClick}
          type="button"
          aria-label="Add item"
          className="relative z-10 w-10 h-10 rounded-full bg-white/80 dark:bg-white/20 flex items-center justify-center text-slate-800 dark:text-white font-light text-2xl shrink-0 shadow-[0_4px_10px_rgba(0,0,0,0.12),inset_0_1.5px_1px_#ffffff] cursor-pointer"
        >
          <Plus className="w-5 h-5 stroke-[2.5]" />
        </motion.button>
      )}
    </div>
  );
});
LiquidGlassInput.displayName = "LiquidGlassInput";

/* ==========================================================================
   LIQUID GLASS SELECT COMPONENT
   ========================================================================== */
export interface LiquidGlassSelectProps {
  options?: string[];
  selected?: string;
  onChange?: (val: string) => void;
  placeholder?: string;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassSelect: React.FC<LiquidGlassSelectProps> = ({
  options = ["Select Option", "Option 1", "Option 2", "Option 3"],
  selected = "Select",
  onChange,
  icon,
  className,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [current, setCurrent] = useState(selected);

  const handleSelect = (val: string) => {
    setCurrent(val);
    if (onChange) onChange(val);
    setIsOpen(false);
  };

  return (
    <div className={cn("relative flex-1 min-w-[180px]", className)}>
      <motion.button
        whileTap={{ scale: 0.97 }}
        onClick={() => setIsOpen(!isOpen)}
        className="relative w-full h-14 rounded-full px-5 flex items-center justify-between text-slate-800 dark:text-slate-100 font-medium text-base bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5 backdrop-blur-md saturate-[220%] border border-white/85 dark:border-white/25 shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95)] cursor-pointer overflow-hidden"
      >
        <span
          className="absolute top-[1px] left-1.5 right-1.5 h-[50%] pointer-events-none rounded-[100px_100px_45%_45%]"
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        <div className="flex items-center gap-2.5 relative z-10">
          {icon || <ChevronDown className="w-5 h-5 text-slate-600 dark:text-slate-300" />}
          <span>{current}</span>
        </div>

        <div className="relative z-10 w-8 h-8 rounded-xl bg-white/80 dark:bg-white/20 flex items-center justify-center text-slate-800 dark:text-white shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1.5px_1px_rgba(255,255,255,0.8)]">
          <Check className="w-4 h-4 stroke-[3]" />
        </div>
      </motion.button>

      {isOpen && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 6 }}
          exit={{ opacity: 0, y: -10 }}
          className="absolute top-full left-0 right-0 z-50 p-2 rounded-2xl bg-white/90 dark:bg-slate-900/90 backdrop-blur-2xl border border-white/60 dark:border-white/20 shadow-2xl flex flex-col gap-1"
        >
          {options.map((opt) => (
            <button
              key={opt}
              onClick={() => handleSelect(opt)}
              className={cn(
                "w-full text-left px-4 py-2.5 rounded-xl text-sm font-medium transition-colors cursor-pointer",
                current === opt
                  ? "bg-white/40 dark:bg-white/10 text-slate-900 dark:text-white font-semibold"
                  : "text-slate-700 dark:text-slate-200 hover:bg-slate-100/50 dark:hover:bg-slate-800/60"
              )}
            >
              {opt}
            </button>
          ))}
        </motion.div>
      )}
    </div>
  );
};

/* ==========================================================================
   LIQUID GLASS SWITCH / TOGGLE COMPONENT
   ========================================================================== */
export interface LiquidGlassSwitchProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  className?: string;
}

export const LiquidGlassSwitch: React.FC<LiquidGlassSwitchProps> = ({
  checked = true,
  onChange,
  className,
}) => {
  const [isOn, setIsOn] = useState(checked);

  const toggle = () => {
    const next = !isOn;
    setIsOn(next);
    if (onChange) onChange(next);
  };

  return (
    <motion.button
      whileTap={{ scale: 0.92 }}
      onClick={toggle}
      type="button"
      role="switch"
      aria-checked={isOn}
      className={cn(
        "relative w-20 h-12 rounded-full p-1 flex items-center transition-all duration-300 cursor-pointer outline-none overflow-hidden",
        isOn
          ? "bg-white/45 dark:bg-white/20 shadow-[0_10px_20px_-2px_rgba(0,0,0,0.2),0_0_0_1px_rgba(255,255,255,0.9),inset_0_2px_4px_rgba(0,0,0,0.1)]"
          : "bg-slate-200/50 dark:bg-slate-800/50 shadow-[0_8px_15px_-2px_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,0.5)]",
        className
      )}
    >
      <motion.div
        animate={{ x: isOn ? 32 : 0 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
        className="w-9 h-9 rounded-full bg-white dark:bg-slate-200 shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_2px_1px_#ffffff]"
      />
    </motion.button>
  );
};

export { LiquidGlassCard, type LiquidGlassCardProps } from "./liquid-glass-card";
export default LiquidGlassButton;

```
--------------------------------------------------

### COMPONENT: magnetic-button
Category: Button
Description: A cursor-attracting button that magnetically follows your pointer with spring physics and a subtle parallax text effect.
URL: https://lightswind.com/components/magnetic-button
Import: import { MagneticButton } from "@/components/lightswind/magnetic-button"
Registry URL: https://lightswind.com/r/magnetic-button.json
Install Command: npx lightswind@latest add magnetic-button

Usage:
```tsx
import { MagneticButton } from "@/components/lightswind/magnetic-button";

export function Demo() {
  return (
    <MagneticButton variant="primary" size="lg">
      Get Started
    </MagneticButton>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useState } from "react";
import { motion, useSpring, useTransform } from "framer-motion";
import { cn } from "@/components/lib/utils";

interface MagneticButtonProps {
  /** Button label or children */
  children: React.ReactNode;
  /** How strongly the button attracts (0–1, default 0.4) */
  strength?: number;
  /** Pixel radius in which magnetism activates */
  radius?: number;
  /** Visual variant */
  variant?: "primary" | "outline" | "ghost" | "dark";
  /** Size */
  size?: "sm" | "md" | "lg";
  /** onClick handler */
  onClick?: () => void;
  /** Additional classes */
  className?: string;
}

export function MagneticButton({
  children,
  strength = 0.4,
  radius = 80,
  variant = "primary",
  size = "md",
  onClick,
  className,
}: MagneticButtonProps) {
  const buttonRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState(false);

  // Spring config — snappy but elastic
  const springConfig = { stiffness: 200, damping: 18, mass: 0.6 };

  const rawX = useSpring(0, springConfig);
  const rawY = useSpring(0, springConfig);

  // Inner text moves slightly less than the container (parallax depth)
  const textX = useTransform(rawX, (v) => v * 0.4);
  const textY = useTransform(rawY, (v) => v * 0.4);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = buttonRef.current?.getBoundingClientRect();
    if (!rect) return;

    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

    const distX = e.clientX - centerX;
    const distY = e.clientY - centerY;
    const dist = Math.sqrt(distX ** 2 + distY ** 2);

    if (dist < radius) {
      rawX.set(distX * strength);
      rawY.set(distY * strength);
      setIsHovered(true);
    } else {
      rawX.set(0);
      rawY.set(0);
      setIsHovered(false);
    }
  };

  const handleMouseLeave = () => {
    rawX.set(0);
    rawY.set(0);
    setIsHovered(false);
  };

  const variants = {
    primary:
      "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/20",
    outline:
      "border-2 border-foreground text-foreground hover:bg-foreground/5",
    ghost:
      "text-foreground hover:bg-foreground/8",
    dark:
      "bg-foreground text-background shadow-lg",
  };

  const sizes = {
    sm: "h-9 px-5 text-sm rounded-full",
    md: "h-12 px-8 text-base rounded-full",
    lg: "h-14 px-12 text-lg rounded-full",
  };

  return (
    <div
      ref={buttonRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ display: "inline-flex", padding: radius * 0.25 }}
    >
      <motion.button
        type="button"
        onClick={onClick}
        style={{ x: rawX, y: rawY }}
        animate={{ scale: isHovered ? 1.04 : 1 }}
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
        className={cn(
          "relative inline-flex items-center justify-center font-semibold tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring overflow-hidden",
          variants[variant],
          sizes[size],
          className
        )}
      >
        {/* Subtle inner glow on hover */}
        <motion.span
          animate={{ opacity: isHovered ? 1 : 0 }}
          transition={{ duration: 0.25 }}
          className="pointer-events-none absolute inset-0 rounded-full bg-white/10"
        />

        {/* Text layer with slight parallax */}
        <motion.span
          style={{ x: textX, y: textY }}
          className="relative z-10 flex items-center gap-2"
        >
          {children}
        </motion.span>
      </motion.button>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: ripple-button
Category: Button
Description: A modern ripple-effect button component with animated background circles. Ideal for calls to action, download prompts, or interactive UI elements. Highly customizable with colors, sizes, and responsive support. Built with React and CSS-in-JS.
URL: https://lightswind.com/components/ripple-button
Import: import RippleButton from '@/components/lightswind/ripple-button';
Registry URL: https://lightswind.com/r/ripple-button.json
Install Command: npx lightswind@latest add ripple-button

Usage:
```tsx

<RippleButton 
  text="Click Me" 
  bgColor="#111827" 
  circleColor="#3B82F6"
  width="200px"
  height="50px"
/>
  
```

Source Code:
```tsx
import React from "react";

interface RippleButtonProps {
  text?: string;
  bgColor?: string;
  circleColor?: string;
  width?: string;  // e.g., "200px" or "100%"
  height?: string; // e.g., "50px"
}

const RippleButton: React.FC<RippleButtonProps> = ({
  text = "Click Me",
  bgColor,
  circleColor,
  width,
  height,
}) => {
  // Use a default circle color if none is provided
  const defaultCircleColor = circleColor || "#173eff";

  return (
    <>
      <button
        className={`ripple-btn bg-gray-500 !text-black  `}
        style={{
          backgroundColor: bgColor,
          width: width,
          height: height,
        }}
      >
        <span className="circle1"></span>
        <span className="circle2"></span>
        <span className="circle3"></span>
        <span className="circle4"></span>
        <span className="circle5"></span>
        <span className="text">{text}</span>
      </button>

      {/* The styled-jsx block, which requires the @types/styled-jsx package */}
      <style jsx>{`
        .ripple-btn {
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bold;
          padding: 1em 2em;
          border: none;
          border-radius: 0.6rem;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          /* Ensure text color is set by props if background is set */
          color: ${bgColor ? 'white' : 'inherit'};
        }

        /* Target all circle spans */
        .ripple-btn span:not(:nth-child(6)) {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 30px;
          width: 30px;
          /* Use the prop value for background color */
          background-color: ${defaultCircleColor};
          border-radius: 50%;
          transition: 0.6s ease;
          pointer-events: none;
        }

        .ripple-btn span:nth-child(6) {
          position: relative;
          z-index: 1;
        }

        /* Initial offset positioning for the circles */
        .ripple-btn span:nth-child(1) {
          transform: translate(-3.3em, -4em);
        }

        .ripple-btn span:nth-child(2) {
          transform: translate(-6em, 1.3em);
        }

        .ripple-btn span:nth-child(3) {
          transform: translate(-0.2em, 1.8em);
        }

        .ripple-btn span:nth-child(4) {
          transform: translate(3.5em, 1.4em);
        }

        .ripple-btn span:nth-child(5) {
          transform: translate(3.5em, -3.8em);
        }

        /* Hover effect: Scale circles up to create the ripple illusion */
        .ripple-btn:hover span:not(:nth-child(6)) {
          transform: translate(-50%, -50%) scale(4);
          transition: 1.5s ease;
        }
      `}</style>
    </>
  );
};

export default RippleButton;
```
--------------------------------------------------

### COMPONENT: shine-button
Category: Button
Description: A reusable, customizable button component with a professional animated gradient shine effect. Supports solid hex or gradient backgrounds, responsive sizing, and full Tailwind CSS compatibility. Ideal for call-to-action or donation prompts.
URL: https://lightswind.com/components/shine-button
Import: import { ShineButton } from '@/components/lightswind/shine-button';
Registry URL: https://lightswind.com/r/shine-button.json
Install Command: npx lightswind@latest add shine-button

Usage:
```tsx
import { ShineButton } from '@/components/lightswind/shine-button';

<ShineButton 
  label="Donate Now" 
  size="lg" 
  bgColor="linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)" 
  onClick={() => alert('Thanks for your support!')} 
/>
```

Source Code:
```tsx
import React from "react";

interface ShineButtonProps {
  label?: string;
  onClick?: () => void;
  className?: string;
  size?: "sm" | "md" | "lg";
  bgColor?: string; // Can be hex or gradient
  disabled?: boolean;
  children?: React.ReactNode;
}

const sizeStyles: Record<
  NonNullable<ShineButtonProps["size"]>,
  { padding: string; fontSize: string }
> = {
  sm: { padding: "0.5rem 1rem", fontSize: "0.875rem" },
  md: { padding: "0.6rem 1.4rem", fontSize: "1rem" },
  lg: { padding: "0.8rem 1.8rem", fontSize: "1.125rem" },
};

export const ShineButton: React.FC<ShineButtonProps> = ({
  label = "Shine now",
  onClick,
  className = "",
  size = "md",
  bgColor = "linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)",
  disabled = false,
  children,
}) => {
  const { padding, fontSize } = sizeStyles[size];

  // Determine whether to use solid color or gradient
  const backgroundImage = bgColor.startsWith("linear-gradient")
    ? bgColor
    : `linear-gradient(to right, ${bgColor}, ${bgColor})`;

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`relative text-white font-medium rounded-md min-w-[120px] min-h-[44px] transition-all duration-700 ease-in-out
        border-none cursor-pointer shadow-[0px_0px_20px_rgba(71,184,255,0.5),0px_5px_5px_-1px_rgba(58,125,233,0.25),inset_4px_4px_8px_rgba(175,230,255,0.5),inset_-4px_-4px_8px_rgba(19,95,216,0.35)]
        focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-500
        hover:bg-[length:280%_auto] active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ${className}`}
      style={{
        backgroundImage: disabled ? "none" : backgroundImage,
        backgroundColor: disabled ? "hsl(var(--muted))" : undefined,
        backgroundSize: "280% auto",
        backgroundPosition: "initial",
        color: disabled ? "hsl(var(--muted-foreground))" : "hsl(0 0% 100%)",
        fontSize,
        padding,
        transition: "0.8s",
      }}
      onMouseEnter={(e) => {
        if (!disabled) {
          (e.target as HTMLButtonElement).style.backgroundPosition = "right top";
        }
      }}
      onMouseLeave={(e) => {
        if (!disabled) {
          (e.target as HTMLButtonElement).style.backgroundPosition = "initial";
        }
      }}
    >
      {children || label}

      {/* Shine effect */}
      {!disabled && (
        <div
          className="absolute top-0 left-[-75%] w-[200%] 
        h-full bg-white/40 skew-x-[-20deg] opacity-0 
        group-hover:opacity-100 animate-shine pointer-events-none z-20"
        />
      )}
    </button>
  );
};

```
--------------------------------------------------

### COMPONENT: stardust-button
Category: Button
Description: A premium, highly interactive button component featuring an integrated canvas stardust starfield background. The stardust particles drift ambiently, gravitate and swirl around the cursor on hover, and emit a shimmering burst animation on button click. Includes full light and dark mode adaptivity.
URL: https://lightswind.com/components/stardust-button
Import: import StardustButton from "@/components/lightswind/stardust-button"
Registry URL: https://lightswind.com/r/stardust-button.json
Install Command: npx lightswind@latest add stardust-button

Usage:
```tsx
import StardustButton from "@/components/lightswind/stardust-button";
import { Star } from "lucide-react";

export function Demo() {
  return (
    <StardustButton variant="cosmic" size="md">
      <Star className="w-4 h-4" />
      <span>Sparkle Dust</span>
    </StardustButton>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useRef, useState, useEffect } from "react";

export interface StardustButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "cosmic" | "aurora" | "nebula" | "glass";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  particleCount?: number;
  particleSpeed?: number;
  theme?: "light" | "dark" | "system";
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  size: number;
  color: string;
  alpha: number;
  decay: number;
  angle?: number;
  speed?: number;
  orbitRadius?: number;
}

export function StardustButton({
  children,
  variant = "cosmic",
  size = "md",
  className = "",
  particleCount = 45,
  particleSpeed = 1.0,
  theme = "system",
  ...props
}: StardustButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  // Theme tracking
  useEffect(() => {
    const checkTheme = () => {
      if (theme === "system") {
        setIsDarkMode(document.documentElement.classList.contains("dark"));
      } else {
        setIsDarkMode(theme === "dark");
      }
    };
    checkTheme();
    if (theme === "system") {
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return () => observer.disconnect();
    }
  }, [theme]);

  // Canvas particle logic
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let particles: Particle[] = [];
    let width = (canvas.width = canvas.offsetWidth);
    let height = (canvas.height = canvas.offsetHeight);

    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        width = canvas.width = entry.contentRect.width;
        height = canvas.height = entry.contentRect.height;
      }
    });

    if (buttonRef.current) {
      resizeObserver.observe(buttonRef.current);
    }

    const particleColors = {
      cosmic: isDarkMode
        ? ["#6366f1", "#a855f7", "#ec4899", "#fbbf24"]
        : ["#4f46e5", "#7c3aed", "#db2777", "#d97706"],
      aurora: isDarkMode
        ? ["#10b981", "#06b6d4", "#6366f1", "#a855f7"]
        : ["#059669", "#0891b2", "#2563eb", "#7c3aed"],
      nebula: isDarkMode
        ? ["#ec4899", "#f43f5e", "#d946ef", "#8b5cf6"]
        : ["#db2777", "#e11d48", "#c084fc", "#6d28d9"],
      glass: isDarkMode
        ? ["#ffffff", "#e4e4e7", "#a1a1aa", "#d4d4d8"]
        : ["#09090b", "#27272a", "#52525b", "#71717a"],
    };

    const colors = particleColors[variant] || particleColors.cosmic;

    const createParticle = (x: number, y: number, isBurst = false): Particle => {
      const sizeVal = Math.random() * 1.5 + 0.5;
      const angle = Math.random() * Math.PI * 2;
      const speed = isBurst
        ? Math.random() * 3 + 1
        : Math.random() * 0.6 + 0.2;

      return {
        x,
        y,
        vx: Math.cos(angle) * speed * particleSpeed,
        vy: Math.sin(angle) * speed * particleSpeed,
        size: sizeVal,
        color: colors[Math.floor(Math.random() * colors.length)],
        alpha: isBurst ? 1.0 : Math.random() * 0.6 + 0.4,
        decay: isBurst ? Math.random() * 0.03 + 0.02 : Math.random() * 0.008 + 0.005,
        angle: angle,
        orbitRadius: Math.random() * 40 + 10,
        speed: speed,
      };
    };

    // Initialize ambient particles
    for (let i = 0; i < (isHovered ? particleCount : particleCount / 3); i++) {
      particles.push(
        createParticle(Math.random() * width, Math.random() * height)
      );
    }

    const handleBurst = (e: Event) => {
      const { x, y } = (e as CustomEvent).detail;
      for (let i = 0; i < 20; i++) {
        particles.push(createParticle(x, y, true));
      }
    };

    canvas.addEventListener("particle-burst", handleBurst);

    const animate = () => {
      ctx.clearRect(0, 0, width, height);

      // Add ambient particles if count is below threshold
      const targetCount = isHovered ? particleCount : particleCount / 3;
      if (particles.length < targetCount && Math.random() < 0.3) {
        particles.push(
          createParticle(
            isHovered ? mousePos.x + (Math.random() * 20 - 10) : Math.random() * width,
            isHovered ? mousePos.y + (Math.random() * 20 - 10) : Math.random() * height
          )
        );
      }

      particles.forEach((p, idx) => {
        // Apply physics
        if (isHovered) {
          // Attract towards cursor
          const dx = mousePos.x - p.x;
          const dy = mousePos.y - p.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 80) {
            // Apply slight orbit/swirl motion around cursor
            const force = (80 - dist) / 80;
            p.vx += (dx / dist) * force * 0.08;
            p.vy += (dy / dist) * force * 0.08;

            // Swirl component
            p.vx += -(dy / dist) * force * 0.15;
            p.vy += (dx / dist) * force * 0.15;
          }
        }

        p.x += p.vx;
        p.y += p.vy;
        p.alpha -= p.decay;

        // Bounce/Wrap borders
        if (p.x < 0 || p.x > width) p.vx *= -1;
        if (p.y < 0 || p.y > height) p.vy *= -1;

        // Draw particle
        ctx.save();
        ctx.globalAlpha = Math.max(0, p.alpha);
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = p.color;

        // Soft glow for sparkling effect
        if (p.size > 1.2) {
          ctx.shadowBlur = 4;
          ctx.shadowColor = p.color;
        }

        ctx.fill();
        ctx.restore();

        // Filter out dead particles
        if (p.alpha <= 0) {
          particles.splice(idx, 1);
        }
      });

      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

    return () => {
      cancelAnimationFrame(animationFrameId);
      resizeObserver.disconnect();
      canvas.removeEventListener("particle-burst", handleBurst);
    };
  }, [isHovered, mousePos, variant, particleCount, particleSpeed, isDarkMode]);

  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.getBoundingClientRect();
    setMousePos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
    setIsPressed(true);
    // Trigger burst on click
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;

    const customEvent = new CustomEvent("particle-burst", {
      detail: { x: clickX, y: clickY },
    });
    canvas.dispatchEvent(customEvent);
  };

  // Size configurations
  const sizeClasses = {
    sm: "text-xs px-4 py-2 rounded-lg",
    md: "text-sm px-6 py-3 rounded-xl",
    lg: "text-base px-8 py-4 rounded-2xl",
    xl: "text-lg px-10 py-5 rounded-[20px]",
  };

  const getStyles = () => {
    if (isDarkMode) {
      switch (variant) {
        case "aurora":
          return {
            bg: "bg-emerald-950/20 backdrop-blur-md",
            border: "border-emerald-500/20 hover:border-emerald-400/40",
            textColor: "text-emerald-300 hover:text-white",
            glow: "shadow-[0_0_20px_rgba(16,185,129,0.15)]",
          };
        case "nebula":
          return {
            bg: "bg-pink-955/15 backdrop-blur-md",
            border: "border-pink-500/20 hover:border-pink-400/40",
            textColor: "text-pink-300 hover:text-white",
            glow: "shadow-[0_0_20px_rgba(236,72,153,0.15)]",
          };
        case "glass":
          return {
            bg: "bg-white/5 backdrop-blur-md",
            border: "border-white/10 hover:border-white/20",
            textColor: "text-zinc-200 hover:text-white",
            glow: "shadow-none",
          };
        case "cosmic":
        default:
          return {
            bg: "bg-indigo-950/25 backdrop-blur-md",
            border: "border-indigo-500/25 hover:border-indigo-400/45",
            textColor: "text-indigo-300 hover:text-white",
            glow: "shadow-[0_0_20px_rgba(99,102,241,0.2)]",
          };
      }
    } else {
      // Light Mode styles
      switch (variant) {
        case "aurora":
          return {
            bg: "bg-emerald-50/70 backdrop-blur-md",
            border: "border-emerald-200 hover:border-emerald-300/60",
            textColor: "text-emerald-700 hover:text-emerald-950",
            glow: "shadow-[0_0_15px_rgba(16,185,129,0.1)]",
          };
        case "nebula":
          return {
            bg: "bg-pink-50/70 backdrop-blur-md",
            border: "border-pink-200 hover:border-pink-300/60",
            textColor: "text-pink-700 hover:text-pink-950",
            glow: "shadow-[0_0_15px_rgba(236,72,153,0.1)]",
          };
        case "glass":
          return {
            bg: "bg-black/5 backdrop-blur-md",
            border: "border-black/5 hover:border-black/15",
            textColor: "text-zinc-800 hover:text-black",
            glow: "shadow-none",
          };
        case "cosmic":
        default:
          return {
            bg: "bg-indigo-50/70 backdrop-blur-md",
            border: "border-indigo-200/50 hover:border-indigo-300/80",
            textColor: "text-indigo-700 hover:text-indigo-950",
            glow: "shadow-[0_0_15px_rgba(99,102,241,0.1)]",
          };
      }
    }
  };

  const style = getStyles();

  return (
    <button
      ref={buttonRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
      onMouseDown={handleMouseDown}
      onMouseUp={() => setIsPressed(false)}
      className={`
        relative overflow-hidden group select-none transition-all duration-300
        flex items-center justify-center font-semibold tracking-wide
        border border-solid ${style.border} ${style.bg} ${style.textColor}
        ${sizeClasses[size]} ${isHovered ? style.glow : "shadow-sm"}
        ${className}
      `}
      style={{
        transform: isPressed ? "scale(0.96)" : isHovered ? "scale(1.02)" : "scale(1)",
        transition: "transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s",
      }}
      {...props}
    >
      {/* Interactive Stardust Starfield Canvas */}
      <canvas
        ref={canvasRef}
        className="absolute inset-0 pointer-events-none w-full h-full"
        style={{
          mixBlendMode: isDarkMode ? "screen" : "multiply",
          opacity: isHovered ? 0.9 : 0.45,
          transition: "opacity 0.5s ease",
        }}
      />

      {/* Button Content */}
      <span className="relative z-10 flex items-center gap-2">
        {children}
      </span>
    </button>
  );
}

export default StardustButton;

```
--------------------------------------------------

### COMPONENT: trial-button
Category: Button
Description: A reusable, animated button component with a shiny gradient effect. It integrates Tailwind CSS for base styling and custom CSS for advanced gradient animations, pseudo-elements for shimmer effects, and hover/focus interactions. Supports light and dark themes automatically.
URL: https://lightswind.com/components/trial-button
Import: import { TrialButton } from '@/components/lightswind/trial-button';
Registry URL: https://lightswind.com/r/trial-button.json
Install Command: npx lightswind@latest add trial-button

Usage:
```tsx
import { TrialButton } from '@/components/lightswind/trial-button';

<TrialButton onClick={() => console.log("Trial started!")}>
  Start Free Trial
</TrialButton>
```

Source Code:
```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";

export interface TrialButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * The text or elements to display inside the button.
   */
  children: React.ReactNode;

  /**
   * The color used for the animated trail / border gradient.
   * Example: "#6366f1" or "blue" or "#3b82f6"
   */
  trailColor?: string;

  /**
   * The color used for the shine highlight animation on hover.
   * Example: "white" or "#818cf8"
   */
  blurColor?: string;
}

/**
 * TrialButton
 * A high-end button with an animated 360° spinning gradient trail border.
 * Features a frosted glass blur backdrop effect in both light and dark themes.
 */
export const TrialButton = React.forwardRef<HTMLButtonElement, TrialButtonProps>(
  (
    {
      children,
      trailColor = "#6366f1",
      blurColor = "#818cf8",
      className,
      style,
      type = "button",
      ...props
    },
    ref
  ) => {
    return (
      <>
        <style>
          {`
          @property --gradient-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
          }
          @property --gradient-angle-offset {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
          }
          @property --gradient-percent {
            syntax: "<percentage>";
            initial-value: 5%;
            inherits: false;
          }
          @property --gradient-shine {
            syntax: "<color>";
            initial-value: white;
            inherits: false;
          }

          .shiny-custom-styles {
            --animation: gradient-angle linear infinite;
            --duration: 3s;
            --trail-color: var(--user-trail-color, #6366f1);
            --blur-color: var(--user-blur-color, #818cf8);
            --btn-surface: rgba(255, 255, 255, 0.6);
            --inset-border: rgba(0, 0, 0, 0.08);

            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);

            border: 1.5px solid transparent;
            background: 
              linear-gradient(var(--btn-surface), var(--btn-surface)) padding-box,
              conic-gradient(
                from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                transparent,
                var(--trail-color) var(--gradient-percent),
                var(--gradient-shine) calc(var(--gradient-percent) * 2),
                var(--trail-color) calc(var(--gradient-percent) * 3),
                transparent calc(var(--gradient-percent) * 4)
              ) border-box;
            box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px var(--inset-border);

            transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1),
                        --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1),
                        --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1);
            animation: var(--animation) var(--duration);
            animation-composition: add;
          }

          :is(.dark .shiny-custom-styles, [data-theme="dark"] .shiny-custom-styles) {
            --btn-surface: rgba(0, 0, 0, 0.55);
            --inset-border: rgba(255, 255, 255, 0.12);
            box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px var(--inset-border);
          }

          .shiny-custom-styles:is(:hover, :focus-visible) {
            --gradient-percent: 20%;
            --gradient-angle-offset: 95deg;
            --gradient-shine: var(--blur-color);
            animation-play-state: running;
          }

          @keyframes gradient-angle {
            to {
              --gradient-angle: 360deg;
            }
          }
        `}
        </style>

        <button
          ref={ref}
          type={type}
          className={cn(
            "backdrop-blur-xl font-bold shiny-custom-styles isolate relative cursor-pointer outline-offset-4 py-[0.85rem] px-[1.75rem] text-sm sm:text-base leading-tight rounded-full text-neutral-900 dark:text-white active:translate-y-px flex items-center justify-center transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]",
            className
          )}
          style={
            {
              "--user-trail-color": trailColor,
              "--user-blur-color": blurColor,
              ...style,
            } as React.CSSProperties
          }
          {...props}
        >
          <span className="relative z-10 flex items-center justify-center gap-2.5 whitespace-nowrap font-bold tracking-wide">
            {children}
          </span>
        </button>
      </>
    );
  }
);

TrialButton.displayName = "TrialButton";
export default TrialButton;

```
--------------------------------------------------

## CATEGORY (FREE): Cursor (6)

### COMPONENT: canvas-confetti-cursor
Category: Cursor
Description: A fully configurable Canvas-based animated confetti effect that follows the cursor. Designed for professional visual feedback and celebration effects.
URL: https://lightswind.com/components/canvas-confetti-cursor
Import: import { CanvasConfettiCursor } from "@/components/lightswind/canvas-confetti-cursor"
Registry URL: https://lightswind.com/r/canvas-confetti-cursor.json
Install Command: npx lightswind@latest add canvas-confetti-cursor

Usage:
```tsx
import { CanvasConfettiCursor } from "@/components/lightswind/canvas-confetti-cursor";

// Fullscreen usage
<CanvasConfettiCursor />

// Container usage
<div style={{ height: 300, position: 'relative' }}>
  <CanvasConfettiCursor fillParent particleCount={25} />
</div>

```

Source Code:
```tsx
import React, { useEffect, useRef } from "react";

export interface CanvasConfettiCursorProps {
  /**
   * Array of confetti colors to use.
   */
  colors?: string[];
  /**
   * Minimum confetti particle radius.
   */
  minSize?: number;
  /**
   * Maximum confetti particle radius.
   */
  maxSize?: number;
  /**
   * Number of particles to emit per burst.
   */
  particleCount?: number;
  /**
   * How frequently to spawn bursts (ms).
   */
  frequency?: number;
  /**
   * If true, fills parent (else covers screen).
   */
  fillParent?: boolean;
  /**
   * Opacity of the canvas overlay.
   */
  overlayOpacity?: number;
  /**
   * Confetti particle shrink speed (higher = faster shrink).
   */
  decay?: number;
  /**
   * Optional: callback on each explosion.
   */
  onExplosion?: (x: number, y: number) => void;
  /**
   * Enable/disable confetti effect.
   */
  enabled?: boolean;
  /**
   * Optional: custom styles for canvas
   */
  style?: React.CSSProperties;
  /**
   * Optional: extra className for canvas
   */
  className?: string;
}

export const CanvasConfettiCursor: React.FC<CanvasConfettiCursorProps> = ({
  colors = ["#FF3F8E", "#04C2C9", "#2E55C1", "#F9D423"],
  minSize = 2,
  maxSize = 7,
  particleCount = 40,
  frequency = 50,
  fillParent = false,
  overlayOpacity = 1,
  decay = 0.98,
  onExplosion,
  enabled = true,
  style,
  className,
}) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const mousePos = useRef({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
  const particles = useRef<any[]>([]);
  const animId = useRef<number>(undefined);
  const intervalRef = useRef<number | undefined>(undefined);
  const parentRef = useRef<HTMLDivElement | null>(null);
  
  // Handle canvas resize
  const resizeCanvas = () => {
    if (!canvasRef.current) return;
    if (fillParent && parentRef.current) {
      canvasRef.current.width = parentRef.current.offsetWidth;
      canvasRef.current.height = parentRef.current.offsetHeight;
    } else {
      canvasRef.current.width = window.innerWidth;
      canvasRef.current.height = window.innerHeight;
    }
  };

  useEffect(() => {
    resizeCanvas();
    if (!fillParent) {
      window.addEventListener("resize", resizeCanvas);
    }
    return () => {
      if (!fillParent) {
        window.removeEventListener("resize", resizeCanvas);
      }
    }
  }, [fillParent]);

  // Confetti logic (particle class, animation, emission)
  useEffect(() => {
    if (!enabled) return;
    let disposed = false;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d")!;
    let parentOffsetX = 0;
    let parentOffsetY = 0;
    if (fillParent && parentRef.current) {
      const rect = parentRef.current.getBoundingClientRect();
      parentOffsetX = rect.left;
      parentOffsetY = rect.top;
    }

    class Particle {
      x: number;
      y: number;
      size: number;
      color: string;
      speedX: number;
      speedY: number;
      constructor(x: number, y: number, size: number, color: string, speedX: number, speedY: number) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.speedX = speedX;
        this.speedY = speedY;
      }
      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.size *= decay;
      }
      draw(ctx: CanvasRenderingContext2D) {
        ctx.globalAlpha = overlayOpacity;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        ctx.globalAlpha = 1;
      }
    }

    const animate = () => {
      if (disposed || !canvasRef.current) return;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.current = particles.current.filter((p) => {
        p.update();
        p.draw(ctx);
        return p.size > 0.5;
      });
      animId.current = requestAnimationFrame(animate);
    };

    animate();
    return () => {
      disposed = true;
      animId.current && cancelAnimationFrame(animId.current);
      particles.current = [];
    };
    // eslint-disable-next-line
  }, [decay, overlayOpacity, fillParent, enabled]);

  useEffect(() => {
    if (!enabled) return;
    // OnMove (mouse/touch)
    function moveHandler(event: MouseEvent | TouchEvent) {
      let x = 0, y = 0;
      if ("touches" in event && event.touches[0]) {
        x = event.touches[0].clientX;
        y = event.touches[0].clientY;
      } else if ("clientX" in event) {
        x = event.clientX; y = event.clientY;
      }
      if (fillParent && parentRef.current) {
        const rect = parentRef.current.getBoundingClientRect();
        x -= rect.left;
        y -= rect.top;
      }
      mousePos.current = { x, y };
    }
    // Listen on canvas for local, window for full
    const target = fillParent && parentRef.current ? parentRef.current : window;
    target.addEventListener("mousemove", moveHandler);
    target.addEventListener("touchmove", moveHandler);
    return () => {
      target.removeEventListener("mousemove", moveHandler);
      target.removeEventListener("touchmove", moveHandler);
    };
  }, [fillParent, enabled]);

  // Confetti burst logic (interval spawn)
  useEffect(() => {
    if (!enabled) return;
    function createExplosion(x: number, y: number) {
      if (!canvasRef.current) return;
      for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * (maxSize - minSize) + minSize;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const speedX = (Math.random() * 2 - 1) * 2;
        const speedY = (Math.random() * 2 - 1) * 2;
        particles.current.push(new (class {
          x = x;
          y = y;
          size = size;
          color = color;
          speedX = speedX;
          speedY = speedY;
          update() { this.x += this.speedX; this.y += this.speedY; this.size *= decay; }
          draw(ctx: CanvasRenderingContext2D) {
            ctx.globalAlpha = overlayOpacity;
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
            ctx.globalAlpha = 1;
          }
        })());
      }
      if (typeof onExplosion === "function") onExplosion(x, y);
    }
    if (intervalRef.current) clearInterval(intervalRef.current);
    intervalRef.current = window.setInterval(() => {
      createExplosion(mousePos.current.x, mousePos.current.y);
    }, frequency);
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    }
  }, [
    colors, minSize, maxSize, particleCount, frequency, decay,
    onExplosion, enabled, fillParent, overlayOpacity
  ]);

  if (!enabled) return null;
  return (
    <div
      ref={parentRef}
      style={
        fillParent
          ? { position: "relative", width: "100%", height: "100%" }
          : { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 50 }
      }
    >
      <canvas
        ref={canvasRef}
        style={{
          position: fillParent ? "absolute" : "fixed",
          top: 0, left: 0,
          width: "100%",
          height: "100%",
          pointerEvents: fillParent ? "auto" : "none",
          background: "transparent",
          zIndex: 50,
          ...style
        }}
        className={className}
      />
    </div>
  );
};
```
--------------------------------------------------

### COMPONENT: grain-cursor
Category: Cursor
Description: A retro-dithered WebGL cursor shader component. Utilizes a Three.js ping-pong simulation buffer and an 8x8 Bayer ordered dithering matrix to render an authentic, high-speed particle grain cursor trail. Highly configurable with brush radius, decay, intensity, grain size, falloff exponent, color, and container-binding modes.
URL: https://lightswind.com/components/grain-cursor
Import: import { GrainCursor } from "@/components/lightswind/grain-cursor"
Registry URL: https://lightswind.com/r/grain-cursor.json
Install Command: npx lightswind@latest add grain-cursor

Usage:
```tsx
import { GrainCursor } from "@/components/lightswind/grain-cursor";

export default function App() {
  return (
    <div className="relative min-h-screen bg-black text-white">
      {/* Fullscreen Grain Cursor */}
      <GrainCursor
        color="#FF9FFC"
        grainSize={6.0}
        radius={0.10}
        intensity={0.5}
        decay={0.010}
        falloff={2.0}
        smoothness={0.4}
      />
      
      {/* Your page content */}
      <div className="flex h-screen items-center justify-center">
        <h1 className="text-5xl font-black uppercase">Grain Cursor</h1>
      </div>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

export interface GrainCursorProps {
  /** Color of the grain trail (HEX like #FF9FFC, or RGB / HSL format) */
  color?: string;
  /** Size of each pixelated grain / dither matrix cell (default: 6.0) */
  grainSize?: number;
  /** Normalized radius of the cursor influence brush (default: 0.10) */
  radius?: number;
  /** Peak intensity / density of the cursor stamp (default: 0.5) */
  intensity?: number;
  /** Decay rate of the trail per frame (default: 0.010) */
  decay?: number;
  /** Exponent falloff curve for the brush influence (default: 2.0) */
  falloff?: number;
  /** Cursor interpolation smoothing factor between 0.05 (very smooth) and 1.0 (instant) (default: 0.4) */
  smoothness?: number;
  /** Opacity multiplier for the grain trail (default: 1.0) */
  opacity?: number;
  /** CSS mix-blend-mode for the canvas overlay (e.g. 'normal', 'screen', 'lighten', 'color-dodge') (default: 'normal') */
  blendMode?: React.CSSProperties["mixBlendMode"];
  /** Whether to bind the grain cursor effect to parent element instead of entire window (default: false) */
  attachToParent?: boolean;
  /** Optional custom container element ref to track cursor inside */
  targetRef?: React.RefObject<HTMLElement | null>;
  /** Hide native browser cursor inside the target area (default: false) */
  hideNativeCursor?: boolean;
  /** Reset / clear cursor trail when mouse leaves target (default: true) */
  clearOnLeave?: boolean;
  /** CSS z-index layer for the canvas container (default: 99999 for fullscreen, 10 for container) */
  zIndex?: number;
  /** Extra CSS classes for wrapper container */
  className?: string;
  /** Extra inline styles */
  style?: React.CSSProperties;
  /** Optional children if using GrainCursor as a wrapper container */
  children?: React.ReactNode;
  /** Disable the cursor effect (default: false) */
  disabled?: boolean;
}

/** Standard 8x8 Bayer ordered dithering threshold matrix normalized to [0, 1) */
const BAYER_8X8 = new Float32Array([
   0, 32,  8, 40,  2, 34, 10, 42,
  48, 16, 56, 24, 50, 18, 58, 26,
  12, 44,  4, 36, 14, 46,  6, 38,
  60, 28, 52, 20, 62, 30, 54, 22,
   3, 35, 11, 43,  1, 33,  9, 41,
  51, 19, 59, 27, 49, 17, 57, 25,
  15, 47,  7, 39, 13, 45,  5, 37,
  63, 31, 55, 23, 61, 29, 53, 21,
].map((v) => v / 64.0));

/** Smoothstep helper identical to GLSL smoothstep(min, max, value) */
function smoothstep(edge0: number, edge1: number, x: number): number {
  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
  return t * t * (3 - 2 * t);
}

/** Helper: Parse Hex / RGB / HSL string to RGB [0..255] */
function parseColorToRgbBytes(colorStr: string): [number, number, number] {
  if (!colorStr) return [0, 245, 255]; // fallback cyan
  const trimmed = colorStr.trim();

  // Hex format
  if (trimmed.startsWith("#")) {
    const cleanHex = trimmed.replace("#", "");
    if (cleanHex.length === 3) {
      return [
        parseInt(cleanHex[0] + cleanHex[0], 16),
        parseInt(cleanHex[1] + cleanHex[1], 16),
        parseInt(cleanHex[2] + cleanHex[2], 16),
      ];
    }
    if (cleanHex.length >= 6) {
      return [
        parseInt(cleanHex.substring(0, 2), 16),
        parseInt(cleanHex.substring(2, 4), 16),
        parseInt(cleanHex.substring(4, 6), 16),
      ];
    }
  }

  // RGB / RGBA format
  const rgbMatch = trimmed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
  if (rgbMatch) {
    return [
      parseInt(rgbMatch[1], 10),
      parseInt(rgbMatch[2], 10),
      parseInt(rgbMatch[3], 10),
    ];
  }

  // HSL / named color fallback via scratch canvas
  if (typeof document !== "undefined") {
    try {
      const scratch = document.createElement("canvas");
      scratch.width = 1;
      scratch.height = 1;
      const ctx = scratch.getContext("2d");
      if (ctx) {
        ctx.fillStyle = trimmed;
        ctx.fillRect(0, 0, 1, 1);
        const imgData = ctx.getImageData(0, 0, 1, 1).data;
        return [imgData[0], imgData[1], imgData[2]];
      }
    } catch {
      // fallback below
    }
  }

  return [0, 245, 255];
}

export const GrainCursor: React.FC<GrainCursorProps> = ({
  color = "#00F5FF",
  grainSize = 6.0,
  radius = 0.10,
  intensity = 0.5,
  decay = 0.010,
  falloff = 2.0,
  smoothness = 0.4,
  opacity = 1.0,
  blendMode = "normal",
  attachToParent = false,
  targetRef,
  hideNativeCursor = false,
  clearOnLeave = true,
  zIndex,
  className = "",
  style = {},
  children,
  disabled = false,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [mounted, setMounted] = useState(false);

  // Live mutable props ref so animation loop always uses current values without tearing
  const propsRef = useRef({
    color,
    grainSize,
    radius,
    intensity,
    decay,
    falloff,
    smoothness,
    opacity,
    disabled,
  });

  useEffect(() => {
    propsRef.current = {
      color,
      grainSize,
      radius,
      intensity,
      decay,
      falloff,
      smoothness,
      opacity,
      disabled,
    };
  });

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted || disabled) return;

    const canvas = canvasRef.current;
    const container = containerRef.current;
    if (!canvas) return;

    const mainCtx = canvas.getContext("2d");
    if (!mainCtx) return;

    // Determine target tracking element
    const isBound = attachToParent || Boolean(targetRef);
    const targetElement: HTMLElement | Window = targetRef?.current
      ? targetRef.current
      : attachToParent && container?.parentElement
      ? container.parentElement
      : window;

    const getTargetDimensions = () => {
      if (isBound && targetElement && targetElement !== window) {
        const el = targetElement as HTMLElement;
        const rect = el.getBoundingClientRect();
        return {
          width: Math.max(Math.floor(rect.width), 1),
          height: Math.max(Math.floor(rect.height), 1),
        };
      }
      return {
        width: Math.max(window.innerWidth, 1),
        height: Math.max(window.innerHeight, 1),
      };
    };

    // Low-resolution offscreen canvas and simulation grid
    const offscreen = document.createElement("canvas");
    const offscreenCtx = offscreen.getContext("2d", { willReadFrequently: false });
    if (!offscreenCtx) return;

    let gridW = 0;
    let gridH = 0;
    let trail = new Float32Array(0);
    let imgData: ImageData | null = null;
    let pixels32: Uint32Array | null = null;
    let aspect = 1.0;
    let targetWidth = 0;
    let targetHeight = 0;

    const resize = () => {
      const dim = getTargetDimensions();
      targetWidth = dim.width;
      targetHeight = dim.height;
      aspect = targetWidth / targetHeight;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = targetWidth * dpr;
      canvas.height = targetHeight * dpr;
      canvas.style.width = `${targetWidth}px`;
      canvas.style.height = `${targetHeight}px`;

      const gSize = Math.max(propsRef.current.grainSize, 1.0);
      const newGridW = Math.max(1, Math.ceil(targetWidth / gSize));
      const newGridH = Math.max(1, Math.ceil(targetHeight / gSize));

      if (newGridW !== gridW || newGridH !== gridH) {
        gridW = newGridW;
        gridH = newGridH;
        offscreen.width = gridW;
        offscreen.height = gridH;

        trail = new Float32Array(gridW * gridH);
        imgData = offscreenCtx.createImageData(gridW, gridH);
        pixels32 = new Uint32Array(imgData.data.buffer);
      }
    };

    resize();

    // Mouse coordinates in normalized space [0..1]
    const targetMouse = { x: -10, y: -10 };
    const currentMouse = { x: -10, y: -10 };

    const handlePointerMove = (e: PointerEvent | MouseEvent) => {
      if (isBound && targetElement && targetElement !== window) {
        const el = targetElement as HTMLElement;
        const rect = el.getBoundingClientRect();
        targetMouse.x = (e.clientX - rect.left) / rect.width;
        targetMouse.y = (e.clientY - rect.top) / rect.height;
      } else {
        const w = window.innerWidth || document.documentElement.clientWidth || 1;
        const h = window.innerHeight || document.documentElement.clientHeight || 1;
        targetMouse.x = e.clientX / w;
        targetMouse.y = e.clientY / h;
      }
    };

    const handlePointerLeave = () => {
      if (clearOnLeave) {
        targetMouse.x = -10;
        targetMouse.y = -10;
      }
    };

    if (isBound && targetElement && targetElement !== window) {
      const el = targetElement as HTMLElement;
      el.addEventListener("pointermove", handlePointerMove as EventListener, { passive: true });
      el.addEventListener("mousemove", handlePointerMove as EventListener, { passive: true });
      el.addEventListener("pointerleave", handlePointerLeave);
      el.addEventListener("mouseleave", handlePointerLeave);
    } else {
      window.addEventListener("pointermove", handlePointerMove, { passive: true });
      document.addEventListener("pointermove", handlePointerMove, { passive: true });
      window.addEventListener("mousemove", handlePointerMove, { passive: true });
      document.body?.addEventListener("mousemove", handlePointerMove, { passive: true });
      window.addEventListener("pointerleave", handlePointerLeave);
    }

    let resizeObserver: ResizeObserver | null = null;
    if (isBound && targetElement && targetElement !== window && typeof ResizeObserver !== "undefined") {
      resizeObserver = new ResizeObserver(resize);
      resizeObserver.observe(targetElement as HTMLElement);
    } else {
      window.addEventListener("resize", resize);
    }

    // Animation Loop
    let animId: number;

    const animate = () => {
      animId = requestAnimationFrame(animate);

      const p = propsRef.current;
      if (p.disabled || !imgData || !pixels32) return;

      // Color parsing into 32-bit little-endian RGBA
      const [r, g, b] = parseColorToRgbBytes(p.color);
      const colorBase = (b << 16) | (g << 8) | r;

      const gSize = Math.max(p.grainSize, 1.0);
      const expectedGridW = Math.max(1, Math.ceil(targetWidth / gSize));
      const expectedGridH = Math.max(1, Math.ceil(targetHeight / gSize));
      if (expectedGridW !== gridW || expectedGridH !== gridH) {
        resize();
      }

      // Smooth mouse interpolation (lerp)
      const lerpFactor = Math.min(Math.max(p.smoothness, 0.01), 1.0);
      currentMouse.x += (targetMouse.x - currentMouse.x) * lerpFactor;
      currentMouse.y += (targetMouse.y - currentMouse.y) * lerpFactor;

      const mouseX = currentMouse.x;
      const mouseY = currentMouse.y;
      const uRadius = p.radius;
      const uExponent = p.falloff;
      const uIntensity = p.intensity;
      const uDecay = p.decay;
      const uOpacity = p.opacity;

      let hasVisiblePixels = false;

      // Update simulation grid & Bayer dithering
      for (let y = 0; y < gridH; y++) {
        const ny = (y + 0.5) / gridH;
        const dy = ny - mouseY;
        const rowOffset = y * gridW;
        const bayerRowOffset = (y % 8) * 8;

        for (let x = 0; x < gridW; x++) {
          const idx = rowOffset + x;
          const nx = (x + 0.5) / gridW;
          const dx = (nx - mouseX) * aspect;
          const dist = Math.hypot(dx, dy);

          // Cursor radial falloff stamp
          let cursorInfluence = 0.0;
          if (dist < uRadius) {
            cursorInfluence = Math.pow(1.0 - dist / uRadius, uExponent) * uIntensity;
          }

          // Trail decay + accumulation
          const prev = trail[idx];
          let t = Math.max(prev - uDecay, 0.0) + cursorInfluence;
          if (t > 1.0) t = 1.0;
          trail[idx] = t;

          if (t > 0.01) {
            // 8x8 Bayer dithering threshold test
            const threshold = BAYER_8X8[bayerRowOffset + (x % 8)];
            if (t >= threshold) {
              const alphaNorm = smoothstep(0.01, 0.08, t) * uOpacity;
              const a = Math.round(alphaNorm * 255);
              if (a > 0) {
                pixels32[idx] = (a << 24) | colorBase;
                hasVisiblePixels = true;
                continue;
              }
            }
          }
          pixels32[idx] = 0;
        }
      }

      // Draw onto offscreen canvas then hardware-scale onto main screen canvas
      offscreenCtx.putImageData(imgData, 0, 0);

      mainCtx.clearRect(0, 0, canvas.width, canvas.height);
      if (hasVisiblePixels) {
        mainCtx.imageSmoothingEnabled = false;
        mainCtx.drawImage(offscreen, 0, 0, canvas.width, canvas.height);
      }
    };

    animate();

    return () => {
      cancelAnimationFrame(animId);

      if (isBound && targetElement && targetElement !== window) {
        const el = targetElement as HTMLElement;
        el.removeEventListener("pointermove", handlePointerMove as EventListener);
        el.removeEventListener("mousemove", handlePointerMove as EventListener);
        el.removeEventListener("pointerleave", handlePointerLeave);
        el.removeEventListener("mouseleave", handlePointerLeave);
        if (resizeObserver) resizeObserver.disconnect();
      } else {
        window.removeEventListener("pointermove", handlePointerMove);
        document.removeEventListener("pointermove", handlePointerMove);
        window.removeEventListener("mousemove", handlePointerMove);
        document.body?.removeEventListener("mousemove", handlePointerMove);
        window.removeEventListener("pointerleave", handlePointerLeave);
        window.removeEventListener("resize", resize);
      }
    };
  }, [mounted, attachToParent, targetRef, clearOnLeave, disabled]);

  if (!mounted) return null;

  const isBound = attachToParent || Boolean(targetRef);
  const resolvedZIndex = zIndex !== undefined ? zIndex : isBound ? 10 : 99999;

  const containerClasses = isBound
    ? "absolute inset-0 w-full h-full pointer-events-none overflow-hidden"
    : "fixed top-0 left-0 w-full h-full pointer-events-none";

  const cursorClass = hideNativeCursor ? "cursor-none" : "";

  const content = (
    <div
      ref={containerRef}
      className={`${containerClasses} ${cursorClass} ${className}`}
      style={{
        zIndex: resolvedZIndex,
        mixBlendMode: blendMode,
        ...style,
      }}
    >
      <canvas
        ref={canvasRef}
        className="w-full h-full block pointer-events-none"
      />
      {children}
    </div>
  );

  if (!isBound && typeof document !== "undefined") {
    return createPortal(content, document.body);
  }

  return content;
};

export default GrainCursor;

```
--------------------------------------------------

### COMPONENT: particle-orbit-effect
Category: Cursor
Description: Beautiful orbital particle effect that follows cursor movement across the entire screen. Creates mesmerizing trails of particles that orbit around the mouse position with customizable colors, intensity, and behavior.
URL: https://lightswind.com/components/particle-orbit-effect
Import: import ParticleOrbitEffect from "@/components/lightswind/particle-orbit-effect"
Registry URL: https://lightswind.com/r/particle-orbit-effect.json
Install Command: npx lightswind@latest add particle-orbit-effect

Usage:
```tsx
import ParticleOrbitEffect from "@/components/lightswind/particle-orbit-effect";

// Basic Usage
<ParticleOrbitEffect />

// Custom Configuration
<ParticleOrbitEffect 
  particleCount={30}
  radius={80}
  intensity={1.2}
  colorRange={[180, 270]}
  autoColors={true}
/>

// Energetic Preset
<ParticleOrbitEffect 
  particleCount={40}
  radius={90}
  particleSpeed={0.04}
  radiusScale={2}
  intensity={1.5}
  colorRange={[0, 60]}
/>
// Subtle Background Effect
<ParticleOrbitEffect 
  particleCount={15}
  radius={50}
  intensity={0.7}
  fadeOpacity={0.03}
  colorRange={[180, 270]}
  disabled={false}
/>
```

Source Code:
```tsx
import React, { useEffect, useRef, useCallback } from "react";
import { cn } from "@/components/lib/utils";

export interface ParticleOrbitEffectProps {
  className?: string;
  style?: React.CSSProperties;
  particleCount?: number;
  radius?: number;
  particleSpeed?: number;
  radiusScale?: number;
  intensity?: number;
  fadeOpacity?: number;
  colorRange?: [number, number]; // HSL hue range
  disabled?: boolean;
  followMouse?: boolean;
  autoColors?: boolean;
  particleSize?: number;
}

interface Particle {
  size: number;
  position: { x: number; y: number };
  offset: { x: number; y: number };
  shift: { x: number; y: number };
  speed: number;
  targetSize: number;
  fillColor: string;
  orbit: number;
  hue: number;
  trail: Array<{ x: number; y: number; alpha: number }>;
}

const ParticleOrbitEffect: React.FC<ParticleOrbitEffectProps> = ({
  className,
  style,
  particleCount = 25,
  radius = 70,
  particleSpeed = 0.025,
  radiusScale = 1.5,
  intensity = 1,
  fadeOpacity = 0.05,
  colorRange = [0, 360],
  disabled = false,
  followMouse = true,
  autoColors = true,
  particleSize = 2
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const animationRef = useRef<number>(undefined);
  const particlesRef = useRef<Particle[]>([]);
  const mouseRef = useRef({
    x: 0,
    y: 0,
    isDown: false,
    radiusScale: 1,
  });
  const colorTimerRef = useRef(0);

  // Helper to generate HSL color
  const generateColor = useCallback((hue?: number) => {
    const h = hue ?? (colorRange[0] + Math.random() * (colorRange[1] - colorRange[0]));
    return `hsl(${h}, 70%, 60%)`;
  }, [colorRange]);

  // Create particles
  const createParticles = useCallback((initialX: number, initialY: number) => {
    const particles: Particle[] = [];
    for (let i = 0; i < particleCount; i++) {
      const hue = colorRange[0] + Math.random() * (colorRange[1] - colorRange[0]);
      particles.push({
        size: particleSize,
        position: { x: initialX, y: initialY },
        offset: { x: 0, y: 0 },
        shift: { x: initialX, y: initialY },
        speed: particleSpeed + Math.random() * particleSpeed,
        targetSize: particleSize,
        fillColor: generateColor(hue),
        orbit: radius * 0.5 + radius * 0.5 * Math.random(),
        hue,
        trail: []
      });
    }
    return particles;
  }, [particleCount, particleSpeed, particleSize, radius, generateColor, colorRange]);

  // Update canvas dimensions
  const updateCanvasDimensions = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const width = window.innerWidth;
    const height = window.innerHeight;
    
    canvas.width = width;
    canvas.height = height;
    
    // Initialize mouse position to center
    mouseRef.current.x = width / 2;
    mouseRef.current.y = height / 2;
    
    // Create initial particles
    particlesRef.current = createParticles(mouseRef.current.x, mouseRef.current.y);
  }, [createParticles]);

  useEffect(() => {
    if (disabled) return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const context = canvas.getContext("2d");
    if (!context) return;

    // Event handlers
    const handleMouseMove = (event: MouseEvent) => {
      if (!followMouse) return;
      mouseRef.current.x = event.clientX;
      mouseRef.current.y = event.clientY;
    };

    const handleMouseDown = () => {
      mouseRef.current.isDown = true;
    };

    const handleMouseUp = () => {
      mouseRef.current.isDown = false;
    };

    const handleTouchMove = (event: TouchEvent) => {
      if (!followMouse || event.touches.length === 0) return;
      mouseRef.current.x = event.touches[0].clientX;
      mouseRef.current.y = event.touches[0].clientY;
    };

    const handleTouchStart = (event: TouchEvent) => {
      if (event.touches.length === 0) return;
      mouseRef.current.isDown = true;
      if (followMouse) {
        mouseRef.current.x = event.touches[0].clientX;
        mouseRef.current.y = event.touches[0].clientY;
      }
    };

    const handleTouchEnd = () => {
      mouseRef.current.isDown = false;
    };

    // Animation loop
    const draw = () => {
      if (!context || !canvas) return;

      // Update color timer for auto colors
      if (autoColors) {
        colorTimerRef.current += 0.016; // ~60fps
        if (colorTimerRef.current >= 2) { // Change colors every 2 seconds
          colorTimerRef.current = 0;
          particlesRef.current.forEach(particle => {
            particle.hue = colorRange[0] + Math.random() * (colorRange[1] - colorRange[0]);
            particle.fillColor = generateColor(particle.hue);
          });
        }
      }

      // Animate radius scale
      const targetScale = mouseRef.current.isDown ? radiusScale : 1;
      mouseRef.current.radiusScale += (targetScale - mouseRef.current.radiusScale) * 0.02;

      // Clear canvas completely for transparent background
      context.clearRect(0, 0, canvas.width, canvas.height);

      // Update and draw particles
      for (let i = 0; i < particlesRef.current.length; i++) {
        const particle = particlesRef.current[i];

        // Update particle position
        particle.offset.x += particle.speed * intensity;
        particle.offset.y += particle.speed * intensity;
        
        particle.shift.x += (mouseRef.current.x - particle.shift.x) * particle.speed * intensity;
        particle.shift.y += (mouseRef.current.y - particle.shift.y) * particle.speed * intensity;
        
        const orbitRadius = particle.orbit * mouseRef.current.radiusScale * intensity;
        particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * orbitRadius;
        particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * orbitRadius;

        // Keep particles within canvas bounds
        particle.position.x = Math.max(0, Math.min(particle.position.x, canvas.width));
        particle.position.y = Math.max(0, Math.min(particle.position.y, canvas.height));

        // Update trail
        particle.trail.push({
          x: particle.position.x,
          y: particle.position.y,
          alpha: 1
        });

        // Limit trail length and fade existing points
        const maxTrailLength = Math.max(5, Math.floor(40 * intensity));
        if (particle.trail.length > maxTrailLength) {
          particle.trail.shift();
        }

        // Fade trail points
        particle.trail.forEach((point, index) => {
          point.alpha = (index + 1) / particle.trail.length * fadeOpacity * 20;
        });

        // Draw trail
        if (particle.trail.length > 1) {
          for (let j = 1; j < particle.trail.length; j++) {
            const prev = particle.trail[j - 1];
            const curr = particle.trail[j];
            
            context.beginPath();
            context.strokeStyle = particle.fillColor;
            context.lineWidth = particle.size * 0.3 * curr.alpha;
            context.globalAlpha = curr.alpha;
            context.moveTo(prev.x, prev.y);
            context.lineTo(curr.x, curr.y);
            context.stroke();
          }
        }

        // Animate particle size
        particle.size += (particle.targetSize - particle.size) * 0.05;
        if (Math.abs(particle.size - particle.targetSize) < 0.1) {
          particle.targetSize = particleSize + Math.random() * particleSize * 2;
        }

        // Draw main particle
        context.beginPath();
        context.fillStyle = particle.fillColor;
        context.globalAlpha = 0.9;
        context.arc(
          particle.position.x,
          particle.position.y,
          particle.size * 0.5,
          0,
          Math.PI * 2
        );
        context.fill();
      }

      context.globalAlpha = 1;
      animationRef.current = requestAnimationFrame(draw);
    };

    // Initialize
    updateCanvasDimensions();

    // Add event listeners
    window.addEventListener("resize", updateCanvasDimensions);
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mousedown", handleMouseDown);
    window.addEventListener("mouseup", handleMouseUp);
    window.addEventListener("touchmove", handleTouchMove, { passive: true });
    window.addEventListener("touchstart", handleTouchStart, { passive: true });
    window.addEventListener("touchend", handleTouchEnd);

    // Start animation
    animationRef.current = requestAnimationFrame(draw);

    // Cleanup
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
      window.removeEventListener("resize", updateCanvasDimensions);
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mousedown", handleMouseDown);
      window.removeEventListener("mouseup", handleMouseUp);
      window.removeEventListener("touchmove", handleTouchMove);
      window.removeEventListener("touchstart", handleTouchStart);
      window.removeEventListener("touchend", handleTouchEnd);
    };
  }, [
    disabled,
    followMouse,
    particleCount,
    radius,
    particleSpeed,
    radiusScale,
    intensity,
    fadeOpacity,
    colorRange,
    autoColors,
    particleSize,
    updateCanvasDimensions,
    createParticles,
    generateColor
  ]);

  if (disabled) {
    return null;
  }

  return (
    <div className={cn("fixed top-0 left-0 z-50 pointer-events-none w-full h-full", className)}>
      <canvas
        ref={canvasRef}
        className="w-screen h-screen block"
        style={style}
        aria-hidden="true"
      />
    </div>
  );
};

export default ParticleOrbitEffect;
```
--------------------------------------------------

### COMPONENT: smokey-cursor
Category: Cursor
Description: An interactive WebGL-based fluid simulation that follows cursor movements.
URL: https://lightswind.com/components/smokey-cursor
Import: import SmokeyCursor from "@/components/lightswind/smokey-cursor"
Registry URL: https://lightswind.com/r/smokey-cursor.json
Install Command: npx lightswind@latest add smokey-cursor

Usage:
```tsx
import SmokeyCursor from "@/components/lightswind/smokey-cursor";

// Basic Usage - Full screen overlay
<SmokeyCursor />

// Custom Simulation Quality
<SmokeyCursor 
  simulationResolution={256}
  dyeResolution={1024}
  enableShading={true}
/>

// Performance Optimized for Mobile
<SmokeyCursor
  simulationResolution={64}
  dyeResolution={512}
  densityDissipation={5}
  velocityDissipation={3}
  enableShading={false}
/>

// High Quality Desktop Experience
<SmokeyCursor
  simulationResolution={256}
  dyeResolution={2048}
  densityDissipation={2}
  curl={5}
  splatForce={8000}
  enableShading={true}
/>

// Intense Fire-like Effect
<SmokeyCursor
  curl={10}
  splatForce={12000}
  densityDissipation={1.5}
  colorUpdateSpeed={20}
  backgroundColor={{ r: 0.8, g: 0.1, b: 0 }}
/>

// Subtle Ambient Effect
<SmokeyCursor
  splatRadius={0.1}
  splatForce={3000}
  densityDissipation={8}
  velocityDissipation={5}
  colorUpdateSpeed={5}
/>
```

Source Code:
```tsx
"use client";
import React, { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

interface ColorRGB {
  r: number;
  g: number;
  b: number;
}

interface SmokeyCursorProps {
  simulationResolution?: number;
  dyeResolution?: number;
  captureResolution?: number;
  densityDissipation?: number;
  velocityDissipation?: number;
  pressure?: number;
  pressureIterations?: number;
  curl?: number;
  splatRadius?: number;
  splatForce?: number;
  enableShading?: boolean;
  colorUpdateSpeed?: number;
  backgroundColor?: ColorRGB;
  transparent?: boolean;
  className?: string;
  disabled?: boolean;
  intensity?: number;
  followMouse?: boolean;
  autoColors?: boolean;
}

interface Pointer {
  id: number;
  texcoordX: number;
  texcoordY: number;
  prevTexcoordX: number;
  prevTexcoordY: number;
  deltaX: number;
  deltaY: number;
  down: boolean;
  moved: boolean;
  color: ColorRGB;
}

function pointerPrototype(): Pointer {
  return {
    id: -1,
    texcoordX: 0,
    texcoordY: 0,
    prevTexcoordX: 0,
    prevTexcoordY: 0,
    deltaX: 0,
    deltaY: 0,
    down: false,
    moved: false,
    color: { r: 0, g: 0, b: 0 },
  };
}

export default function SmokeyCursor({
  simulationResolution = 128,
  dyeResolution = 1440,
  captureResolution = 512,
  densityDissipation = 3.5,
  velocityDissipation = 2,
  pressure = 0.1,
  pressureIterations = 20,
  curl = 3,
  splatRadius = 0.2,
  splatForce = 6000,
  enableShading = true,
  colorUpdateSpeed = 10,
  backgroundColor = { r: 0.5, g: 0, b: 0 },
  transparent = true,
  className = "",
  disabled = false,
  intensity = 1,
  followMouse = true,
  autoColors = true,
}: SmokeyCursorProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return; // Guard canvas early

    let animationId: number;

    // Pointer and config setup
    let pointers: Pointer[] = [pointerPrototype()];

    // All these are guaranteed numbers due to destructuring defaults
    // So we cast them to remove TS warnings:
    let config = {
      SIM_RESOLUTION: simulationResolution,
      DYE_RESOLUTION: dyeResolution,
      CAPTURE_RESOLUTION: captureResolution,
      DENSITY_DISSIPATION: densityDissipation,
      VELOCITY_DISSIPATION: velocityDissipation,
      PRESSURE: pressure,
      PRESSURE_ITERATIONS: pressureIterations,
      CURL: curl,
      SPLAT_RADIUS: splatRadius,
      SPLAT_FORCE: splatForce,
      SHADING: enableShading,
      COLOR_UPDATE_SPEED: colorUpdateSpeed,
      PAUSED: false,
      BACK_COLOR: backgroundColor,
      TRANSPARENT: transparent,
    };

    // Get WebGL context (WebGL1 or WebGL2)
    const { gl, ext } = getWebGLContext(canvas);
    if (!gl || !ext) return;

    // If no linear filtering, reduce resolution
    if (!ext.supportLinearFiltering) {
      config.DYE_RESOLUTION = 256;
      config.SHADING = false;
    }

    function getWebGLContext(canvas: HTMLCanvasElement) {
      const params = {
        alpha: true,
        depth: false,
        stencil: false,
        antialias: false,
        preserveDrawingBuffer: false,
      };

      let gl = canvas.getContext(
        "webgl2",
        params
      ) as WebGL2RenderingContext | null;

      if (!gl) {
        gl = (canvas.getContext("webgl", params) ||
          canvas.getContext(
            "experimental-webgl",
            params
          )) as WebGL2RenderingContext | null;
      }

      if (!gl) {
        throw new Error("Unable to initialize WebGL.");
      }

      const isWebGL2 = "drawBuffers" in gl;

      let supportLinearFiltering = false;
      let halfFloat: OES_texture_half_float | null = null;

      if (isWebGL2) {
        (gl as WebGL2RenderingContext).getExtension("EXT_color_buffer_float");
        supportLinearFiltering = !!(gl as WebGL2RenderingContext).getExtension(
          "OES_texture_float_linear"
        );
      } else {
        halfFloat = gl.getExtension("OES_texture_half_float");
        supportLinearFiltering = !!gl.getExtension(
          "OES_texture_half_float_linear"
        );
      }

      gl.clearColor(0, 0, 0, 1);

      const halfFloatTexType = isWebGL2
        ? (gl as WebGL2RenderingContext).HALF_FLOAT
        : (halfFloat && (halfFloat as any).HALF_FLOAT_OES) || 0;

      let formatRGBA: any;
      let formatRG: any;
      let formatR: any;

      if (isWebGL2) {
        formatRGBA = getSupportedFormat(
          gl,
          (gl as WebGL2RenderingContext).RGBA16F,
          gl.RGBA,
          halfFloatTexType
        );
        formatRG = getSupportedFormat(
          gl,
          (gl as WebGL2RenderingContext).RG16F,
          (gl as WebGL2RenderingContext).RG,
          halfFloatTexType
        );
        formatR = getSupportedFormat(
          gl,
          (gl as WebGL2RenderingContext).R16F,
          (gl as WebGL2RenderingContext).RED,
          halfFloatTexType
        );
      } else {
        formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
        formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
        formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
      }

      return {
        gl,
        ext: {
          formatRGBA,
          formatRG,
          formatR,
          halfFloatTexType,
          supportLinearFiltering,
        },
      };
    }

    function getSupportedFormat(
      gl: WebGLRenderingContext | WebGL2RenderingContext,
      internalFormat: number,
      format: number,
      type: number
    ): { internalFormat: number; format: number } | null {
      if (!supportRenderTextureFormat(gl, internalFormat, format, type)) {
        // For WebGL2 fallback:
        if ("drawBuffers" in gl) {
          const gl2 = gl as WebGL2RenderingContext;
          switch (internalFormat) {
            case gl2.R16F:
              return getSupportedFormat(gl2, gl2.RG16F, gl2.RG, type);
            case gl2.RG16F:
              return getSupportedFormat(gl2, gl2.RGBA16F, gl2.RGBA, type);
            default:
              return null;
          }
        }
        return null;
      }
      return { internalFormat, format };
    }

    function supportRenderTextureFormat(
      gl: WebGLRenderingContext | WebGL2RenderingContext,
      internalFormat: number,
      format: number,
      type: number
    ) {
      const texture = gl.createTexture();
      if (!texture) return false;

      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        internalFormat,
        4,
        4,
        0,
        format,
        type,
        null
      );

      const fbo = gl.createFramebuffer();
      if (!fbo) return false;

      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
      gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        gl.TEXTURE_2D,
        texture,
        0
      );
      const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
      return status === gl.FRAMEBUFFER_COMPLETE;
    }

    function hashCode(s: string) {
      if (!s.length) return 0;
      let hash = 0;
      for (let i = 0; i < s.length; i++) {
        hash = (hash << 5) - hash + s.charCodeAt(i);
        hash |= 0;
      }
      return hash;
    }

    function addKeywords(source: string, keywords: string[] | null) {
      if (!keywords) return source;
      let keywordsString = "";
      for (const keyword of keywords) {
        keywordsString += `#define ${keyword}\n`;
      }
      return keywordsString + source;
    }

    function compileShader(
      type: number,
      source: string,
      keywords: string[] | null = null
    ): WebGLShader | null {
      const shaderSource = addKeywords(source, keywords);
      const shader = gl.createShader(type);
      if (!shader) return null;
      gl.shaderSource(shader, shaderSource);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.trace(gl.getShaderInfoLog(shader));
      }
      return shader;
    }

    function createProgram(
      vertexShader: WebGLShader | null,
      fragmentShader: WebGLShader | null
    ): WebGLProgram | null {
      if (!vertexShader || !fragmentShader) return null;
      const program = gl.createProgram();
      if (!program) return null;
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.trace(gl.getProgramInfoLog(program));
      }
      return program;
    }

    function getUniforms(program: WebGLProgram) {
      let uniforms: Record<string, WebGLUniformLocation | null> = {};
      const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
      for (let i = 0; i < uniformCount; i++) {
        const uniformInfo = gl.getActiveUniform(program, i);
        if (uniformInfo) {
          uniforms[uniformInfo.name] = gl.getUniformLocation(
            program,
            uniformInfo.name
          );
        }
      }
      return uniforms;
    }

    class Program {
      program: WebGLProgram | null;
      uniforms: Record<string, WebGLUniformLocation | null>;

      constructor(
        vertexShader: WebGLShader | null,
        fragmentShader: WebGLShader | null
      ) {
        this.program = createProgram(vertexShader, fragmentShader);
        this.uniforms = this.program ? getUniforms(this.program) : {};
      }

      bind() {
        if (this.program) gl.useProgram(this.program);
      }
    }

    class Material {
      vertexShader: WebGLShader | null;
      fragmentShaderSource: string;
      programs: Record<number, WebGLProgram | null>;
      activeProgram: WebGLProgram | null;
      uniforms: Record<string, WebGLUniformLocation | null>;

      constructor(
        vertexShader: WebGLShader | null,
        fragmentShaderSource: string
      ) {
        this.vertexShader = vertexShader;
        this.fragmentShaderSource = fragmentShaderSource;
        this.programs = {};
        this.activeProgram = null;
        this.uniforms = {};
      }

      setKeywords(keywords: string[]) {
        let hash = 0;
        for (const kw of keywords) {
          hash += hashCode(kw);
        }
        let program = this.programs[hash];
        if (program == null) {
          const fragmentShader = compileShader(
            gl.FRAGMENT_SHADER,
            this.fragmentShaderSource,
            keywords
          );
          program = createProgram(this.vertexShader, fragmentShader);
          this.programs[hash] = program;
        }
        if (program === this.activeProgram) return;
        if (program) {
          this.uniforms = getUniforms(program);
        }
        this.activeProgram = program;
      }

      bind() {
        if (this.activeProgram) {
          gl.useProgram(this.activeProgram);
        }
      }
    }

    // -------------------- Shaders --------------------
    const baseVertexShader = compileShader(
      gl.VERTEX_SHADER,
      `
      precision highp float;
      attribute vec2 aPosition;
      varying vec2 vUv;
      varying vec2 vL;
      varying vec2 vR;
      varying vec2 vT;
      varying vec2 vB;
      uniform vec2 texelSize;

      void main () {
        vUv = aPosition * 0.5 + 0.5;
        vL = vUv - vec2(texelSize.x, 0.0);
        vR = vUv + vec2(texelSize.x, 0.0);
        vT = vUv + vec2(0.0, texelSize.y);
        vB = vUv - vec2(0.0, texelSize.y);
        gl_Position = vec4(aPosition, 0.0, 1.0);
      }
    `
    );

    const copyShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      uniform sampler2D uTexture;

      void main () {
          gl_FragColor = texture2D(uTexture, vUv);
      }
    `
    );

    const clearShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      uniform sampler2D uTexture;
      uniform float value;

      void main () {
          gl_FragColor = value * texture2D(uTexture, vUv);
      }
    `
    );

    const displayShaderSource = `
      precision highp float;
      precision highp sampler2D;
      varying vec2 vUv;
      varying vec2 vL;
      varying vec2 vR;
      varying vec2 vT;
      varying vec2 vB;
      uniform sampler2D uTexture;
      uniform sampler2D uDithering;
      uniform vec2 ditherScale;
      uniform vec2 texelSize;

      vec3 linearToGamma (vec3 color) {
          color = max(color, vec3(0));
          return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));
      }

      void main () {
          vec3 c = texture2D(uTexture, vUv).rgb;
          #ifdef SHADING
              vec3 lc = texture2D(uTexture, vL).rgb;
              vec3 rc = texture2D(uTexture, vR).rgb;
              vec3 tc = texture2D(uTexture, vT).rgb;
              vec3 bc = texture2D(uTexture, vB).rgb;

              float dx = length(rc) - length(lc);
              float dy = length(tc) - length(bc);

              vec3 n = normalize(vec3(dx, dy, length(texelSize)));
              vec3 l = vec3(0.0, 0.0, 1.0);

              float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
              c *= diffuse;
          #endif

          float a = max(c.r, max(c.g, c.b));
          gl_FragColor = vec4(c, a);
      }
    `;

    const splatShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision highp float;
      precision highp sampler2D;
      varying vec2 vUv;
      uniform sampler2D uTarget;
      uniform float aspectRatio;
      uniform vec3 color;
      uniform vec2 point;
      uniform float radius;

      void main () {
          vec2 p = vUv - point.xy;
          p.x *= aspectRatio;
          vec3 splat = exp(-dot(p, p) / radius) * color;
          vec3 base = texture2D(uTarget, vUv).xyz;
          gl_FragColor = vec4(base + splat, 1.0);
      }
    `
    );

    const advectionShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision highp float;
      precision highp sampler2D;
      varying vec2 vUv;
      uniform sampler2D uVelocity;
      uniform sampler2D uSource;
      uniform vec2 texelSize;
      uniform vec2 dyeTexelSize;
      uniform float dt;
      uniform float dissipation;

      vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
          vec2 st = uv / tsize - 0.5;
          vec2 iuv = floor(st);
          vec2 fuv = fract(st);

          vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
          vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
          vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
          vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);

          return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
      }

      void main () {
          #ifdef MANUAL_FILTERING
              vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
              vec4 result = bilerp(uSource, coord, dyeTexelSize);
          #else
              vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
              vec4 result = texture2D(uSource, coord);
          #endif
          float decay = 1.0 + dissipation * dt;
          gl_FragColor = result / decay;
      }
    `,
      ext.supportLinearFiltering ? null : ["MANUAL_FILTERING"]
    );

    const divergenceShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      varying highp vec2 vL;
      varying highp vec2 vR;
      varying highp vec2 vT;
      varying highp vec2 vB;
      uniform sampler2D uVelocity;

      void main () {
          float L = texture2D(uVelocity, vL).x;
          float R = texture2D(uVelocity, vR).x;
          float T = texture2D(uVelocity, vT).y;
          float B = texture2D(uVelocity, vB).y;

          vec2 C = texture2D(uVelocity, vUv).xy;
          if (vL.x < 0.0) { L = -C.x; }
          if (vR.x > 1.0) { R = -C.x; }
          if (vT.y > 1.0) { T = -C.y; }
          if (vB.y < 0.0) { B = -C.y; }

          float div = 0.5 * (R - L + T - B);
          gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
      }
    `
    );

    const curlShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      varying highp vec2 vL;
      varying highp vec2 vR;
      varying highp vec2 vT;
      varying highp vec2 vB;
      uniform sampler2D uVelocity;

      void main () {
          float L = texture2D(uVelocity, vL).y;
          float R = texture2D(uVelocity, vR).y;
          float T = texture2D(uVelocity, vT).x;
          float B = texture2D(uVelocity, vB).x;
          float vorticity = R - L - T + B;
          gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
      }
    `
    );

    const vorticityShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision highp float;
      precision highp sampler2D;
      varying vec2 vUv;
      varying vec2 vL;
      varying vec2 vR;
      varying vec2 vT;
      varying vec2 vB;
      uniform sampler2D uVelocity;
      uniform sampler2D uCurl;
      uniform float curl;
      uniform float dt;

      void main () {
          float L = texture2D(uCurl, vL).x;
          float R = texture2D(uCurl, vR).x;
          float T = texture2D(uCurl, vT).x;
          float B = texture2D(uCurl, vB).x;
          float C = texture2D(uCurl, vUv).x;

          vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
          force /= length(force) + 0.0001;
          force *= curl * C;
          force.y *= -1.0;

          vec2 velocity = texture2D(uVelocity, vUv).xy;
          velocity += force * dt;
          velocity = min(max(velocity, -1000.0), 1000.0);
          gl_FragColor = vec4(velocity, 0.0, 1.0);
      }
    `
    );

    const pressureShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      varying highp vec2 vL;
      varying highp vec2 vR;
      varying highp vec2 vT;
      varying highp vec2 vB;
      uniform sampler2D uPressure;
      uniform sampler2D uDivergence;

      void main () {
          float L = texture2D(uPressure, vL).x;
          float R = texture2D(uPressure, vR).x;
          float T = texture2D(uPressure, vT).x;
          float B = texture2D(uPressure, vB).x;
          float C = texture2D(uPressure, vUv).x;
          float divergence = texture2D(uDivergence, vUv).x;
          float pressure = (L + R + B + T - divergence) * 0.25;
          gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
      }
    `
    );

    const gradientSubtractShader = compileShader(
      gl.FRAGMENT_SHADER,
      `
      precision mediump float;
      precision mediump sampler2D;
      varying highp vec2 vUv;
      varying highp vec2 vL;
      varying highp vec2 vR;
      varying highp vec2 vT;
      varying highp vec2 vB;
      uniform sampler2D uPressure;
      uniform sampler2D uVelocity;

      void main () {
          float L = texture2D(uPressure, vL).x;
          float R = texture2D(uPressure, vR).x;
          float T = texture2D(uPressure, vT).x;
          float B = texture2D(uPressure, vB).x;
          vec2 velocity = texture2D(uVelocity, vUv).xy;
          velocity.xy -= vec2(R - L, T - B);
          gl_FragColor = vec4(velocity, 0.0, 1.0);
      }
    `
    );

    // -------------------- Fullscreen Triangles --------------------
    const blit = (() => {
      const buffer = gl.createBuffer()!;
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
        gl.STATIC_DRAW
      );
      const elemBuffer = gl.createBuffer()!;
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer);
      gl.bufferData(
        gl.ELEMENT_ARRAY_BUFFER,
        new Uint16Array([0, 1, 2, 0, 2, 3]),
        gl.STATIC_DRAW
      );
      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(0);

      return (target: FBO | null, doClear = false) => {
        if (!gl) return;
        if (!target) {
          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        } else {
          gl.viewport(0, 0, target.width, target.height);
          gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
        }
        if (doClear) {
          gl.clearColor(0, 0, 0, 1);
          gl.clear(gl.COLOR_BUFFER_BIT);
        }
        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
      };
    })();

    // Types for Framebuffers
    interface FBO {
      texture: WebGLTexture;
      fbo: WebGLFramebuffer;
      width: number;
      height: number;
      texelSizeX: number;
      texelSizeY: number;
      attach: (id: number) => number;
    }

    interface DoubleFBO {
      width: number;
      height: number;
      texelSizeX: number;
      texelSizeY: number;
      read: FBO;
      write: FBO;
      swap: () => void;
    }

    // FBO variables
    let dye: DoubleFBO;
    let velocity: DoubleFBO;
    let divergence: FBO;
    let curlFBO: FBO;
    let pressureFBO: DoubleFBO;

    // WebGL Programs
    const copyProgram = new Program(baseVertexShader, copyShader);
    const clearProgram = new Program(baseVertexShader, clearShader);
    const splatProgram = new Program(baseVertexShader, splatShader);
    const advectionProgram = new Program(baseVertexShader, advectionShader);
    const divergenceProgram = new Program(baseVertexShader, divergenceShader);
    const curlProgram = new Program(baseVertexShader, curlShader);
    const vorticityProgram = new Program(baseVertexShader, vorticityShader);
    const pressureProgram = new Program(baseVertexShader, pressureShader);
    const gradienSubtractProgram = new Program(
      baseVertexShader,
      gradientSubtractShader
    );
    const displayMaterial = new Material(baseVertexShader, displayShaderSource);

    // -------------------- FBO creation --------------------
    function createFBO(
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number
    ): FBO {
      gl.activeTexture(gl.TEXTURE0);
      const texture = gl.createTexture()!;
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        internalFormat,
        w,
        h,
        0,
        format,
        type,
        null
      );
      const fbo = gl.createFramebuffer()!;
      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
      gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        gl.TEXTURE_2D,
        texture,
        0
      );
      gl.viewport(0, 0, w, h);
      gl.clear(gl.COLOR_BUFFER_BIT);

      const texelSizeX = 1 / w;
      const texelSizeY = 1 / h;

      return {
        texture,
        fbo,
        width: w,
        height: h,
        texelSizeX,
        texelSizeY,
        attach(id: number) {
          gl.activeTexture(gl.TEXTURE0 + id);
          gl.bindTexture(gl.TEXTURE_2D, texture);
          return id;
        },
      };
    }

    function createDoubleFBO(
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number
    ): DoubleFBO {
      const fbo1 = createFBO(w, h, internalFormat, format, type, param);
      const fbo2 = createFBO(w, h, internalFormat, format, type, param);
      return {
        width: w,
        height: h,
        texelSizeX: fbo1.texelSizeX,
        texelSizeY: fbo1.texelSizeY,
        read: fbo1,
        write: fbo2,
        swap() {
          const tmp = this.read;
          this.read = this.write;
          this.write = tmp;
        },
      };
    }

    function resizeFBO(
      target: FBO,
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number
    ) {
      const newFBO = createFBO(w, h, internalFormat, format, type, param);
      copyProgram.bind();
      if (copyProgram.uniforms.uTexture)
        gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0));
      blit(newFBO, false);
      return newFBO;
    }

    function resizeDoubleFBO(
      target: DoubleFBO,
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number
    ) {
      if (target.width === w && target.height === h) return target;
      target.read = resizeFBO(
        target.read,
        w,
        h,
        internalFormat,
        format,
        type,
        param
      );
      target.write = createFBO(w, h, internalFormat, format, type, param);
      target.width = w;
      target.height = h;
      target.texelSizeX = 1 / w;
      target.texelSizeY = 1 / h;
      return target;
    }

    function initFramebuffers() {
      const simRes = getResolution(config.SIM_RESOLUTION!);
      const dyeRes = getResolution(config.DYE_RESOLUTION!);

      const texType = ext.halfFloatTexType;
      const rgba = ext.formatRGBA;
      const rg = ext.formatRG;
      const r = ext.formatR;
      const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
      gl.disable(gl.BLEND);

      if (!dye) {
        dye = createDoubleFBO(
          dyeRes.width,
          dyeRes.height,
          rgba.internalFormat,
          rgba.format,
          texType,
          filtering
        );
      } else {
        dye = resizeDoubleFBO(
          dye,
          dyeRes.width,
          dyeRes.height,
          rgba.internalFormat,
          rgba.format,
          texType,
          filtering
        );
      }

      if (!velocity) {
        velocity = createDoubleFBO(
          simRes.width,
          simRes.height,
          rg.internalFormat,
          rg.format,
          texType,
          filtering
        );
      } else {
        velocity = resizeDoubleFBO(
          velocity,
          simRes.width,
          simRes.height,
          rg.internalFormat,
          rg.format,
          texType,
          filtering
        );
      }

      divergence = createFBO(
        simRes.width,
        simRes.height,
        r.internalFormat,
        r.format,
        texType,
        gl.NEAREST
      );
      curlFBO = createFBO(
        simRes.width,
        simRes.height,
        r.internalFormat,
        r.format,
        texType,
        gl.NEAREST
      );
      pressureFBO = createDoubleFBO(
        simRes.width,
        simRes.height,
        r.internalFormat,
        r.format,
        texType,
        gl.NEAREST
      );
    }

    function updateKeywords() {
      const displayKeywords: string[] = [];
      if (config.SHADING) displayKeywords.push("SHADING");
      displayMaterial.setKeywords(displayKeywords);
    }

    function getResolution(resolution: number) {
      const w = gl.drawingBufferWidth;
      const h = gl.drawingBufferHeight;
      const aspectRatio = w / h;
      let aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio;
      const min = Math.round(resolution);
      const max = Math.round(resolution * aspect);
      if (w > h) {
        return { width: max, height: min };
      }
      return { width: min, height: max };
    }

    function scaleByPixelRatio(input: number) {
      const pixelRatio = window.devicePixelRatio || 1;
      return Math.floor(input * pixelRatio);
    }

    // -------------------- Simulation Setup --------------------
    updateKeywords();
    initFramebuffers();

    let lastUpdateTime = Date.now();
    let colorUpdateTimer = 0.0;

    function updateFrame() {
      const dt = calcDeltaTime();
      if (resizeCanvas()) initFramebuffers();
      updateColors(dt);
      applyInputs();
      step(dt);
      render(null);
      animationId = requestAnimationFrame(updateFrame);
    }

    function calcDeltaTime() {
      const now = Date.now();
      let dt = (now - lastUpdateTime) / 1000;
      dt = Math.min(dt, 0.016666);
      lastUpdateTime = now;
      return dt;
    }

    function resizeCanvas() {
      const width = scaleByPixelRatio(canvas!.clientWidth);
      const height = scaleByPixelRatio(canvas!.clientHeight);
      if (canvas!.width !== width || canvas!.height !== height) {
        canvas!.width = width;
        canvas!.height = height;
        return true;
      }
      return false;
    }

    function updateColors(dt: number) {
      colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED;
      if (colorUpdateTimer >= 1) {
        colorUpdateTimer = wrap(colorUpdateTimer, 0, 1);
        pointers.forEach((p) => {
          p.color = generateColor();
        });
      }
    }

    function applyInputs() {
      for (const p of pointers) {
        if (p.moved) {
          p.moved = false;
          splatPointer(p);
        }
      }
    }

    function step(dt: number) {
      gl.disable(gl.BLEND);

      // Curl
      curlProgram.bind();
      if (curlProgram.uniforms.texelSize) {
        gl.uniform2f(
          curlProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (curlProgram.uniforms.uVelocity) {
        gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
      }
      blit(curlFBO);

      // Vorticity
      vorticityProgram.bind();
      if (vorticityProgram.uniforms.texelSize) {
        gl.uniform2f(
          vorticityProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (vorticityProgram.uniforms.uVelocity) {
        gl.uniform1i(
          vorticityProgram.uniforms.uVelocity,
          velocity.read.attach(0)
        );
      }
      if (vorticityProgram.uniforms.uCurl) {
        gl.uniform1i(vorticityProgram.uniforms.uCurl, curlFBO.attach(1));
      }
      if (vorticityProgram.uniforms.curl) {
        gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
      }
      if (vorticityProgram.uniforms.dt) {
        gl.uniform1f(vorticityProgram.uniforms.dt, dt);
      }
      blit(velocity.write);
      velocity.swap();

      // Divergence
      divergenceProgram.bind();
      if (divergenceProgram.uniforms.texelSize) {
        gl.uniform2f(
          divergenceProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (divergenceProgram.uniforms.uVelocity) {
        gl.uniform1i(
          divergenceProgram.uniforms.uVelocity,
          velocity.read.attach(0)
        );
      }
      blit(divergence);

      // Clear pressure
      clearProgram.bind();
      if (clearProgram.uniforms.uTexture) {
        gl.uniform1i(
          clearProgram.uniforms.uTexture,
          pressureFBO.read.attach(0)
        );
      }
      if (clearProgram.uniforms.value) {
        gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE);
      }
      blit(pressureFBO.write);
      pressureFBO.swap();

      // Pressure
      pressureProgram.bind();
      if (pressureProgram.uniforms.texelSize) {
        gl.uniform2f(
          pressureProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (pressureProgram.uniforms.uDivergence) {
        gl.uniform1i(
          pressureProgram.uniforms.uDivergence,
          divergence.attach(0)
        );
      }
      for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
        if (pressureProgram.uniforms.uPressure) {
          gl.uniform1i(
            pressureProgram.uniforms.uPressure,
            pressureFBO.read.attach(1)
          );
        }
        blit(pressureFBO.write);
        pressureFBO.swap();
      }

      // Gradient Subtract
      gradienSubtractProgram.bind();
      if (gradienSubtractProgram.uniforms.texelSize) {
        gl.uniform2f(
          gradienSubtractProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (gradienSubtractProgram.uniforms.uPressure) {
        gl.uniform1i(
          gradienSubtractProgram.uniforms.uPressure,
          pressureFBO.read.attach(0)
        );
      }
      if (gradienSubtractProgram.uniforms.uVelocity) {
        gl.uniform1i(
          gradienSubtractProgram.uniforms.uVelocity,
          velocity.read.attach(1)
        );
      }
      blit(velocity.write);
      velocity.swap();

      // Advection - velocity
      advectionProgram.bind();
      if (advectionProgram.uniforms.texelSize) {
        gl.uniform2f(
          advectionProgram.uniforms.texelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      if (
        !ext.supportLinearFiltering &&
        advectionProgram.uniforms.dyeTexelSize
      ) {
        gl.uniform2f(
          advectionProgram.uniforms.dyeTexelSize,
          velocity.texelSizeX,
          velocity.texelSizeY
        );
      }
      const velocityId = velocity.read.attach(0);
      if (advectionProgram.uniforms.uVelocity) {
        gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
      }
      if (advectionProgram.uniforms.uSource) {
        gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
      }
      if (advectionProgram.uniforms.dt) {
        gl.uniform1f(advectionProgram.uniforms.dt, dt);
      }
      if (advectionProgram.uniforms.dissipation) {
        gl.uniform1f(
          advectionProgram.uniforms.dissipation,
          config.VELOCITY_DISSIPATION
        );
      }
      blit(velocity.write);
      velocity.swap();

      // Advection - dye
      if (
        !ext.supportLinearFiltering &&
        advectionProgram.uniforms.dyeTexelSize
      ) {
        gl.uniform2f(
          advectionProgram.uniforms.dyeTexelSize,
          dye.texelSizeX,
          dye.texelSizeY
        );
      }
      if (advectionProgram.uniforms.uVelocity) {
        gl.uniform1i(
          advectionProgram.uniforms.uVelocity,
          velocity.read.attach(0)
        );
      }
      if (advectionProgram.uniforms.uSource) {
        gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
      }
      if (advectionProgram.uniforms.dissipation) {
        gl.uniform1f(
          advectionProgram.uniforms.dissipation,
          config.DENSITY_DISSIPATION
        );
      }
      blit(dye.write);
      dye.swap();
    }

    function render(target: FBO | null) {
      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
      gl.enable(gl.BLEND);
      drawDisplay(target);
    }

    function drawDisplay(target: FBO | null) {
      const width = target ? target.width : gl.drawingBufferWidth;
      const height = target ? target.height : gl.drawingBufferHeight;
      displayMaterial.bind();
      if (config.SHADING && displayMaterial.uniforms.texelSize) {
        gl.uniform2f(displayMaterial.uniforms.texelSize, 1 / width, 1 / height);
      }
      if (displayMaterial.uniforms.uTexture) {
        gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0));
      }
      blit(target, false);
    }

    // -------------------- Interaction --------------------
    function splatPointer(pointer: Pointer) {
      const dx = pointer.deltaX * config.SPLAT_FORCE;
      const dy = pointer.deltaY * config.SPLAT_FORCE;
      splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
    }

    function clickSplat(pointer: Pointer) {
      const color = generateColor();
      color.r *= 10;
      color.g *= 10;
      color.b *= 10;
      const dx = 10 * (Math.random() - 0.5);
      const dy = 30 * (Math.random() - 0.5);
      splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
    }

    function splat(
      x: number,
      y: number,
      dx: number,
      dy: number,
      color: ColorRGB
    ) {
      splatProgram.bind();
      if (splatProgram.uniforms.uTarget) {
        gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
      }
      if (splatProgram.uniforms.aspectRatio) {
        gl.uniform1f(
          splatProgram.uniforms.aspectRatio,
          canvas!.width / canvas!.height
        );
      }
      if (splatProgram.uniforms.point) {
        gl.uniform2f(splatProgram.uniforms.point, x, y);
      }
      if (splatProgram.uniforms.color) {
        gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0);
      }
      if (splatProgram.uniforms.radius) {
        gl.uniform1f(
          splatProgram.uniforms.radius,
          correctRadius(config.SPLAT_RADIUS / 100)!
        );
      }
      blit(velocity.write);
      velocity.swap();

      if (splatProgram.uniforms.uTarget) {
        gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
      }
      if (splatProgram.uniforms.color) {
        gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
      }
      blit(dye.write);
      dye.swap();
    }

    function correctRadius(radius: number) {
      // Use non-null assertion (canvas can't be null here)
      const aspectRatio = canvas!.width / canvas!.height;
      if (aspectRatio > 1) radius *= aspectRatio;
      return radius;
    }

    function updatePointerDownData(
      pointer: Pointer,
      id: number,
      posX: number,
      posY: number
    ) {
      pointer.id = id;
      pointer.down = true;
      pointer.moved = false;
      pointer.texcoordX = posX / canvas!.width;
      pointer.texcoordY = 1 - posY / canvas!.height;
      pointer.prevTexcoordX = pointer.texcoordX;
      pointer.prevTexcoordY = pointer.texcoordY;
      pointer.deltaX = 0;
      pointer.deltaY = 0;
      pointer.color = generateColor();
    }

    function updatePointerMoveData(
      pointer: Pointer,
      posX: number,
      posY: number,
      color: ColorRGB
    ) {
      pointer.prevTexcoordX = pointer.texcoordX;
      pointer.prevTexcoordY = pointer.texcoordY;
      pointer.texcoordX = posX / canvas!.width;
      pointer.texcoordY = 1 - posY / canvas!.height;
      pointer.deltaX = correctDeltaX(
        pointer.texcoordX - pointer.prevTexcoordX
      )!;
      pointer.deltaY = correctDeltaY(
        pointer.texcoordY - pointer.prevTexcoordY
      )!;
      pointer.moved =
        Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
      pointer.color = color;
    }

    function updatePointerUpData(pointer: Pointer) {
      pointer.down = false;
    }

    function correctDeltaX(delta: number) {
      const aspectRatio = canvas!.width / canvas!.height;
      if (aspectRatio < 1) delta *= aspectRatio;
      return delta;
    }

    function correctDeltaY(delta: number) {
      const aspectRatio = canvas!.width / canvas!.height;
      if (aspectRatio > 1) delta /= aspectRatio;
      return delta;
    }

    function generateColor(): ColorRGB {
      const c = HSVtoRGB(Math.random(), 1.0, 1.0);
      c.r *= 0.15;
      c.g *= 0.15;
      c.b *= 0.15;
      return c;
    }

    function HSVtoRGB(h: number, s: number, v: number): ColorRGB {
      let r = 0,
        g = 0,
        b = 0;
      const i = Math.floor(h * 6);
      const f = h * 6 - i;
      const p = v * (1 - s);
      const q = v * (1 - f * s);
      const t = v * (1 - (1 - f) * s);

      switch (i % 6) {
        case 0:
          r = v;
          g = t;
          b = p;
          break;
        case 1:
          r = q;
          g = v;
          b = p;
          break;
        case 2:
          r = p;
          g = v;
          b = t;
          break;
        case 3:
          r = p;
          g = q;
          b = v;
          break;
        case 4:
          r = t;
          g = p;
          b = v;
          break;
        case 5:
          r = v;
          g = p;
          b = q;
          break;
      }
      return { r, g, b };
    }

    function wrap(value: number, min: number, max: number) {
      const range = max - min;
      if (range === 0) return min;
      return ((value - min) % range) + min;
    }

    // -------------------- Event Listeners --------------------
    const handleMouseDown = (e: MouseEvent) => {
      const pointer = pointers[0];
      const posX = scaleByPixelRatio(e.clientX);
      const posY = scaleByPixelRatio(e.clientY);
      updatePointerDownData(pointer, -1, posX, posY);
      clickSplat(pointer);
    };

    // Start rendering on first mouse move
    function handleFirstMouseMove(e: MouseEvent) {
      const pointer = pointers[0];
      const posX = scaleByPixelRatio(e.clientX);
      const posY = scaleByPixelRatio(e.clientY);
      const color = generateColor();
      updateFrame();
      updatePointerMoveData(pointer, posX, posY, color);
      document.body.removeEventListener("mousemove", handleFirstMouseMove);
    }

    const handleMouseMove = (e: MouseEvent) => {
      const pointer = pointers[0];
      const posX = scaleByPixelRatio(e.clientX);
      const posY = scaleByPixelRatio(e.clientY);
      const color = pointer.color;
      updatePointerMoveData(pointer, posX, posY, color);
    };

    // Start rendering on first touch
    function handleFirstTouchStart(e: TouchEvent) {
      const touches = e.targetTouches;
      const pointer = pointers[0];
      for (let i = 0; i < touches.length; i++) {
        const posX = scaleByPixelRatio(touches[i].clientX);
        const posY = scaleByPixelRatio(touches[i].clientY);
        updateFrame();
        updatePointerDownData(pointer, touches[i].identifier, posX, posY);
      }
      document.body.removeEventListener("touchstart", handleFirstTouchStart);
    }

    const handleTouchStart = (e: TouchEvent) => {
      const touches = e.targetTouches;
      const pointer = pointers[0];
      for (let i = 0; i < touches.length; i++) {
        const posX = scaleByPixelRatio(touches[i].clientX);
        const posY = scaleByPixelRatio(touches[i].clientY);
        updatePointerDownData(pointer, touches[i].identifier, posX, posY);
      }
    };

    const handleTouchMove = (e: TouchEvent) => {
      const touches = e.targetTouches;
      const pointer = pointers[0];
      for (let i = 0; i < touches.length; i++) {
        const posX = scaleByPixelRatio(touches[i].clientX);
        const posY = scaleByPixelRatio(touches[i].clientY);
        updatePointerMoveData(pointer, posX, posY, pointer.color);
      }
    };

    const handleTouchEnd = (e: TouchEvent) => {
      const touches = e.changedTouches;
      const pointer = pointers[0];
      for (let i = 0; i < touches.length; i++) {
        updatePointerUpData(pointer);
      }
    };

    window.addEventListener("mousedown", handleMouseDown);
    document.body.addEventListener("mousemove", handleFirstMouseMove);
    window.addEventListener("mousemove", handleMouseMove);
    document.body.addEventListener("touchstart", handleFirstTouchStart);
    window.addEventListener("touchstart", handleTouchStart, { passive: true });
    window.addEventListener("touchmove", handleTouchMove, { passive: true });
    window.addEventListener("touchend", handleTouchEnd, { passive: true });

    return () => {
      if (animationId) {
        cancelAnimationFrame(animationId);
      }
      window.removeEventListener("mousedown", handleMouseDown);
      document.body.removeEventListener("mousemove", handleFirstMouseMove);
      window.removeEventListener("mousemove", handleMouseMove);
      document.body.removeEventListener("touchstart", handleFirstTouchStart);
      window.removeEventListener("touchstart", handleTouchStart);
      window.removeEventListener("touchmove", handleTouchMove);
      window.removeEventListener("touchend", handleTouchEnd);
    };
    // ------------------------------------------------------------
  }, [
    simulationResolution,
    dyeResolution,
    captureResolution,
    densityDissipation,
    velocityDissipation,
    pressure,
    pressureIterations,
    curl,
    splatRadius,
    splatForce,
    enableShading,
    colorUpdateSpeed,
    backgroundColor,
    transparent,
    mounted,
  ]);

  if (!mounted) return null;

  return createPortal(
    <div className="fixed top-0 left-0 z-[99999] pointer-events-none w-full h-full cursor-none">
      <canvas
        ref={canvasRef}
        id="fluid"
        className="w-screen h-screen block"
      ></canvas>
    </div>,
    document.body
  );
}

```
--------------------------------------------------

### COMPONENT: smooth-cursor
Category: Cursor
Description: Advanced smooth cursor replacement component with physics-based animations, magnetic effects, trail animations, and customizable visual effects. Perfect for creative websites, interactive applications, and immersive user experiences.
URL: https://lightswind.com/components/smooth-cursor
Import: import { SmoothCursor } from "@/components/lightswind/smooth-cursor"
Registry URL: https://lightswind.com/r/smooth-cursor.json
Install Command: npx lightswind@latest add smooth-cursor

Usage:
```tsx
import { SmoothCursor } from "@/components/lightswind/smooth-cursor";

// Basic Usage
<SmoothCursor />

// Custom Cursor with Settings
<SmoothCursor
  size={30}
  color="purple"
  rotateOnMove={true}
  scaleOnClick={true}
  glowEffect={true}
/>

// Advanced Cursor with Magnetic and Trail Effects
<SmoothCursor
  size={25}
  color="blue"
  showTrail={true}
  trailLength={8}
  magneticDistance={60}
  magneticElements="[data-magnetic]"
  springConfig={{
    damping: 50,
    stiffness: 450,
    mass: 0.8,
    restDelta: 0.001
  }}
/>

// Custom Cursor Element
<SmoothCursor
  cursor={<div className="w-6 h-6 bg-red-500 rounded-full" />}
  rotateOnMove={false}
  scaleOnClick={true}
/>
```

Source Code:
```tsx
"use client";

import { motion, useSpring } from "framer-motion";
import { FC, useEffect, useRef, useState } from "react";
// Utility function 'cn' (classnames) - implemented directly to resolve import error
function cn(...inputs: (string | undefined | null | boolean)[]) {
  return inputs.filter(Boolean).join(" ");
}

interface Position {
  x: number;
  y: number;
}

interface SpringConfig {
  damping: number;
  stiffness: number;
  mass: number;
  restDelta: number;
}

export interface SmoothCursorProps {
  cursor?: React.ReactNode;
  springConfig?: SpringConfig;
  className?: string;
  size?: number;
  color?: string;
  hideOnLeave?: boolean;
  trailLength?: number;
  showTrail?: boolean;
  rotateOnMove?: boolean;
  scaleOnClick?: boolean;
  glowEffect?: boolean;
  magneticDistance?: number;
  magneticElements?: string;
  onCursorMove?: (position: Position) => void;
  onCursorEnter?: () => void;
  onCursorLeave?: () => void;
  disabled?: boolean;
}

const DefaultCursorSVG: FC<{ size?: number; color?: string; className?: string }> = ({
  size = 25,
  color = "black",
  className
}) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size * 2}
      height={size * 2.16}
      viewBox="0 0 50 54"
      fill="none"
      className={cn("pointer-events-none", className)}
    >
      <g filter="url(#filter0_d_91_7928)">
        <path
          d="M42.6817 41.1495L27.5103 6.79925C26.7269 5.02557 24.2082 5.02558 23.3927 6.79925L7.59814 41.1495C6.75833 42.9759 8.52712 44.8902 10.4125 44.1954L24.3757 39.0496C24.8829 38.8627 25.4385 38.8627 25.9422 39.0496L39.8121 44.1954C41.6849 44.8902 43.4884 42.9759 42.6817 41.1495Z"
          fill={color}
        />
        <path
          d="M43.7146 40.6933L28.5431 6.34306C27.3556 3.65428 23.5772 3.69516 22.3668 6.32755L6.57226 40.6778C5.3134 43.4156 7.97238 46.298 10.803 45.2549L24.7662 40.109C25.0221 40.0147 25.2999 40.0156 25.5494 40.1082L39.4193 45.254C42.2261 46.2953 44.9254 43.4347 43.7146 40.6933Z"
          stroke="white"
          strokeWidth={2.25825}
        />
      </g>
      <defs>
        <filter
          id="filter0_d_91_7928"
          x={0.602397}
          y={0.952444}
          width={49.0584}
          height={52.428}
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy={2.25825} />
          <feGaussianBlur stdDeviation={2.25825} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_91_7928"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_91_7928"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
};

export function SmoothCursor({
  cursor,
  springConfig = {
    damping: 45,
    stiffness: 400,
    mass: 1,
    restDelta: 0.001,
  },
  className,
  size = 25,
  color = "black",
  hideOnLeave = true,
  trailLength = 5,
  showTrail = false,
  rotateOnMove = true,
  scaleOnClick = true,
  glowEffect = false,
  magneticDistance = 50,
  magneticElements = "[data-magnetic]",
  onCursorMove,
  onCursorEnter,
  onCursorLeave,
  disabled = false,
}: SmoothCursorProps) {
  const [isMoving, setIsMoving] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  const [isClicking, setIsClicking] = useState(false);
  const [trail, setTrail] = useState<Position[]>([]);

  const lastMousePos = useRef<Position>({ x: 0, y: 0 });
  const velocity = useRef<Position>({ x: 0, y: 0 });
  const lastUpdateTime = useRef(Date.now());
  const previousAngle = useRef(0);
  const accumulatedRotation = useRef(0);

  const cursorX = useSpring(0, springConfig);
  const cursorY = useSpring(0, springConfig);
  const rotation = useSpring(0, {
    ...springConfig,
    damping: 60,
    stiffness: 300,
  });
  const scale = useSpring(1, {
    ...springConfig,
    stiffness: 500,
    damping: 35,
  });

  const defaultCursor = <DefaultCursorSVG size={size} color={color} />;
  const cursorElement = cursor || defaultCursor;

  useEffect(() => {
    if (disabled) return;

    const updateVelocity = (currentPos: Position) => {
      const currentTime = Date.now();
      const deltaTime = currentTime - lastUpdateTime.current;

      if (deltaTime > 0) {
        velocity.current = {
          x: (currentPos.x - lastMousePos.current.x) / deltaTime,
          y: (currentPos.y - lastMousePos.current.y) / deltaTime,
        };
      }

      lastUpdateTime.current = currentTime;
      lastMousePos.current = currentPos;
    };

    const updateTrail = (pos: Position) => {
      if (!showTrail) return;

      setTrail(function (prev) {
        var newTrail = [pos].concat(prev.slice(0, trailLength - 1));
        return newTrail;
      });
    };

    const findMagneticElement = (x: number, y: number) => {
      const elements = document.querySelectorAll(magneticElements);

      // Fix: Convert NodeListOf<Element> to an array for reliable iteration
      for (const element of Array.from(elements)) {
        const rect = element.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const distance = Math.sqrt(
          Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)
        );

        if (distance < magneticDistance) {
          return { x: centerX, y: centerY, distance };
        }
      }
      return null;
    };

    const smoothMouseMove = (e: MouseEvent) => {
      let currentPos = { x: e.clientX, y: e.clientY };

      // Check for magnetic elements
      const magneticTarget = findMagneticElement(currentPos.x, currentPos.y);
      if (magneticTarget) {
        const strength = 1 - (magneticTarget.distance / magneticDistance);
        currentPos = {
          x: currentPos.x + (magneticTarget.x - currentPos.x) * strength * 0.3,
          y: currentPos.y + (magneticTarget.y - currentPos.y) * strength * 0.3,
        };
      }

      updateVelocity(currentPos);
      updateTrail(currentPos);

      const speed = Math.sqrt(
        Math.pow(velocity.current.x, 2) + Math.pow(velocity.current.y, 2),
      );

      cursorX.set(currentPos.x);
      cursorY.set(currentPos.y);

      onCursorMove?.(currentPos);

      if (speed > 0.1 && rotateOnMove) {
        const currentAngle =
          Math.atan2(velocity.current.y, velocity.current.x) * (180 / Math.PI) +
          90;

        let angleDiff = currentAngle - previousAngle.current;
        if (angleDiff > 180) angleDiff -= 360;
        if (angleDiff < -180) angleDiff += 360;
        accumulatedRotation.current += angleDiff;
        rotation.set(accumulatedRotation.current);
        previousAngle.current = currentAngle;

        scale.set(0.95);
        setIsMoving(true);

        const timeout = setTimeout(function () {
          scale.set(1);
          setIsMoving(false);
        }, 150);

        return function () {
          return clearTimeout(timeout);
        };
      }
    };

    const handleMouseEnter = function () {
      setIsVisible(true);
      onCursorEnter?.();
    };

    const handleMouseLeave = function () {
      if (hideOnLeave) {
        setIsVisible(false);
      }
      onCursorLeave?.();
    };

    const handleMouseDown = function () {
      if (scaleOnClick) {
        setIsClicking(true);
        scale.set(0.8);
      }
    };

    const handleMouseUp = function () {
      if (scaleOnClick) {
        setIsClicking(false);
        scale.set(1);
      }
    };

    let rafId: number;
    const throttledMouseMove = function (e: MouseEvent) {
      if (rafId) return;

      rafId = requestAnimationFrame(function () {
        smoothMouseMove(e);
        rafId = 0;
      });
    };

    document.body.style.cursor = "none";
    window.addEventListener("mousemove", throttledMouseMove);
    document.addEventListener("mouseenter", handleMouseEnter);
    document.addEventListener("mouseleave", handleMouseLeave);
    document.addEventListener("mousedown", handleMouseDown);
    document.addEventListener("mouseup", handleMouseUp);

    return function () {
      window.removeEventListener("mousemove", throttledMouseMove);
      document.removeEventListener("mouseenter", handleMouseEnter);
      document.removeEventListener("mouseleave", handleMouseLeave);
      document.removeEventListener("mousedown", handleMouseDown);
      document.removeEventListener("mouseup", handleMouseUp);
      document.body.style.cursor = "auto";
      if (rafId) cancelAnimationFrame(rafId);
    };
  }, [
    cursorX,
    cursorY,
    rotation,
    scale,
    disabled,
    showTrail,
    trailLength,
    rotateOnMove,
    scaleOnClick,
    hideOnLeave,
    magneticDistance,
    magneticElements,
    onCursorMove,
    onCursorEnter,
    onCursorLeave
  ]);

  if (disabled || !isVisible) return null;

  return (
    <>
      {/* Trail Effect */}
      {showTrail && trail.map(function (pos, index) {
        return (
          <motion.div
            key={index}
            style={{
              position: "fixed",
              left: pos.x,
              top: pos.y,
              translateX: "-50%",
              translateY: "-50%",
              zIndex: 99 - index,
              pointerEvents: "none",
              opacity: (trailLength - index) / trailLength * 0.5,
              scale: (trailLength - index) / trailLength * 0.8,
            }}
            className="w-2 h-2 bg-current rounded-full"
          />
        );
      })}

      {/* Main Cursor */}
      <motion.div
        style={{
          position: "fixed",
          left: cursorX,
          top: cursorY,
          translateX: "-50%",
          translateY: "-50%",
          rotate: rotateOnMove ? rotation : 0,
          scale: scale,
          zIndex: 100,
          pointerEvents: "none",
          willChange: "transform",
          filter: glowEffect ? "drop-shadow(0 0 10px " + color + "40)" : "none", // String concatenation
        }}
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0, opacity: 0 }}
        transition={{
          type: "spring",
          stiffness: 400,
          damping: 30,
        }}
        className={cn("select-none", className)}
      >
        {cursorElement}
      </motion.div>
    </>
  );
}

export default SmoothCursor;
```
--------------------------------------------------

### COMPONENT: sparkle-cursor
Category: Cursor
Description: A high-performance WebGL GSAP animated cursor effect. As the user moves the mouse, an array of rotating, falling sparkles and cinematic glowing orbs trail behind. Built entirely on an overlay canvas using hardware-accelerated GSAP tweens, ensuring a silky smooth 60fps experience without causing React re-renders or layout thrashing.
URL: https://lightswind.com/components/sparkle-cursor
Import: import { SparkleCursor } from "@/components/lightswind/sparkle-cursor"
Registry URL: https://lightswind.com/r/sparkle-cursor.json
Install Command: npx lightswind@latest add sparkle-cursor

Usage:
```tsx
import { SparkleCursor } from "@/components/lightswind/sparkle-cursor";

export default function App() {
  return (
    <div className="relative min-h-screen">
      <SparkleCursor distance={40} glow={true} />
      
      {/* Your page content */}
      <h1 className="text-4xl text-white">Hello World</h1>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import gsap from "gsap";

export interface SparkleCursorProps {
  /** Distance in pixels between sparkles */
  distance?: number;
  /** Whether to show a glow behind the cursor */
  glow?: boolean;
}

export const SparkleCursor = ({ distance = 50, glow = true }: SparkleCursorProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // Handle high-DPI scaling with correct setTransform to prevent mouse displacement
    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const width = window.innerWidth;
      const height = window.innerHeight;

      canvas.width = Math.floor(width * dpr);
      canvas.height = Math.floor(height * dpr);
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;

      // Scale context so drawing units are 1:1 with screen CSS pixels
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };

    resize();
    window.addEventListener("resize", resize);

    // SVG Star
    const svgData = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="hsl(40 90% 80%)">
        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
      </svg>
    `;
    const img = new Image();
    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(svgBlob);

    let isImageLoaded = false;
    img.onload = () => {
      isImageLoaded = true;
      URL.revokeObjectURL(url);
    };
    img.src = url;

    let parts: any[] = [];
    let glows: any[] = [];

    const render = () => {
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

      for (const g of glows) {
        ctx.beginPath();
        ctx.arc(g.x, g.y, Math.max(0, g.size * g.scale), 0, Math.PI * 2);
        ctx.fillStyle = "hsl(265 90% 80% / 0.25)";
        ctx.fill();
      }

      for (const part of parts) {
        if (!isImageLoaded) continue;
        ctx.save();
        ctx.globalAlpha = Math.max(0, Math.min(1, part.alpha));
        ctx.filter = `brightness(${part.sy < 0 ? part.b + 0.5 : part.b})`;

        // Standard CSS coordinates directly match cursor (0 offset)
        ctx.translate(part.x, part.y);
        ctx.rotate(part.r * (Math.PI / 180));
        ctx.scale(1, part.sy);

        const size = Math.max(0, part.size * part.scale);
        ctx.drawImage(img, size * -0.5, size * -0.5, size, size);
        ctx.restore();
      }
    };

    let distCounter = 0;
    let lastPoint: [number, number] | null = null;

    const paint = (e: PointerEvent | MouseEvent) => {
      const x = e.clientX;
      const y = e.clientY;

      if (lastPoint) {
        const dist = Math.hypot(x - lastPoint[0], y - lastPoint[1]);
        if (!Number.isNaN(dist)) distCounter += dist;
      }
      lastPoint = [x, y];

      if (glow) {
        const g = {
          id: `glow--${Date.now()}-${Math.random()}`,
          size: 28,
          scale: 1,
          x,
          y,
        };
        gsap.to(g, {
          duration: 0.25,
          scale: 0,
          ease: "power1.out",
          onComplete: () => {
            glows = glows.filter((glow) => glow.id !== g.id);
          },
        });
        glows.push(g);
      }

      if (distCounter >= distance) {
        distCounter = 0;

        const newPart = {
          id: Date.now() + Math.random(),
          x,
          y,
          sy: Math.random() > 0.5 ? 1 : -1,
          b: gsap.utils.random(0.5, 1.5),
          r: gsap.utils.random(0, 359, 1),
          hue: gsap.utils.random(0, 359, 1),
          size: gsap.utils.random(14, 34, 1),
          scale: 1,
          alpha: 1,
        };

        const spin = gsap.to(newPart, {
          sy: newPart.sy < 0 ? 1 : -1,
          duration: gsap.utils.random(0.1, 0.5),
          repeat: gsap.utils.random(0, 10, 1),
        });

        gsap.to(newPart, {
          duration: gsap.utils.random(0.6, 2.0),
          r: newPart.r + gsap.utils.random(-45, 45, 1),
          y: y + gsap.utils.random(40, 200, 1),
          alpha: 0,
          scale: 0,
          ease: "power1.out",
          onComplete: () => {
            spin.kill();
            parts = parts.filter((p) => p.id !== newPart.id);
          },
        });

        parts.push(newPart);
      }
    };

    window.addEventListener("pointermove", paint, { passive: true });
    window.addEventListener("mousemove", paint, { passive: true });
    gsap.ticker.add(render);

    return () => {
      window.removeEventListener("resize", resize);
      window.removeEventListener("pointermove", paint);
      window.removeEventListener("mousemove", paint);
      gsap.ticker.remove(render);
    };
  }, [distance, glow, mounted]);

  if (!mounted) return null;

  return createPortal(
    <canvas
      ref={canvasRef}
      className="fixed top-0 left-0 w-full h-full pointer-events-none z-[99999]"
      style={{
        width: "100vw",
        height: "100vh",
      }}
    />,
    document.body
  );
};

export default SparkleCursor;

```
--------------------------------------------------

## CATEGORY (FREE): Liquid Glass (15)

### COMPONENT: liquid-glass-alert
Category: Liquid Glass
Description: A premium 3D liquid glass alert/callout component with 6 severity variants, top gloss glare reflection, bottom prism refraction, left accent bar, dismissible spring exit animation, and the same crystal glass aesthetic as the Liquid Glass Button and Switch.
URL: https://lightswind.com/components/liquid-glass-alert
Import: import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert"
Registry URL: https://lightswind.com/r/liquid-glass-alert.json
Install Command: npx lightswind@latest add liquid-glass-alert

Usage:
```tsx
import { LiquidGlassAlert } from "@/components/lightswind/liquid-glass-alert";

export function Demo() {
  return (
    <div className="flex flex-col gap-3 p-6 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20">
      <LiquidGlassAlert variant="info" title="Info" dismissible>
        Your project is building. Deployment in ~2 min.
      </LiquidGlassAlert>
      <LiquidGlassAlert variant="success" title="Done!">
        Changes saved to production.
      </LiquidGlassAlert>
      <LiquidGlassAlert variant="warning" title="Heads up">
        Quota resets in 3 days.
      </LiquidGlassAlert>
      <LiquidGlassAlert variant="error" title="Build failed" dismissible>
        TypeScript error at line 42.
      </LiquidGlassAlert>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { AlertCircle, CheckCircle2, AlertTriangle, Info, X, Zap, Bell } from "lucide-react";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassAlertVariant =
  | "info"
  | "success"
  | "warning"
  | "error"
  | "glass"
  | "aurora";

export interface LiquidGlassAlertProps {
  variant?: LiquidGlassAlertVariant;
  title?: string;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  className?: string;
  /** When true the alert renders as a filled opaque liquid gradient instead of frosted */
  solid?: boolean;
}

/* ─── Per-variant config ─────────────────────────────────────────── */
const VARIANTS: Record<
  LiquidGlassAlertVariant,
  {
    icon: React.ReactNode;
    trackGrad: string;
    border: string;
    shadow: string;
    darkShadow: string;
    titleColor: string;
    textColor: string;
    accentBar: string;
  }
> = {
  info: {
    icon: <Info className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-sky-400/30 via-blue-400/15 to-blue-400/5 dark:from-sky-400/25 dark:via-blue-500/15 dark:to-blue-500/5",
    border: "border-sky-400/60 dark:border-sky-400/35",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(14,165,233,0.3),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-3px_6px_0px_rgba(0,80,150,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(14,165,233,0.45),inset_0_2px_1.5px_0px_rgba(255,255,255,0.3),inset_0_-3px_6px_0px_rgba(0,40,120,0.4)]",
    titleColor: "text-sky-900 dark:text-sky-200",
    textColor: "text-sky-800/85 dark:text-sky-300/85",
    accentBar: "bg-gradient-to-b from-sky-400 to-blue-500",
  },
  success: {
    icon: <CheckCircle2 className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-emerald-400/30 via-teal-400/15 to-emerald-400/5 dark:from-emerald-400/25 dark:via-emerald-500/15 dark:to-emerald-500/5",
    border: "border-emerald-400/60 dark:border-emerald-400/35",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(16,185,129,0.35),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-3px_6px_0px_rgba(5,80,50,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(16,185,129,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.3),inset_0_-3px_6px_0px_rgba(5,60,40,0.4)]",
    titleColor: "text-emerald-900 dark:text-emerald-200",
    textColor: "text-emerald-800/85 dark:text-emerald-300/85",
    accentBar: "bg-gradient-to-b from-emerald-400 to-teal-500",
  },
  warning: {
    icon: <AlertTriangle className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-amber-400/30 via-orange-400/15 to-amber-400/5 dark:from-amber-400/25 dark:via-amber-500/15 dark:to-amber-500/5",
    border: "border-amber-400/60 dark:border-amber-400/35",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(245,158,11,0.35),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-3px_6px_0px_rgba(120,60,0,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(245,158,11,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.3),inset_0_-3px_6px_0px_rgba(100,50,0,0.4)]",
    titleColor: "text-amber-900 dark:text-amber-200",
    textColor: "text-amber-800/85 dark:text-amber-300/85",
    accentBar: "bg-gradient-to-b from-amber-400 to-orange-500",
  },
  error: {
    icon: <AlertCircle className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-rose-400/30 via-red-400/15 to-rose-400/5 dark:from-rose-400/25 dark:via-rose-500/15 dark:to-rose-500/5",
    border: "border-rose-400/60 dark:border-rose-400/35",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(244,63,94,0.35),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-3px_6px_0px_rgba(130,15,20,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(244,63,94,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.3),inset_0_-3px_6px_0px_rgba(100,10,15,0.4)]",
    titleColor: "text-rose-900 dark:text-rose-200",
    textColor: "text-rose-800/85 dark:text-rose-300/85",
    accentBar: "bg-gradient-to-b from-rose-400 to-red-500",
  },
  glass: {
    icon: <Bell className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-white/55 via-white/25 to-white/10 dark:from-white/25 dark:via-white/12 dark:to-white/5",
    border: "border-white/85 dark:border-white/25",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(15,23,42,0.2),inset_0_2px_1.5px_0px_rgba(255,255,255,0.98),inset_0_-3px_6px_0px_rgba(0,0,0,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(0,0,0,0.65),inset_0_2px_1.5px_0px_rgba(255,255,255,0.35),inset_0_-3px_6px_0px_rgba(0,0,0,0.5)]",
    titleColor: "text-slate-900 dark:text-white",
    textColor: "text-slate-700 dark:text-slate-300",
    accentBar: "bg-gradient-to-b from-white/80 to-slate-300/80 dark:from-white/50 dark:to-slate-500/50",
  },
  aurora: {
    icon: <Zap className="w-4 h-4" />,
    trackGrad:
      "bg-gradient-to-b from-violet-400/30 via-fuchsia-400/15 to-indigo-400/5 dark:from-violet-400/25 dark:via-fuchsia-500/15 dark:to-indigo-500/5",
    border: "border-violet-400/60 dark:border-violet-400/35",
    shadow:
      "shadow-[0_12px_32px_-6px_rgba(139,92,246,0.35),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-3px_6px_0px_rgba(60,20,120,0.12)]",
    darkShadow:
      "dark:shadow-[0_16px_36px_-6px_rgba(139,92,246,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.3),inset_0_-3px_6px_0px_rgba(50,10,100,0.4)]",
    titleColor: "text-violet-900 dark:text-violet-200",
    textColor: "text-violet-800/85 dark:text-violet-300/85",
    accentBar: "bg-gradient-to-b from-violet-400 via-fuchsia-500 to-indigo-500",
  },
};

/* ─── Icon container per-variant colour ─────────────────────────── */
const ICON_COLOR: Record<LiquidGlassAlertVariant, string> = {
  info: "text-sky-500 dark:text-sky-400",
  success: "text-emerald-500 dark:text-emerald-400",
  warning: "text-amber-500 dark:text-amber-400",
  error: "text-rose-500 dark:text-rose-400",
  glass: "text-slate-600 dark:text-slate-300",
  aurora: "text-violet-500 dark:text-violet-400",
};

/* ─── Component ─────────────────────────────────────────────────── */
export const LiquidGlassAlert = React.forwardRef<
  HTMLDivElement,
  LiquidGlassAlertProps
>(
  (
    {
      variant = "info",
      title,
      children,
      icon,
      dismissible = false,
      onDismiss,
      className,
    },
    ref
  ) => {
    const [visible, setVisible] = useState(true);
    const cfg = VARIANTS[variant];

    const handleDismiss = () => {
      setVisible(false);
      onDismiss?.();
    };

    return (
      <AnimatePresence>
        {visible && (
          <motion.div
            ref={ref}
            initial={{ opacity: 0, y: -8, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ type: "spring", stiffness: 420, damping: 28 }}
            role="alert"
            className={cn(
              "relative flex items-start gap-3.5 overflow-hidden rounded-2xl px-4 py-3.5 border",
              "backdrop-blur-xl saturate-[200%]",
              cfg.trackGrad,
              cfg.border,
              cfg.shadow,
              cfg.darkShadow,
              className
            )}
          >
            {/* Top gloss glare — full width pill, same as button/switch */}
            <span
              className="absolute top-0 left-0 right-0 h-[48%] pointer-events-none rounded-t-[inherit]"
              style={{
                background:
                  "linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%)",
              }}
            />

            {/* Bottom prism refraction */}
            <span
              className="absolute bottom-0 left-0 right-0 h-[20%] pointer-events-none rounded-b-[inherit]"
              style={{
                background:
                  "linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%)",
              }}
            />

            {/* Left accent bar */}
            <span
              className={cn(
                "absolute left-0 top-2 bottom-2 w-[3px] rounded-full",
                cfg.accentBar
              )}
            />

            {/* Icon */}
            <span
              className={cn(
                "relative z-10 shrink-0 mt-[1px]",
                ICON_COLOR[variant]
              )}
            >
              {icon ?? cfg.icon}
            </span>

            {/* Content */}
            <div className="relative z-10 flex-1 min-w-0">
              {title && (
                <p
                  className={cn(
                    "text-sm font-semibold leading-snug mb-0.5",
                    cfg.titleColor
                  )}
                >
                  {title}
                </p>
              )}
              {children && (
                <div
                  className={cn(
                    "text-xs leading-relaxed",
                    cfg.textColor
                  )}
                >
                  {children}
                </div>
              )}
            </div>

            {/* Dismiss button */}
            {dismissible && (
              <motion.button
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                onClick={handleDismiss}
                type="button"
                aria-label="Dismiss alert"
                className={cn(
                  "relative z-10 shrink-0 mt-[1px] w-6 h-6 rounded-full flex items-center justify-center transition-colors cursor-pointer",
                  "bg-slate-900/10 dark:bg-black/40 hover:bg-slate-900/20 dark:hover:bg-black/60",
                  "border border-slate-900/15 dark:border-white/30",
                  "shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.8)] dark:shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.3)]",
                  "text-slate-800 dark:text-white"
                )}
              >
                <X className="w-3.5 h-3.5 stroke-[2.5]" />
              </motion.button>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    );
  }
);

LiquidGlassAlert.displayName = "LiquidGlassAlert";
export default LiquidGlassAlert;

```
--------------------------------------------------

### COMPONENT: liquid-glass-alert-dialog
Category: Liquid Glass
Description: A premium 3D liquid glass modal alert dialog featuring frosted backdrop blur, spring-animated crystal glass panel, variant icon badge, liquid glass Cancel and coloured Confirm buttons, Escape key and backdrop-click dismiss, and 5 severity variants.
URL: https://lightswind.com/components/liquid-glass-alert-dialog
Import: import { LiquidGlassAlertDialog } from "@/components/lightswind/liquid-glass-alert-dialog"
Registry URL: https://lightswind.com/r/liquid-glass-alert-dialog.json
Install Command: npx lightswind@latest add liquid-glass-alert-dialog

Usage:
```tsx
import { useState } from "react";
import { LiquidGlassAlertDialog } from "@/components/lightswind/liquid-glass-alert-dialog";
import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";

export function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <LiquidGlassButton variant="primary" onClick={() => setOpen(true)}>
        Delete Account
      </LiquidGlassButton>

      <LiquidGlassAlertDialog
        open={open}
        onOpenChange={setOpen}
        variant="danger"
        title="Delete Account?"
        description="This action is permanent and cannot be undone. All your data will be erased."
        confirmLabel="Delete Account"
        cancelLabel="Keep Account"
        onConfirm={() => console.log("Deleted")}
      />
    </>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import {
  AlertTriangle,
  Trash2,
  CheckCircle2,
  Info,
  Zap,
  X,
  LucideIcon,
} from "lucide-react";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassAlertDialogVariant =
  | "danger"
  | "warning"
  | "success"
  | "info"
  | "aurora";

export interface LiquidGlassAlertDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Title shown in the dialog header */
  title?: string;
  /** Descriptive body text */
  description?: string;
  /** Override the default icon */
  icon?: React.ReactNode;
  variant?: LiquidGlassAlertDialogVariant;
  /** Confirm button label */
  confirmLabel?: string;
  /** Cancel button label */
  cancelLabel?: string;
  /** Called when the confirm action is clicked */
  onConfirm?: () => void;
  /** Called when the cancel action is clicked */
  onCancel?: () => void;
  /** Extra content to render inside the dialog body */
  children?: React.ReactNode;
  /** Close on backdrop click (default: true) */
  closeOnBackdrop?: boolean;
  className?: string;
}

/* ─── Per-variant config ─────────────────────────────────────────── */
interface VariantConfig {
  Icon: LucideIcon;
  iconRing: string;
  iconBg: string;
  iconColor: string;
  titleColor: string;
  confirmBtn: string;
  accentGlow: string;
}

const VARIANTS: Record<LiquidGlassAlertDialogVariant, VariantConfig> = {
  danger: {
    Icon: Trash2,
    iconRing: "ring-rose-400/60 dark:ring-rose-400/50",
    iconBg:
      "bg-gradient-to-b from-rose-500/25 via-red-500/15 to-rose-600/10 dark:from-rose-500/40 dark:via-rose-600/25 dark:to-rose-700/15 border border-rose-400/40 dark:border-rose-400/30",
    iconColor: "text-rose-600 dark:text-rose-300",
    titleColor: "text-rose-950 dark:text-rose-100",
    confirmBtn: cn(
      "bg-gradient-to-b from-rose-400/90 via-red-500/85 to-rose-600/90",
      "border border-white/60 dark:border-white/30",
      "shadow-[0_10px_28px_-4px_rgba(244,63,94,0.6),inset_0_2px_1.5px_rgba(255,220,220,0.95),inset_0_-3px_6px_rgba(130,15,20,0.4)]",
      "text-white hover:shadow-[0_14px_32px_-4px_rgba(244,63,94,0.75)]"
    ),
    accentGlow:
      "shadow-[0_0_80px_-10px_rgba(244,63,94,0.4)] dark:shadow-[0_0_100px_-10px_rgba(244,63,94,0.55)]",
  },
  warning: {
    Icon: AlertTriangle,
    iconRing: "ring-amber-400/60 dark:ring-amber-400/50",
    iconBg:
      "bg-gradient-to-b from-amber-500/25 via-orange-500/15 to-amber-600/10 dark:from-amber-500/40 dark:via-amber-600/25 dark:to-amber-700/15 border border-amber-400/40 dark:border-amber-400/30",
    iconColor: "text-amber-600 dark:text-amber-300",
    titleColor: "text-amber-950 dark:text-amber-100",
    confirmBtn: cn(
      "bg-gradient-to-b from-amber-400/90 via-orange-500/85 to-amber-600/90",
      "border border-white/60 dark:border-white/30",
      "shadow-[0_10px_28px_-4px_rgba(245,158,11,0.5),inset_0_2px_1.5px_rgba(255,245,220,0.95),inset_0_-3px_6px_rgba(120,60,0,0.4)]",
      "text-white hover:shadow-[0_14px_32px_-4px_rgba(245,158,11,0.7)]"
    ),
    accentGlow:
      "shadow-[0_0_80px_-10px_rgba(245,158,11,0.35)] dark:shadow-[0_0_100px_-10px_rgba(245,158,11,0.5)]",
  },
  success: {
    Icon: CheckCircle2,
    iconRing: "ring-emerald-400/60 dark:ring-emerald-400/50",
    iconBg:
      "bg-gradient-to-b from-emerald-500/25 via-teal-500/15 to-emerald-600/10 dark:from-emerald-500/40 dark:via-emerald-600/25 dark:to-emerald-700/15 border border-emerald-400/40 dark:border-emerald-400/30",
    iconColor: "text-emerald-600 dark:text-emerald-300",
    titleColor: "text-emerald-950 dark:text-emerald-100",
    confirmBtn: cn(
      "bg-gradient-to-b from-emerald-400/90 via-emerald-600/85 to-teal-700/90",
      "border border-white/60 dark:border-white/30",
      "shadow-[0_10px_28px_-4px_rgba(16,185,129,0.55),inset_0_2px_1.5px_rgba(220,255,235,0.95),inset_0_-3px_6px_rgba(5,80,50,0.4)]",
      "text-white hover:shadow-[0_14px_32px_-4px_rgba(16,185,129,0.7)]"
    ),
    accentGlow:
      "shadow-[0_0_80px_-10px_rgba(16,185,129,0.35)] dark:shadow-[0_0_100px_-10px_rgba(16,185,129,0.5)]",
  },
  info: {
    Icon: Info,
    iconRing: "ring-sky-400/60 dark:ring-sky-400/50",
    iconBg:
      "bg-gradient-to-b from-sky-500/25 via-blue-500/15 to-sky-600/10 dark:from-sky-500/40 dark:via-blue-600/25 dark:to-sky-700/15 border border-sky-400/40 dark:border-sky-400/30",
    iconColor: "text-sky-600 dark:text-sky-300",
    titleColor: "text-sky-950 dark:text-sky-100",
    confirmBtn: cn(
      "bg-gradient-to-b from-sky-400/90 via-blue-500/85 to-indigo-600/90",
      "border border-white/60 dark:border-white/30",
      "shadow-[0_10px_28px_-4px_rgba(14,165,233,0.5),inset_0_2px_1.5px_rgba(220,240,255,0.95),inset_0_-3px_6px_rgba(0,60,130,0.4)]",
      "text-white hover:shadow-[0_14px_32px_-4px_rgba(14,165,233,0.65)]"
    ),
    accentGlow:
      "shadow-[0_0_80px_-10px_rgba(14,165,233,0.35)] dark:shadow-[0_0_100px_-10px_rgba(14,165,233,0.5)]",
  },
  aurora: {
    Icon: Zap,
    iconRing: "ring-violet-400/60 dark:ring-violet-400/50",
    iconBg:
      "bg-gradient-to-b from-violet-500/25 via-fuchsia-500/15 to-violet-600/10 dark:from-violet-500/40 dark:via-fuchsia-600/25 dark:to-violet-700/15 border border-violet-400/40 dark:border-violet-400/30",
    iconColor: "text-violet-600 dark:text-violet-300",
    titleColor: "text-violet-950 dark:text-violet-100",
    confirmBtn: cn(
      "bg-gradient-to-b from-violet-400/90 via-fuchsia-500/85 to-violet-700/90",
      "border border-white/60 dark:border-white/30",
      "shadow-[0_10px_28px_-4px_rgba(139,92,246,0.5),inset_0_2px_1.5px_rgba(240,220,255,0.95),inset_0_-3px_6px_rgba(60,20,120,0.4)]",
      "text-white hover:shadow-[0_14px_32px_-4px_rgba(139,92,246,0.65)]"
    ),
    accentGlow:
      "shadow-[0_0_80px_-10px_rgba(139,92,246,0.35)] dark:shadow-[0_0_100px_-10px_rgba(139,92,246,0.5)]",
  },
};

/* ─── Component ─────────────────────────────────────────────────── */
export const LiquidGlassAlertDialog: React.FC<LiquidGlassAlertDialogProps> = ({
  open,
  onOpenChange,
  title,
  description,
  icon,
  variant = "danger",
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  onCancel,
  children,
  closeOnBackdrop = true,
  className,
}) => {
  const cfg = VARIANTS[variant];
  const IconComp = cfg.Icon;

  // Close on Escape
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") onOpenChange(false);
    },
    [onOpenChange]
  );

  useEffect(() => {
    if (open) {
      document.addEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "hidden";
    }
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "";
    };
  }, [open, handleKeyDown]);

  const handleConfirm = () => {
    onConfirm?.();
    onOpenChange(false);
  };

  const handleCancel = () => {
    onCancel?.();
    onOpenChange(false);
  };

  if (typeof window === "undefined") return null;

  return createPortal(
    <AnimatePresence>
      {open && (
        <>
          {/* ── Backdrop ─────────────────────────────────────────── */}
          <motion.div
            key="backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={closeOnBackdrop ? () => onOpenChange(false) : undefined}
            className="fixed inset-0 z-[99998] backdrop-blur-md"
            style={{
              background:
                "linear-gradient(135deg, rgba(15,23,42,0.65) 0%, rgba(30,0,60,0.55) 100%)",
            }}
            aria-hidden="true"
          />

          {/* ── Dialog Panel ─────────────────────────────────────── */}
          <motion.div
            key="dialog"
            role="alertdialog"
            aria-modal="true"
            aria-labelledby="lg-alert-title"
            aria-describedby="lg-alert-desc"
            initial={{ opacity: 0, scale: 0.88, y: 24 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 16 }}
            transition={{ type: "spring", stiffness: 380, damping: 28 }}
            onClick={(e) => e.stopPropagation()}
            className={cn(
              "fixed z-[99999] inset-0 flex items-center justify-center p-4 pointer-events-none"
            )}
          >
            <div
              className={cn(
                // Liquid glass crystal panel — same recipe as button
                "relative w-full max-w-md overflow-hidden rounded-3xl pointer-events-auto",
                "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
                "backdrop-blur-2xl saturate-[220%]",
                "border border-white/85 dark:border-white/25",
                "shadow-[0_32px_64px_-12px_rgba(15,23,42,0.45),0_16px_32px_-8px_rgba(15,23,42,0.3),inset_0_3px_2px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-6px_12px_0px_rgba(0,0,0,0.18)]",
                "dark:shadow-[0_32px_70px_-12px_rgba(0,0,0,0.85),0_16px_36px_-8px_rgba(0,0,0,0.65),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.35),0_0_0_1px_rgba(255,255,255,0.18),inset_0_-6px_12px_0px_rgba(0,0,0,0.6)]",
                cfg.accentGlow,
                className
              )}
            >
              {/* Top gloss glare — full width pill, same as button/switch */}
              <span
                className="absolute top-0 left-0 right-0 h-[38%] pointer-events-none rounded-t-[inherit]"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0) 100%)",
                }}
              />

              {/* Bottom prism refraction */}
              <span
                className="absolute bottom-0 left-0 right-0 h-[15%] pointer-events-none rounded-b-[inherit]"
                style={{
                  background:
                    "linear-gradient(0deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%)",
                }}
              />

              {/* Close ×  */}
              <motion.button
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                onClick={() => onOpenChange(false)}
                type="button"
                aria-label="Close dialog"
                className={cn(
                  "absolute top-4 right-4 z-20 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 cursor-pointer",
                  "bg-slate-900/10 dark:bg-black/40 hover:bg-slate-900/20 dark:hover:bg-black/60",
                  "border border-slate-900/15 dark:border-white/30",
                  "shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.8)] dark:shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.3)]",
                  "text-slate-800 dark:text-white"
                )}
              >
                <X className="w-4 h-4 stroke-[2.5]" />
              </motion.button>

              {/* ── Body ─────────────────────────────────────────── */}
              <div className="relative z-10 flex flex-col items-center text-center gap-5 px-8 pt-10 pb-8">
                {/* Icon badge */}
                <motion.div
                  initial={{ scale: 0.5, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  transition={{ type: "spring", stiffness: 500, damping: 22, delay: 0.08 }}
                  className={cn(
                    "w-16 h-16 rounded-2xl flex items-center justify-center relative overflow-hidden",
                    "ring-2 ring-offset-0",
                    "backdrop-blur-md",
                    "shadow-[0_10px_25px_-4px_rgba(0,0,0,0.25),inset_0_2.5px_1.5px_rgba(255,255,255,0.95)] dark:shadow-[0_12px_28px_-4px_rgba(0,0,0,0.6),inset_0_2px_1.5px_rgba(255,255,255,0.4)]",
                    cfg.iconBg,
                    cfg.iconRing
                  )}
                >
                  {/* Badge top gloss */}
                  <span
                    className="absolute top-0 left-0 right-0 h-[50%] rounded-t-[inherit] pointer-events-none"
                    style={{
                      background:
                        "linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%)",
                    }}
                  />
                  <span className={cn("relative z-10", cfg.iconColor)}>
                    {icon ?? <IconComp className="w-7 h-7 stroke-[2.2]" />}
                  </span>
                </motion.div>

                {/* Title */}
                {title && (
                  <h2
                    id="lg-alert-title"
                    className={cn(
                      "text-xl font-bold tracking-tight leading-tight",
                      cfg.titleColor
                    )}
                  >
                    {title}
                  </h2>
                )}

                {/* Description */}
                {description && (
                  <p
                    id="lg-alert-desc"
                    className="text-sm leading-relaxed text-slate-700 dark:text-slate-200 font-medium max-w-xs"
                  >
                    {description}
                  </p>
                )}

                {/* Optional slot content */}
                {children && (
                  <div className="w-full text-sm text-slate-600 dark:text-slate-300">
                    {children}
                  </div>
                )}

                {/* ── Action buttons ──────────────────────────────── */}
                <div className="flex gap-3 w-full mt-1">
                  {/* Cancel — pure glass */}
                  <motion.button
                    whileHover={{ scale: 1.02, y: -1 }}
                    whileTap={{ scale: 0.97, y: 1 }}
                    transition={{ type: "spring", stiffness: 450, damping: 25 }}
                    onClick={handleCancel}
                    type="button"
                    className={cn(
                      "flex-1 h-10 px-5 rounded-full text-sm font-semibold cursor-pointer transition-all duration-200",
                      "bg-gradient-to-b from-white/50 via-white/22 to-white/10 dark:from-white/18 dark:via-white/8 dark:to-white/4",
                      "backdrop-blur-md saturate-[200%]",
                      "border border-white/80 dark:border-white/22",
                      "shadow-[0_8px_20px_-4px_rgba(15,23,42,0.18),inset_0_2px_1.5px_rgba(255,255,255,0.95)] dark:shadow-[0_8px_20px_-4px_rgba(0,0,0,0.6),inset_0_2px_1px_rgba(255,255,255,0.35)]",
                      "text-slate-700 dark:text-slate-200",
                      "relative overflow-hidden"
                    )}
                  >
                    {/* cancel button top gloss */}
                    <span
                      className="absolute top-0 left-0 right-0 h-[48%] pointer-events-none rounded-t-full"
                      style={{
                        background:
                          "linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%)",
                      }}
                    />
                    <span className="relative z-10">{cancelLabel}</span>
                  </motion.button>

                  {/* Confirm — variant coloured liquid glass */}
                  <motion.button
                    whileHover={{ scale: 1.02, y: -1 }}
                    whileTap={{ scale: 0.97, y: 1 }}
                    transition={{ type: "spring", stiffness: 450, damping: 25 }}
                    onClick={handleConfirm}
                    type="button"
                    className={cn(
                      "flex-1 h-10 px-5 rounded-full text-sm font-semibold cursor-pointer transition-all duration-200 backdrop-blur-md saturate-[200%] relative overflow-hidden",
                      cfg.confirmBtn
                    )}
                  >
                    {/* confirm button top gloss */}
                    <span
                      className="absolute top-0 left-0 right-0 h-[48%] pointer-events-none rounded-t-full"
                      style={{
                        background:
                          "linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 100%)",
                      }}
                    />
                    <span className="relative z-10">{confirmLabel}</span>
                  </motion.button>
                </div>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>,
    document.body
  );
};

LiquidGlassAlertDialog.displayName = "LiquidGlassAlertDialog";
export default LiquidGlassAlertDialog;

```
--------------------------------------------------

### COMPONENT: liquid-glass-avatar
Category: Liquid Glass
Description: A realistic 3D liquid glass avatar component featuring crystal lens refraction, top curved glare reflection, bottom prism depth, status indicator dots, stacked avatar group component with overflow counter, 6 color variants, 5 sizes, and squircle or circle shapes.
URL: https://lightswind.com/components/liquid-glass-avatar
Import: import LiquidGlassAvatar, { LiquidGlassAvatarGroup } from "@/components/lightswind/liquid-glass-avatar"
Registry URL: https://lightswind.com/r/liquid-glass-avatar.json
Install Command: npx lightswind@latest add liquid-glass-avatar

Usage:
```tsx
import LiquidGlassAvatar, { LiquidGlassAvatarGroup } from "@/components/lightswind/liquid-glass-avatar";

export function Demo() {
  return (
    <div className="flex items-center gap-6 p-6 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20">
      <LiquidGlassAvatar
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150"
        alt="Alex Rivera"
        size="lg"
        variant="cyan"
        status="online"
      />

      <LiquidGlassAvatarGroup size="md" max={3}>
        <LiquidGlassAvatar fallback="AR" variant="emerald" />
        <LiquidGlassAvatar fallback="SC" variant="cyan" />
        <LiquidGlassAvatar fallback="MS" variant="purple" />
        <LiquidGlassAvatar fallback="ER" variant="glass" />
      </LiquidGlassAvatarGroup>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";

export type LiquidGlassAvatarVariant =
  | "glass"
  | "emerald"
  | "primary"
  | "cyan"
  | "purple"
  | "aurora";

export type LiquidGlassAvatarSize = "sm" | "md" | "lg" | "xl" | "2xl";
export type LiquidGlassAvatarShape = "circle" | "squircle";
export type LiquidGlassAvatarStatus = "online" | "away" | "busy" | "offline";

export interface LiquidGlassAvatarProps {
  src?: string;
  alt?: string;
  fallback?: string | React.ReactNode;
  variant?: LiquidGlassAvatarVariant;
  size?: LiquidGlassAvatarSize;
  shape?: LiquidGlassAvatarShape;
  status?: LiquidGlassAvatarStatus;
  statusPosition?: "top-right" | "bottom-right";
  glow?: boolean;
  className?: string;
  onClick?: () => void;
}

/* ─── Size Presets ───────────────────────────────────────────────── */
const SIZE_CONFIG: Record<
  LiquidGlassAvatarSize,
  {
    container: string;
    text: string;
    statusSize: string;
    ringWidth: string;
  }
> = {
  sm: {
    container: "w-8 h-8",
    text: "text-xs font-semibold",
    statusSize: "w-2.5 h-2.5",
    ringWidth: "border-[1.5px]",
  },
  md: {
    container: "w-10 h-10",
    text: "text-sm font-bold",
    statusSize: "w-3 h-3",
    ringWidth: "border-2",
  },
  lg: {
    container: "w-12 h-12",
    text: "text-base font-bold",
    statusSize: "w-3.5 h-3.5",
    ringWidth: "border-2",
  },
  xl: {
    container: "w-16 h-16",
    text: "text-xl font-extrabold",
    statusSize: "w-4 h-4",
    ringWidth: "border-[2.5px]",
  },
  "2xl": {
    container: "w-20 h-20",
    text: "text-2xl font-black",
    statusSize: "w-5 h-5",
    ringWidth: "border-[3px]",
  },
};

/* ─── Variant Crystal Lens Borders & Shadows ─────────────────────── */
const VARIANT_CONFIG: Record<
  LiquidGlassAvatarVariant,
  {
    border: string;
    shadow: string;
    fallbackBg: string;
    fallbackText: string;
    glowShadow: string;
  }
> = {
  glass: {
    border: "border-white/85 dark:border-white/30",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(15,23,42,0.25),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-2px_4px_0px_rgba(0,0,0,0.15)] dark:shadow-[0_10px_25px_-4px_rgba(0,0,0,0.7),inset_0_2px_1.5px_0px_rgba(255,255,255,0.35),inset_0_-2px_4px_0px_rgba(0,0,0,0.5)]",
    fallbackBg:
      "bg-gradient-to-b from-white/60 via-white/30 to-white/10 dark:from-white/25 dark:via-white/12 dark:to-white/5",
    fallbackText: "text-slate-800 dark:text-white",
    glowShadow: "drop-shadow-[0_0_12px_rgba(255,255,255,0.5)]",
  },
  emerald: {
    border: "border-emerald-400/80 dark:border-emerald-400/40",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(16,185,129,0.45),inset_0_2px_1.5px_0px_rgba(220,255,235,0.95),inset_0_-2px_4px_0px_rgba(5,80,50,0.4)]",
    fallbackBg:
      "bg-gradient-to-b from-emerald-400/50 via-teal-500/35 to-emerald-700/40 dark:from-emerald-500/40 dark:to-teal-800/40",
    fallbackText: "text-white",
    glowShadow: "drop-shadow-[0_0_14px_rgba(16,185,129,0.6)]",
  },
  primary: {
    border: "border-rose-400/80 dark:border-rose-400/40",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(244,63,94,0.45),inset_0_2px_1.5px_0px_rgba(255,220,220,0.95),inset_0_-2px_4px_0px_rgba(130,15,20,0.4)]",
    fallbackBg:
      "bg-gradient-to-b from-rose-400/50 via-red-500/35 to-rose-700/40 dark:from-rose-500/40 dark:to-red-800/40",
    fallbackText: "text-white",
    glowShadow: "drop-shadow-[0_0_14px_rgba(244,63,94,0.6)]",
  },
  cyan: {
    border: "border-cyan-400/80 dark:border-cyan-400/40",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(0,183,255,0.45),inset_0_2px_1.5px_0px_rgba(220,245,255,0.95),inset_0_-2px_4px_0px_rgba(0,60,130,0.4)]",
    fallbackBg:
      "bg-gradient-to-b from-cyan-400/50 via-blue-500/35 to-indigo-700/40 dark:from-cyan-500/40 dark:to-indigo-800/40",
    fallbackText: "text-white",
    glowShadow: "drop-shadow-[0_0_14px_rgba(0,183,255,0.6)]",
  },
  purple: {
    border: "border-purple-400/80 dark:border-purple-400/40",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(168,85,247,0.45),inset_0_2px_1.5px_0px_rgba(240,220,255,0.95),inset_0_-2px_4px_0px_rgba(70,20,120,0.4)]",
    fallbackBg:
      "bg-gradient-to-b from-purple-400/50 via-fuchsia-500/35 to-purple-800/40 dark:from-purple-500/40 dark:to-fuchsia-900/40",
    fallbackText: "text-white",
    glowShadow: "drop-shadow-[0_0_14px_rgba(168,85,247,0.6)]",
  },
  aurora: {
    border: "border-violet-400/80 dark:border-violet-400/40",
    shadow:
      "shadow-[0_8px_20px_-4px_rgba(139,92,246,0.45),inset_0_2px_1.5px_0px_rgba(240,220,255,0.95),inset_0_-2px_4px_0px_rgba(50,10,100,0.4)]",
    fallbackBg:
      "bg-gradient-to-b from-violet-400/50 via-fuchsia-500/35 to-indigo-700/40 dark:from-violet-500/40 dark:to-indigo-800/40",
    fallbackText: "text-white",
    glowShadow: "drop-shadow-[0_0_14px_rgba(139,92,246,0.6)]",
  },
};

/* ─── Status Dot Config ─────────────────────────────────────────── */
const STATUS_CONFIG: Record<
  LiquidGlassAvatarStatus,
  { bg: string; border: string; pulseBg: string }
> = {
  online: {
    bg: "bg-emerald-500",
    border: "border-emerald-300 dark:border-emerald-400",
    pulseBg: "bg-emerald-400",
  },
  away: {
    bg: "bg-amber-500",
    border: "border-amber-300 dark:border-amber-400",
    pulseBg: "bg-amber-400",
  },
  busy: {
    bg: "bg-rose-500",
    border: "border-rose-300 dark:border-rose-400",
    pulseBg: "bg-rose-400",
  },
  offline: {
    bg: "bg-slate-400 dark:bg-slate-500",
    border: "border-slate-300 dark:border-slate-400",
    pulseBg: "bg-slate-400",
  },
};

/* ─── Main Avatar Component ──────────────────────────────────────── */
export const LiquidGlassAvatar = React.forwardRef<
  HTMLDivElement,
  LiquidGlassAvatarProps
>(
  (
    {
      src,
      alt = "Avatar",
      fallback,
      variant = "glass",
      size = "md",
      shape = "circle",
      status,
      statusPosition = "bottom-right",
      glow = false,
      className,
      onClick,
    },
    ref
  ) => {
    const [imageError, setImageError] = useState(false);
    const sizeCfg = SIZE_CONFIG[size];
    const varCfg = VARIANT_CONFIG[variant];
    const roundedClass = shape === "circle" ? "rounded-full" : "rounded-2xl";

    return (
      <motion.div
        ref={ref}
        whileHover={onClick ? { scale: 1.08, y: -2 } : { scale: 1.03 }}
        whileTap={onClick ? { scale: 0.95 } : undefined}
        transition={{ type: "spring", stiffness: 450, damping: 24 }}
        onClick={onClick}
        className={cn(
          "relative inline-flex shrink-0 select-none group",
          onClick && "cursor-pointer",
          className
        )}
      >
        {/* Outer 3D Crystal Lens Ring Container */}
        <div
          className={cn(
            "relative overflow-hidden backdrop-blur-md saturate-[220%] transition-all duration-300",
            sizeCfg.container,
            sizeCfg.ringWidth,
            roundedClass,
            varCfg.border,
            varCfg.shadow,
            glow && varCfg.glowShadow
          )}
        >
          {/* Top glossy curved glare reflection */}
          <span
            className={cn(
              "absolute top-[0.5px] left-0.5 right-0.5 h-[48%] pointer-events-none z-20",
              shape === "circle" ? "rounded-t-full" : "rounded-t-xl"
            )}
            style={{
              background:
                "linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Bottom internal prism refraction */}
          <span
            className={cn(
              "absolute bottom-[0.5px] left-0.5 right-0.5 h-[24%] pointer-events-none z-20",
              shape === "circle" ? "rounded-b-full" : "rounded-b-xl"
            )}
            style={{
              background:
                "linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Avatar Image or Fallback */}
          {src && !imageError ? (
            <img
              src={src}
              alt={alt}
              onError={() => setImageError(true)}
              className={cn(
                "w-full h-full object-cover relative z-10 transition-transform duration-300 group-hover:scale-105",
                roundedClass
              )}
            />
          ) : (
            <div
              className={cn(
                "w-full h-full flex items-center justify-center relative z-10 tracking-wider uppercase",
                varCfg.fallbackBg,
                varCfg.fallbackText,
                sizeCfg.text,
                roundedClass
              )}
            >
              {fallback ?? alt?.slice(0, 2) ?? "U"}
            </div>
          )}
        </div>

        {/* Liquid Status Dot */}
        {status && (
          <span
            className={cn(
              "absolute z-30 flex items-center justify-center rounded-full border-2 border-white dark:border-slate-900 shadow-md",
              sizeCfg.statusSize,
              STATUS_CONFIG[status].bg,
              statusPosition === "top-right" ? "-top-0.5 -right-0.5" : "-bottom-0.5 -right-0.5"
            )}
          >
            {status === "online" && (
              <span
                className={cn(
                  "absolute inset-0 rounded-full animate-ping opacity-75",
                  STATUS_CONFIG[status].pulseBg
                )}
              />
            )}
          </span>
        )}
      </motion.div>
    );
  }
);

LiquidGlassAvatar.displayName = "LiquidGlassAvatar";

/* ─── Avatar Group Component ────────────────────────────────────── */
export interface LiquidGlassAvatarGroupProps {
  children: React.ReactNode;
  max?: number;
  size?: LiquidGlassAvatarSize;
  className?: string;
}

export const LiquidGlassAvatarGroup: React.FC<LiquidGlassAvatarGroupProps> = ({
  children,
  max = 4,
  size = "md",
  className,
}) => {
  const childrenArray = React.Children.toArray(children);
  const visibleChildren = childrenArray.slice(0, max);
  const excess = childrenArray.length - max;
  const sizeCfg = SIZE_CONFIG[size];

  return (
    <div
      className={cn("flex items-center -space-x-3 select-none", className)}
    >
      {visibleChildren.map((child, index) => (
        <div
          key={index}
          className="relative transition-transform duration-200 hover:z-40 hover:-translate-y-1"
          style={{ zIndex: visibleChildren.length - index }}
        >
          {child}
        </div>
      ))}

      {excess > 0 && (
        <div
          className={cn(
            "relative z-0 flex items-center justify-center rounded-full border-2 border-white/85 dark:border-white/30 backdrop-blur-md saturate-[220%]",
            "bg-gradient-to-b from-white/60 via-white/30 to-white/10 dark:from-white/25 dark:via-white/12 dark:to-white/5",
            "shadow-[0_8px_20px_-4px_rgba(15,23,42,0.25),inset_0_2px_1.5px_rgba(255,255,255,0.95)] dark:shadow-[0_10px_25px_-4px_rgba(0,0,0,0.7),inset_0_2px_1.5px_rgba(255,255,255,0.35)]",
            "text-slate-800 dark:text-white font-bold tracking-tight",
            sizeCfg.container,
            sizeCfg.text
          )}
        >
          +{excess}
        </div>
      )}
    </div>
  );
};

export default LiquidGlassAvatar;

```
--------------------------------------------------

### COMPONENT: liquid-glass-badge
Category: Liquid Glass
Description: A 3D liquid crystal capsule badge featuring top curved glare reflection, bottom prism refraction, 8 color variants (glass, emerald, primary, cyan, purple, aurora, gold, dark), live pulse status dots, custom icon slots, and removable tag pills.
URL: https://lightswind.com/components/liquid-glass-badge
Import: import { LiquidGlassBadge } from "@/components/lightswind/liquid-glass-badge"
Registry URL: https://lightswind.com/r/liquid-glass-badge.json
Install Command: npx lightswind@latest add liquid-glass-badge

Usage:
```tsx
import { LiquidGlassBadge } from "@/components/lightswind/liquid-glass-badge";
import { Sparkles, CheckCircle2 } from "lucide-react";

export function Demo() {
  return (
    <div className="flex items-center gap-3 p-6 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20">
      <LiquidGlassBadge variant="aurora" size="lg" icon={<Sparkles className="w-3.5 h-3.5" />} glow>
        Pro Feature
      </LiquidGlassBadge>

      <LiquidGlassBadge variant="emerald" size="md" dot dotPulse>
        Active
      </LiquidGlassBadge>

      <LiquidGlassBadge variant="cyan" size="md" removable onRemove={() => console.log("Removed")}>
        Tag Pill
      </LiquidGlassBadge>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps } from "framer-motion";
import { X } from "lucide-react";

export type LiquidGlassBadgeVariant =
  | "glass"
  | "emerald"
  | "primary"
  | "cyan"
  | "purple"
  | "aurora"
  | "gold"
  | "dark";

export type LiquidGlassBadgeSize = "sm" | "md" | "lg";

export interface LiquidGlassBadgeProps
  extends Omit<HTMLMotionProps<"span">, "size"> {
  variant?: LiquidGlassBadgeVariant;
  size?: LiquidGlassBadgeSize;
  icon?: React.ReactNode;
  dot?: boolean;
  dotPulse?: boolean;
  removable?: boolean;
  onRemove?: () => void;
  glow?: boolean;
  children?: React.ReactNode;
  className?: string;
}

/* ─── Size Presets ───────────────────────────────────────────────── */
const SIZE_CLASSES: Record<LiquidGlassBadgeSize, string> = {
  sm: "h-5 px-2.5 text-[10px] font-bold rounded-full gap-1 tracking-wider uppercase",
  md: "h-6 px-3 text-xs font-semibold rounded-full gap-1.5",
  lg: "h-7 px-3.5 text-xs font-bold rounded-full gap-2",
};

/* ─── Variant Styles ─────────────────────────────────────────────── */
const VARIANT_STYLES: Record<
  LiquidGlassBadgeVariant,
  {
    gradient: string;
    border: string;
    shadow: string;
    textColor: string;
    dotBg: string;
    glowShadow: string;
  }
> = {
  glass: {
    gradient:
      "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
    border: "border-white/85 dark:border-white/25",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(15,23,42,0.18),inset_0_1.5px_1px_0px_rgba(255,255,255,0.95),inset_0_-2px_4px_0px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_14px_-2px_rgba(0,0,0,0.6),inset_0_1.5px_1px_0px_rgba(255,255,255,0.35),inset_0_-2px_4px_0px_rgba(0,0,0,0.4)]",
    textColor: "text-slate-800 dark:text-white",
    dotBg: "bg-slate-400 dark:bg-slate-300",
    glowShadow: "shadow-[0_0_12px_rgba(255,255,255,0.5)]",
  },
  emerald: {
    gradient:
      "bg-gradient-to-b from-emerald-400/40 via-teal-500/25 to-emerald-600/30 dark:from-emerald-400/30 dark:via-emerald-500/20 dark:to-emerald-700/25",
    border: "border-emerald-400/70 dark:border-emerald-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(16,185,129,0.35),inset_0_1.5px_1px_0px_rgba(220,255,235,0.95),inset_0_-2px_4px_0px_rgba(5,80,50,0.3)]",
    textColor: "text-emerald-950 dark:text-emerald-200",
    dotBg: "bg-emerald-400",
    glowShadow: "shadow-[0_0_14px_rgba(16,185,129,0.5)]",
  },
  primary: {
    gradient:
      "bg-gradient-to-b from-rose-400/40 via-red-500/25 to-rose-600/30 dark:from-rose-400/30 dark:via-rose-500/20 dark:to-rose-700/25",
    border: "border-rose-400/70 dark:border-rose-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(244,63,94,0.35),inset_0_1.5px_1px_0px_rgba(255,220,220,0.95),inset_0_-2px_4px_0px_rgba(130,15,20,0.3)]",
    textColor: "text-rose-950 dark:text-rose-200",
    dotBg: "bg-rose-400",
    glowShadow: "shadow-[0_0_14px_rgba(244,63,94,0.5)]",
  },
  cyan: {
    gradient:
      "bg-gradient-to-b from-cyan-400/40 via-blue-500/25 to-indigo-600/30 dark:from-cyan-400/30 dark:via-blue-500/20 dark:to-indigo-700/25",
    border: "border-cyan-400/70 dark:border-cyan-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(0,183,255,0.35),inset_0_1.5px_1px_0px_rgba(220,245,255,0.95),inset_0_-2px_4px_0px_rgba(0,60,130,0.3)]",
    textColor: "text-sky-950 dark:text-cyan-200",
    dotBg: "bg-cyan-400",
    glowShadow: "shadow-[0_0_14px_rgba(0,183,255,0.5)]",
  },
  purple: {
    gradient:
      "bg-gradient-to-b from-purple-400/40 via-fuchsia-500/25 to-purple-700/30 dark:from-purple-400/30 dark:via-fuchsia-500/20 dark:to-purple-800/25",
    border: "border-purple-400/70 dark:border-purple-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(168,85,247,0.35),inset_0_1.5px_1px_0px_rgba(240,220,255,0.95),inset_0_-2px_4px_0px_rgba(70,20,120,0.3)]",
    textColor: "text-purple-950 dark:text-purple-200",
    dotBg: "bg-purple-400",
    glowShadow: "shadow-[0_0_14px_rgba(168,85,247,0.5)]",
  },
  aurora: {
    gradient:
      "bg-gradient-to-b from-violet-400/40 via-fuchsia-400/25 to-indigo-600/30 dark:from-violet-400/30 dark:via-fuchsia-500/20 dark:to-indigo-700/25",
    border: "border-violet-400/70 dark:border-violet-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(139,92,246,0.35),inset_0_1.5px_1px_0px_rgba(240,220,255,0.95),inset_0_-2px_4px_0px_rgba(50,10,100,0.3)]",
    textColor: "text-violet-950 dark:text-violet-200",
    dotBg: "bg-violet-400",
    glowShadow: "shadow-[0_0_14px_rgba(139,92,246,0.5)]",
  },
  gold: {
    gradient:
      "bg-gradient-to-b from-amber-400/40 via-orange-400/25 to-amber-600/30 dark:from-amber-400/30 dark:via-amber-500/20 dark:to-orange-700/25",
    border: "border-amber-400/70 dark:border-amber-400/35",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(245,158,11,0.35),inset_0_1.5px_1px_0px_rgba(255,245,220,0.95),inset_0_-2px_4px_0px_rgba(120,60,0,0.3)]",
    textColor: "text-amber-950 dark:text-amber-200",
    dotBg: "bg-amber-400",
    glowShadow: "shadow-[0_0_14px_rgba(245,158,11,0.5)]",
  },
  dark: {
    gradient:
      "bg-gradient-to-b from-slate-900/80 via-slate-900/60 to-zinc-950/70 dark:from-slate-950/90 dark:to-black",
    border: "border-slate-700/70 dark:border-white/20",
    shadow:
      "shadow-[0_4px_12px_-2px_rgba(0,0,0,0.4),inset_0_1.5px_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_4px_0px_rgba(0,0,0,0.5)]",
    textColor: "text-white",
    dotBg: "bg-emerald-400",
    glowShadow: "shadow-[0_0_12px_rgba(15,23,42,0.8)]",
  },
};

/* ─── Component ─────────────────────────────────────────────────── */
export const LiquidGlassBadge = React.forwardRef<
  HTMLSpanElement,
  LiquidGlassBadgeProps
>(
  (
    {
      variant = "glass",
      size = "md",
      icon,
      dot = false,
      dotPulse = false,
      removable = false,
      onRemove,
      glow = false,
      children,
      className,
      ...props
    },
    ref
  ) => {
    const varStyle = VARIANT_STYLES[variant];

    return (
      <motion.span
        ref={ref}
        whileHover={{ scale: 1.05, y: -0.5 }}
        whileTap={{ scale: 0.96 }}
        transition={{ type: "spring", stiffness: 500, damping: 25 }}
        className={cn(
          "relative inline-flex items-center justify-center outline-none select-none border overflow-hidden backdrop-blur-md saturate-[220%] transition-all duration-200",
          SIZE_CLASSES[size],
          varStyle.gradient,
          varStyle.border,
          varStyle.shadow,
          varStyle.textColor,
          glow && varStyle.glowShadow,
          className
        )}
        {...props}
      >
        {/* Top gloss glare reflection - pill header */}
        <span
          className="absolute top-0 left-0 right-0 h-[48%] pointer-events-none rounded-t-full"
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Bottom prism refraction */}
        <span
          className="absolute bottom-0 left-0 right-0 h-[22%] pointer-events-none rounded-b-full"
          style={{
            background:
              "linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Status Dot */}
        {dot && (
          <span className="relative flex items-center justify-center shrink-0 w-1.5 h-1.5">
            {dotPulse && (
              <span
                className={cn(
                  "absolute inset-0 rounded-full animate-ping opacity-75",
                  varStyle.dotBg
                )}
              />
            )}
            <span
              className={cn(
                "relative z-10 w-1.5 h-1.5 rounded-full",
                varStyle.dotBg
              )}
            />
          </span>
        )}

        {/* Custom Icon */}
        {icon && <span className="relative z-10 shrink-0">{icon}</span>}

        {/* Badge Label */}
        {children && <span className="relative z-10 truncate">{children}</span>}

        {/* Removable × Button */}
        {removable && (
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              onRemove?.();
            }}
            aria-label="Remove badge"
            className="relative z-10 shrink-0 -mr-1 p-0.5 rounded-full hover:bg-black/15 dark:hover:bg-white/20 transition-colors"
          >
            <X className="w-3 h-3 stroke-[2.5]" />
          </button>
        )}
      </motion.span>
    );
  }
);

LiquidGlassBadge.displayName = "LiquidGlassBadge";
export default LiquidGlassBadge;

```
--------------------------------------------------

### COMPONENT: liquid-glass-button
Category: Liquid Glass
Description: A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.
URL: https://lightswind.com/components/liquid-glass-button
Import: import { LiquidGlassButton, LiquidGlassInput, LiquidGlassSelect, LiquidGlassSwitch, LiquidGlassCard } from "@/components/lightswind/liquid-glass-button"
Registry URL: https://lightswind.com/r/liquid-glass-button.json
Install Command: npx lightswind@latest add liquid-glass-button

Usage:
```tsx
import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";

export function Demo() {
  return (
    <div className="flex items-center gap-4">
      <LiquidGlassButton variant="glass" size="md">
        Clear Glass
      </LiquidGlassButton>
      <LiquidGlassButton variant="primary" size="md">
        Start Project
      </LiquidGlassButton>
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps } from "framer-motion";
import { Check, Search, Plus, ChevronDown } from "lucide-react";

/* ==========================================================================
   LIQUID GLASS BUTTON COMPONENT
   ========================================================================== */
export interface LiquidGlassButtonProps
  extends Omit<HTMLMotionProps<"button">, "size"> {
  variant?: "glass" | "primary" | "secondary" | "icon" | "accent" | "emerald" | "outline" | "aurora" | "cyan" | "purple";
  size?: "sm" | "md" | "lg" | "xl" | "icon";
  glow?: boolean;
  fullWidth?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassButton = React.forwardRef<
  HTMLButtonElement,
  LiquidGlassButtonProps
>(
  (
    {
      variant = "glass",
      size = "md",
      glow = true,
      fullWidth = false,
      children,
      icon,
      className,
      disabled,
      onClick,
      ...props
    },
    ref
  ) => {
    // Sizing presets — professional compact heights
    const sizeClasses = {
      sm: "h-8 px-4 text-xs rounded-full gap-1.5",
      md: "h-10 px-5 text-sm rounded-full gap-2",
      lg: "h-12 px-7 text-base rounded-full gap-2.5",
      xl: "h-14 px-9 text-lg rounded-[2rem] gap-3",
      icon: "w-10 h-10 p-0 rounded-full flex items-center justify-center shrink-0",
    };

    // Variant specific background and shadow styles (Realistic 3D Liquid Glass Crystal)
    const variantStyles = {
      // Pure Liquid Glass Crystal Effect (Clear Glass)
      glass: cn(
        "text-slate-900 dark:text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
        "backdrop-blur-md saturate-[220%]",
        "border border-white/85 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),0_6px_15px_-4px_rgba(15,23,42,0.15),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-4px_8px_0px_rgba(0,0,0,0.15),inset_3px_0_4px_0px_rgba(255,255,255,0.5),inset_-3px_0_4px_0px_rgba(255,255,255,0.5)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),0_8px_18px_-4px_rgba(0,0,0,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4),0_0_0_1px_rgba(255,255,255,0.2),inset_0_-4px_8px_0px_rgba(0,0,0,0.5)]",
        "hover:bg-gradient-to-b hover:from-white/65 hover:via-white/35 hover:to-white/15 dark:hover:from-white/35 dark:hover:via-white/15 dark:hover:to-white/10 hover:shadow-[0_22px_45px_-6px_rgba(15,23,42,0.3)] dark:hover:shadow-[0_25px_45px_-6px_rgba(0,0,0,0.85)]"
      ),
      primary: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-[#ff6a3d]/90 via-[#ee3e26]/85 to-[#c31e14]/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(238,62,38,0.65),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(255,230,220,0.95),0_0_0_1px_rgba(255,180,160,0.9),inset_0_-4px_8px_0px_rgba(130,15,0,0.5)]",
        "hover:shadow-[0_20px_40px_-4px_rgba(238,62,38,0.8),inset_0_2.5px_2px_0px_rgba(255,240,235,0.95)]"
      ),
      secondary: cn(
        "text-slate-800 dark:text-slate-100 font-semibold",
        "bg-gradient-to-b from-white/55 via-white/25 to-slate-200/20 dark:from-white/20 dark:via-white/10 dark:to-slate-900/40",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/75 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.2),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-4px_7px_0px_rgba(0,0,0,0.15)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4)]"
      ),
      icon: cn(
        "text-slate-800 dark:text-slate-100 font-semibold",
        "bg-gradient-to-b from-white/55 via-white/25 to-slate-200/20 dark:from-white/20 dark:via-white/10 dark:to-slate-900/40",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/75 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.2),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),inset_0_-4px_7px_0px_rgba(0,0,0,0.15)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4)]"
      ),
      accent: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-cyan-400/90 via-blue-600/85 to-indigo-700/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(0,114,255,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,245,255,0.95),0_0_0_1px_rgba(160,225,255,0.9),inset_0_-4px_8px_0px_rgba(0,40,130,0.5)]"
      ),
      emerald: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-emerald-400/90 via-emerald-600/85 to-teal-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(16,185,129,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,255,235,0.95),0_0_0_1px_rgba(160,255,200,0.9),inset_0_-4px_8px_0px_rgba(5,80,50,0.5)]"
      ),
      aurora: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-violet-400/90 via-fuchsia-500/85 to-violet-700/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(139,92,246,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(200,180,255,0.9),inset_0_-4px_8px_0px_rgba(70,20,120,0.5)]"
      ),
      cyan: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-sky-400/90 via-blue-500/85 to-indigo-600/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(14,165,233,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,240,255,0.95),0_0_0_1px_rgba(180,220,255,0.9),inset_0_-4px_8px_0px_rgba(10,50,130,0.5)]"
      ),
      purple: cn(
        "text-white font-semibold tracking-wide drop-shadow-sm",
        "bg-gradient-to-b from-purple-400/90 via-purple-600/85 to-fuchsia-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(168,85,247,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(210,180,255,0.9),inset_0_-4px_8px_0px_rgba(70,20,120,0.5)]"
      ),
      outline: cn(
        "text-slate-800 dark:text-slate-100 font-semibold border border-white/80 dark:border-white/25",
        "bg-white/25 dark:bg-white/10 backdrop-blur-md saturate-[200%]",
        "shadow-[0_12px_28px_-5px_rgba(0,0,0,0.15),inset_0_2px_1px_0px_rgba(255,255,255,0.9)] dark:shadow-[0_12px_28px_-5px_rgba(0,0,0,0.6),inset_0_1.5px_1px_0px_rgba(255,255,255,0.3)]"
      ),
    };

    return (
      <motion.button
        ref={ref}
        whileHover={{ scale: 1.035, y: -2 }}
        whileTap={{ scale: 0.95, y: 3 }}
        transition={{ type: "spring", stiffness: 450, damping: 25 }}
        onClick={onClick}
        disabled={disabled}
        className={cn(
          "relative outline-none border-none cursor-pointer font-sans select-none overflow-hidden",
          "inline-flex items-center justify-center backdrop-blur-md saturate-[220%]",
          "transition-all duration-200 ease-out",
          sizeClasses[size === "icon" ? "icon" : size],
          variantStyles[variant],
          fullWidth && "w-full flex-1",
          disabled && "opacity-50 cursor-not-allowed pointer-events-none",
          className
        )}
        {...props}
      >
        {/* Top glossy curved glare reflection */}
        <span
          className={cn(
            "absolute top-[1px] left-1 right-1 h-[48%] pointer-events-none transition-all duration-200",
            size === "icon" || variant === "icon"
              ? "rounded-t-full rounded-b-[50%]"
              : "rounded-[100px_100px_45%_45%]"
          )}
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Bottom internal prism refraction ring */}
        <span
          className={cn(
            "absolute bottom-[1.5px] left-1.5 right-1.5 h-[28%] pointer-events-none transition-all duration-200",
            size === "icon" || variant === "icon"
              ? "rounded-b-full rounded-t-[30%]"
              : "rounded-[0_0_100px_100px]"
          )}
          style={{
            background:
              "linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Content */}
        <span className="relative z-10 flex items-center gap-2">
          {icon}
          {children}
        </span>
      </motion.button>
    );
  }
);
LiquidGlassButton.displayName = "LiquidGlassButton";

/* ==========================================================================
   LIQUID GLASS INPUT COMPONENT
   ========================================================================== */
export interface LiquidGlassInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  placeholder?: string;
  onAddClick?: () => void;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassInput = React.forwardRef<
  HTMLInputElement,
  LiquidGlassInputProps
>(({ placeholder = "Search...", onAddClick, icon, className, ...props }, ref) => {
  return (
    <div
      className={cn(
        "relative w-full h-14 rounded-full px-5 flex items-center justify-between gap-3 overflow-hidden",
        "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
        "backdrop-blur-md saturate-[220%]",
        "border border-white/85 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95)]",
        className
      )}
    >
      <span
        className="absolute top-[1px] left-1.5 right-1.5 h-[50%] pointer-events-none rounded-[100px_100px_45%_45%]"
        style={{
          background:
            "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
        }}
      />

      <div className="flex items-center gap-3 w-full relative z-10">
        {icon || <Search className="w-5 h-5 text-slate-600 dark:text-slate-300 shrink-0" />}
        <input
          ref={ref}
          type="text"
          placeholder={placeholder}
          className="w-full bg-transparent border-none outline-none text-slate-800 dark:text-slate-100 placeholder:text-slate-500 dark:placeholder:text-slate-400 font-medium text-base font-sans"
          {...props}
        />
      </div>

      {onAddClick && (
        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={onAddClick}
          type="button"
          aria-label="Add item"
          className="relative z-10 w-10 h-10 rounded-full bg-white/80 dark:bg-white/20 flex items-center justify-center text-slate-800 dark:text-white font-light text-2xl shrink-0 shadow-[0_4px_10px_rgba(0,0,0,0.12),inset_0_1.5px_1px_#ffffff] cursor-pointer"
        >
          <Plus className="w-5 h-5 stroke-[2.5]" />
        </motion.button>
      )}
    </div>
  );
});
LiquidGlassInput.displayName = "LiquidGlassInput";

/* ==========================================================================
   LIQUID GLASS SELECT COMPONENT
   ========================================================================== */
export interface LiquidGlassSelectProps {
  options?: string[];
  selected?: string;
  onChange?: (val: string) => void;
  placeholder?: string;
  icon?: React.ReactNode;
  className?: string;
}

export const LiquidGlassSelect: React.FC<LiquidGlassSelectProps> = ({
  options = ["Select Option", "Option 1", "Option 2", "Option 3"],
  selected = "Select",
  onChange,
  icon,
  className,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [current, setCurrent] = useState(selected);

  const handleSelect = (val: string) => {
    setCurrent(val);
    if (onChange) onChange(val);
    setIsOpen(false);
  };

  return (
    <div className={cn("relative flex-1 min-w-[180px]", className)}>
      <motion.button
        whileTap={{ scale: 0.97 }}
        onClick={() => setIsOpen(!isOpen)}
        className="relative w-full h-14 rounded-full px-5 flex items-center justify-between text-slate-800 dark:text-slate-100 font-medium text-base bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5 backdrop-blur-md saturate-[220%] border border-white/85 dark:border-white/25 shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95)] cursor-pointer overflow-hidden"
      >
        <span
          className="absolute top-[1px] left-1.5 right-1.5 h-[50%] pointer-events-none rounded-[100px_100px_45%_45%]"
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        <div className="flex items-center gap-2.5 relative z-10">
          {icon || <ChevronDown className="w-5 h-5 text-slate-600 dark:text-slate-300" />}
          <span>{current}</span>
        </div>

        <div className="relative z-10 w-8 h-8 rounded-xl bg-white/80 dark:bg-white/20 flex items-center justify-center text-slate-800 dark:text-white shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1.5px_1px_rgba(255,255,255,0.8)]">
          <Check className="w-4 h-4 stroke-[3]" />
        </div>
      </motion.button>

      {isOpen && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 6 }}
          exit={{ opacity: 0, y: -10 }}
          className="absolute top-full left-0 right-0 z-50 p-2 rounded-2xl bg-white/90 dark:bg-slate-900/90 backdrop-blur-2xl border border-white/60 dark:border-white/20 shadow-2xl flex flex-col gap-1"
        >
          {options.map((opt) => (
            <button
              key={opt}
              onClick={() => handleSelect(opt)}
              className={cn(
                "w-full text-left px-4 py-2.5 rounded-xl text-sm font-medium transition-colors cursor-pointer",
                current === opt
                  ? "bg-white/40 dark:bg-white/10 text-slate-900 dark:text-white font-semibold"
                  : "text-slate-700 dark:text-slate-200 hover:bg-slate-100/50 dark:hover:bg-slate-800/60"
              )}
            >
              {opt}
            </button>
          ))}
        </motion.div>
      )}
    </div>
  );
};

/* ==========================================================================
   LIQUID GLASS SWITCH / TOGGLE COMPONENT
   ========================================================================== */
export interface LiquidGlassSwitchProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  className?: string;
}

export const LiquidGlassSwitch: React.FC<LiquidGlassSwitchProps> = ({
  checked = true,
  onChange,
  className,
}) => {
  const [isOn, setIsOn] = useState(checked);

  const toggle = () => {
    const next = !isOn;
    setIsOn(next);
    if (onChange) onChange(next);
  };

  return (
    <motion.button
      whileTap={{ scale: 0.92 }}
      onClick={toggle}
      type="button"
      role="switch"
      aria-checked={isOn}
      className={cn(
        "relative w-20 h-12 rounded-full p-1 flex items-center transition-all duration-300 cursor-pointer outline-none overflow-hidden",
        isOn
          ? "bg-white/45 dark:bg-white/20 shadow-[0_10px_20px_-2px_rgba(0,0,0,0.2),0_0_0_1px_rgba(255,255,255,0.9),inset_0_2px_4px_rgba(0,0,0,0.1)]"
          : "bg-slate-200/50 dark:bg-slate-800/50 shadow-[0_8px_15px_-2px_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,0.5)]",
        className
      )}
    >
      <motion.div
        animate={{ x: isOn ? 32 : 0 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
        className="w-9 h-9 rounded-full bg-white dark:bg-slate-200 shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_2px_1px_#ffffff]"
      />
    </motion.button>
  );
};

export { LiquidGlassCard, type LiquidGlassCardProps } from "./liquid-glass-card";
export default LiquidGlassButton;

```
--------------------------------------------------

### COMPONENT: liquid-glass-card
Category: Liquid Glass
Description: A standalone 3D liquid glass card component featuring modular subcomponents (Header, Title, Description, Content, Footer), top curved glare reflection, bottom prism refraction, 7 color crystal variants, ambient glow, and hover elevation physics.
URL: https://lightswind.com/components/liquid-glass-card
Import: import LiquidGlassCard, { LiquidGlassCardHeader, LiquidGlassCardTitle, LiquidGlassCardDescription, LiquidGlassCardContent, LiquidGlassCardFooter } from "@/components/lightswind/liquid-glass-card"
Registry URL: https://lightswind.com/r/liquid-glass-card.json
Install Command: npx lightswind@latest add liquid-glass-card

Usage:
```tsx
import LiquidGlassCard, {
  LiquidGlassCardHeader,
  LiquidGlassCardTitle,
  LiquidGlassCardDescription,
  LiquidGlassCardContent,
  LiquidGlassCardFooter,
} from "@/components/lightswind/liquid-glass-card";
import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";

export function Demo() {
  return (
    <LiquidGlassCard variant="aurora" glow hoverEffect className="max-w-md">
      <LiquidGlassCardHeader>
        <LiquidGlassCardTitle>Aurora AI Studio</LiquidGlassCardTitle>
        <LiquidGlassCardDescription>Generative UI Builder</LiquidGlassCardDescription>
      </LiquidGlassCardHeader>

      <LiquidGlassCardContent>
        <p className="text-xs leading-relaxed opacity-85">
          Build 3D glassmorphic interfaces with real-time liquid lens refractions.
        </p>
      </LiquidGlassCardContent>

      <LiquidGlassCardFooter className="justify-end">
        <LiquidGlassButton variant="primary" size="sm">
          Get Started
        </LiquidGlassButton>
      </LiquidGlassCardFooter>
    </LiquidGlassCard>
  );
}
```

Source Code:
```tsx
"use client";

import React from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps } from "framer-motion";

export type LiquidGlassCardVariant =
  | "glass"
  | "emerald"
  | "primary"
  | "cyan"
  | "purple"
  | "aurora"
  | "dark";

export interface LiquidGlassCardProps
  extends Omit<HTMLMotionProps<"div">, "title"> {
  variant?: LiquidGlassCardVariant;
  glow?: boolean;
  hoverEffect?: boolean;
  children?: React.ReactNode;
  className?: string;
}

/* ─── Variant Config ─────────────────────────────────────────────── */
const VARIANT_CONFIG: Record<
  LiquidGlassCardVariant,
  {
    gradient: string;
    border: string;
    shadow: string;
    glowShadow: string;
  }
> = {
  glass: {
    gradient:
      "bg-gradient-to-b from-white/60 via-white/30 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
    border: "border-white/90 dark:border-white/25",
    shadow:
      "shadow-[0_24px_50px_-10px_rgba(15,23,42,0.3),inset_0_3px_2px_0px_rgba(255,255,255,0.98),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-5px_10px_0px_rgba(0,0,0,0.12)] dark:shadow-[0_24px_60px_-10px_rgba(0,0,0,0.85),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.35),0_0_0_1px_rgba(255,255,255,0.18),inset_0_-5px_10px_0px_rgba(0,0,0,0.5)]",
    glowShadow: "shadow-[0_0_60px_-10px_rgba(255,255,255,0.5)]",
  },
  emerald: {
    gradient:
      "bg-gradient-to-b from-emerald-400/50 via-emerald-600/40 to-teal-700/45 dark:from-emerald-500/45 dark:via-emerald-600/35 dark:to-teal-800/40 text-white",
    border: "border-white/70 dark:border-white/30",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(16,185,129,0.45),inset_0_3px_2px_0px_rgba(220,255,235,0.95),0_0_0_1px_rgba(255,255,255,0.6),inset_0_-5px_10px_0px_rgba(5,80,50,0.4)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(16,185,129,0.55)]",
  },
  primary: {
    gradient:
      "bg-gradient-to-b from-rose-400/50 via-red-500/40 to-rose-700/45 dark:from-rose-500/45 dark:via-red-600/35 dark:to-rose-800/40 text-white",
    border: "border-white/70 dark:border-white/30",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(244,63,94,0.45),inset_0_3px_2px_0px_rgba(255,220,220,0.95),0_0_0_1px_rgba(255,255,255,0.6),inset_0_-5px_10px_0px_rgba(130,15,20,0.4)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(244,63,94,0.55)]",
  },
  cyan: {
    gradient:
      "bg-gradient-to-b from-sky-400/50 via-blue-500/40 to-indigo-600/45 dark:from-sky-500/45 dark:via-blue-600/35 dark:to-indigo-800/40 text-white",
    border: "border-white/70 dark:border-white/30",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(14,165,233,0.45),inset_0_3px_2px_0px_rgba(220,240,255,0.95),0_0_0_1px_rgba(255,255,255,0.6),inset_0_-5px_10px_0px_rgba(0,60,130,0.4)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(14,165,233,0.55)]",
  },
  purple: {
    gradient:
      "bg-gradient-to-b from-purple-400/50 via-fuchsia-500/40 to-purple-800/45 dark:from-purple-500/45 dark:via-fuchsia-600/35 dark:to-purple-900/40 text-white",
    border: "border-white/70 dark:border-white/30",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(168,85,247,0.45),inset_0_3px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(255,255,255,0.6),inset_0_-5px_10px_0px_rgba(70,20,120,0.4)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(168,85,247,0.55)]",
  },
  aurora: {
    gradient:
      "bg-gradient-to-b from-violet-400/50 via-fuchsia-500/40 to-violet-700/45 dark:from-violet-500/45 dark:via-fuchsia-600/35 dark:to-violet-800/40 text-white",
    border: "border-white/70 dark:border-white/30",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(139,92,246,0.45),inset_0_3px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(255,255,255,0.6),inset_0_-5px_10px_0px_rgba(60,20,120,0.4)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(139,92,246,0.55)]",
  },
  dark: {
    gradient:
      "bg-gradient-to-b from-slate-900/85 via-slate-900/70 to-zinc-950/85 dark:from-slate-950/95 dark:to-black text-white",
    border: "border-slate-700/70 dark:border-white/25",
    shadow:
      "shadow-[0_24px_50px_-8px_rgba(0,0,0,0.7),inset_0_3px_2px_0px_rgba(255,255,255,0.3),0_0_0_1px_rgba(255,255,255,0.18),inset_0_-5px_10px_0px_rgba(0,0,0,0.6)]",
    glowShadow: "shadow-[0_0_70px_-8px_rgba(15,23,42,0.9)]",
  },
};

/* ─── Main Card Component ────────────────────────────────────────── */
export const LiquidGlassCard = React.forwardRef<
  HTMLDivElement,
  LiquidGlassCardProps
>(
  (
    {
      variant = "glass",
      glow = false,
      hoverEffect = true,
      children,
      className,
      ...props
    },
    ref
  ) => {
    const cfg = VARIANT_CONFIG[variant];

    return (
      <motion.div
        ref={ref}
        whileHover={hoverEffect ? { y: -4, scale: 1.01 } : undefined}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        className={cn(
          "relative w-full rounded-3xl overflow-hidden backdrop-blur-2xl saturate-[220%] border transition-all duration-300",
          cfg.gradient,
          cfg.border,
          cfg.shadow,
          glow && cfg.glowShadow,
          className
        )}
        {...props}
      >
        {/* Top gloss glare reflection — full width pill radius */}
        <span
          className="absolute top-0 left-0 right-0 h-[40%] pointer-events-none rounded-t-[inherit]"
          style={{
            background:
              "linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Bottom prism refraction */}
        <span
          className="absolute bottom-0 left-0 right-0 h-[15%] pointer-events-none rounded-b-[inherit]"
          style={{
            background:
              "linear-gradient(0deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%)",
          }}
        />

        {/* Card Content Container */}
        <div className="relative z-10 w-full h-full flex flex-col">
          {children}
        </div>
      </motion.div>
    );
  }
);

LiquidGlassCard.displayName = "LiquidGlassCard";

/* ─── Card Subcomponents ─────────────────────────────────────────── */
export interface LiquidGlassCardHeaderProps
  extends React.HTMLAttributes<HTMLDivElement> {}

export const LiquidGlassCardHeader = React.forwardRef<
  HTMLDivElement,
  LiquidGlassCardHeaderProps
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6 pb-3", className)}
    {...props}
  />
));
LiquidGlassCardHeader.displayName = "LiquidGlassCardHeader";

export interface LiquidGlassCardTitleProps
  extends React.HTMLAttributes<HTMLHeadingElement> {}

export const LiquidGlassCardTitle = React.forwardRef<
  HTMLHeadingElement,
  LiquidGlassCardTitleProps
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      "text-xl font-bold tracking-tight text-slate-900 dark:text-white leading-tight",
      className
    )}
    {...props}
  />
));
LiquidGlassCardTitle.displayName = "LiquidGlassCardTitle";

export interface LiquidGlassCardDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}

export const LiquidGlassCardDescription = React.forwardRef<
  HTMLParagraphElement,
  LiquidGlassCardDescriptionProps
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(
      "text-xs leading-relaxed text-slate-600 dark:text-slate-300 font-medium",
      className
    )}
    {...props}
  />
));
LiquidGlassCardDescription.displayName = "LiquidGlassCardDescription";

export interface LiquidGlassCardContentProps
  extends React.HTMLAttributes<HTMLDivElement> {}

export const LiquidGlassCardContent = React.forwardRef<
  HTMLDivElement,
  LiquidGlassCardContentProps
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0 flex-1", className)} {...props} />
));
LiquidGlassCardContent.displayName = "LiquidGlassCardContent";

export interface LiquidGlassCardFooterProps
  extends React.HTMLAttributes<HTMLDivElement> {}

export const LiquidGlassCardFooter = React.forwardRef<
  HTMLDivElement,
  LiquidGlassCardFooterProps
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex items-center p-6 pt-3 border-t border-white/40 dark:border-white/10",
      className
    )}
    {...props}
  />
));
LiquidGlassCardFooter.displayName = "LiquidGlassCardFooter";

export default LiquidGlassCard;

```
--------------------------------------------------

### COMPONENT: liquid-glass-chart
Category: Liquid Glass
Description: A 3D glassmorphic chart visualizer featuring 3D glass pillar bars with specular glare, smooth SVG liquid wave area paths, crystal line curves, interactive glass tooltips, and 6 color crystal variants.
URL: https://lightswind.com/components/liquid-glass-chart
Import: import LiquidGlassChart from "@/components/lightswind/liquid-glass-chart"
Registry URL: https://lightswind.com/r/liquid-glass-chart.json
Install Command: npx lightswind@latest add liquid-glass-chart

Usage:
```tsx
import LiquidGlassChart from "@/components/lightswind/liquid-glass-chart";

const DATA = [
  { label: "Jan", value: 420 },
  { label: "Feb", value: 680 },
  { label: "Mar", value: 590 },
  { label: "Apr", value: 890 },
  { label: "May", value: 740 },
  { label: "Jun", value: 1120 },
];

export function Demo() {
  return (
    <LiquidGlassChart
      data={DATA}
      type="bar"
      variant="aurora"
      title="Revenue Telemetry"
      description="Monthly active node scaling"
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";

export type LiquidGlassChartType = "bar" | "area" | "line";
export type LiquidGlassChartVariant =
  | "aurora"
  | "emerald"
  | "cyan"
  | "purple"
  | "primary"
  | "glass";

export interface LiquidGlassChartDataPoint {
  label: string;
  value: number;
  secondaryValue?: number;
}

export interface LiquidGlassChartProps {
  data: LiquidGlassChartDataPoint[];
  type?: LiquidGlassChartType;
  variant?: LiquidGlassChartVariant;
  title?: string;
  description?: string;
  height?: number;
  showGrid?: boolean;
  showTooltip?: boolean;
  showValues?: boolean;
  className?: string;
}

/* ─── Variant Theme Configurations ───────────────────────────────── */
const VARIANT_CONFIG: Record<
  LiquidGlassChartVariant,
  {
    primaryGrad: string;
    barGlass: string;
    glow: string;
    stroke: string;
    tooltipBg: string;
    badgeBg: string;
  }
> = {
  aurora: {
    primaryGrad: "from-violet-400 via-fuchsia-500 to-violet-700",
    barGlass:
      "bg-gradient-to-b from-violet-400/90 via-fuchsia-500/75 to-violet-800/85 border-white/60 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(139,92,246,0.55),inset_0_2.5px_1.5px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.65),inset_0_-4px_8px_rgba(60,20,120,0.4)]",
    glow: "shadow-[0_0_40px_rgba(139,92,246,0.35)]",
    stroke: "#c084fc",
    tooltipBg: "bg-violet-950/85 border-violet-400/50 text-white shadow-violet-900/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
  emerald: {
    primaryGrad: "from-emerald-400 via-teal-500 to-emerald-700",
    barGlass:
      "bg-gradient-to-b from-emerald-400/90 via-emerald-500/75 to-teal-800/85 border-white/60 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(16,185,129,0.55),inset_0_2.5px_1.5px_rgba(220,255,235,0.95),0_0_0_1px_rgba(255,255,255,0.65),inset_0_-4px_8px_rgba(5,80,50,0.4)]",
    glow: "shadow-[0_0_40px_rgba(16,185,129,0.35)]",
    stroke: "#34d399",
    tooltipBg: "bg-emerald-950/85 border-emerald-400/50 text-white shadow-emerald-900/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
  cyan: {
    primaryGrad: "from-sky-400 via-blue-500 to-indigo-700",
    barGlass:
      "bg-gradient-to-b from-sky-400/90 via-blue-500/75 to-indigo-800/85 border-white/60 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(14,165,233,0.55),inset_0_2.5px_1.5px_rgba(220,240,255,0.95),0_0_0_1px_rgba(255,255,255,0.65),inset_0_-4px_8px_rgba(0,60,130,0.4)]",
    glow: "shadow-[0_0_40px_rgba(14,165,233,0.35)]",
    stroke: "#38bdf8",
    tooltipBg: "bg-sky-950/85 border-sky-400/50 text-white shadow-sky-900/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
  purple: {
    primaryGrad: "from-purple-400 via-fuchsia-500 to-purple-800",
    barGlass:
      "bg-gradient-to-b from-purple-400/90 via-fuchsia-500/75 to-purple-900/85 border-white/60 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(168,85,247,0.55),inset_0_2.5px_1.5px_rgba(240,220,255,0.95),0_0_0_1px_rgba(255,255,255,0.65),inset_0_-4px_8px_rgba(70,20,120,0.4)]",
    glow: "shadow-[0_0_40px_rgba(168,85,247,0.35)]",
    stroke: "#e879f9",
    tooltipBg: "bg-purple-950/85 border-purple-400/50 text-white shadow-purple-900/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
  primary: {
    primaryGrad: "from-rose-400 via-red-500 to-rose-800",
    barGlass:
      "bg-gradient-to-b from-rose-400/90 via-red-500/75 to-rose-900/85 border-white/60 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(244,63,94,0.55),inset_0_2.5px_1.5px_rgba(255,220,220,0.95),0_0_0_1px_rgba(255,255,255,0.65),inset_0_-4px_8px_rgba(130,15,20,0.4)]",
    glow: "shadow-[0_0_40px_rgba(244,63,94,0.35)]",
    stroke: "#fb7185",
    tooltipBg: "bg-rose-950/85 border-rose-400/50 text-white shadow-rose-900/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
  glass: {
    primaryGrad: "from-white/90 via-white/50 to-white/20",
    barGlass:
      "bg-gradient-to-b from-white/75 via-white/40 to-white/15 dark:from-white/30 dark:via-white/15 dark:to-white/5 border-white/90 dark:border-white/30 shadow-[0_12px_28px_-4px_rgba(15,23,42,0.25),inset_0_2.5px_1.5px_rgba(255,255,255,0.98),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-4px_8px_rgba(0,0,0,0.15)]",
    glow: "shadow-[0_0_40px_rgba(255,255,255,0.35)]",
    stroke: "#ffffff",
    tooltipBg: "bg-slate-900/90 border-white/30 text-white shadow-black/50",
    badgeBg: "bg-white/40 dark:bg-white/15 text-slate-900 dark:text-white border-white/80 dark:border-white/25",
  },
};

export const LiquidGlassChart: React.FC<LiquidGlassChartProps> = ({
  data,
  type = "bar",
  variant = "aurora",
  title,
  description,
  height = 260,
  showGrid = true,
  showTooltip = true,
  showValues = true,
  className,
}) => {
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
  const cfg = VARIANT_CONFIG[variant];

  const maxValue = Math.max(...data.map((d) => d.value), 10);
  const svgPadding = 28;
  const svgWidth = 500;
  const svgHeight = height;

  // Compute smooth bezier SVG path for area/line chart
  const points = data.map((d, i) => {
    const x =
      svgPadding + (i * (svgWidth - svgPadding * 2)) / (data.length - 1 || 1);
    const y =
      svgHeight -
      svgPadding -
      (d.value * (svgHeight - svgPadding * 2)) / maxValue;
    return { x, y, ...d };
  });

  const pathD = points.reduce((acc, point, i, a) => {
    if (i === 0) return `M ${point.x},${point.y}`;
    const prev = a[i - 1];
    const cx = (prev.x + point.x) / 2;
    return `${acc} C ${cx},${prev.y} ${cx},${point.y} ${point.x},${point.y}`;
  }, "");

  const areaD = `${pathD} L ${points[points.length - 1]?.x || 0},${
    svgHeight - svgPadding
  } L ${points[0]?.x || 0},${svgHeight - svgPadding} Z`;

  return (
    <div
      className={cn(
        "relative w-full rounded-3xl p-6 sm:p-7 overflow-hidden backdrop-blur-2xl saturate-[220%] border",
        "bg-gradient-to-b from-white/60 via-white/30 to-white/12 dark:from-white/20 dark:via-white/10 dark:to-white/5",
        "border-white/90 dark:border-white/25",
        "shadow-[0_24px_50px_-10px_rgba(15,23,42,0.3),inset_0_3px_2px_0px_rgba(255,255,255,0.98),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-5px_10px_0px_rgba(0,0,0,0.12)]",
        "dark:shadow-[0_24px_60px_-10px_rgba(0,0,0,0.85),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.35),0_0_0_1px_rgba(255,255,255,0.18),inset_0_-5px_10px_0px_rgba(0,0,0,0.5)]",
        cfg.glow,
        className
      )}
    >
      {/* Top Gloss Glare */}
      <span
        className="absolute top-0 left-0 right-0 h-[40%] pointer-events-none rounded-t-[inherit]"
        style={{
          background:
            "linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0) 100%)",
        }}
      />

      {/* Bottom Prism Refraction */}
      <span
        className="absolute bottom-0 left-0 right-0 h-[15%] pointer-events-none rounded-b-[inherit]"
        style={{
          background:
            "linear-gradient(0deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%)",
        }}
      />

      {/* Card Header */}
      {(title || description) && (
        <div className="relative z-20 flex items-center justify-between mb-6">
          <div>
            {title && (
              <h3 className="text-lg font-extrabold tracking-tight text-slate-900 dark:text-white">
                {title}
              </h3>
            )}
            {description && (
              <p className="text-xs text-slate-700 dark:text-slate-200 font-semibold mt-0.5 opacity-90">
                {description}
              </p>
            )}
          </div>
          <span
            className={cn(
              "text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full border shadow-xs backdrop-blur-md",
              cfg.badgeBg
            )}
          >
            {type.toUpperCase()}
          </span>
        </div>
      )}

      {/* Chart Canvas Area */}
      <div
        className="relative z-20 w-full flex items-end justify-between gap-3"
        style={{ height: `${height}px` }}
      >
        {/* Horizontal Background Grid Lines */}
        {showGrid && (
          <div className="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 dark:opacity-30">
            {[0, 1, 2, 3].map((_, idx) => (
              <div
                key={idx}
                className="w-full border-b border-dashed border-slate-700 dark:border-white"
              />
            ))}
          </div>
        )}

        {/* ── 3D LIQUID GLASS BAR CHART ─────────────────────────────── */}
        {type === "bar" && (
          <div className="w-full h-full flex items-end justify-between gap-3 sm:gap-4 pt-6 pb-6 relative">
            {data.map((item, idx) => {
              const heightPercent = Math.max(
                (item.value / maxValue) * 100,
                10
              );
              const isHovered = hoveredIdx === idx;

              return (
                <div
                  key={idx}
                  onMouseEnter={() => setHoveredIdx(idx)}
                  onMouseLeave={() => setHoveredIdx(null)}
                  className="relative flex-1 h-full flex flex-col items-center justify-end group cursor-pointer"
                >
                  {/* 3D Liquid Capsule Bar */}
                  <motion.div
                    initial={{ height: 0 }}
                    animate={{ height: `${heightPercent}%` }}
                    transition={{
                      type: "spring",
                      stiffness: 350,
                      damping: 25,
                      delay: idx * 0.04,
                    }}
                    className={cn(
                      "relative w-full rounded-2xl border transition-all duration-300 overflow-hidden",
                      cfg.barGlass,
                      isHovered && "scale-x-105 brightness-125 shadow-2xl"
                    )}
                  >
                    {/* Top Curved Glare Specular Highlight Pill */}
                    <span
                      className="absolute top-[1px] left-1 right-1 h-[45%] pointer-events-none rounded-t-xl"
                      style={{
                        background:
                          "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 100%)",
                      }}
                    />

                    {/* Bottom Prism Refraction */}
                    <span
                      className="absolute bottom-0 left-0 right-0 h-[20%] pointer-events-none rounded-b-xl"
                      style={{
                        background:
                          "linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)",
                      }}
                    />
                  </motion.div>

                  {/* Value tag above bar */}
                  {showValues && (
                    <span
                      className={cn(
                        "absolute -top-7 text-[11px] font-extrabold transition-all duration-200",
                        isHovered
                          ? "opacity-100 scale-110 text-slate-900 dark:text-white"
                          : "opacity-80 text-slate-800 dark:text-slate-200"
                      )}
                    >
                      {item.value}
                    </span>
                  )}

                  {/* Bottom Label */}
                  <span className="mt-2 text-[11px] font-bold text-slate-800 dark:text-slate-200 truncate max-w-full">
                    {item.label}
                  </span>
                </div>
              );
            })}
          </div>
        )}

        {/* ── AREA / LINE CHART ─────────────────────────────────────── */}
        {(type === "area" || type === "line") && (
          <div className="w-full h-full relative">
            <svg
              viewBox={`0 0 ${svgWidth} ${svgHeight}`}
              className="w-full h-full overflow-visible"
            >
              <defs>
                <linearGradient id="lg-chart-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={cfg.stroke} stopOpacity="0.5" />
                  <stop offset="100%" stopColor={cfg.stroke} stopOpacity="0.0" />
                </linearGradient>
              </defs>

              {/* Area Gradient Fill */}
              {type === "area" && (
                <motion.path
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.6 }}
                  d={areaD}
                  fill="url(#lg-chart-grad)"
                />
              )}

              {/* Glowing Crystal Stroke Line */}
              <motion.path
                initial={{ pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 1, ease: "easeOut" }}
                d={pathD}
                fill="none"
                stroke={cfg.stroke}
                strokeWidth="4"
                strokeLinecap="round"
                style={{ filter: "drop-shadow(0 4px 10px rgba(0,0,0,0.3))" }}
              />

              {/* Data Nodes */}
              {points.map((pt, idx) => (
                <g key={idx}>
                  <circle
                    cx={pt.x}
                    cy={pt.y}
                    r={hoveredIdx === idx ? "8" : "5.5"}
                    fill="#ffffff"
                    stroke={cfg.stroke}
                    strokeWidth="3.5"
                    className="cursor-pointer transition-all duration-200"
                    onMouseEnter={() => setHoveredIdx(idx)}
                    onMouseLeave={() => setHoveredIdx(null)}
                  />
                </g>
              ))}
            </svg>

            {/* Labels Row */}
            <div className="flex justify-between items-center absolute bottom-0 left-0 right-0 pt-2 px-2">
              {data.map((item, idx) => (
                <span
                  key={idx}
                  className="text-[11px] font-bold text-slate-800 dark:text-slate-200"
                >
                  {item.label}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* ── Interactive Glass Tooltip ─────────────────────────────── */}
        <AnimatePresence>
          {showTooltip && hoveredIdx !== null && data[hoveredIdx] && (
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.9 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 6, scale: 0.9 }}
              transition={{ type: "spring", stiffness: 450, damping: 25 }}
              className={cn(
                "absolute top-4 right-4 z-30 px-4 py-2.5 rounded-2xl border backdrop-blur-2xl shadow-2xl flex flex-col gap-0.5 pointer-events-none",
                cfg.tooltipBg
              )}
            >
              <span className="text-[10px] font-black uppercase tracking-wider opacity-80">
                {data[hoveredIdx].label}
              </span>
              <span className="text-base font-black tracking-tight">
                {data[hoveredIdx].value.toLocaleString()} units
              </span>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

LiquidGlassChart.displayName = "LiquidGlassChart";
export default LiquidGlassChart;

```
--------------------------------------------------

### COMPONENT: liquid-glass-checkbox
Category: Liquid Glass
Description: A 3D liquid crystal checkbox component with top curved specular glare, bottom prism refraction, Framer Motion checkmark animations, indeterminate dash state, 6 color variants, 3 sizes, and label/description support.
URL: https://lightswind.com/components/liquid-glass-checkbox
Import: import LiquidGlassCheckbox from "@/components/lightswind/liquid-glass-checkbox"
Registry URL: https://lightswind.com/r/liquid-glass-checkbox.json
Install Command: npx lightswind@latest add liquid-glass-checkbox

Usage:
```tsx
import { useState } from "react";
import LiquidGlassCheckbox from "@/components/lightswind/liquid-glass-checkbox";

export function Demo() {
  const [checked, setChecked] = useState(true);

  return (
    <LiquidGlassCheckbox
      checked={checked}
      onCheckedChange={setChecked}
      variant="emerald"
      size="md"
      label="Accept Terms & Conditions"
      description="You agree to our Privacy Policy and Service Terms."
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useId } from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { Check, Minus } from "lucide-react";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassCheckboxVariant =
  | "glass"
  | "aurora"
  | "emerald"
  | "cyan"
  | "primary"
  | "dark";

export type LiquidGlassCheckboxSize = "sm" | "md" | "lg";

export interface LiquidGlassCheckboxProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
  /** Controlled checked state */
  checked?: boolean;
  /** Uncontrolled default checked state */
  defaultChecked?: boolean;
  /** Indeterminate state (renders dash icon) */
  indeterminate?: boolean;
  /** Callback fired when check state changes */
  onCheckedChange?: (checked: boolean) => void;
  /** Legacy onChange handler */
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  /** Visual color theme variant when checked */
  variant?: LiquidGlassCheckboxVariant;
  /** Sizing preset */
  size?: LiquidGlassCheckboxSize;
  /** Label text rendered next to checkbox */
  label?: React.ReactNode;
  /** Description text rendered below label */
  description?: React.ReactNode;
  /** Disabled state */
  disabled?: boolean;
  /** Outer container class */
  className?: string;
}

/* ─── Variant Config ─────────────────────────────────────────────── */
interface CheckboxVariantConfig {
  uncheckedBox: string;
  checkedBox: string;
  checkIconColor: string;
  glareGradient: string;
  labelColor: string;
}

const VARIANT_CONFIG: Record<LiquidGlassCheckboxVariant, CheckboxVariantConfig> = {
  glass: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
      "border border-white/85 dark:border-white/25",
      "shadow-[0_4px_12px_-2px_rgba(15,23,42,0.20),inset_0_2px_1px_rgba(255,255,255,0.95)]",
      "dark:shadow-[0_4px_12px_-2px_rgba(0,0,0,0.6),inset_0_1.5px_1px_rgba(255,255,255,0.3)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-white/90 via-white/70 to-white/50 dark:from-white/40 dark:via-white/25 dark:to-white/15",
      "border border-white/95 dark:border-white/40 text-slate-900 dark:text-white",
      "shadow-[0_6px_20px_-2px_rgba(15,23,42,0.30),inset_0_2px_1.5px_rgba(255,255,255,0.95)]"
    ),
    checkIconColor: "text-slate-900 dark:text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
  aurora: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-violet-300/40 via-fuchsia-400/25 to-violet-500/30 dark:from-violet-400/30 dark:via-fuchsia-500/18 dark:to-violet-600/25",
      "border border-violet-300/70 dark:border-violet-400/35",
      "shadow-[0_4px_12px_-2px_rgba(139,92,246,0.25),inset_0_2px_1px_rgba(240,220,255,0.90)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-violet-400 via-fuchsia-500 to-violet-700",
      "border border-white/70 text-white",
      "shadow-[0_6px_20px_-2px_rgba(139,92,246,0.60),inset_0_2px_1.5px_rgba(240,220,255,0.95)]"
    ),
    checkIconColor: "text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(255,245,255,0.90) 0%, rgba(240,220,255,0.40) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
  emerald: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-emerald-300/40 via-emerald-400/25 to-teal-500/30 dark:from-emerald-400/30 dark:via-emerald-500/18 dark:to-teal-600/25",
      "border border-emerald-300/70 dark:border-emerald-400/35",
      "shadow-[0_4px_12px_-2px_rgba(16,185,129,0.25),inset_0_2px_1px_rgba(220,255,235,0.90)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-emerald-400 via-emerald-600 to-teal-700",
      "border border-white/70 text-white",
      "shadow-[0_6px_20px_-2px_rgba(16,185,129,0.60),inset_0_2px_1.5px_rgba(220,255,235,0.95)]"
    ),
    checkIconColor: "text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(235,255,245,0.90) 0%, rgba(180,255,220,0.40) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
  cyan: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-sky-300/40 via-blue-400/25 to-indigo-400/30 dark:from-sky-400/30 dark:via-blue-500/18 dark:to-indigo-500/25",
      "border border-sky-300/70 dark:border-sky-400/35",
      "shadow-[0_4px_12px_-2px_rgba(14,165,233,0.25),inset_0_2px_1px_rgba(220,240,255,0.90)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-sky-400 via-blue-500 to-indigo-600",
      "border border-white/70 text-white",
      "shadow-[0_6px_20px_-2px_rgba(14,165,233,0.60),inset_0_2px_1.5px_rgba(220,240,255,0.95)]"
    ),
    checkIconColor: "text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(225,242,255,0.90) 0%, rgba(180,220,255,0.40) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
  primary: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-rose-300/40 via-red-400/25 to-rose-500/30 dark:from-rose-400/30 dark:via-red-500/18 dark:to-rose-600/25",
      "border border-rose-300/70 dark:border-rose-400/35",
      "shadow-[0_4px_12px_-2px_rgba(244,63,94,0.25),inset_0_2px_1px_rgba(255,220,220,0.90)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-rose-400 via-red-500 to-rose-700",
      "border border-white/70 text-white",
      "shadow-[0_6px_20px_-2px_rgba(244,63,94,0.60),inset_0_2px_1.5px_rgba(255,220,220,0.95)]"
    ),
    checkIconColor: "text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(255,238,240,0.90) 0%, rgba(255,200,200,0.40) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
  dark: {
    uncheckedBox: cn(
      "bg-gradient-to-b from-slate-700/60 via-slate-800/45 to-zinc-900/55 dark:from-slate-600/55 dark:via-slate-700/40 dark:to-slate-800/50",
      "border border-white/18 dark:border-white/15",
      "shadow-[0_4px_12px_-2px_rgba(0,0,0,0.45),inset_0_1.5px_1px_rgba(255,255,255,0.18)]"
    ),
    checkedBox: cn(
      "bg-gradient-to-b from-slate-700 via-slate-800 to-zinc-950",
      "border border-white/30 text-white",
      "shadow-[0_6px_20px_-2px_rgba(0,0,0,0.7),inset_0_2px_1.5px_rgba(255,255,255,0.25)]"
    ),
    checkIconColor: "text-white",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-900 dark:text-white",
  },
};

/* ─── Size Config ────────────────────────────────────────────────── */
const SIZE_CONFIG: Record<
  LiquidGlassCheckboxSize,
  { boxSize: string; iconSize: string; radius: string; labelText: string }
> = {
  sm: { boxSize: "w-4 h-4", iconSize: "w-3 h-3 stroke-[3]", radius: "rounded-md", labelText: "text-xs" },
  md: { boxSize: "w-5 h-5", iconSize: "w-3.5 h-3.5 stroke-[3]", radius: "rounded-lg", labelText: "text-sm" },
  lg: { boxSize: "w-6 h-6", iconSize: "w-4 h-4 stroke-[3]", radius: "rounded-xl", labelText: "text-base" },
};

/* ─── Component ─────────────────────────────────────────────────── */
export const LiquidGlassCheckbox = React.forwardRef<
  HTMLInputElement,
  LiquidGlassCheckboxProps
>(
  (
    {
      checked: controlledChecked,
      defaultChecked = false,
      indeterminate = false,
      onCheckedChange,
      onChange,
      variant = "glass",
      size = "md",
      label,
      description,
      disabled = false,
      className,
      id,
      ...props
    },
    ref
  ) => {
    const autoId = useId();
    const inputId = id ?? autoId;

    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
    const isChecked = controlledChecked !== undefined ? controlledChecked : uncontrolledChecked;

    const cfg = VARIANT_CONFIG[variant];
    const sz = SIZE_CONFIG[size];

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      if (disabled) return;
      const nextState = e.target.checked;

      if (controlledChecked === undefined) {
        setUncontrolledChecked(nextState);
      }
      onCheckedChange?.(nextState);
      onChange?.(e);
    };

    return (
      <label
        htmlFor={inputId}
        className={cn(
          "inline-flex items-start gap-2.5 cursor-pointer select-none group transition-opacity",
          disabled && "opacity-50 cursor-not-allowed pointer-events-none",
          className
        )}
      >
        {/* Hidden Native Checkbox for form compatibility */}
        <input
          ref={ref}
          id={inputId}
          type="checkbox"
          checked={isChecked}
          disabled={disabled}
          onChange={handleInputChange}
          className="sr-only"
          {...props}
        />

        {/* 3D Liquid Glass Checkbox Capsule */}
        <motion.div
          whileHover={{ scale: disabled ? 1 : 1.1 }}
          whileTap={{ scale: disabled ? 1 : 0.92 }}
          transition={{ type: "spring", stiffness: 450, damping: 25 }}
          className={cn(
            "relative shrink-0 flex items-center justify-center overflow-hidden transition-all duration-200 backdrop-blur-md saturate-[200%] mt-0.5",
            sz.boxSize,
            sz.radius,
            isChecked || indeterminate ? cfg.checkedBox : cfg.uncheckedBox
          )}
        >
          {/* Top Specular Glare */}
          <span
            className="absolute top-0 left-0 right-0 h-[48%] pointer-events-none rounded-t-[inherit]"
            style={{ background: cfg.glareGradient }}
          />

          {/* Bottom Prism Refraction */}
          <span
            className="absolute bottom-0 left-0 right-0 h-[22%] pointer-events-none rounded-b-[inherit]"
            style={{
              background:
                "linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%)",
            }}
          />

          {/* Checkmark or Indeterminate Icon with Spring Scale */}
          <AnimatePresence>
            {(isChecked || indeterminate) && (
              <motion.span
                key={indeterminate ? "indeterminate" : "checked"}
                initial={{ scale: 0, opacity: 0, rotate: -20 }}
                animate={{ scale: 1, opacity: 1, rotate: 0 }}
                exit={{ scale: 0, opacity: 0, rotate: 20 }}
                transition={{ type: "spring", stiffness: 500, damping: 25 }}
                className={cn("relative z-10", cfg.checkIconColor)}
              >
                {indeterminate ? (
                  <Minus className={sz.iconSize} />
                ) : (
                  <Check className={sz.iconSize} />
                )}
              </motion.span>
            )}
          </AnimatePresence>
        </motion.div>

        {/* Label & Optional Description */}
        {(label || description) && (
          <div className="flex flex-col gap-0.5">
            {label && (
              <span
                className={cn(
                  "font-medium leading-snug transition-colors",
                  sz.labelText,
                  cfg.labelColor
                )}
              >
                {label}
              </span>
            )}
            {description && (
              <span className="text-xs text-slate-500 dark:text-slate-400 font-normal leading-relaxed">
                {description}
              </span>
            )}
          </div>
        )}
      </label>
    );
  }
);

LiquidGlassCheckbox.displayName = "LiquidGlassCheckbox";
export default LiquidGlassCheckbox;

```
--------------------------------------------------

### COMPONENT: liquid-glass-collapsible
Category: Liquid Glass
Description: A 3D glassmorphic expandable panel component featuring modular subcomponents (Trigger, Content), smooth Framer Motion spring height expansion, specular glare overlay, and 7 color crystal variants.
URL: https://lightswind.com/components/liquid-glass-collapsible
Import: import LiquidGlassCollapsible, { LiquidGlassCollapsibleTrigger, LiquidGlassCollapsibleContent } from "@/components/lightswind/liquid-glass-collapsible"
Registry URL: https://lightswind.com/r/liquid-glass-collapsible.json
Install Command: npx lightswind@latest add liquid-glass-collapsible

Usage:
```tsx
import LiquidGlassCollapsible, {
  LiquidGlassCollapsibleTrigger,
  LiquidGlassCollapsibleContent,
} from "@/components/lightswind/liquid-glass-collapsible";

export function Demo() {
  return (
    <LiquidGlassCollapsible variant="aurora" defaultOpen>
      <LiquidGlassCollapsibleTrigger>
        <span>Workspace Configuration</span>
      </LiquidGlassCollapsibleTrigger>
      <LiquidGlassCollapsibleContent>
        <p>Configure your liquid glass runtime settings and node parameters.</p>
      </LiquidGlassCollapsibleContent>
    </LiquidGlassCollapsible>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown } from "lucide-react";

export type LiquidGlassCollapsibleVariant =
  | "glass"
  | "aurora"
  | "emerald"
  | "cyan"
  | "purple"
  | "primary"
  | "dark";

export interface LiquidGlassCollapsibleProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  variant?: LiquidGlassCollapsibleVariant;
  disabled?: boolean;
  className?: string;
  children: React.ReactNode;
}

/* ─── Variant Theme Configurations ───────────────────────────────── */
interface VariantConfig {
  container: string;
  divider: string;
  contentBg: string;
  contentText: string;
  prismColor: string;
  /** Top glare gradient — white for glass, tinted for colored variants */
  glareGradient: string;
  /** Height class for the top glare overlay */
  glareHeight: string;
}

const VARIANT_CONFIG: Record<LiquidGlassCollapsibleVariant, VariantConfig> = {
  glass: {
    container:
      "bg-gradient-to-b from-white/65 via-white/35 to-white/15 dark:from-white/24 dark:via-white/12 dark:to-white/6 border border-white/90 dark:border-white/28 text-slate-900 dark:text-white shadow-[0_20px_50px_-8px_rgba(15,23,42,0.22),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85)] dark:shadow-[0_20px_50px_-8px_rgba(0,0,0,0.8),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.3),0_0_0_1px_rgba(255,255,255,0.18)]",
    divider: "from-transparent via-white/70 dark:via-white/25 to-transparent",
    contentBg:
      "bg-gradient-to-b from-white/30 via-white/20 to-white/10 dark:from-white/12 dark:via-white/6 dark:to-white/3",
    contentText: "text-slate-800 dark:text-slate-100",
    prismColor: "rgba(255,255,255,0.45)",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.50) 40%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[55%]",
  },
  aurora: {
    container:
      "bg-gradient-to-b from-violet-300/70 via-fuchsia-400/62 to-violet-600/68 border border-white/70 dark:border-white/30 text-white shadow-[0_20px_50px_-8px_rgba(139,92,246,0.40),inset_0_2.5px_1.5px_rgba(240,220,255,0.90),0_0_0_1px_rgba(255,255,255,0.65)]",
    divider: "from-transparent via-white/50 to-transparent",
    contentBg:
      "bg-gradient-to-b from-violet-400/20 via-fuchsia-500/15 to-violet-600/20",
    contentText: "text-white",
    prismColor: "rgba(200,180,255,0.30)",
    glareGradient:
      "linear-gradient(180deg, rgba(255,245,255,0.85) 0%, rgba(240,220,255,0.40) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
  emerald: {
    container:
      "bg-gradient-to-b from-emerald-300/70 via-emerald-500/62 to-teal-600/68 border border-white/70 dark:border-white/30 text-white shadow-[0_20px_50px_-8px_rgba(16,185,129,0.40),inset_0_2.5px_1.5px_rgba(220,255,235,0.90),0_0_0_1px_rgba(255,255,255,0.65)]",
    divider: "from-transparent via-white/50 to-transparent",
    contentBg:
      "bg-gradient-to-b from-emerald-400/20 via-emerald-500/15 to-teal-600/20",
    contentText: "text-white",
    prismColor: "rgba(180,255,220,0.30)",
    glareGradient:
      "linear-gradient(180deg, rgba(235,255,245,0.85) 0%, rgba(180,255,220,0.40) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
  cyan: {
    container:
      "bg-gradient-to-b from-sky-300/70 via-blue-400/62 to-indigo-500/68 border border-white/70 dark:border-white/30 text-white shadow-[0_20px_50px_-8px_rgba(14,165,233,0.40),inset_0_2.5px_1.5px_rgba(220,240,255,0.90),0_0_0_1px_rgba(255,255,255,0.65)]",
    divider: "from-transparent via-white/50 to-transparent",
    contentBg:
      "bg-gradient-to-b from-sky-400/20 via-blue-500/15 to-indigo-500/20",
    contentText: "text-white",
    prismColor: "rgba(180,220,255,0.30)",
    glareGradient:
      "linear-gradient(180deg, rgba(225,242,255,0.85) 0%, rgba(180,220,255,0.40) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
  purple: {
    container:
      "bg-gradient-to-b from-purple-300/70 via-fuchsia-400/62 to-purple-700/68 border border-white/70 dark:border-white/30 text-white shadow-[0_20px_50px_-8px_rgba(168,85,247,0.40),inset_0_2.5px_1.5px_rgba(240,220,255,0.90),0_0_0_1px_rgba(255,255,255,0.65)]",
    divider: "from-transparent via-white/50 to-transparent",
    contentBg:
      "bg-gradient-to-b from-purple-400/20 via-fuchsia-500/15 to-purple-700/20",
    contentText: "text-white",
    prismColor: "rgba(210,180,255,0.30)",
    glareGradient:
      "linear-gradient(180deg, rgba(245,235,255,0.85) 0%, rgba(210,180,255,0.40) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
  primary: {
    container:
      "bg-gradient-to-b from-rose-300/70 via-red-400/62 to-rose-600/68 border border-white/70 dark:border-white/30 text-white shadow-[0_20px_50px_-8px_rgba(244,63,94,0.40),inset_0_2.5px_1.5px_rgba(255,220,220,0.90),0_0_0_1px_rgba(255,255,255,0.65)]",
    divider: "from-transparent via-white/50 to-transparent",
    contentBg:
      "bg-gradient-to-b from-rose-400/20 via-red-500/15 to-rose-600/20",
    contentText: "text-white",
    prismColor: "rgba(255,200,200,0.30)",
    glareGradient:
      "linear-gradient(180deg, rgba(255,238,240,0.85) 0%, rgba(255,200,200,0.40) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
  dark: {
    container:
      "bg-gradient-to-b from-slate-700/75 via-slate-800/68 to-zinc-900/75 border border-white/25 dark:border-white/20 text-white shadow-[0_20px_50px_-8px_rgba(0,0,0,0.55),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.20),0_0_0_1px_rgba(255,255,255,0.15)]",
    divider: "from-transparent via-white/20 to-transparent",
    contentBg:
      "bg-gradient-to-b from-slate-800/40 via-zinc-900/35 to-slate-900/40",
    contentText: "text-slate-200",
    prismColor: "rgba(255,255,255,0.12)",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 100%)",
    glareHeight: "h-[42%]",
  },
};

/* ─── Context ────────────────────────────────────────────────────── */
interface CollapsibleContextType {
  isOpen: boolean;
  toggle: () => void;
  variant: LiquidGlassCollapsibleVariant;
  disabled?: boolean;
}

const CollapsibleContext = React.createContext<CollapsibleContextType>({
  isOpen: false,
  toggle: () => {},
  variant: "glass",
});

/* ─── Main Collapsible Wrapper ───────────────────────────────────── */
export const LiquidGlassCollapsible: React.FC<LiquidGlassCollapsibleProps> = ({
  open,
  defaultOpen = false,
  onOpenChange,
  variant = "glass",
  disabled = false,
  className,
  children,
}) => {
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;

  const toggle = () => {
    if (disabled) return;
    const nextState = !isOpen;
    if (!isControlled) setInternalOpen(nextState);
    onOpenChange?.(nextState);
  };

  const cfg = VARIANT_CONFIG[variant];

  return (
    <CollapsibleContext.Provider value={{ isOpen, toggle, variant, disabled }}>
      <div
        className={cn(
          "relative w-full rounded-3xl overflow-hidden backdrop-blur-xl saturate-[180%] transition-all duration-300",
          cfg.container,
          className
        )}
      >
        {children}
      </div>
    </CollapsibleContext.Provider>
  );
};

/* ─── Collapsible Trigger ────────────────────────────────────────── */
export interface LiquidGlassCollapsibleTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

export const LiquidGlassCollapsibleTrigger = React.forwardRef<
  HTMLButtonElement,
  LiquidGlassCollapsibleTriggerProps
>(({ className, children, ...props }, ref) => {
  const { isOpen, toggle, disabled, variant } = React.useContext(CollapsibleContext);

  const cfg = VARIANT_CONFIG[variant];

  return (
    <button
      ref={ref}
      type="button"
      onClick={toggle}
      disabled={disabled}
      className={cn(
        "relative z-10 w-full min-h-[44px] px-5 py-3 flex items-center justify-between gap-3 font-bold text-sm text-left cursor-pointer select-none transition-all duration-200 active:scale-[0.985] overflow-hidden",
        disabled && "opacity-50 cursor-not-allowed",
        className
      )}
      {...props}
    >
      {/* ── Top Glare confined to trigger only ── */}
      <span
        className={cn(
          "absolute top-[1px] left-1.5 right-1.5 pointer-events-none rounded-[20px_20px_48%_48%/20px_20px_28px_28px]",
          cfg.glareHeight
        )}
        style={{ background: cfg.glareGradient }}
      />

      {/* ── Bottom prism confined to trigger only ── */}
      <span
        className="absolute bottom-0 left-0 right-0 h-[22%] pointer-events-none"
        style={{
          background:
            "linear-gradient(0deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%)",
        }}
      />

      <div className="flex items-center gap-3 flex-1 min-w-0 relative z-10">{children}</div>

      <motion.div
        animate={{ rotate: isOpen ? 180 : 0 }}
        transition={{ type: "spring", stiffness: 420, damping: 28 }}
        className="flex-shrink-0 relative z-10"
      >
        <ChevronDown className="w-5 h-5 opacity-90 stroke-[2.5]" />
      </motion.div>
    </button>
  );
});

LiquidGlassCollapsibleTrigger.displayName = "LiquidGlassCollapsibleTrigger";

/* ─── Collapsible Content ────────────────────────────────────────── */
export interface LiquidGlassCollapsibleContentProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> {
  children: React.ReactNode;
}

export const LiquidGlassCollapsibleContent = React.forwardRef<
  HTMLDivElement,
  LiquidGlassCollapsibleContentProps
>(({ className, children, ...props }, ref) => {
  const { isOpen, variant } = React.useContext(CollapsibleContext);
  const cfg = VARIANT_CONFIG[variant];

  return (
    <AnimatePresence initial={false}>
      {isOpen && (
        <motion.div
          ref={ref}
          initial={{ height: 0, opacity: 0, scaleY: 0.96 }}
          animate={{ height: "auto", opacity: 1, scaleY: 1 }}
          exit={{ height: 0, opacity: 0, scaleY: 0.96 }}
          transition={{ type: "spring", stiffness: 380, damping: 32 }}
          style={{ transformOrigin: "top" }}
          className="overflow-hidden relative z-10"
          {...props}
        >
          {/* Crystal divider line */}
          <div
            className={cn(
              "mx-5 h-px bg-gradient-to-r opacity-60",
              cfg.divider
            )}
          />

          {/* Content panel — liquid glass inner layer */}
          <div className="relative mx-3 mb-3 mt-2 rounded-2xl overflow-hidden">
            {/* Inner top glare for depth */}
            <span
              className="absolute top-0 left-1 right-1 h-[40%] pointer-events-none z-10 rounded-t-[inherit]"
              style={{
                background:
                  "linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%)",
              }}
            />

            {/* Content body */}
            <div
              className={cn(
                "relative z-[5] px-5 py-4 text-sm leading-relaxed font-medium backdrop-blur-md",
                cfg.contentBg,
                cfg.contentText,
                className
              )}
            >
              {children}
            </div>

            {/* Inner bottom prism refraction */}
            <span
              className="absolute bottom-0 left-0 right-0 h-[18%] pointer-events-none z-10 rounded-b-[inherit]"
              style={{
                background: `linear-gradient(0deg, ${cfg.prismColor} 0%, rgba(255,255,255,0) 100%)`,
              }}
            />
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
});

LiquidGlassCollapsibleContent.displayName = "LiquidGlassCollapsibleContent";

export default LiquidGlassCollapsible;

```
--------------------------------------------------

### COMPONENT: liquid-glass-dialog
Category: Liquid Glass
Description: A realistic 3D liquid glass modal dialog component featuring multi-stage crystal glass panel depth, top curved gloss glare, bottom prism refraction, backdrop blur, modular sub-components (Header, Title, Description, Body, Footer), 5 size options, and smooth Framer Motion spring physics.
URL: https://lightswind.com/components/liquid-glass-dialog
Import: import LiquidGlassDialog, { LiquidGlassDialogHeader, LiquidGlassDialogTitle, LiquidGlassDialogDescription, LiquidGlassDialogBody, LiquidGlassDialogFooter } from "@/components/lightswind/liquid-glass-dialog"
Registry URL: https://lightswind.com/r/liquid-glass-dialog.json
Install Command: npx lightswind@latest add liquid-glass-dialog

Usage:
```tsx
import { useState } from "react";
import LiquidGlassDialog, { LiquidGlassDialogFooter } from "@/components/lightswind/liquid-glass-dialog";
import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";

export function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <LiquidGlassButton variant="aurora" onClick={() => setOpen(true)}>
        Open Dialog
      </LiquidGlassButton>

      <LiquidGlassDialog
        open={open}
        onOpenChange={setOpen}
        title="Liquid Glass Dialog"
        description="A beautiful 3D translucent crystal modal dialog with ambient glass refraction."
        size="md"
      >
        <p className="text-sm">Dialog body content goes here...</p>
        <LiquidGlassDialogFooter>
          <LiquidGlassButton variant="glass" size="sm" onClick={() => setOpen(false)}>
            Cancel
          </LiquidGlassButton>
          <LiquidGlassButton variant="aurora" size="sm" onClick={() => setOpen(false)}>
            Save
          </LiquidGlassButton>
        </LiquidGlassDialogFooter>
      </LiquidGlassDialog>
    </>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useCallback, useId } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { X } from "lucide-react";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassDialogSize = "sm" | "md" | "lg" | "xl" | "full";

export interface LiquidGlassDialogProps {
  /** Controlled open state */
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Dialog title */
  title?: string;
  /** Optional subtitle below the title */
  description?: string;
  /** Dialog size */
  size?: LiquidGlassDialogSize;
  /** Show close button (default: true) */
  showClose?: boolean;
  /** Close when clicking the backdrop (default: true) */
  closeOnBackdrop?: boolean;
  /** Extra classes for the panel */
  className?: string;
  children?: React.ReactNode;
}

/* ─── Size Map ──────────────────────────────────────────────────── */
const SIZE_MAP: Record<LiquidGlassDialogSize, string> = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-lg",
  xl: "max-w-xl",
  full: "max-w-3xl",
};

/* ─── Sub-components ─────────────────────────────────────────────── */

export interface LiquidGlassDialogHeaderProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}
export const LiquidGlassDialogHeader: React.FC<LiquidGlassDialogHeaderProps> = ({
  className,
  children,
  ...props
}) => (
  <div
    className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
    {...props}
  >
    {children}
  </div>
);
LiquidGlassDialogHeader.displayName = "LiquidGlassDialogHeader";

export interface LiquidGlassDialogTitleProps
  extends React.HTMLAttributes<HTMLHeadingElement> {
  children: React.ReactNode;
}
export const LiquidGlassDialogTitle: React.FC<LiquidGlassDialogTitleProps> = ({
  className,
  children,
  ...props
}) => (
  <h2
    className={cn(
      "text-lg font-bold tracking-tight text-slate-900 dark:text-white leading-snug",
      className
    )}
    {...props}
  >
    {children}
  </h2>
);
LiquidGlassDialogTitle.displayName = "LiquidGlassDialogTitle";

export interface LiquidGlassDialogDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
}
export const LiquidGlassDialogDescription: React.FC<LiquidGlassDialogDescriptionProps> = ({
  className,
  children,
  ...props
}) => (
  <p
    className={cn(
      "text-sm leading-relaxed text-slate-600 dark:text-slate-300 font-medium",
      className
    )}
    {...props}
  >
    {children}
  </p>
);
LiquidGlassDialogDescription.displayName = "LiquidGlassDialogDescription";

export interface LiquidGlassDialogBodyProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}
export const LiquidGlassDialogBody: React.FC<LiquidGlassDialogBodyProps> = ({
  className,
  children,
  ...props
}) => (
  <div className={cn("text-sm text-slate-700 dark:text-slate-200", className)} {...props}>
    {children}
  </div>
);
LiquidGlassDialogBody.displayName = "LiquidGlassDialogBody";

export interface LiquidGlassDialogFooterProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}
export const LiquidGlassDialogFooter: React.FC<LiquidGlassDialogFooterProps> = ({
  className,
  children,
  ...props
}) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end gap-2.5 pt-2",
      className
    )}
    {...props}
  >
    {children}
  </div>
);
LiquidGlassDialogFooter.displayName = "LiquidGlassDialogFooter";

/* ─── Main Dialog ────────────────────────────────────────────────── */
export const LiquidGlassDialog: React.FC<LiquidGlassDialogProps> = ({
  open,
  onOpenChange,
  title,
  description,
  size = "md",
  showClose = true,
  closeOnBackdrop = true,
  className,
  children,
}) => {
  const titleId = useId();
  const descId = useId();

  // Escape key closes dialog
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") onOpenChange(false);
    },
    [onOpenChange]
  );

  useEffect(() => {
    if (open) {
      document.addEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "hidden";
    }
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "";
    };
  }, [open, handleKeyDown]);

  if (typeof window === "undefined") return null;

  return createPortal(
    <AnimatePresence>
      {open && (
        <>
          {/* ── Frosted Backdrop ─────────────────────────────── */}
          <motion.div
            key="lg-dialog-backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={closeOnBackdrop ? () => onOpenChange(false) : undefined}
            className="fixed inset-0 z-[99998] backdrop-blur-md"
            style={{
              background:
                "linear-gradient(135deg, rgba(15,23,42,0.65) 0%, rgba(30,0,60,0.55) 100%)",
            }}
            aria-hidden="true"
          />

          {/* ── Dialog Panel ─────────────────────────────────── */}
          <motion.div
            key="lg-dialog-panel"
            role="dialog"
            aria-modal="true"
            aria-labelledby={title ? titleId : undefined}
            aria-describedby={description ? descId : undefined}
            initial={{ opacity: 0, scale: 0.88, y: 28 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 16 }}
            transition={{ type: "spring", stiffness: 380, damping: 28 }}
            onClick={(e) => e.stopPropagation()}
            className="fixed z-[99999] inset-0 flex items-center justify-center p-4 pointer-events-none"
          >
            <div
              className={cn(
                // ── Liquid glass crystal panel — same recipe as LiquidGlassAlertDialog
                "relative w-full overflow-hidden rounded-3xl pointer-events-auto",
                "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
                "backdrop-blur-2xl saturate-[220%]",
                "border border-white/85 dark:border-white/25",
                "shadow-[0_32px_64px_-12px_rgba(15,23,42,0.45),0_16px_32px_-8px_rgba(15,23,42,0.3),inset_0_3px_2px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-6px_12px_0px_rgba(0,0,0,0.18)]",
                "dark:shadow-[0_32px_70px_-12px_rgba(0,0,0,0.85),0_16px_36px_-8px_rgba(0,0,0,0.65),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.35),0_0_0_1px_rgba(255,255,255,0.18),inset_0_-6px_12px_0px_rgba(0,0,0,0.6)]",
                SIZE_MAP[size],
                className
              )}
            >
              {/* Top gloss glare — same as LiquidGlassAlertDialog */}
              <span
                className="absolute top-0 left-0 right-0 h-[38%] pointer-events-none rounded-t-[inherit]"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0) 100%)",
                }}
              />

              {/* Bottom prism refraction */}
              <span
                className="absolute bottom-0 left-0 right-0 h-[15%] pointer-events-none rounded-b-[inherit]"
                style={{
                  background:
                    "linear-gradient(0deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%)",
                }}
              />

              {/* ── Close Button ───────────────────────────────── */}
              {showClose && (
                <motion.button
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  onClick={() => onOpenChange(false)}
                  type="button"
                  aria-label="Close dialog"
                  className={cn(
                    "absolute top-4 right-4 z-20 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 cursor-pointer",
                    "bg-slate-900/10 dark:bg-black/40 hover:bg-slate-900/20 dark:hover:bg-black/60",
                    "border border-slate-900/15 dark:border-white/30",
                    "shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.8)] dark:shadow-[inset_0_1.5px_1px_rgba(255,255,255,0.3)]",
                    "text-slate-800 dark:text-white"
                  )}
                >
                  <X className="w-4 h-4 stroke-[2.5]" />
                </motion.button>
              )}

              {/* ── Content ────────────────────────────────────── */}
              <div className="relative z-10 flex flex-col gap-4 px-7 pt-8 pb-7">
                {/* Header (title + description) */}
                {(title || description) && (
                  <div className="flex flex-col gap-1.5 pr-8">
                    {title && (
                      <h2
                        id={titleId}
                        className="text-lg font-bold tracking-tight leading-snug text-slate-900 dark:text-white"
                      >
                        {title}
                      </h2>
                    )}
                    {description && (
                      <p
                        id={descId}
                        className="text-sm leading-relaxed text-slate-600 dark:text-slate-300 font-medium"
                      >
                        {description}
                      </p>
                    )}
                  </div>
                )}

                {/* Slot content */}
                {children}
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>,
    document.body
  );
};

LiquidGlassDialog.displayName = "LiquidGlassDialog";
export default LiquidGlassDialog;

```
--------------------------------------------------

### COMPONENT: liquid-glass-input
Category: Liquid Glass
Description: A 3D liquid crystal text input component with top curved glare highlights, bottom prism refraction, 6 color variants (glass, aurora, emerald, cyan, primary, dark), 3 sizes, left/right icon support, validation status indicators, and password visibility toggle.
URL: https://lightswind.com/components/liquid-glass-input
Import: import LiquidGlassInputField from "@/components/lightswind/liquid-glass-input"
Registry URL: https://lightswind.com/r/liquid-glass-input.json
Install Command: npx lightswind@latest add liquid-glass-input

Usage:
```tsx
import { useState } from "react";
import LiquidGlassInputField from "@/components/lightswind/liquid-glass-input";
import { Mail, Lock } from "lucide-react";

export function Demo() {
  const [email, setEmail] = useState("");

  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <LiquidGlassInputField
        label="Email Address"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="alex@company.com"
        leftIcon={<Mail className="w-4 h-4" />}
        variant="aurora"
        size="md"
      />
      <LiquidGlassInputField
        label="Password"
        type="password"
        placeholder="Enter password"
        leftIcon={<Lock className="w-4 h-4" />}
        variant="emerald"
        size="md"
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useId } from "react";
import { cn } from "@/components/lib/utils";
import { Eye, EyeOff, AlertCircle, CheckCircle2 } from "lucide-react";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassInputVariant =
  | "glass"
  | "aurora"
  | "emerald"
  | "cyan"
  | "primary"
  | "dark";

export type LiquidGlassInputSize = "sm" | "md" | "lg";
export type LiquidGlassInputStatus = "default" | "success" | "error";

export interface LiquidGlassInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  /** Visual variant */
  variant?: LiquidGlassInputVariant;
  /** Input height */
  size?: LiquidGlassInputSize;
  /** Validation state */
  status?: LiquidGlassInputStatus;
  /** Label above the input */
  label?: string;
  /** Helper / error text below */
  hint?: string;
  /** Icon on the left side */
  leftIcon?: React.ReactNode;
  /** Icon on the right side (overridden by password toggle / status icons) */
  rightIcon?: React.ReactNode;
  /** Extra classes for the outer wrapper */
  wrapperClassName?: string;
}

/* ─── Variant Config ─────────────────────────────────────────────── */
interface InputVariantConfig {
  wrapper: string;
  focusRing: string;
  glareGradient: string;
  labelColor: string;
  textColor: string;
  placeholderClass: string;
}

const VARIANT_CONFIG: Record<LiquidGlassInputVariant, InputVariantConfig> = {
  glass: {
    wrapper: cn(
      "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
      "border border-white/85 dark:border-white/25",
      "shadow-[0_10px_28px_-4px_rgba(15,23,42,0.20),inset_0_2.5px_1.5px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.80)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(0,0,0,0.65),inset_0_2px_1.5px_rgba(255,255,255,0.30),0_0_0_1px_rgba(255,255,255,0.15)]"
    ),
    focusRing: "ring-2 ring-white/70 dark:ring-white/30",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.40) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-700 dark:text-slate-300",
    textColor: "text-slate-900 dark:text-white",
    placeholderClass: "placeholder-slate-400 dark:placeholder-slate-500",
  },
  aurora: {
    wrapper: cn(
      "bg-gradient-to-b from-violet-300/40 via-fuchsia-400/25 to-violet-500/30 dark:from-violet-400/30 dark:via-fuchsia-500/18 dark:to-violet-600/25",
      "border border-violet-300/70 dark:border-violet-400/35",
      "shadow-[0_10px_28px_-4px_rgba(139,92,246,0.25),inset_0_2.5px_1.5px_rgba(240,220,255,0.90),0_0_0_1px_rgba(200,180,255,0.70)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(139,92,246,0.40),inset_0_2px_1.5px_rgba(240,220,255,0.35),0_0_0_1px_rgba(200,180,255,0.25)]"
    ),
    focusRing: "ring-2 ring-violet-400/60",
    glareGradient:
      "linear-gradient(180deg, rgba(255,245,255,0.88) 0%, rgba(240,220,255,0.38) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-violet-700 dark:text-violet-300",
    textColor: "text-violet-900 dark:text-violet-100",
    placeholderClass: "placeholder-violet-400/70 dark:placeholder-violet-400/50",
  },
  emerald: {
    wrapper: cn(
      "bg-gradient-to-b from-emerald-300/40 via-emerald-400/25 to-teal-500/30 dark:from-emerald-400/30 dark:via-emerald-500/18 dark:to-teal-600/25",
      "border border-emerald-300/70 dark:border-emerald-400/35",
      "shadow-[0_10px_28px_-4px_rgba(16,185,129,0.25),inset_0_2.5px_1.5px_rgba(220,255,235,0.90),0_0_0_1px_rgba(160,255,200,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(16,185,129,0.40),inset_0_2px_1.5px_rgba(220,255,235,0.35),0_0_0_1px_rgba(160,255,200,0.25)]"
    ),
    focusRing: "ring-2 ring-emerald-400/60",
    glareGradient:
      "linear-gradient(180deg, rgba(235,255,245,0.88) 0%, rgba(180,255,220,0.38) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-emerald-700 dark:text-emerald-300",
    textColor: "text-emerald-900 dark:text-emerald-100",
    placeholderClass: "placeholder-emerald-400/70 dark:placeholder-emerald-400/50",
  },
  cyan: {
    wrapper: cn(
      "bg-gradient-to-b from-sky-300/40 via-blue-400/25 to-indigo-400/30 dark:from-sky-400/30 dark:via-blue-500/18 dark:to-indigo-500/25",
      "border border-sky-300/70 dark:border-sky-400/35",
      "shadow-[0_10px_28px_-4px_rgba(14,165,233,0.25),inset_0_2.5px_1.5px_rgba(220,240,255,0.90),0_0_0_1px_rgba(180,220,255,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(14,165,233,0.40),inset_0_2px_1.5px_rgba(220,240,255,0.35),0_0_0_1px_rgba(180,220,255,0.25)]"
    ),
    focusRing: "ring-2 ring-sky-400/60",
    glareGradient:
      "linear-gradient(180deg, rgba(225,242,255,0.88) 0%, rgba(180,220,255,0.38) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-sky-700 dark:text-sky-300",
    textColor: "text-sky-900 dark:text-sky-100",
    placeholderClass: "placeholder-sky-400/70 dark:placeholder-sky-400/50",
  },
  primary: {
    wrapper: cn(
      "bg-gradient-to-b from-rose-300/40 via-red-400/25 to-rose-500/30 dark:from-rose-400/30 dark:via-red-500/18 dark:to-rose-600/25",
      "border border-rose-300/70 dark:border-rose-400/35",
      "shadow-[0_10px_28px_-4px_rgba(244,63,94,0.25),inset_0_2.5px_1.5px_rgba(255,220,220,0.90),0_0_0_1px_rgba(255,180,180,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(244,63,94,0.40),inset_0_2px_1.5px_rgba(255,220,220,0.35),0_0_0_1px_rgba(255,180,180,0.25)]"
    ),
    focusRing: "ring-2 ring-rose-400/60",
    glareGradient:
      "linear-gradient(180deg, rgba(255,238,240,0.88) 0%, rgba(255,200,200,0.38) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-rose-700 dark:text-rose-300",
    textColor: "text-rose-900 dark:text-rose-100",
    placeholderClass: "placeholder-rose-400/70 dark:placeholder-rose-400/50",
  },
  dark: {
    wrapper: cn(
      "bg-gradient-to-b from-slate-700/60 via-slate-800/45 to-zinc-900/55 dark:from-slate-600/55 dark:via-slate-700/40 dark:to-slate-800/50",
      "border border-white/18 dark:border-white/15",
      "shadow-[0_10px_28px_-4px_rgba(0,0,0,0.45),inset_0_2.5px_1.5px_rgba(255,255,255,0.18),0_0_0_1px_rgba(255,255,255,0.12)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(0,0,0,0.65),inset_0_2px_1.5px_rgba(255,255,255,0.15),0_0_0_1px_rgba(255,255,255,0.10)]"
    ),
    focusRing: "ring-2 ring-white/25",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 100%)",
    labelColor: "text-slate-300",
    textColor: "text-white",
    placeholderClass: "placeholder-slate-400",
  },
};

/* ─── Status Config ──────────────────────────────────────────────── */
const STATUS_RING: Record<LiquidGlassInputStatus, string> = {
  default: "",
  success: "ring-2 ring-emerald-400/60",
  error: "ring-2 ring-rose-400/65",
};
const STATUS_HINT: Record<LiquidGlassInputStatus, string> = {
  default: "text-slate-500 dark:text-slate-400",
  success: "text-emerald-600 dark:text-emerald-400",
  error: "text-rose-600 dark:text-rose-400",
};

/* ─── Size Config ────────────────────────────────────────────────── */
const SIZE_CONFIG: Record<
  LiquidGlassInputSize,
  { height: string; px: string; text: string; iconSize: string; radius: string }
> = {
  sm: { height: "h-9", px: "px-3.5", text: "text-xs", iconSize: "w-3.5 h-3.5", radius: "rounded-xl" },
  md: { height: "h-11", px: "px-4", text: "text-sm", iconSize: "w-4 h-4", radius: "rounded-2xl" },
  lg: { height: "h-13", px: "px-5", text: "text-base", iconSize: "w-5 h-5", radius: "rounded-2xl" },
};

/* ─── Component ─────────────────────────────────────────────────── */
export const LiquidGlassInputField = React.forwardRef<
  HTMLInputElement,
  LiquidGlassInputProps
>(
  (
    {
      variant = "glass",
      size = "md",
      status = "default",
      label,
      hint,
      leftIcon,
      rightIcon,
      type = "text",
      className,
      wrapperClassName,
      id,
      disabled,
      ...props
    },
    ref
  ) => {
    const autoId = useId();
    const inputId = id ?? autoId;
    const [showPassword, setShowPassword] = useState(false);

    const isPassword = type === "password";
    const resolvedType = isPassword ? (showPassword ? "text" : "password") : type;

    const cfg = VARIANT_CONFIG[variant];
    const sz = SIZE_CONFIG[size];

    // Status icon shown right side (overrides rightIcon if set)
    const statusIcon =
      status === "success" ? (
        <CheckCircle2 className={cn("shrink-0 text-emerald-500", sz.iconSize)} />
      ) : status === "error" ? (
        <AlertCircle className={cn("shrink-0 text-rose-500", sz.iconSize)} />
      ) : null;

    const rightSlot = isPassword ? (
      <button
        type="button"
        tabIndex={-1}
        onClick={() => setShowPassword((v) => !v)}
        className={cn("shrink-0 transition-opacity hover:opacity-80 cursor-pointer", cfg.textColor)}
        aria-label={showPassword ? "Hide password" : "Show password"}
      >
        {showPassword ? (
          <EyeOff className={sz.iconSize} />
        ) : (
          <Eye className={sz.iconSize} />
        )}
      </button>
    ) : statusIcon ? (
      statusIcon
    ) : rightIcon ? (
      <span className={cn("shrink-0", cfg.textColor)}>{rightIcon}</span>
    ) : null;

    return (
      <div className={cn("flex flex-col gap-1.5 w-full", wrapperClassName)}>
        {/* Label */}
        {label && (
          <label
            htmlFor={inputId}
            className={cn(
              "text-xs font-semibold uppercase tracking-wider select-none",
              cfg.labelColor
            )}
          >
            {label}
          </label>
        )}

        {/* Input wrapper */}
        <div
          className={cn(
            "relative flex items-center gap-2 overflow-hidden transition-all duration-200 backdrop-blur-xl saturate-[200%]",
            sz.height,
            sz.px,
            sz.radius,
            cfg.wrapper,
            !disabled && (status !== "default" ? STATUS_RING[status] : `focus-within:${cfg.focusRing}`),
            disabled && "opacity-50 cursor-not-allowed"
          )}
        >
          {/* Top specular glare */}
          <span
            className="absolute top-[1px] left-1.5 right-1.5 pointer-events-none"
            style={{
              background: cfg.glareGradient,
              height: "50%",
              borderRadius: "inherit",
            }}
          />

          {/* Bottom prism refraction */}
          <span
            className="absolute bottom-0 left-0 right-0 h-[18%] pointer-events-none"
            style={{
              background:
                "linear-gradient(0deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%)",
              borderRadius: "inherit",
            }}
          />

          {/* Left icon */}
          {leftIcon && (
            <span
              className={cn(
                "shrink-0 relative z-10 opacity-75",
                cfg.textColor,
                sz.iconSize
              )}
            >
              {leftIcon}
            </span>
          )}

          {/* Native <input> */}
          <input
            ref={ref}
            id={inputId}
            type={resolvedType}
            disabled={disabled}
            autoComplete="off"
            className={cn(
              "relative z-10 w-full bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 shadow-none font-medium",
              "[&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:inherit]",
              sz.text,
              cfg.textColor,
              cfg.placeholderClass,
              disabled && "cursor-not-allowed"
            )}
            {...props}
          />

          {/* Right slot */}
          {rightSlot && (
            <span className="relative z-10 flex items-center">{rightSlot}</span>
          )}
        </div>

        {/* Hint / error / success text */}
        {hint && (
          <p className={cn("text-xs font-medium leading-tight", STATUS_HINT[status])}>
            {hint}
          </p>
        )}
      </div>
    );
  }
);

LiquidGlassInputField.displayName = "LiquidGlassInputField";
export default LiquidGlassInputField;

```
--------------------------------------------------

### COMPONENT: liquid-glass-input-otp
Category: Liquid Glass
Description: A 3D liquid crystal one-time password (OTP) input component with individual digit glass boxes, top curved specular glare, bottom prism refraction, active glowing focus state, paste support, auto-advance, backspace navigation, masking option, and 6 color variants.
URL: https://lightswind.com/components/liquid-glass-input-otp
Import: import LiquidGlassInputOTP from "@/components/lightswind/liquid-glass-input-otp"
Registry URL: https://lightswind.com/r/liquid-glass-input-otp.json
Install Command: npx lightswind@latest add liquid-glass-input-otp

Usage:
```tsx
import { useState } from "react";
import LiquidGlassInputOTP from "@/components/lightswind/liquid-glass-input-otp";

export function Demo() {
  const [code, setCode] = useState("");

  return (
    <LiquidGlassInputOTP
      length={6}
      groupSize={3}
      value={code}
      onChange={setCode}
      onComplete={(val) => alert("Entered code: " + val)}
      variant="aurora"
      size="md"
      label="Security Code"
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef, useEffect, useId } from "react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";

/* ─── Types ─────────────────────────────────────────────────────── */
export type LiquidGlassOTPVariant =
  | "glass"
  | "aurora"
  | "emerald"
  | "cyan"
  | "primary"
  | "dark";

export type LiquidGlassOTPSize = "sm" | "md" | "lg";

export interface LiquidGlassInputOTPProps {
  /** Number of digits (default: 6) */
  length?: number;
  /** Controlled OTP value string */
  value?: string;
  /** Default uncontrolled OTP value */
  defaultValue?: string;
  /** Callback fired when OTP value changes */
  onChange?: (value: string) => void;
  /** Callback fired when all OTP digits are filled */
  onComplete?: (value: string) => void;
  /** Visual color theme variant */
  variant?: LiquidGlassOTPVariant;
  /** Sizing preset */
  size?: LiquidGlassOTPSize;
  /** Optional grouping length (e.g. 3 for 3-3, 4 for 4-4) to render a separator dot/dash between groups */
  groupSize?: number;
  /** Mask input digits as password dots */
  masked?: boolean;
  /** Disable input */
  disabled?: boolean;
  /** Auto focus first input on mount */
  autoFocus?: boolean;
  /** Label above the OTP group */
  label?: string;
  /** Helper / status message below */
  hint?: string;
  /** Extra classes for wrapper */
  className?: string;
}

/* ─── Variant Config ─────────────────────────────────────────────── */
interface OTPVariantConfig {
  boxBase: string;
  boxActive: string;
  glareGradient: string;
  textColor: string;
  labelColor: string;
  separatorColor: string;
}

const VARIANT_CONFIG: Record<LiquidGlassOTPVariant, OTPVariantConfig> = {
  glass: {
    boxBase: cn(
      "bg-gradient-to-b from-white/55 via-white/28 to-white/12 dark:from-white/22 dark:via-white/10 dark:to-white/5",
      "border border-white/85 dark:border-white/25",
      "shadow-[0_10px_28px_-4px_rgba(15,23,42,0.20),inset_0_2.5px_1.5px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.80)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(0,0,0,0.65),inset_0_2px_1.5px_rgba(255,255,255,0.30),0_0_0_1px_rgba(255,255,255,0.15)]"
    ),
    boxActive:
      "ring-2 ring-white/80 dark:ring-white/40 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(15,23,42,0.35),0_0_20px_rgba(255,255,255,0.6)]",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-slate-900 dark:text-white",
    labelColor: "text-slate-700 dark:text-slate-300",
    separatorColor: "text-slate-400 dark:text-slate-500",
  },
  aurora: {
    boxBase: cn(
      "bg-gradient-to-b from-violet-300/40 via-fuchsia-400/25 to-violet-500/30 dark:from-violet-400/30 dark:via-fuchsia-500/18 dark:to-violet-600/25",
      "border border-violet-300/70 dark:border-violet-400/35",
      "shadow-[0_10px_28px_-4px_rgba(139,92,246,0.25),inset_0_2.5px_1.5px_rgba(240,220,255,0.90),0_0_0_1px_rgba(200,180,255,0.70)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(139,92,246,0.40),inset_0_2px_1.5px_rgba(240,220,255,0.35),0_0_0_1px_rgba(200,180,255,0.25)]"
    ),
    boxActive:
      "ring-2 ring-violet-400 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(139,92,246,0.50),0_0_24px_rgba(168,85,247,0.5)]",
    glareGradient:
      "linear-gradient(180deg, rgba(255,245,255,0.88) 0%, rgba(240,220,255,0.38) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-violet-950 dark:text-violet-100",
    labelColor: "text-violet-700 dark:text-violet-300",
    separatorColor: "text-violet-400 dark:text-violet-500",
  },
  emerald: {
    boxBase: cn(
      "bg-gradient-to-b from-emerald-300/40 via-emerald-400/25 to-teal-500/30 dark:from-emerald-400/30 dark:via-emerald-500/18 dark:to-teal-600/25",
      "border border-emerald-300/70 dark:border-emerald-400/35",
      "shadow-[0_10px_28px_-4px_rgba(16,185,129,0.25),inset_0_2.5px_1.5px_rgba(220,255,235,0.90),0_0_0_1px_rgba(160,255,200,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(16,185,129,0.40),inset_0_2px_1.5px_rgba(220,255,235,0.35),0_0_0_1px_rgba(160,255,200,0.25)]"
    ),
    boxActive:
      "ring-2 ring-emerald-400 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(16,185,129,0.50),0_0_24px_rgba(16,185,129,0.5)]",
    glareGradient:
      "linear-gradient(180deg, rgba(235,255,245,0.88) 0%, rgba(180,255,220,0.38) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-emerald-950 dark:text-emerald-100",
    labelColor: "text-emerald-700 dark:text-emerald-300",
    separatorColor: "text-emerald-400 dark:text-emerald-500",
  },
  cyan: {
    boxBase: cn(
      "bg-gradient-to-b from-sky-300/40 via-blue-400/25 to-indigo-400/30 dark:from-sky-400/30 dark:via-blue-500/18 dark:to-indigo-500/25",
      "border border-sky-300/70 dark:border-sky-400/35",
      "shadow-[0_10px_28px_-4px_rgba(14,165,233,0.25),inset_0_2.5px_1.5px_rgba(220,240,255,0.90),0_0_0_1px_rgba(180,220,255,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(14,165,233,0.40),inset_0_2px_1.5px_rgba(220,240,255,0.35),0_0_0_1px_rgba(180,220,255,0.25)]"
    ),
    boxActive:
      "ring-2 ring-sky-400 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(14,165,233,0.50),0_0_24px_rgba(14,165,233,0.5)]",
    glareGradient:
      "linear-gradient(180deg, rgba(225,242,255,0.88) 0%, rgba(180,220,255,0.38) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-sky-950 dark:text-sky-100",
    labelColor: "text-sky-700 dark:text-sky-300",
    separatorColor: "text-sky-400 dark:text-sky-500",
  },
  primary: {
    boxBase: cn(
      "bg-gradient-to-b from-rose-300/40 via-red-400/25 to-rose-500/30 dark:from-rose-400/30 dark:via-red-500/18 dark:to-rose-600/25",
      "border border-rose-300/70 dark:border-rose-400/35",
      "shadow-[0_10px_28px_-4px_rgba(244,63,94,0.25),inset_0_2.5px_1.5px_rgba(255,220,220,0.90),0_0_0_1px_rgba(255,180,180,0.65)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(244,63,94,0.40),inset_0_2px_1.5px_rgba(255,220,220,0.35),0_0_0_1px_rgba(255,180,180,0.25)]"
    ),
    boxActive:
      "ring-2 ring-rose-400 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(244,63,94,0.50),0_0_24px_rgba(244,63,94,0.5)]",
    glareGradient:
      "linear-gradient(180deg, rgba(255,238,240,0.88) 0%, rgba(255,200,200,0.38) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-rose-950 dark:text-rose-100",
    labelColor: "text-rose-700 dark:text-rose-300",
    separatorColor: "text-rose-400 dark:text-rose-500",
  },
  dark: {
    boxBase: cn(
      "bg-gradient-to-b from-slate-700/60 via-slate-800/45 to-zinc-900/55 dark:from-slate-600/55 dark:via-slate-700/40 dark:to-slate-800/50",
      "border border-white/18 dark:border-white/15",
      "shadow-[0_10px_28px_-4px_rgba(0,0,0,0.45),inset_0_2.5px_1.5px_rgba(255,255,255,0.18),0_0_0_1px_rgba(255,255,255,0.12)]",
      "dark:shadow-[0_12px_32px_-4px_rgba(0,0,0,0.65),inset_0_2px_1.5px_rgba(255,255,255,0.15),0_0_0_1px_rgba(255,255,255,0.10)]"
    ),
    boxActive:
      "ring-2 ring-white/30 scale-[1.04] shadow-[0_14px_36px_-4px_rgba(0,0,0,0.7),0_0_20px_rgba(255,255,255,0.2)]",
    glareGradient:
      "linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 100%)",
    textColor: "text-white",
    labelColor: "text-slate-300",
    separatorColor: "text-slate-500",
  },
};

/* ─── Size Config ────────────────────────────────────────────────── */
const SIZE_CONFIG: Record<
  LiquidGlassOTPSize,
  { boxSize: string; text: string; radius: string; gap: string }
> = {
  sm: { boxSize: "w-8 h-9", text: "text-sm font-semibold", radius: "rounded-lg", gap: "gap-1.5" },
  md: { boxSize: "w-10 h-11", text: "text-base font-bold", radius: "rounded-xl", gap: "gap-2" },
  lg: { boxSize: "w-12 h-13", text: "text-lg font-bold", radius: "rounded-xl", gap: "gap-2.5" },
};

/* ─── Main Component ─────────────────────────────────────────────── */
export const LiquidGlassInputOTP: React.FC<LiquidGlassInputOTPProps> = ({
  length = 6,
  value: controlledValue,
  defaultValue = "",
  onChange,
  onComplete,
  variant = "glass",
  size = "md",
  groupSize = 3,
  masked = false,
  disabled = false,
  autoFocus = false,
  label,
  hint,
  className,
}) => {
  const [internalOtp, setInternalOtp] = useState<string[]>(() => {
    const initial = controlledValue ?? defaultValue;
    return Array.from({ length }, (_, i) => initial[i] || "");
  });

  const [activeIndex, setActiveIndex] = useState<number>(-1);
  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
  const autoId = useId();

  // Sync controlled value
  useEffect(() => {
    if (controlledValue !== undefined) {
      const arr = Array.from({ length }, (_, i) => controlledValue[i] || "");
      setInternalOtp(arr);
    }
  }, [controlledValue, length]);

  // Autofocus first box
  useEffect(() => {
    if (autoFocus && !disabled && inputRefs.current[0]) {
      inputRefs.current[0].focus();
    }
  }, [autoFocus, disabled]);

  const cfg = VARIANT_CONFIG[variant];
  const sz = SIZE_CONFIG[size];

  const updateValue = (newOtp: string[]) => {
    setInternalOtp(newOtp);
    const joined = newOtp.join("");
    onChange?.(joined);

    if (joined.length === length && !newOtp.includes("")) {
      onComplete?.(joined);
    }
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (disabled) return;

    if (e.key === "Backspace") {
      e.preventDefault();
      const newOtp = [...internalOtp];

      if (newOtp[index]) {
        newOtp[index] = "";
        updateValue(newOtp);
      } else if (index > 0) {
        newOtp[index - 1] = "";
        updateValue(newOtp);
        inputRefs.current[index - 1]?.focus();
      }
    } else if (e.key === "ArrowLeft" && index > 0) {
      e.preventDefault();
      inputRefs.current[index - 1]?.focus();
    } else if (e.key === "ArrowRight" && index < length - 1) {
      e.preventDefault();
      inputRefs.current[index + 1]?.focus();
    }
  };

  const handleChange = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {
    if (disabled) return;
    const val = e.target.value;
    const char = val.substring(val.length - 1);

    const newOtp = [...internalOtp];
    newOtp[index] = char;
    updateValue(newOtp);

    if (char && index < length - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  };

  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    if (disabled) return;
    e.preventDefault();
    const pastedData = e.clipboardData.getData("text").trim().slice(0, length);
    if (!pastedData) return;

    const newOtp = Array.from({ length }, (_, i) => pastedData[i] || "");
    updateValue(newOtp);

    const nextFocusIndex = Math.min(pastedData.length, length - 1);
    inputRefs.current[nextFocusIndex]?.focus();
  };

  return (
    <div className={cn("flex flex-col gap-2 select-none", className)}>
      {/* Label */}
      {label && (
        <label
          className={cn(
            "text-xs font-semibold uppercase tracking-wider",
            cfg.labelColor
          )}
        >
          {label}
        </label>
      )}

      {/* OTP Input Boxes Group */}
      <div className={cn("flex items-center", sz.gap)}>
        {Array.from({ length }).map((_, index) => {
          const isFocused = activeIndex === index;
          const isFilled = Boolean(internalOtp[index]);
          const showSeparator =
            groupSize > 0 &&
            index > 0 &&
            index % groupSize === 0 &&
            index !== length;

          return (
            <React.Fragment key={index}>
              {/* Optional Group Separator */}
              {showSeparator && (
                <div
                  className={cn(
                    "flex items-center justify-center font-bold px-0.5",
                    cfg.separatorColor,
                    sz.text
                  )}
                  aria-hidden="true"
                >
                  -
                </div>
              )}

              {/* 3D Liquid Glass Box Container */}
              <motion.div
                whileHover={{ scale: disabled ? 1 : 1.05 }}
                whileTap={{ scale: disabled ? 1 : 0.95 }}
                transition={{ type: "spring", stiffness: 450, damping: 25 }}
                onClick={() => !disabled && inputRefs.current[index]?.focus()}
                className={cn(
                  "relative flex items-center justify-center overflow-hidden transition-all duration-200 cursor-pointer backdrop-blur-xl saturate-[200%]",
                  sz.boxSize,
                  sz.radius,
                  cfg.boxBase,
                  isFocused && cfg.boxActive,
                  disabled && "opacity-50 cursor-not-allowed"
                )}
              >
                {/* Top specular glare */}
                <span
                  className="absolute top-[1px] left-1 right-1 pointer-events-none"
                  style={{
                    background: cfg.glareGradient,
                    height: "48%",
                    borderRadius: "inherit",
                  }}
                />

                {/* Bottom prism refraction */}
                <span
                  className="absolute bottom-0 left-0 right-0 h-[18%] pointer-events-none"
                  style={{
                    background:
                      "linear-gradient(0deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%)",
                    borderRadius: "inherit",
                  }}
                />

                {/* Secret Hidden / Styled Native Input */}
                <input
                  ref={(el) => {
                    inputRefs.current[index] = el;
                  }}
                  id={`${autoId}-${index}`}
                  type={masked ? "password" : "text"}
                  inputMode="numeric"
                  pattern="[0-9]*"
                  maxLength={1}
                  value={internalOtp[index] || ""}
                  disabled={disabled}
                  autoComplete="one-time-code"
                  onFocus={() => setActiveIndex(index)}
                  onBlur={() => setActiveIndex(-1)}
                  onChange={(e) => handleChange(index, e)}
                  onKeyDown={(e) => handleKeyDown(index, e)}
                  onPaste={handlePaste}
                  className={cn(
                    "relative z-10 w-full h-full text-center bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 shadow-none font-sans",
                    "[&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:inherit]",
                    sz.text,
                    cfg.textColor,
                    disabled && "cursor-not-allowed"
                  )}
                />

                {/* Active Cursor Indicator when focused & empty */}
                {isFocused && !isFilled && (
                  <motion.span
                    animate={{ opacity: [1, 0, 1] }}
                    transition={{ repeat: Infinity, duration: 1 }}
                    className={cn(
                      "absolute z-10 w-0.5 h-5 rounded-full pointer-events-none",
                      variant === "dark" ? "bg-white" : "bg-slate-800 dark:bg-white"
                    )}
                  />
                )}
              </motion.div>
            </React.Fragment>
          );
        })}
      </div>

      {/* Optional Hint Text */}
      {hint && (
        <p className="text-xs font-medium text-slate-500 dark:text-slate-400">
          {hint}
        </p>
      )}
    </div>
  );
};

LiquidGlassInputOTP.displayName = "LiquidGlassInputOTP";
export default LiquidGlassInputOTP;

```
--------------------------------------------------

### COMPONENT: liquid-glass-switch
Category: Liquid Glass
Description: A premium 3D liquid glass toggle switch featuring multi-stage crystal lens refraction, spring sliding knob animations, top curved glare highlights, and active liquid color glow channels. Supports multiple color variants, responsive size presets, icons inside the knob, and full keyboard accessibility.
URL: https://lightswind.com/components/liquid-glass-switch
Import: import { LiquidGlassSwitch } from "@/components/lightswind/liquid-glass-switch"
Registry URL: https://lightswind.com/r/liquid-glass-switch.json
Install Command: npx lightswind@latest add liquid-glass-switch

Usage:
```tsx
import { useState } from "react";
import { LiquidGlassSwitch } from "@/components/lightswind/liquid-glass-switch";
import { Sparkles } from "lucide-react";

export function Demo() {
  const [enabled, setEnabled] = useState(true);

  return (
    <LiquidGlassSwitch
      checked={enabled}
      onChange={setEnabled}
      variant="emerald"
      size="md"
      label="Glass Prism"
      iconChecked={<Sparkles className="w-4 h-4 text-emerald-600" />}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect } from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps } from "framer-motion";
import { Check, X } from "lucide-react";

export interface LiquidGlassSwitchProps
  extends Omit<HTMLMotionProps<"button">, "onChange" | "size"> {
  checked?: boolean;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
  variant?: "emerald" | "primary" | "cyan" | "purple" | "glass";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  label?: string;
  iconChecked?: React.ReactNode;
  iconUnchecked?: React.ReactNode;
  className?: string;
}

export const LiquidGlassSwitch = React.forwardRef<
  HTMLButtonElement,
  LiquidGlassSwitchProps
>(
  (
    {
      checked,
      defaultChecked = false,
      onChange,
      variant = "emerald",
      size = "md",
      disabled = false,
      label,
      iconChecked,
      iconUnchecked,
      className,
      ...props
    },
    ref
  ) => {
    const [isOn, setIsOn] = useState(checked !== undefined ? checked : defaultChecked);

    useEffect(() => {
      if (checked !== undefined) {
        setIsOn(checked);
      }
    }, [checked]);

    const toggle = () => {
      if (disabled) return;
      const next = !isOn;
      if (checked === undefined) {
        setIsOn(next);
      }
      onChange?.(next);
    };

    // Sizing presets — compact professional
    const trackSizeClasses = {
      sm: "w-11 h-6 p-[3px] rounded-full",
      md: "w-14 h-8 p-1 rounded-full",
      lg: "w-[4.5rem] h-10 p-1.5 rounded-full",
    };

    const knobSizeClasses = {
      sm: "w-[18px] h-[18px] text-[9px]",
      md: "w-6 h-6 text-xs",
      lg: "w-7 h-7 text-sm",
    };

    const travelDistances = {
      sm: 20,
      md: 24,
      lg: 30,
    };

    // Variant track backgrounds when ACTIVE (ON)
    const activeTrackVariants = {
      emerald: cn(
        "bg-gradient-to-r from-emerald-400/90 via-teal-500/85 to-emerald-600/90",
        "border-white/80 dark:border-white/40",
        "shadow-[0_12px_25px_-4px_rgba(16,185,129,0.55),inset_0_2px_1.5px_0px_rgba(255,255,255,0.9),inset_0_-3px_6px_0px_rgba(5,80,50,0.4)]"
      ),
      primary: cn(
        "bg-gradient-to-r from-[#ff6a3d]/90 via-[#ee3e26]/85 to-[#c31e14]/90",
        "border-white/80 dark:border-white/40",
        "shadow-[0_12px_25px_-4px_rgba(238,62,38,0.6),inset_0_2px_1.5px_0px_rgba(255,255,255,0.9),inset_0_-3px_6px_0px_rgba(130,15,0,0.4)]"
      ),
      cyan: cn(
        "bg-gradient-to-r from-cyan-400/90 via-blue-500/85 to-indigo-600/90",
        "border-white/80 dark:border-white/40",
        "shadow-[0_12px_25px_-4px_rgba(0,114,255,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.9),inset_0_-3px_6px_0px_rgba(0,40,130,0.4)]"
      ),
      purple: cn(
        "bg-gradient-to-r from-purple-400/90 via-fuchsia-500/85 to-pink-600/90",
        "border-white/80 dark:border-white/40",
        "shadow-[0_12px_25px_-4px_rgba(168,85,247,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.9),inset_0_-3px_6px_0px_rgba(90,15,120,0.4)]"
      ),
      glass: cn(
        "bg-gradient-to-b from-white/60 via-white/35 to-white/20 dark:from-white/30 dark:via-white/15 dark:to-white/5",
        "border-white/90 dark:border-white/40",
        "shadow-[0_14px_30px_-6px_rgba(15,23,42,0.25),inset_0_2px_1.5px_0px_rgba(255,255,255,0.95)]"
      ),
    };

    // Inactive track style (OFF)
    const inactiveTrackClass = cn(
      "bg-gradient-to-b from-slate-900/25 via-slate-900/15 to-slate-900/10 dark:from-white/20 dark:via-white/10 dark:to-white/5",
      "border-slate-900/20 dark:border-white/25",
      "shadow-[0_10px_22px_-5px_rgba(15,23,42,0.2),inset_0_2px_1px_0px_rgba(255,255,255,0.6),inset_0_-3px_6px_0px_rgba(0,0,0,0.15)]"
    );

    // Knob content helper
    const renderKnobContent = () => {
      if (isOn) {
        if (iconChecked) return iconChecked;
        return <Check className="w-3.5 h-3.5 text-slate-900 dark:text-white stroke-[3]" />;
      }
      if (iconUnchecked) return iconUnchecked;
      if (iconChecked) {
        return <span className="text-slate-700 dark:text-slate-300">{iconChecked}</span>;
      }
      return <X className="w-3.5 h-3.5 text-slate-700 dark:text-slate-400 stroke-[2.5]" />;
    };

    return (
      <div className={cn("inline-flex items-center gap-3 select-none", className)}>
        <motion.button
          ref={ref}
          whileHover={{ scale: disabled ? 1 : 1.04 }}
          whileTap={{ scale: disabled ? 1 : 0.94 }}
          transition={{ type: "spring", stiffness: 600, damping: 30 }}
          onClick={toggle}
          type="button"
          role="switch"
          aria-checked={isOn}
          disabled={disabled}
          className={cn(
            "relative outline-none border cursor-pointer font-sans overflow-hidden backdrop-blur-md saturate-[220%]",
            trackSizeClasses[size],
            isOn ? activeTrackVariants[variant] : inactiveTrackClass,
            disabled && "opacity-50 cursor-not-allowed pointer-events-none"
          )}
          {...props}
        >
          {/* Top glossy curved glare reflection - full width, pill radius */}
          <span
            className="absolute top-0 left-0 right-0 h-[50%] pointer-events-none rounded-t-[inherit]"
            style={{
              background:
                "linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Bottom internal refraction ring - full width, pill radius */}
          <span
            className="absolute bottom-0 left-0 right-0 h-[25%] pointer-events-none rounded-b-[inherit]"
            style={{
              background:
                "linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Sliding Liquid Glass Knob - Theme Adaptive */}
          <motion.div
            animate={{ x: isOn ? travelDistances[size] : 0 }}
            transition={{ type: "spring", stiffness: 650, damping: 32 }}
            className={cn(
              "relative z-10 rounded-full flex items-center justify-center overflow-hidden transition-colors duration-200",
              isOn
                ? "bg-gradient-to-b from-white via-slate-100 to-slate-200 border border-white text-slate-900 dark:from-slate-800/95 dark:via-slate-900/95 dark:to-zinc-950 dark:border-white/50 dark:text-white shadow-[0_4px_14px_rgba(0,0,0,0.25),inset_0_2px_1px_#ffffff,inset_0_-2px_4px_rgba(0,0,0,0.12)]"
                : "bg-gradient-to-b from-white via-slate-50 to-slate-200 border border-white/90 text-slate-700 dark:from-zinc-900 dark:via-slate-950 dark:to-black dark:border-slate-700/80 dark:text-slate-400 shadow-[0_4px_12px_rgba(0,0,0,0.18),inset_0_2px_1px_#ffffff,inset_0_-2px_4px_rgba(0,0,0,0.1)]",
              knobSizeClasses[size]
            )}
          >
            {/* Top dome reflection inside knob */}
            <span
              className="absolute top-[0.5px] left-1 right-1 h-[45%] pointer-events-none rounded-full"
              style={{
                background:
                  "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%)",
              }}
            />

            {/* Icon inside knob */}
            <span className="relative z-10 flex items-center justify-center font-bold">
              {renderKnobContent()}
            </span>
          </motion.div>
        </motion.button>

        {/* Optional Label */}
        {label && (
          <span
            onClick={toggle}
            className={cn(
              "text-sm font-semibold cursor-pointer select-none transition-colors",
              disabled && "opacity-50 cursor-not-allowed",
              isOn ? "text-slate-900 dark:text-white" : "text-slate-700 dark:text-slate-300"
            )}
          >
            {label}
          </span>
        )}
      </div>
    );
  }
);

LiquidGlassSwitch.displayName = "LiquidGlassSwitch";

export default LiquidGlassSwitch;

```
--------------------------------------------------

### COMPONENT: liquid-glass-slider
Category: Liquid Glass
Description: A realistic 3D liquid glass range slider featuring multi-stage crystal track depth, smooth pointer drag interaction, active liquid color glow channels, 3D specular thumb dome, value tooltips, and keyboard navigation.
URL: https://lightswind.com/components/liquid-glass-slider
Import: import { LiquidGlassSlider } from "@/components/lightswind/liquid-glass-slider"
Registry URL: https://lightswind.com/r/liquid-glass-slider.json
Install Command: npx lightswind@latest add liquid-glass-slider

Usage:
```tsx
import { useState } from "react";
import { LiquidGlassSlider } from "@/components/lightswind/liquid-glass-slider";

export function Demo() {
  const [val, setVal] = useState(75);

  return (
    <LiquidGlassSlider
      value={val}
      onChange={setVal}
      variant="emerald"
      size="md"
      label="Volume Level"
      showMarks
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useRef } from "react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";

export interface LiquidGlassSliderProps {
  value?: number;
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  onChange?: (value: number) => void;
  variant?: "emerald" | "primary" | "cyan" | "purple" | "glass";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  label?: string;
  showValueTooltip?: boolean;
  showMarks?: boolean;
  className?: string;
}

export const LiquidGlassSlider = React.forwardRef<
  HTMLDivElement,
  LiquidGlassSliderProps
>(
  (
    {
      value,
      defaultValue = 50,
      min = 0,
      max = 100,
      step = 1,
      onChange,
      variant = "emerald",
      size = "md",
      disabled = false,
      label,
      showValueTooltip = true,
      showMarks = false,
      className,
    },
    ref
  ) => {
    const [val, setVal] = useState(value !== undefined ? value : defaultValue);
    const [isDragging, setIsDragging] = useState(false);
    const trackRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      if (value !== undefined) {
        setVal(value);
      }
    }, [value]);

    const percentage = Math.min(
      100,
      Math.max(0, ((val - min) / (max - min)) * 100)
    );

    const updateValueFromPointer = (clientX: number) => {
      if (!trackRef.current || disabled) return;
      const rect = trackRef.current.getBoundingClientRect();
      const clickX = clientX - rect.left;
      const rawRatio = Math.min(1, Math.max(0, clickX / rect.width));
      const rawVal = min + rawRatio * (max - min);
      const steppedVal = Math.round(rawVal / step) * step;
      const finalVal = Math.min(max, Math.max(min, steppedVal));

      if (value === undefined) {
        setVal(finalVal);
      }
      onChange?.(finalVal);
    };

    const handlePointerDown = (e: React.PointerEvent) => {
      if (disabled) return;
      setIsDragging(true);
      (e.target as HTMLElement).setPointerCapture(e.pointerId);
      updateValueFromPointer(e.clientX);
    };

    const handlePointerMove = (e: React.PointerEvent) => {
      if (isDragging) {
        updateValueFromPointer(e.clientX);
      }
    };

    const handlePointerUp = (e: React.PointerEvent) => {
      if (isDragging) {
        setIsDragging(false);
        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
      }
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
      if (disabled) return;
      let next = val;
      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
        next = Math.min(max, val + step);
      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
        next = Math.max(min, val - step);
      } else if (e.key === "Home") {
        next = min;
      } else if (e.key === "End") {
        next = max;
      }

      if (next !== val) {
        if (value === undefined) setVal(next);
        onChange?.(next);
      }
    };

    // Sizing presets
    const trackHeightClasses = {
      sm: "h-2.5 rounded-full",
      md: "h-3.5 rounded-full",
      lg: "h-5 rounded-full",
    };

    const thumbSizeClasses = {
      sm: "w-5 h-5",
      md: "w-7 h-7",
      lg: "w-9 h-9",
    };

    // Active fill liquid glass track variants
    const activeFillVariants = {
      emerald:
        "bg-gradient-to-r from-emerald-400/90 via-teal-500/85 to-emerald-600/90 border-r border-white/80 shadow-[0_4px_18px_rgba(16,185,129,0.5),inset_0_1.5px_1px_rgba(255,255,255,0.95)]",
      primary:
        "bg-gradient-to-r from-[#ff6a3d]/90 via-[#ee3e26]/85 to-[#c31e14]/90 border-r border-white/80 shadow-[0_4px_18px_rgba(238,62,38,0.55),inset_0_1.5px_1px_rgba(255,255,255,0.95)]",
      cyan:
        "bg-gradient-to-r from-cyan-400/90 via-blue-500/85 to-indigo-600/90 border-r border-white/80 shadow-[0_4px_18px_rgba(0,114,255,0.5),inset_0_1.5px_1px_rgba(255,255,255,0.95)]",
      purple:
        "bg-gradient-to-r from-purple-400/90 via-fuchsia-500/85 to-pink-600/90 border-r border-white/80 shadow-[0_4px_18px_rgba(168,85,247,0.5),inset_0_1.5px_1px_rgba(255,255,255,0.95)]",
      glass:
        "bg-gradient-to-r from-white/70 via-white/45 to-white/25 dark:from-white/45 dark:to-white/15 border-r border-white shadow-[0_4px_18px_rgba(255,255,255,0.4),inset_0_1.5px_1px_rgba(255,255,255,0.95)]",
    };

    return (
      <div className={cn("w-full flex flex-col gap-2 select-none", className)}>
        {/* Label & Value Display */}
        {(label || showValueTooltip) && (
          <div className="flex items-center justify-between text-sm font-semibold">
            {label && (
              <span className="text-slate-900 dark:text-white font-medium">
                {label}
              </span>
            )}
            {showValueTooltip && (
              <span className="text-xs font-mono font-bold px-2.5 py-0.5 rounded-full bg-white/50 dark:bg-white/15 backdrop-blur-md border border-white/80 dark:border-white/25 text-slate-900 dark:text-slate-100 shadow-2xs">
                {val}
              </span>
            )}
          </div>
        )}

        {/* Slider Track Container */}
        <div
          ref={ref}
          tabIndex={disabled ? -1 : 0}
          role="slider"
          aria-valuemin={min}
          aria-valuemax={max}
          aria-valuenow={val}
          onKeyDown={handleKeyDown}
          className="relative w-full touch-none py-3 outline-none cursor-pointer group flex items-center"
        >
          {/* Base Glass Track */}
          <div
            ref={trackRef}
            onPointerDown={handlePointerDown}
            onPointerMove={handlePointerMove}
            onPointerUp={handlePointerUp}
            className={cn(
              "relative w-full overflow-hidden border backdrop-blur-md saturate-[220%]",
              "bg-gradient-to-b from-white/45 via-white/20 to-white/10 dark:from-white/20 dark:via-white/10 dark:to-white/5",
              "border-white/80 dark:border-white/30",
              "shadow-[0_4px_12px_rgba(15,23,42,0.12),inset_0_1.5px_1px_rgba(255,255,255,0.95),inset_0_-2px_4px_rgba(0,0,0,0.1)]",
              trackHeightClasses[size],
              disabled && "opacity-50 cursor-not-allowed"
            )}
          >
            {/* Top Gloss Reflection Line on Base Track */}
            <span
              className="absolute top-0 left-0 right-0 h-[45%] pointer-events-none rounded-t-full z-10"
              style={{
                background:
                  "linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%)",
              }}
            />

            {/* Filled Progress Bar with Translucent Liquid Glow */}
            <div
              className={cn(
                "absolute left-0 top-0 bottom-0 rounded-full overflow-hidden transition-all duration-75 backdrop-blur-sm",
                activeFillVariants[variant]
              )}
              style={{ width: `${percentage}%` }}
            >
              {/* Inner Specular Gloss Overlay on Active Fill Bar */}
              <span
                className="absolute top-0 left-0 right-0 h-[45%] pointer-events-none rounded-t-full"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%)",
                }}
              />
            </div>
          </div>

          {/* 3D Liquid Glass Thumb / Handle - Perfectly Centered Vertically */}
          <div
            onPointerDown={handlePointerDown}
            onPointerMove={handlePointerMove}
            onPointerUp={handlePointerUp}
            className="absolute top-1/2 left-0 right-0 pointer-events-none flex items-center"
            style={{ width: "100%" }}
          >
            <motion.div
              animate={{
                scale: isDragging ? 1.15 : 1,
              }}
              transition={{ type: "spring", stiffness: 600, damping: 30 }}
              className={cn(
                "absolute pointer-events-auto cursor-grab active:cursor-grabbing rounded-full flex items-center justify-center -translate-x-1/2 -translate-y-1/2 overflow-hidden",
                "bg-gradient-to-b from-white via-slate-100 to-slate-200 border border-white text-slate-900",
                "dark:from-slate-800/95 dark:via-slate-900/95 dark:to-zinc-950 dark:border-white/60 dark:text-white",
                "shadow-[0_4px_16px_rgba(0,0,0,0.3),inset_0_2px_1px_#ffffff,inset_0_-2px_4px_rgba(0,0,0,0.15)]",
                thumbSizeClasses[size]
              )}
              style={{ left: `${percentage}%` }}
            >
              {/* Top dome specular glare on Thumb */}
              <span
                className="absolute top-[0.5px] left-1 right-1 h-[45%] pointer-events-none rounded-full"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%)",
                }}
              />

              {/* Inner Liquid Crystal Center Dot */}
              <span
                className={cn(
                  "w-2.5 h-2.5 rounded-full transition-transform duration-200",
                  isDragging ? "scale-125" : "scale-100",
                  variant === "emerald" && "bg-emerald-500 shadow-[0_0_8px_#10b981]",
                  variant === "primary" && "bg-rose-500 shadow-[0_0_8px_#f43f5e]",
                  variant === "cyan" && "bg-cyan-400 shadow-[0_0_8px_#22d3ee]",
                  variant === "purple" && "bg-purple-500 shadow-[0_0_8px_#a855f7]",
                  variant === "glass" && "bg-slate-400 shadow-[0_0_8px_#94a3b8]"
                )}
              />
            </motion.div>
          </div>
        </div>

        {/* Optional Tick Marks */}
        {showMarks && (
          <div className="flex justify-between px-1 text-[10px] font-mono text-slate-600 dark:text-slate-400 opacity-80">
            <span>{min}</span>
            <span>{Math.round((min + max) / 2)}</span>
            <span>{max}</span>
          </div>
        )}
      </div>
    );
  }
);

LiquidGlassSlider.displayName = "LiquidGlassSlider";

export default LiquidGlassSlider;

```
--------------------------------------------------

### COMPONENT: liquid-glass-select
Category: Liquid Glass
Description: A realistic 3D liquid glass dropdown select component featuring multi-stage crystal trigger depth, top curved glare highlights, smooth Framer Motion scale-in dropdown menus, optional search filtering, option icons, and active liquid color channels.
URL: https://lightswind.com/components/liquid-glass-select
Import: import { LiquidGlassSelect } from "@/components/lightswind/liquid-glass-select"
Registry URL: https://lightswind.com/r/liquid-glass-select.json
Install Command: npx lightswind@latest add liquid-glass-select

Usage:
```tsx
import { useState } from "react";
import { LiquidGlassSelect } from "@/components/lightswind/liquid-glass-select";

const options = [
  { value: "next", label: "Next.js 15" },
  { value: "react", label: "React 19" },
  { value: "vue", label: "Vue.js 3" },
];

export function Demo() {
  const [val, setVal] = useState("next");

  return (
    <LiquidGlassSelect
      value={val}
      onChange={setVal}
      options={options}
      variant="emerald"
      size="md"
      label="Select Framework"
      searchable
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown, Check, Search } from "lucide-react";

export interface LiquidGlassSelectOption {
  value: string;
  label: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

export interface LiquidGlassSelectProps {
  options: LiquidGlassSelectOption[];
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  variant?: "glass" | "primary" | "accent" | "emerald" | "purple";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  label?: string;
  searchable?: boolean;
  position?: "auto" | "bottom" | "top";
  className?: string;
}

export const LiquidGlassSelect = React.forwardRef<
  HTMLDivElement,
  LiquidGlassSelectProps
>(
  (
    {
      options,
      value,
      defaultValue,
      onChange,
      placeholder = "Select an option...",
      variant = "glass",
      size = "md",
      disabled = false,
      label,
      searchable = false,
      position = "auto",
      className,
    },
    ref
  ) => {
    const [selectedVal, setSelectedVal] = useState<string>(
      value !== undefined ? value : defaultValue || ""
    );
    const [isOpen, setIsOpen] = useState(false);
    const [searchQuery, setSearchQuery] = useState("");
    const [mounted, setMounted] = useState(false);
    const [coords, setCoords] = useState<{
      top: number;
      left: number;
      width: number;
      direction: "top" | "bottom";
    }>({
      top: 0,
      left: 0,
      width: 0,
      direction: "bottom",
    });

    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      setMounted(true);
    }, []);

    useEffect(() => {
      if (value !== undefined) {
        setSelectedVal(value);
      }
    }, [value]);

    const updateCoords = () => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const isUp =
          position === "top" ||
          (position === "auto" && spaceBelow < 260 && rect.top > 260);

        setCoords({
          top: isUp ? rect.top : rect.bottom,
          left: rect.left,
          width: rect.width,
          direction: isUp ? "top" : "bottom",
        });
      }
    };

    // Close menu on outside click
    useEffect(() => {
      const handleOutsideClick = (e: MouseEvent) => {
        if (
          containerRef.current &&
          !containerRef.current.contains(e.target as Node)
        ) {
          const menuEl = document.getElementById(`liquid-glass-select-menu`);
          if (menuEl && menuEl.contains(e.target as Node)) {
            return;
          }
          setIsOpen(false);
        }
      };
      document.addEventListener("mousedown", handleOutsideClick);
      return () => document.removeEventListener("mousedown", handleOutsideClick);
    }, []);

    // Reposition menu on scroll or resize
    useEffect(() => {
      if (isOpen) {
        updateCoords();
        window.addEventListener("resize", updateCoords);
        window.addEventListener("scroll", updateCoords, true);
        return () => {
          window.removeEventListener("resize", updateCoords);
          window.removeEventListener("scroll", updateCoords, true);
        };
      }
    }, [isOpen]);

    const handleToggle = () => {
      if (disabled) return;
      if (!isOpen) {
        updateCoords();
      }
      setIsOpen(!isOpen);
    };

    const selectedOption = options.find((opt) => opt.value === selectedVal);

    const handleSelect = (val: string) => {
      if (value === undefined) {
        setSelectedVal(val);
      }
      onChange?.(val);
      setIsOpen(false);
      setSearchQuery("");
    };

    const filteredOptions = options.filter((opt) =>
      opt.label.toLowerCase().includes(searchQuery.toLowerCase())
    );

    // Sizing presets — professional compact heights
    const triggerSizeClasses = {
      sm: "h-8 px-3.5 text-xs rounded-full gap-1.5",
      md: "h-10 px-5 text-sm rounded-full gap-2",
      lg: "h-12 px-6 text-sm rounded-full gap-2.5",
    };

    /* ─── Variant styles ─────────────────────────────────────────
       Each variant mirrors the liquid-glass-button variant recipe:
       — gradient base
       — border
       — outer + inset depth shadows
       — accent glow (for colored variants)
    ──────────────────────────────────────────────────────────── */
    const variantTrigger = {
      // Pure crystal clear glass — matches button "glass" variant exactly
      glass: cn(
        "text-slate-900 dark:text-white font-semibold tracking-wide",
        "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
        "backdrop-blur-md saturate-[220%]",
        "border border-white/85 dark:border-white/25",
        "shadow-[0_16px_35px_-6px_rgba(15,23,42,0.25),0_6px_15px_-4px_rgba(15,23,42,0.15),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-4px_8px_0px_rgba(0,0,0,0.15),inset_3px_0_4px_0px_rgba(255,255,255,0.5),inset_-3px_0_4px_0px_rgba(255,255,255,0.5)]",
        "dark:shadow-[0_20px_40px_-6px_rgba(0,0,0,0.7),0_8px_18px_-4px_rgba(0,0,0,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4),0_0_0_1px_rgba(255,255,255,0.2),inset_0_-4px_8px_0px_rgba(0,0,0,0.5)]"
      ),
      // Accent blue — matches button "accent" variant
      accent: cn(
        "text-white font-semibold tracking-wide",
        "bg-gradient-to-b from-cyan-400/90 via-blue-600/85 to-indigo-700/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(0,114,255,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,245,255,0.95),0_0_0_1px_rgba(160,225,255,0.9),inset_0_-4px_8px_0px_rgba(0,40,130,0.5)]"
      ),
      // Emerald — matches button "emerald" variant
      emerald: cn(
        "text-white font-semibold tracking-wide",
        "bg-gradient-to-b from-emerald-400/90 via-emerald-600/85 to-teal-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(16,185,129,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(220,255,235,0.95),0_0_0_1px_rgba(160,255,200,0.9),inset_0_-4px_8px_0px_rgba(5,80,50,0.5)]"
      ),
      // Primary red — matches button "primary" variant
      primary: cn(
        "text-white font-semibold tracking-wide",
        "bg-gradient-to-b from-[#ff6a3d]/90 via-[#ee3e26]/85 to-[#c31e14]/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(238,62,38,0.65),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(255,230,220,0.95),0_0_0_1px_rgba(255,180,160,0.9),inset_0_-4px_8px_0px_rgba(130,15,0,0.5)]"
      ),
      // Purple
      purple: cn(
        "text-white font-semibold tracking-wide",
        "bg-gradient-to-b from-purple-400/90 via-purple-600/85 to-fuchsia-800/90",
        "backdrop-blur-md saturate-[200%]",
        "border border-white/60 dark:border-white/30",
        "shadow-[0_16px_35px_-4px_rgba(168,85,247,0.55),0_6px_12px_-2px_rgba(0,0,0,0.2),inset_0_2.5px_2px_0px_rgba(240,220,255,0.95),0_0_0_1px_rgba(210,180,255,0.9),inset_0_-4px_8px_0px_rgba(70,20,120,0.5)]"
      ),
    };

    // Active (open) glow ring per variant
    const variantActiveRing = {
      glass: "ring-2 ring-white/70 dark:ring-white/30 scale-[1.01]",
      accent: "ring-2 ring-cyan-300/60 scale-[1.01]",
      emerald: "ring-2 ring-emerald-300/60 scale-[1.01]",
      primary: "ring-2 ring-rose-300/60 scale-[1.01]",
      purple: "ring-2 ring-purple-300/60 scale-[1.01]",
    };

    // Check mark colour per variant
    const variantCheck = {
      glass: "text-slate-800 dark:text-white",
      accent: "text-cyan-300",
      emerald: "text-emerald-300",
      primary: "text-red-300",
      purple: "text-purple-300",
    };

    // Selected item highlight per variant
    const variantItemActive = {
      glass: "bg-white/35 dark:bg-white/20 text-slate-900 dark:text-white font-semibold",
      accent: "bg-white/25 text-white font-semibold",
      emerald: "bg-white/20 text-white font-semibold",
      primary: "bg-white/20 text-white font-semibold",
      purple: "bg-white/20 text-white font-semibold",
    };

    const isTop = coords.direction === "top";

    const dropdownMenuJsx = (
      <AnimatePresence>
        {isOpen && (
          <motion.div
            id="liquid-glass-select-menu"
            initial={{ opacity: 0, y: isTop ? 8 : -8, scale: 0.97 }}
            animate={{ opacity: 1, y: isTop ? -8 : 8, scale: 1 }}
            exit={{ opacity: 0, y: isTop ? 8 : -8, scale: 0.97 }}
            transition={{ type: "spring", stiffness: 400, damping: 28 }}
            style={{
              position: "fixed",
              top: isTop ? "auto" : `${coords.top}px`,
              bottom: isTop ? `${window.innerHeight - coords.top}px` : "auto",
              left: `${coords.left}px`,
              width: `${coords.width}px`,
              zIndex: 99999,
            }}
            className={cn(
              // Same glass recipe as the button
              "relative overflow-hidden p-1 rounded-2xl",
              "bg-gradient-to-b from-white/50 via-white/20 to-white/10 dark:from-white/25 dark:via-white/10 dark:to-white/5",
              "backdrop-blur-xl saturate-[220%]",
              "border border-white/85 dark:border-white/25",
              "shadow-[0_16px_40px_-6px_rgba(15,23,42,0.3),0_8px_20px_-4px_rgba(15,23,42,0.15),inset_0_2.5px_1.5px_0px_rgba(255,255,255,0.95),0_0_0_1px_rgba(255,255,255,0.85),inset_0_-4px_8px_0px_rgba(0,0,0,0.15)]",
              "dark:shadow-[0_20px_50px_-6px_rgba(0,0,0,0.75),0_8px_20px_-4px_rgba(0,0,0,0.5),inset_0_2px_1.5px_0px_rgba(255,255,255,0.4),0_0_0_1px_rgba(255,255,255,0.2),inset_0_-4px_8px_0px_rgba(0,0,0,0.5)]"
            )}
          >
            {/* Top glossy curved glare reflection — identical to button */}
            <span
              className="absolute top-0 left-0 right-0 h-[35%] pointer-events-none rounded-t-[inherit]"
              style={{
                background:
                  "linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 100%)",
              }}
            />

            {/* Bottom prism refraction — identical to button */}
            <span
              className="absolute bottom-0 left-0 right-0 h-[18%] pointer-events-none rounded-b-[inherit]"
              style={{
                background:
                  "linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)",
              }}
            />

            {/* Optional Search Input */}
            {searchable && (
              <div className="relative p-1.5 mb-1 z-10">
                <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 dark:text-slate-300" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search options..."
                  className="w-full pl-9 pr-3 py-1.5 text-xs rounded-xl bg-white/40 dark:bg-white/10 border border-white/70 dark:border-white/15 outline-none text-slate-900 dark:text-white placeholder:text-slate-400 backdrop-blur-sm"
                />
              </div>
            )}

            {/* Options List */}
            <div className="relative z-10 max-h-56 overflow-y-auto space-y-0.5 scrollbar-thin scrollbar-thumb-white/30">
              {filteredOptions.length > 0 ? (
                filteredOptions.map((opt) => {
                  const isSelected = opt.value === selectedVal;
                  return (
                    <button
                      key={opt.value}
                      type="button"
                      disabled={opt.disabled}
                      onClick={() => handleSelect(opt.value)}
                      className={cn(
                        "w-full flex items-center justify-between px-3.5 py-2 text-xs sm:text-sm rounded-xl cursor-pointer transition-all duration-150 text-left font-medium",
                        isSelected
                          ? variantItemActive[variant]
                          : cn(
                              "text-slate-800 dark:text-slate-200",
                              "hover:bg-white/30 dark:hover:bg-white/15"
                            ),
                        opt.disabled &&
                          "opacity-40 cursor-not-allowed pointer-events-none"
                      )}
                    >
                      <div className="flex items-center gap-2.5 truncate">
                        {opt.icon && <span className="shrink-0">{opt.icon}</span>}
                        <span className="truncate">{opt.label}</span>
                      </div>

                      {isSelected && (
                        <Check
                          className={cn(
                            "w-4 h-4 shrink-0 stroke-[2.5]",
                            variantCheck[variant]
                          )}
                        />
                      )}
                    </button>
                  );
                })
              ) : (
                <div className="p-3 text-xs text-center text-slate-500 dark:text-slate-400">
                  No options found.
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    );

    return (
      <div
        ref={containerRef}
        className={cn("relative w-full inline-block select-none", className)}
      >
        {/* Optional Label */}
        {label && (
          <label className="block text-sm font-semibold mb-1.5 text-slate-900 dark:text-white">
            {label}
          </label>
        )}

        {/* ── 3D Liquid Glass Trigger ─────────────────────────────── */}
        <motion.button
          ref={ref as any}
          whileHover={{ scale: disabled ? 1 : 1.02, y: disabled ? 0 : -1 }}
          whileTap={{ scale: disabled ? 1 : 0.97, y: disabled ? 0 : 1 }}
          transition={{ type: "spring", stiffness: 450, damping: 25 }}
          onClick={handleToggle}
          type="button"
          disabled={disabled}
          className={cn(
            "relative w-full flex items-center justify-between outline-none cursor-pointer overflow-hidden transition-all duration-200 ease-out",
            variantTrigger[variant],
            triggerSizeClasses[size],
            isOpen && variantActiveRing[variant],
            disabled && "opacity-50 cursor-not-allowed pointer-events-none"
          )}
        >
          {/* Top glossy curved glare reflection */}
          <span
            className="absolute top-[1px] left-1 right-1 h-[44%] pointer-events-none rounded-t-full"
            style={{
              background:
                "linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Bottom internal prism refraction ring */}
          <span
            className="absolute bottom-[1px] left-1 right-1 h-[24%] pointer-events-none rounded-b-full"
            style={{
              background:
                "linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%)",
            }}
          />

          {/* Trigger Text Content */}
          <div className="relative z-10 flex items-center gap-2.5 truncate">
            {selectedOption?.icon && (
              <span className="shrink-0">{selectedOption.icon}</span>
            )}
            <span
              className={cn(
                "truncate",
                !selectedOption && "text-slate-500 dark:text-slate-400"
              )}
            >
              {selectedOption ? selectedOption.label : placeholder}
            </span>
          </div>

          {/* Chevron */}
          <motion.span
            animate={{ rotate: isOpen ? 180 : 0 }}
            transition={{ duration: 0.22, ease: "easeInOut" }}
            className="relative z-10 shrink-0 opacity-80"
          >
            <ChevronDown className="w-4 h-4" />
          </motion.span>
        </motion.button>

        {/* Portal dropdown */}
        {mounted && createPortal(dropdownMenuJsx, document.body)}
      </div>
    );
  }
);

LiquidGlassSelect.displayName = "LiquidGlassSelect";

export default LiquidGlassSelect;

```
--------------------------------------------------

## CATEGORY (FREE): Text (10)

### COMPONENT: aurora-text-effect
Category: Text
Description: A text component with beautiful aurora-like gradient animations in the background.
URL: https://lightswind.com/components/aurora-text-effect
Import: import { AuroraTextEffect } from "@/components/lightswind/aurora-text-effect"
Registry URL: https://lightswind.com/r/aurora-text-effect.json
Install Command: npx lightswind@latest add aurora-text-effect

Usage:
```tsx
<AuroraTextEffect 
  text="Aurora Effect" 
  fontSize="clamp(3rem, 8vw, 7rem)"
  colors={{
    first: "bg-cyan-400",
    second: "bg-yellow-400",
    third: "bg-green-400",
    fourth: "bg-primarylw"
  }}
  blurAmount="blur-lg"
/>
```

Source Code:
```tsx
import React, { useRef, useState, useEffect } from "react";
import { cn } from "@/components/lib/utils";

export interface AuroraTextEffectProps {
  text: string;
  className?: string;
  textClassName?: string;
  fontSize?: string;
  colors?: {
    first?: string;
    second?: string;
    third?: string;
    fourth?: string;
  };
  blurAmount?:
  | "blur-none"
  | "blur-sm"
  | "blur-md"
  | "blur-lg"
  | "blur-xl"
  | "blur-2xl"
  | "blur-3xl"
  | string;
  animationSpeed?: {
    border?: number;
    first?: number;
    second?: number;
    third?: number;
    fourth?: number;
  };
}

export function AuroraTextEffect({
  text,
  className,
  textClassName,
  fontSize = "clamp(3rem, 8vw, 7rem)",
  colors = {
    first: "bg-cyan-400",
    second: "bg-yellow-400",
    third: "bg-green-400",
    fourth: "bg-primarylw",
  },
  blurAmount = "blur-lg",
  animationSpeed = {
    border: 6,
    first: 5,
    second: 5,
    third: 3,
    fourth: 13,
  },
}: AuroraTextEffectProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isInView, setIsInView] = useState(true);

  useEffect(() => {
    const el = containerRef.current;
    if (!el || typeof IntersectionObserver === "undefined") return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting);
      },
      { rootMargin: "250px" }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  // Define keyframes as a style object
  const keyframes = `
    @keyframes aurora-1 {
      0% { top: 0; right: 0; }
      50% { top: 100%; right: 75%; }
      75% { top: 100%; right: 25%; }
      100% { top: 0; right: 0; }
    }
    @keyframes aurora-2 {
      0% { top: -50%; left: 0%; }
      60% { top: 100%; left: 75%; }
      85% { top: 100%; left: 25%; }
      100% { top: -50%; left: 0%; }
    }
    @keyframes aurora-3 {
      0% { bottom: 0; left: 0; }
      40% { bottom: 100%; left: 75%; }
      65% { bottom: 40%; left: 50%; }
      100% { bottom: 0; left: 0; }
    }
    @keyframes aurora-4 {
      0% { bottom: -50%; right: 0; }
      50% { bottom: 0%; right: 40%; }
      90% { bottom: 50%; right: 25%; }
      100% { bottom: -50%; right: 0; }
    }
    @keyframes aurora-border {
      0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
      25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; }
      50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; }
      75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; }
      100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
    }
  `;

  const playState = isInView ? "running" : "paused";

  return (
    <div
      ref={containerRef}
      className={cn(
        // Updated to support light and dark modes
        "bg-white dark:bg-black flex items-center justify-center overflow-hidden",
        className
      )}
    >
      <style>{keyframes /* This injects the keyframes into the DOM */}</style>
      <div className="text-center">
        <h2
          className={cn(
            // Added theme-aware text color for visibility
            "font-extrabold tracking-tight relative overflow-hidden text-black dark:text-white",
            textClassName
          )}
          style={{ fontSize }}
        >
          {text}
          <div
            // Switched blend mode based on theme to preserve the effect
            className="absolute inset-0 z-10 mix-blend-lighten dark:mix-blend-darken pointer-events-none"
          >
            {/* First Aurora Layer */}
            <div
              className={cn(
                "absolute w-[60vw] h-[60vw] rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter mix-blend-overlay",
                colors.first || "bg-cyan-400",
                blurAmount
              )}
              style={{
                animationName: "aurora-border, aurora-1",
                animationDuration: `${animationSpeed.border}s, ${animationSpeed.first}s`,
                animationTimingFunction: "ease-in-out, ease-in-out",
                animationIterationCount: "infinite, infinite",
                animationDirection: "normal, alternate",
                animationPlayState: `${playState}, ${playState}`,
              }}
            />

            {/* Second Aurora Layer */}
            <div
              className={cn(
                "absolute w-[60vw] h-[60vw] rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter mix-blend-overlay",
                colors.second,
                blurAmount
              )}
              style={{
                animationName: "aurora-border, aurora-2",
                animationDuration: `${animationSpeed.border}s, ${animationSpeed.second}s`,
                animationTimingFunction: "ease-in-out, ease-in-out",
                animationIterationCount: "infinite, infinite",
                animationDirection: "normal, alternate",
                animationPlayState: `${playState}, ${playState}`,
              }}
            />

            {/* Third Aurora Layer */}
            <div
              className={cn(
                "absolute w-[60vw] h-[60vw] rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter mix-blend-overlay",
                colors.third,
                blurAmount
              )}
              style={{
                animationName: "aurora-border, aurora-3",
                animationDuration: `${animationSpeed.border}s, ${animationSpeed.third}s`,
                animationTimingFunction: "ease-in-out, ease-in-out",
                animationIterationCount: "infinite, infinite",
                animationDirection: "normal, alternate",
                animationPlayState: `${playState}, ${playState}`,
              }}
            />

            {/* Fourth Aurora Layer */}
            <div
              className={cn(
                "absolute w-[60vw] h-[60vw] rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter mix-blend-overlay",
                colors.fourth,
                blurAmount
              )}
              style={{
                animationName: "aurora-border, aurora-4",
                animationDuration: `${animationSpeed.border}s, ${animationSpeed.fourth}s`,
                animationTimingFunction: "ease-in-out, ease-in-out",
                animationIterationCount: "infinite, infinite",
                animationDirection: "normal, alternate",
                animationPlayState: `${playState}, ${playState}`,
              }}
            />
          </div>
        </h2>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: scroll-reveal
Category: Text
Description: Advanced scroll-triggered text animation component with rotation, blur effects, and word-by-word stagger animations. Built with Framer Motion for smooth performance and customizable spring physics.
URL: https://lightswind.com/components/scroll-reveal
Import: import { ScrollReveal } from "@/components/lightswind/scroll-reveal"
Registry URL: https://lightswind.com/r/scroll-reveal.json
Install Command: npx lightswind@latest add scroll-reveal

Usage:
```tsx
import { ScrollReveal } from "@/components/lightswind/scroll-reveal";

// Basic Usage
<ScrollReveal>
  Transform your user experience with beautiful scroll-triggered animations
</ScrollReveal>

// Custom Size and Alignment
<ScrollReveal 
  size="xl" 
  align="center"
  variant="primary"
>
  Large centered heading with primary color
</ScrollReveal>

// Advanced Animation Settings
<ScrollReveal
  enableBlur={true}
  baseOpacity={0.05}
  baseRotation={5}
  blurStrength={6}
  staggerDelay={0.1}
  springConfig={{
    damping: 15,
    stiffness: 200,
    mass: 0.5,
  }}
>
  Custom animation with heavy effects
</ScrollReveal>

// Responsive Design
<ScrollReveal 
  size="lg"
  className="max-w-4xl mx-auto"
  textClassName="tracking-tight"
>
  Responsive text with custom styling
</ScrollReveal>
```

Source Code:
```tsx
// "use client"; directive is correctly placed at the top

import React, { useRef, useMemo } from "react"; // Added useMemo
import { motion, useInView, useScroll, useTransform } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming cn utility is available

export interface ScrollRevealProps {
  children: React.ReactNode;
  /** Custom container className */
  containerClassName?: string;
  /** Custom text className */
  textClassName?: string;
  /** Enable blur animation effect */
  enableBlur?: boolean;
  /** Base opacity when text is out of view */
  baseOpacity?: number;
  /** Base rotation angle in degrees */
  baseRotation?: number;
  /** Blur strength in pixels */
  blurStrength?: number;
  /** Animation delay between words in seconds */
  staggerDelay?: number;
  /** Viewport threshold for triggering animation */
  threshold?: number;
  /** Animation duration in seconds */
  duration?: number;
  /** Spring animation configuration */
  springConfig?: {
    damping?: number;
    stiffness?: number;
    mass?: number;
  };
  /** Text size variant */
  size?: "sm" | "md" | "lg" | "xl" | "2xl";
  /** Text alignment */
  align?: "left" | "center" | "right";
  /** Color variant */
  variant?: "default" | "muted" | "accent" | "primary";
}

const sizeClasses = {
  sm: "text-lg md:text-xl",
  md: "text-xl md:text-2xl lg:text-3xl",
  lg: "text-2xl md:text-3xl lg:text-4xl xl:text-5xl",
  xl: "text-3xl md:text-4xl lg:text-5xl xl:text-6xl",
  "2xl": "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
};

const alignClasses = {
  left: "text-left",
  center: "text-center",
  right: "text-right",
};

const variantClasses = {
  default: "text-foreground",
  muted: "text-muted-foreground",
  accent: "text-accent-foreground",
  primary: "text-primary",
};

export function ScrollReveal({
  children,
  containerClassName,
  textClassName,
  enableBlur = true,
  baseOpacity = 0.1,
  baseRotation = 3,
  blurStrength = 4,
  staggerDelay = 0.05,
  threshold = 0.5,
  duration = 0.8,
  springConfig = { // Default spring config is always good to have
    damping: 25,
    stiffness: 100,
    mass: 1,
  },
  size = "lg",
  align = "left",
  variant = "default",
}: ScrollRevealProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(containerRef, {
    amount: threshold,
    once: false
  });

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"]
  });

  // Transform rotation based on scroll
  const rotation = useTransform(
    scrollYProgress,
    [0, 0.5, 1],
    [baseRotation, 0, 0]
  );

  // Split text into words and spaces, ensuring each part is an object
  const splitText = useMemo(() => { // Using useMemo is good here
    const text = typeof children === "string" ? children : "";
    // Split by spaces, keeping the spaces as separate elements in the array.
    // Each 'part' will either be a word or a sequence of spaces.
    return text.split(/(\s+)/).map((part, index) => {
      // Return an object for both words and spaces, with a 'type' property
      // to differentiate them in the rendering loop.
      return {
        value: part,
        isSpace: part.match(/^\s+$/) && part.length > 0, // Check if it's a non-empty string of only whitespace
        originalIndex: index, // Keep original index for stable keys
      };
    }).filter(item => item.value.length > 0); // Filter out any empty strings that might result from split
  }, [children]);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: staggerDelay,
        delayChildren: 0.1,
      },
    },
  };

  const wordVariants = {
    hidden: {
      opacity: baseOpacity,
      filter: enableBlur ? `blur(${blurStrength}px)` : "blur(0px)",
      y: 20,
    },
    visible: {
      opacity: 1,
      filter: "blur(0px)",
      y: 0,
      transition: {
        // Removed `type: "spring"` here. Framer Motion infers "spring"
        // when damping, stiffness, or mass are present.
        ...springConfig,
        duration, // This is a common property for all transition types
      },
    },
  };

  return (
    <motion.div
      ref={containerRef}
      style={{ rotate: rotation }}
      className={cn(
        "my-5 transform-gpu",
        containerClassName
      )}
    >
      <motion.p
        className={cn(
          "leading-relaxed font-semibold",
          sizeClasses[size],
          alignClasses[align],
          variantClasses[variant],
          textClassName
        )}
        variants={containerVariants}
        initial="hidden"
        // Changed to `isInView` to match the behavior of triggering on view
        animate={isInView ? "visible" : "hidden"}
      >
        {splitText.map((item) => ( // Map over 'item' directly as it's always an object
          item.isSpace ? (
            // Render spaces as a regular span
            <span key={`space-${item.originalIndex}`}>{item.value}</span>
          ) : (
            // Render words as motion.span for animation
            <motion.span
              key={`word-${item.originalIndex}`} // Use originalIndex for stable keys
              className="inline-block"
              variants={wordVariants}
            >
              {item.value}
            </motion.span>
          )
        ))}
      </motion.p>
    </motion.div>
  );
}

export default ScrollReveal;
```
--------------------------------------------------

### COMPONENT: shiny-text
Category: Text
Description: Eye-catching text animation component with customizable shine effects, multiple directions, and smooth transitions. Perfect for headings, CTAs, and brand elements that need to stand out.
URL: https://lightswind.com/components/shiny-text
Import: import { ShinyText } from "@/components/lightswind/shiny-text"
Registry URL: https://lightswind.com/r/shiny-text.json
Install Command: npx lightswind@latest add shiny-text

Usage:
```tsx
import { ShinyText } from "@/components/lightswind/shiny-text";

// Basic Usage
<ShinyText>Shiny animated text</ShinyText>

// Custom Size and Weight
<ShinyText size="2xl" weight="bold">
  Large Bold Heading
</ShinyText>

// Custom Colors
<ShinyText
  baseColor="rgba(59, 130, 246, 0.4)"
  shineColor="rgba(147, 51, 234, 0.9)"
  speed={2}
>
  Blue to Purple Gradient
</ShinyText>

// Animation Direction
<ShinyText 
  direction="right-to-left" 
  speed={1.5}
>
  Right to left animation
</ShinyText>

// Advanced Configuration
<ShinyText
  size="xl"
  weight="semibold"
  speed={3}
  intensity={0.9}
  shineWidth={30}
  pauseOnHover={true}
  repeat={5}
  gradientType="radial"
>
  Fully customized shiny text
</ShinyText>

// Disabled State
<ShinyText disabled>
  No animation when disabled
</ShinyText>
```

Source Code:
```tsx
"use client";

import React from "react";
import { motion, type Variants } from "framer-motion"; // Import Variants type
import { cn } from "@/components/lib/utils";

export interface ShinyTextProps {
  /** Text content to display */
  children: React.ReactNode;
  /** Disable the shiny animation */
  disabled?: boolean;
  /** Animation speed in seconds */
  speed?: number;
  /** Custom className */
  className?: string;
  /** Text size variant */
  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
  /** Font weight */
  weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold";
  /** Base text color */
  baseColor?: string;
  /** Shine effect color */
  shineColor?: string;
  /** Shine effect intensity (0-1) */
  intensity?: number;
  /** Animation direction */
  direction?: "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top";
  /** Shine effect width percentage */
  shineWidth?: number;
  /** Delay before animation starts in seconds */
  delay?: number;
  /** Animation repeat behavior */
  repeat?: number | "infinite";
  /** Pause animation on hover */
  pauseOnHover?: boolean;
  /** Gradient type */
  gradientType?: "linear" | "radial";
}

const sizeClasses = {
  xs: "text-xs",
  sm: "text-sm",
  base: "text-base",
  lg: "text-lg",
  xl: "text-xl",
  "2xl": "text-2xl",
  "3xl": "text-3xl",
  "4xl": "text-4xl",
};

const weightClasses = {
  normal: "font-normal",
  medium: "font-medium",
  semibold: "font-semibold",
  bold: "font-bold",
  extrabold: "font-extrabold",
};

const directionConfig = {
  "left-to-right": {
    backgroundPosition: ["100% 0%", "-100% 0%"],
    backgroundSize: "200% 100%",
  },
  "right-to-left": {
    backgroundPosition: ["-100% 0%", "100% 0%"],
    backgroundSize: "200% 100%",
  },
  "top-to-bottom": {
    backgroundPosition: ["0% 100%", "0% -100%"],
    backgroundSize: "100% 200%",
  },
  "bottom-to-top": {
    backgroundPosition: ["0% -100%", "0% 100%"],
    backgroundSize: "100% 200%",
  },
};

export function ShinyText({
  children,
  disabled = false,
  speed = 3,
  className,
  size = "base",
  weight = "medium",
  baseColor,
  shineColor,
  intensity = 1,
  direction = "left-to-right",
  shineWidth = 0,
  delay = 0,
  repeat = "infinite",
  pauseOnHover = false,
  gradientType = "linear",
}: ShinyTextProps) {
  const config = directionConfig[direction];

  const gradientDirection = direction === "left-to-right" || direction === "right-to-left"
    ? "90deg"
    : direction === "top-to-bottom"
    ? "180deg"
    : "0deg";

  // Default colors based on theme
  const defaultBaseColor = "hsl(var(--foreground)/20)";
  const defaultShineColor = "hsl(var(--primary)/20)";

  const finalBaseColor = baseColor || defaultBaseColor;
  const finalShineColor = shineColor || defaultShineColor;

  const createGradient = () => {
    const transparentStartPos = Math.max(0, (50 - shineWidth / 2));
    const transparentEndPos = Math.min(100, (50 + shineWidth / 2));

    const shineStart = `${finalShineColor} ${transparentStartPos}%`;
    const shineEnd = `${finalShineColor} ${transparentEndPos}%`;

    return gradientType === "linear"
      ? `linear-gradient(${gradientDirection}, ${finalBaseColor}, transparent ${transparentStartPos - 5}%, ${shineStart}, ${shineEnd}, transparent ${transparentEndPos + 5}%, ${finalBaseColor})`
      : `radial-gradient(ellipse at center, ${finalShineColor} ${intensity * 100}%, transparent)`;
  };

  // Define the animate state structure consistently
  const animationVariants: Variants = { // Explicitly type as Variants
    initial: {
      backgroundPosition: config.backgroundPosition[0],
    },
    animate: disabled
      ? {
          // When disabled, snap to initial position with no animation
          backgroundPosition: config.backgroundPosition[0],
          transition: {
            duration: 0,
            delay: 0,
            repeat: 0, // Explicitly define repeat and ease for consistent type
            ease: "linear", // Even if not used, keeps type consistent
          },
        }
      : {
          backgroundPosition: config.backgroundPosition[1],
          transition: {
            duration: speed,
            delay,
            repeat: typeof repeat === "number" ? repeat : Infinity,
            ease: "linear",
          },
        },
    hover: pauseOnHover ? {
      // Note: `animationPlayState` is a CSS property, Framer Motion variants
      // primarily animate numerical/string values. To truly pause a Framer Motion
      // animation, you'd typically use `useAnimationControls` and call `stop()`.
      // However, if this is a background CSS animation being controlled by Framer Motion's
      // `animate` prop, this might have an indirect effect or be ignored.
      // For a robust pause, consider a `useAnimationControls` hook.
      // Keeping it as is to preserve original logic for now, but be aware.
    } : {},
  };


  if (disabled) {
    return (
      <span
        className={cn(
          "inline-block",
          sizeClasses[size],
          weightClasses[weight],
          "text-foreground",
          className
        )}
      >
        {children}
      </span>
    );
  }

  return (
    <motion.span
      className={cn(
        "bg-clip-text text-transparent inline-block",
        sizeClasses[size],
        weightClasses[weight],
        className
      )}
      style={{
        backgroundImage: createGradient(),
        backgroundSize: config.backgroundSize,
        WebkitBackgroundClip: "text",
        backgroundClip: "text",
        opacity: intensity,
      }}
      variants={animationVariants}
      initial="initial"
      animate="animate"
      whileHover="hover"
    >
      {children}
    </motion.span>
  );
}

export default ShinyText;
```
--------------------------------------------------

### COMPONENT: text-scroll-marquee
Category: Text
Description: A horizontally scrolling text marquee built with React, Motion One, and Tailwind CSS. It supports directional scrolling, optional scroll-based motion, delay, and full customization via props.
URL: https://lightswind.com/components/text-scroll-marquee
Import: import TextScrollMarquee from '@/components/lightswind/text-scroll-marquee';
Registry URL: https://lightswind.com/r/text-scroll-marquee.json
Install Command: npx lightswind@latest add text-scroll-marquee

Usage:
```tsx
import TextScrollMarquee from '@/components/lightswind/text-scroll-marquee';

<TextScrollMarquee
  baseVelocity={1}
  direction="left"
  className="text-3xl font-bold uppercase text-primarylw"
  scrollDependent={false}
  delay={500}
>
  🚀 Welcome to the Future of Fast UI! 🚀
</TextScrollMarquee>
```

Source Code:
```tsx
'use client';

import { useRef, useEffect } from 'react';
import {
  motion,
  useScroll,
  useSpring,
  useTransform,
  useVelocity,
  useAnimationFrame,
  useMotionValue,
} from 'framer-motion';
import { wrap } from '@motionone/utils';
import { cn } from '@/components/lib/utils';

interface TextScrollMarqueeProps {
  children: string;
  baseVelocity: number;
  className?: string;
  scrollDependent?: boolean;
  delay?: number;
  direction?: 'left' | 'right';
}

export default function TextScrollMarquee({
  children,
  baseVelocity = 1,
  className,
  scrollDependent = false,
  delay = 0,
  direction = 'left',
}: TextScrollMarqueeProps) {
  const baseX = useMotionValue(0);
  const { scrollY } = useScroll();
  const scrollVelocity = useVelocity(scrollY);
  const smoothVelocity = useSpring(scrollVelocity, {
    damping: 50,
    stiffness: 400,
  });
  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 2], {
    clamp: false,
  });

  // ✅ Use modular wrap from -100% to 0% for seamless loop
  const x = useTransform(baseX, (v) => `${wrap(-100, 0, v % 100)}%`);

  const directionFactor = useRef<number>(direction === 'left' ? 1 : -1);
  const hasStarted = useRef(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      hasStarted.current = true;
    }, delay);

    return () => clearTimeout(timer);
  }, [delay]);

  useEffect(() => {
    directionFactor.current = direction === 'left' ? 1 : -1;
  }, [direction]);

  useAnimationFrame((t, delta) => {
    if (!hasStarted.current) return;

    let moveBy = directionFactor.current * baseVelocity * (delta / 1000);

    if (scrollDependent) {
      if (velocityFactor.get() < 0) {
        directionFactor.current = -1;
      } else if (velocityFactor.get() > 0) {
        directionFactor.current = 1;
      }
    }

    moveBy += directionFactor.current * moveBy * velocityFactor.get();

    baseX.set(baseX.get() + moveBy);
  });

  return (
    <div className="overflow-hidden whitespace-nowrap flex flex-nowrap">
      <motion.div
        className="flex whitespace-nowrap gap-10 flex-nowrap"
        style={{ x }}
      >
        {[...Array(4)].map((_, index) => (
          <span key={index} className={cn('block text-[5vw]', className)}>
            {children}
          </span>
        ))}
      </motion.div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: typing-text
Category: Text
Description: A sleek animated typing component that reveals each character with a smooth shimmer effect. Ideal for hero sections, headers, or attention-grabbing intros. Built with React, Framer Motion, and Tailwind CSS.
URL: https://lightswind.com/components/typing-text
Import: import { TypingText } from '@/components/lightswind/typing-text';
Registry URL: https://lightswind.com/r/typing-text.json
Install Command: npx lightswind@latest add typing-text

Usage:
```tsx
import { TypingText } from '@/components/lightswind/typing-text';

<TypingText
  delay={0.5}
  duration={2}
  fontSize="text-5xl"
  fontWeight="font-extrabold"
  color="text-primarylw"
  letterSpacing="tracking-wider"
  align="center"
>
  Welcome to the Future of UI
</TypingText>
```

Source Code:
```tsx
"use client";

import { motion, Variants } from "framer-motion";
import React, {
  ElementType,
  ReactNode,
  useEffect,
  useState,
} from "react";
import { cn } from "@/components/lib/utils";

export interface TypingTextProps {
  children: ReactNode;
  as?: ElementType;
  className?: string;
  delay?: number;
  duration?: number;
  fontSize?: string;
  fontWeight?: string;
  color?: string;
  letterSpacing?: string;
  align?: "left" | "center" | "right";
  loop?: boolean;
}

export const TypingText = ({
  children,
  as: Component = "div",
  className = "",
  delay = 0,
  duration = 2,
  fontSize = "text-4xl",
  fontWeight = "font-bold",
  color = "text-white",
  letterSpacing = "tracking-wide",
  align = "left",
  loop = false,
}: TypingTextProps) => {
  const [textContent, setTextContent] = useState<string>("");

  useEffect(() => {
    const extractText = (node: ReactNode): string => {
      if (typeof node === "string" || typeof node === "number") {
        return node.toString();
      }
      if (Array.isArray(node)) {
        return node.map(extractText).join("");
      }
      if (React.isValidElement(node)) {
        const element = node as React.ReactElement<any>;
        if (typeof element.props.children !== "undefined") {
          return extractText(element.props.children);
        }
      }
      return "";
    };

    setTextContent(extractText(children));
  }, [children]);

  const characters = textContent.split("").map((char) =>
    char === " " ? "\u00A0" : char
  );

  const characterVariants: Variants = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: (i: number) => ({
      opacity: 1,
      scale: 1,
      transition: {
        delay: delay + i * (duration / characters.length),
        duration: 0.3,
        ease: "easeInOut",
      },
    }),
  };

  return React.createElement(
    Component as any,
    {
      className: cn(
        "inline-flex",
        className,
        fontSize,
        fontWeight,
        color,
        letterSpacing,
        align === "center"
          ? "justify-center text-center"
          : align === "right"
          ? "justify-end text-right"
          : "justify-start text-left"
      ),
    },
    <motion.span
      className="inline-block"
      initial="hidden"
      animate="visible"
      aria-label={textContent}
      role="text"
    >
      {characters.map((char, index) => (
        <motion.span
          key={`${char}-${index}`}
          className="inline-block"
          variants={characterVariants}
          custom={index}
          initial="hidden"
          animate="visible"
        >
          {char}
        </motion.span>
      ))}
    </motion.span>
  );
};

```
--------------------------------------------------

### COMPONENT: rolling-text-3d
Category: Text
Description: A premium 3D text rotation component that creates a 'Tube' rotation effect using GSAP. Each character rotates in a 3D cylindrical space for a high-impact cinematic feel.
URL: https://lightswind.com/components/rolling-text-3d
Import: import { RollingText3D } from "@/components/lightswind/rolling-text-3d"
Registry URL: https://lightswind.com/r/rolling-text-3d.json
Install Command: npx lightswind@latest add rolling-text-3d

Usage:
```tsx
import { RollingText3D } from "@/components/lightswind/rolling-text-3d";

export function RollingTextDemo() {
  return (
    <div className="h-64 flex items-center justify-center bg-black">
      <RollingText3D 
        text="LIGHTSWIND" 
        fontSize="6vw" 
        color="#ffffff" 
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { cn } from "@/components/lib/utils";

interface RollingText3DProps {
  /**
   * The text to be animated.
   */
  text: string;
  /**
   * Font size of the text (e.g., "5vw", "48px").
   * Defaults to "8vw" for a professional hero look.
   */
  fontSize?: string;
  /**
   * Color of the text.
   */
  color?: string;
  /**
   * Additional tailwind classes for the container.
   */
  className?: string;
  /**
   * Duration of one full rotation cycle in seconds.
   */
  duration?: number;
  /**
   * Stagger delay between characters.
   */
  stagger?: number;
  /**
   * Perspective depth for the 3D effect.
   */
  perspective?: number;
  /**
   * Letter spacing.
   */
  letterSpacing?: string;
  /**
   * Number of duplicate lines in the "tube" (default is 4).
   */
  linesCount?: number;
}

/**
 * RollingText3D - A premium 3D text rotation component.
 * Replicates the "Tube" rotation effect using GSAP.
 */
export const RollingText3D = ({
  text,
  fontSize = "8vw",
  color = "currentColor",
  className,
  duration = 0.9,
  stagger = 0.08,
  perspective = 700,
  letterSpacing = "-0.05em",
  linesCount = 4,
}: RollingText3DProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const tubeRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current || !tubeRef.current) return;

    const container = containerRef.current;
    const lines = tubeRef.current.querySelectorAll(".rolling-line");
    
    // Set initial visibility
    gsap.set(container, { visibility: "visible" });

    // Manually split text into characters for each line
    // This allows us to avoid the paid GSAP SplitText plugin while keeping the effect.
    lines.forEach((line) => {
      const content = line.textContent || "";
      line.innerHTML = "";
      content.split("").forEach((char) => {
        const span = document.createElement("span");
        span.textContent = char === " " ? "\u00A0" : char;
        span.style.display = "inline-block";
        span.style.backfaceVisibility = "hidden";
        line.appendChild(span);
      });
    });

    const allLinesChars = Array.from(lines).map((line) => 
      Array.from(line.querySelectorAll("span"))
    );

    // 3D setup logic
    const update3D = () => {
      const width = window.innerWidth;
      const depth = -width / 8;
      const transformOrigin = `50% 50% ${depth}px`;

      gsap.set(lines, { perspective, transformStyle: "preserve-3d" });

      const tl = gsap.timeline({ repeat: -1 });

      allLinesChars.forEach((chars, index) => {
        tl.fromTo(
          chars,
          { rotationX: -90, opacity: 0 },
          { 
            rotationX: 90, 
            opacity: 1,
            stagger, 
            duration, 
            ease: "none", 
            transformOrigin 
          },
          index * (duration / 2) // staggered entry for each line
        );
      });

      return tl;
    };

    const timeline = update3D();

    // Handle resize
    const handleResize = () => {
      timeline.kill();
      update3D();
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      timeline.kill();
    };
  }, [text, duration, stagger, perspective, linesCount]);

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative flex items-center justify-center w-full h-full overflow-hidden select-none",
        className
      )}
      style={{ visibility: "hidden" }}
    >
      <div 
        ref={tubeRef} 
        className="relative w-full text-center"
        style={{ height: "1.2em" }} // Height based on line-height
      >
        {Array.from({ length: linesCount }).map((_, i) => (
          <h1
            key={i}
            className="rolling-line absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 m-0 whitespace-nowrap"
            style={{
              fontSize,
              color,
              letterSpacing,
              lineHeight: 1,
            }}
          >
            {text}
          </h1>
        ))}
      </div>
    </div>
  );
};


```
--------------------------------------------------

### COMPONENT: 3d-scroll-paragraph
Category: Text
Description: A premium 3D typography component that maps text onto a tilted back 3D plane, moving vertically on scroll. Replicates the cinematic feel of 'Star Wars' intros with true perspective and depth scaling.
URL: https://lightswind.com/components/3d-scroll-paragraph
Import: import { ScrollPara3D } from "@/components/lightswind/3d-scroll-paragraph"
Registry URL: https://lightswind.com/r/3d-scroll-paragraph.json
Install Command: npx lightswind@latest add 3d-scroll-paragraph

Usage:
```tsx
import { ScrollPara3D } from "@/components/lightswind/3d-scroll-paragraph";

const textLines = [
  "In an era of digital noise",
  "Creating experiences that matter",
  "Requires more than just beauty",
  "It demands true intentionality",
  "Design is how it works",
  "Smooth motion captures minds"
];

export function Demo() {
  return (
    <div className="w-full">
      <ScrollPara3D 
        lines={textLines} 
        perspective={400}
        angle={60}
        scrubSpeed={1.5}
      />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef } from "react";
import { cn } from "@/components/lib/utils";

export interface ScrollPara3DProps {
  /**
   * The text lines to reveal in 3D space.
   */
  lines: string[];
  className?: string;
  containerClassName?: string;
  textClassName?: string;
  /**
   * The perspective depth distance in pixels.
   * Less = more extreme 3D depth/stretch.
   * @default 600
   */
  perspective?: number;
  /**
   * The tilt angle of the text floor plane (rotateX degrees).
   * @default 50
   */
  angle?: number;
  /**
   * How much extra scrolling space to pin for the animation.
   * Multiplier based on content height.
   * @default 1.2
   */
  scrubSpeed?: number;
  /**
   * Font size in rem for each text line.
   * @default 3.5
   */
  fontSize?: number;
}

export function ScrollPara3D({
  lines,
  className,
  containerClassName,
  textClassName,
  perspective = 600,
  angle = 50,
  scrubSpeed = 1.2,
  fontSize = 3.5,
}: ScrollPara3DProps) {
  const sectionRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      gsap.registerPlugin(ScrollTrigger);
      if (!contentRef.current || !sectionRef.current) return;

      const contentHeight = contentRef.current.offsetHeight;
      const windowHeight = window.innerHeight;

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top top",
          end: `+=${contentHeight * scrubSpeed}`,
          pin: true,
          scrub: 1,
          anticipatePin: 1,
        },
      });

      // Start just below so text is immediately visible on scroll
      tl.fromTo(
        contentRef.current,
        { y: windowHeight * 0.3 },
        { y: -contentHeight, ease: "none" }
      );

      return () => { tl.kill(); };
    },
    { dependencies: [lines.length, perspective, angle, scrubSpeed, fontSize] }
  );

  return (
    <div
      ref={sectionRef}
      className={cn(
        "relative w-full h-screen overflow-hidden bg-background",
        className
      )}
      style={{ perspective: `${perspective}px` }}
    >
      {/* Top/bottom fade overlay */}
      <div
        className="absolute inset-0 z-10 pointer-events-none"
        style={{
          background:
            "linear-gradient(to bottom, var(--background) 0%, transparent 15%, transparent 85%, var(--background) 100%)",
        }}
      />

      {/*
        Tilted floor plane.
        We use transformOrigin "center bottom" so the rotation pivots
        at the bottom center of the plane → text crawls toward viewer naturally.
        Width is 100% of the section.
      */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
          transformStyle: "preserve-3d",
          transform: `rotateX(${angle}deg)`,
          transformOrigin: "center bottom",
        }}
      >
        {/* Scrolling content strip */}
        <div
          ref={contentRef}
          className={cn(
            "w-full flex flex-col items-center justify-start",
            containerClassName
          )}
          style={{ willChange: "transform" }}
        >
          {lines.map((line, i) => (
            <p
              key={i}
              className={cn(
                "w-full text-center font-black uppercase text-primary tracking-tighter leading-tight",
                textClassName
              )}
              style={{ fontSize: `${fontSize}rem` }}
            >
              {line}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: video-text
Category: Text
Description: A versatile component that masks a video inside text, creating a dynamic and engaging visual effect. It allows customization of font properties and video playback, powered by React, Tailwind CSS, and Framer Motion for optional animations.
URL: https://lightswind.com/components/video-text
Import: import { VideoText } from '@/components/lightswind/video-text';
Registry URL: https://lightswind.com/r/video-text.json
Install Command: npx lightswind@latest add video-text

Usage:
```tsx
import { VideoText } from '@/components/lightswind/video-text';

// Example with basic usage and default text properties
<VideoText src="/videos/ocean.mp4">
  EXPLORE
</VideoText>

// Example with custom font size, weight, and a simple Framer Motion animation
<VideoText
  src="/videos/cityscape.mp4"
  fontSize={18} // 18vw
  fontWeight={800}
  fontFamily="Arial Black, sans-serif"
  className="w-full h-[50vh]" // Example: full width, 50% viewport height
  autoPlay
  muted
  loop
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 1.5, ease: "easeOut" }}
>
  MOTION TEXT
</VideoText>

// Example with a different HTML element as the container
<VideoText
  as="h1"
  src="/videos/waterfall.mp4"
  fontSize={25}
  fontWeight="bold"
  textAnchor="start"
  dominantBaseline="hanging"
>
  NATURE'S BEAUTY
</VideoText>
```

Source Code:
```tsx
"use client";

import { cn } from "@/components/lib/utils";
import React, { ReactNode, useEffect, useState } from "react";
import { motion, HTMLMotionProps } from "framer-motion";

export interface VideoTextProps {
  src: string;
  className?: string;
  autoPlay?: boolean;
  muted?: boolean;
  loop?: boolean;
  preload?: "auto" | "metadata" | "none";
  children: ReactNode;
  fontSize?: string | number;
  fontWeight?: string | number;
  textAnchor?: string;
  dominantBaseline?: string;
  fontFamily?: string;
  as?: "div" | "span" | "section" | "article" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

export function VideoText({
  src,
  children,
  className = "",
  autoPlay = true,
  muted = true,
  loop = true,
  preload = "auto",
  fontSize = 20,
  fontWeight = "bold",
  textAnchor = "middle",
  dominantBaseline = "middle",
  fontFamily = "sans-serif",
  as = "div",
  ...motionProps
}: VideoTextProps & HTMLMotionProps<"div">) {
  const [svgMask, setSvgMask] = useState("");
  const content = React.Children.toArray(children).join("");

  useEffect(() => {
    const responsiveFontSize =
      typeof fontSize === "number" ? `${fontSize}vw` : fontSize;

    const newSvgMask = `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
      <text x='50%' y='50%'
            font-size='${responsiveFontSize}'
            font-weight='${fontWeight}'
            text-anchor='${textAnchor}'
            dominant-baseline='${dominantBaseline}'
            font-family='${fontFamily}'
            fill='black'>${content}</text>
    </svg>`;
    setSvgMask(newSvgMask);
  }, [content, fontSize, fontWeight, textAnchor, dominantBaseline, fontFamily]);

  const validTags = ["div", "span", "section", "article", "p", "h1", "h2", "h3", "h4", "h5", "h6"] as const;
  type ValidTag = (typeof validTags)[number];

  const MotionComponent = motion[validTags.includes(as) ? as : "div"] as any;

  if (!svgMask) {
    return React.createElement(
      MotionComponent,
      {
        className: cn("relative size-full", className),
        ...motionProps,
      },
      <span className="sr-only">{content}</span>
    );
  }

  const dataUrlMask = `url("data:image/svg+xml,${encodeURIComponent(svgMask)}")`;

  return React.createElement(
    MotionComponent,
    {
      className: cn("relative overflow-hidden", className),
      ...motionProps,
    },
    <>
      <div
        className="absolute inset-0 flex items-center justify-center"
        style={{
          maskImage: dataUrlMask,
          WebkitMaskImage: dataUrlMask,
          maskSize: "contain",
          WebkitMaskSize: "contain",
          maskRepeat: "no-repeat",
          WebkitMaskRepeat: "no-repeat",
          maskPosition: "center",
          WebkitMaskPosition: "center",
          opacity: 1,
        }}
      >
        <video
          className="w-full h-full object-cover"
          autoPlay={autoPlay}
          muted={muted}
          loop={loop}
          preload={preload}
          playsInline
        >
          <source src={src} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
      <span className="sr-only">{content}</span>
    </>
  );
}

```
--------------------------------------------------

### COMPONENT: looping-words
Category: Text
Description: An animated, professional looping words effect inspired by Osmo. It displays a list of words vertically and animates them upwards sequentially while highlighting the currently active word with an animated corner-bracket selector. Built with Framer Motion for smooth, seamless infinite scrolling.
URL: https://lightswind.com/components/looping-words
Import: import { LoopingWords } from "@/components/lightswind/looping-words";
Registry URL: https://lightswind.com/r/looping-words.json
Install Command: npx lightswind@latest add looping-words

Usage:
```tsx
import { LoopingWords } from "@/components/lightswind/looping-words";

export default function App() {
  const words = [
    "Framer Motion",
    "Looping",
    "Words",
    "Selector",
    "Made with"
  ];

  return (
    <div className="w-full h-[400px] flex items-center justify-center bg-background">
      <LoopingWords words={words} />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useEffect, useState, useRef } from "react";
import { motion, useAnimationControls } from "framer-motion";
import { cn } from "@/components/lib/utils";

interface LoopingWordsProps {
  words: string[];
  className?: string;
}

export function LoopingWords({ words, className }: LoopingWordsProps) {
  const controls = useAnimationControls();
  const wordsRef = useRef<(HTMLLIElement | null)[]>([]);
  const [selectorWidth, setSelectorWidth] = useState(0);

  // Duplicate the words array to create a seamless infinite loop
  const duplicatedWords = [...words, ...words];
  const totalOriginal = words.length;

  useEffect(() => {
    // Initial width setup
    updateWidth(1);

    let index = 0;
    const interval = setInterval(async () => {
      index++;
      updateWidth((index % totalOriginal) + 1);

      await controls.start({
        y: `-${(index * 100) / duplicatedWords.length}%`,
        transition: { duration: 1.2, ease: [0.175, 0.885, 0.32, 1.15] },
      });

      // If we've scrolled past the first full set, snap back to the start seamlessly
      if (index === totalOriginal) {
        index = 0;
        controls.set({ y: "0%" });
      }
    }, 2200);

    return () => clearInterval(interval);
  }, [controls, totalOriginal, duplicatedWords.length]);

  const updateWidth = (index: number) => {
    const el = wordsRef.current[index];
    if (el) {
      setSelectorWidth(el.offsetWidth);
    }
  };

  return (
    <div className={cn("flex items-center justify-center", className)}>
      <div className="relative h-[2.7em] px-[0.2em] text-[11vw] md:text-[6vw] leading-[0.9] font-bold uppercase whitespace-nowrap overflow-hidden">
        
        {/* List of words */}
        <motion.ul
          className="flex flex-col items-center m-0 p-0 list-none"
          animate={controls}
          initial={{ y: "0%" }}
        >
          {duplicatedWords.map((word, i) => (
            <li
              key={i}
              ref={(el) => {
                wordsRef.current[i] = el;
              }}
              className="text-foreground tracking-tight"
            >
              <p className="m-0">{word}</p>
            </li>
          ))}
        </motion.ul>

        {/* Fade gradients */}
        <div
          className="pointer-events-none absolute inset-0 z-10"
          style={{
            backgroundImage:
              "linear-gradient(180deg, hsl(var(--background)) 5%, transparent 40%, transparent 60%, hsl(var(--background)) 95%)",
          }}
        />

        {/* Selector Edge Boxes */}
        <motion.div
          className="absolute left-1/2 top-1/2 h-[0.9em] -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20"
          animate={{ width: selectorWidth }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        >
          {/* Top Left */}
          <div className="absolute top-0 left-0 w-[0.125em] h-[0.125em] border-t-[0.035em] border-l-[0.035em] border-primarylw" />
          {/* Top Right */}
          <div className="absolute top-0 right-0 w-[0.125em] h-[0.125em] border-t-[0.035em] border-r-[0.035em] border-primarylw" />
          {/* Bottom Left */}
          <div className="absolute bottom-0 left-0 w-[0.125em] h-[0.125em] border-b-[0.035em] border-l-[0.035em] border-primarylw" />
          {/* Bottom Right */}
          <div className="absolute bottom-0 right-0 w-[0.125em] h-[0.125em] border-b-[0.035em] border-r-[0.035em] border-primarylw" />
        </motion.div>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: text-particle-animation
Category: Text
Description: An interactive, physics-driven canvas particle text animation component. Text characters dissolve into reactive micro-particles that repel from mouse cursor coordinates with spring dynamics and explode on click.
URL: https://lightswind.com/components/text-particle-animation
Import: import { TextParticleAnimation } from '@/components/lightswind/text-particle-animation';
Registry URL: https://lightswind.com/r/text-particle-animation.json
Install Command: npx lightswind@latest add text-particle-animation

Usage:
```tsx
import { TextParticleAnimation } from '@/components/lightswind/text-particle-animation';

<TextParticleAnimation
  text="LIGHTSWIND"
  fontSize={120}
  fontFamily="sans-serif"
  fontWeight={900}
  resolution={4}
  pixelSize={3}
  hoverRadius={60}
  repelForce={15}
  clickRadius={300}
  clickForce={80}
  springForce={0.08}
  friction={0.85}
  theme="light"
  padding={150}
/>
```

Source Code:
```tsx
"use client";

import React, { useEffect, useRef } from "react";

export interface TextParticleAnimationProps {
  text: string;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string | number;
  resolution?: number;
  pixelSize?: number;
  hoverRadius?: number;
  repelForce?: number;
  clickRadius?: number;
  clickForce?: number;
  springForce?: number;
  friction?: number;
  theme?: "light" | "dark";
  padding?: number;
  height?: number;
}

export function TextParticleAnimation({
  text,
  fontSize = 120,
  fontFamily = "sans-serif",
  fontWeight = 900,
  resolution = 4,
  pixelSize = 3,
  hoverRadius = 60,
  repelForce = 15,
  clickRadius = 300,
  clickForce = 80,
  springForce = 0.08,
  friction = 0.85,
  theme = "light",
  padding = 150,
  height,
}: TextParticleAnimationProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const canvas2 = canvas;

    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (!ctx) return;
    const ctx2 = ctx;

    let particles: Particle[] = [];
    let animationFrameId = 0;

    const mouse = { x: -1000, y: -1000 };

    const fontStr = `${fontWeight} ${fontSize}px ${fontFamily}`;
    ctx.font = fontStr;
    const metrics = ctx.measureText(text);

    const textWidth = metrics.width;
    const textHeight =
      (metrics.actualBoundingBoxAscent || fontSize) +
      (metrics.actualBoundingBoxDescent || 0);

    // Respect the height prop if specified, otherwise use calculated height
    canvas.width = textWidth + padding * 2;
    canvas.height = typeof height === "number" ? height : textHeight + padding * 2;

    ctx.font = fontStr;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = theme === "dark" ? "#ffffff" : "#121212";
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    class Particle {
      x: number;
      y: number;
      originX: number;
      originY: number;
      vx: number;
      vy: number;
      color: string;

      constructor(x: number, y: number, color: string) {
        this.x = x;
        this.y = y;
        this.originX = x;
        this.originY = y;
        this.vx = 0;
        this.vy = 0;
        this.color = color;
      }

      update() {
        const dx = mouse.x - this.x;
        const dy = mouse.y - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < hoverRadius) {
          const angle = Math.atan2(dy, dx);
          const force = (hoverRadius - distance) / hoverRadius;
          this.vx -= Math.cos(angle) * force * repelForce;
          this.vy -= Math.sin(angle) * force * repelForce;
        }

        this.vx += (this.originX - this.x) * springForce;
        this.vy += (this.originY - this.y) * springForce;

        this.vx *= friction;
        this.vy *= friction;

        this.x += this.vx;
        this.y += this.vy;
      }

      draw() {
        ctx2.fillStyle = this.color;
        ctx2.fillRect(this.x, this.y, pixelSize, pixelSize);
      }
    }

    function initParticles(data: ImageData) {
      particles = [];
      const d = data.data;

      for (let y = 0; y < canvas2.height; y += resolution) {
        for (let x = 0; x < canvas2.width; x += resolution) {
          const index = (y * canvas2.width + x) * 4;
          const alpha = d[index + 3];
          if (alpha > 10) {
            const r = d[index];
            const g = d[index + 1];
            const b = d[index + 2];
            particles.push(new Particle(x, y, `rgb(${r}, ${g}, ${b})`));
          }
        }
      }
    }

    function animate() {
      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
      for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
      }
      animationFrameId = window.requestAnimationFrame(animate);
    }

    const getMousePos = (e: MouseEvent) => {
      const rect = canvas2.getBoundingClientRect();
      const scaleX = canvas2.width / rect.width;
      const scaleY = canvas2.height / rect.height;
      return {
        x: (e.clientX - rect.left) * scaleX,
        y: (e.clientY - rect.top) * scaleY,
      };
    };

    const handleMouseMove = (e: MouseEvent) => {
      const pos = getMousePos(e);
      mouse.x = pos.x;
      mouse.y = pos.y;
    };

    const handleMouseLeave = () => {
      mouse.x = -1000;
      mouse.y = -1000;
    };

    const handleMouseDown = (e: MouseEvent) => {
      const pos = getMousePos(e);
      for (const p of particles) {
        const dx = pos.x - p.x;
        const dy = pos.y - p.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < clickRadius) {
          const angle = Math.atan2(dy, dx);
          const force = (clickRadius - distance) / clickRadius;
          p.vx -= Math.cos(angle) * force * clickForce;
          p.vy -= Math.sin(angle) * force * clickForce;
        }
      }
    };

    initParticles(imageData);
    animate();

    canvas2.addEventListener("mousemove", handleMouseMove);
    canvas2.addEventListener("mouseleave", handleMouseLeave);
    canvas2.addEventListener("mousedown", handleMouseDown);

    return () => {
      window.cancelAnimationFrame(animationFrameId);
      canvas2.removeEventListener("mousemove", handleMouseMove);
      canvas2.removeEventListener("mouseleave", handleMouseLeave);
      canvas2.removeEventListener("mousedown", handleMouseDown);
    };
  }, [
    text,
    fontSize,
    fontFamily,
    fontWeight,
    resolution,
    pixelSize,
    hoverRadius,
    repelForce,
    clickRadius,
    clickForce,
    springForce,
    friction,
    theme,
    padding,
    height,
  ]);

  return (
    <div className="flex w-full items-center justify-center overflow-visible">
      <canvas
        ref={canvasRef}
        className="block max-w-full select-none"
        style={{ height: typeof height === "number" ? `${height}px` : "auto" }}
      />
    </div>
  );
}

export default TextParticleAnimation;

```
--------------------------------------------------

## CATEGORY (FREE): UI Elements (23)

### COMPONENT: alert
Category: UI Elements
Description: Displays a callout for user attention with various severity levels.
URL: https://lightswind.com/components/alert
Import: import { Alert, AlertTitle, AlertDescription } from "@/components/lightswind/alert"
Registry URL: https://lightswind.com/r/alert.json
Install Command: npx lightswind@latest add alert

Usage:
```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { AlertCircle, CheckCircle, Info, X, AlertTriangle } from "lucide-react";

const alertVariants = {
  variant: {
    default: "bg-white dark:bg-black text-foreground",
    destructive:
      " border-gray-400 dark:border-gray-700/50 text-red-500  [&>svg]:text-destructive",
    success:
      "border-green-500/50 text-green-700 dark:text-green-500 [&>svg]:text-green-500",
    warning:
      "border-yellow-500/50 text-yellow-700 dark:text-yellow-500 [&>svg]:text-yellow-500",
    info:
      "border-[color-mix(in_srgb,var(--primarylw)_50%,transparent)] text-blue-700 dark:text-primarylw [&>svg]:text-primarylw",
  },
  size: {
    default: "p-4",
    sm: "p-3 text-sm",
    lg: "p-6 text-base"
  }
};

interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The style variant of the alert */
  variant?: keyof typeof alertVariants.variant;
  /** The size of the alert */
  size?: keyof typeof alertVariants.size;
  /** Whether the alert should be dismissible */
  dismissible?: boolean;
  /** Callback fired when dismissing the alert */
  onDismiss?: () => void;
  /** Whether to display an icon */
  withIcon?: boolean;
  /** Custom icon to display */
  icon?: React.ReactNode;
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ 
    className, 
    variant = "default", 
    size = "default", 
    dismissible = false,
    onDismiss,
    withIcon = false,
    icon,
    children,
    ...props 
  }, ref) => {
    // Icon mapping based on variant
    const variantIcons = {
      default: <Info className="h-4 w-4" />,
      destructive: <AlertCircle className="h-4 w-4" />,
      success: <CheckCircle className="h-4 w-4" />,
      warning: <AlertTriangle className="h-4 w-4" />,
      info: <Info className="h-4 w-4" />
    };

    const handleDismiss = () => {
      if (onDismiss) {
        onDismiss();
      }
    };

    return (
      <div
        ref={ref}
        role="alert"
        className={cn(
          "relative w-full rounded-lg border",
          withIcon && "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
          withIcon && "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]",
          alertVariants.variant[variant],
          alertVariants.size[size],
          className
        )}
        {...props}
      >
        {withIcon && (icon || variantIcons[variant])}
        {children}
        {dismissible && (
          <button
            className="absolute top-4 right-4 rounded-full p-1 
            text-foreground/70 opacity-70 
            transition-opacity hover:opacity-100 
            focus:outline-none focus:ring-2 focus:ring-ring 
            focus:ring-offset-2"
            onClick={handleDismiss}
            aria-label="Dismiss alert"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    );
  }
);
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement> & {
    /** Size of the title */
    size?: "sm" | "default" | "lg";
  }
>(({ className, size = "default", ...props }, ref) => {
  const sizeClasses = {
    sm: "text-sm",
    default: "text-base",
    lg: "text-lg"
  };

  return (
    <h5
      ref={ref}
      className={cn("mb-1 font-medium leading-none tracking-tight", sizeClasses[size], className)}
      {...props}
    />
  );
});
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement> & {
    /** Text color intensity */
    intensity?: "muted" | "default";
  }
>(({ className, intensity = "default", ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-sm [&_p]:leading-relaxed", 
      intensity === "muted" ? "text-muted-foreground" : "",
      className
    )}
    {...props}
  />
));
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };

```
--------------------------------------------------

### COMPONENT: alert-dialog
Category: UI Elements
Description: A modal dialog that interrupts the user with important content and expects a response.
URL: https://lightswind.com/components/alert-dialog
Import: import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/lightswind/alert-dialog"
Registry URL: https://lightswind.com/r/alert-dialog.json
Install Command: npx lightswind@latest add alert-dialog

Usage:
```tsx
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/lightswind/alert-dialog";
import { Button } from "@/components/lightswind/button";

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils";
import { buttonVariants } from "./button";
import { motion, AnimatePresence } from "framer-motion"; // Import motion and AnimatePresence

interface AlertDialogContextType {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const AlertDialogContext = React.createContext<AlertDialogContextType | undefined>(undefined);

interface AlertDialogProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  children,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
}) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback((value: boolean | ((prev: boolean) => boolean)) => {
    if (!isControlled) {
      setUncontrolledOpen(value);
    }
    if (onOpenChange) {
      const newValue = typeof value === "function" ? value(open) : value;
      onOpenChange(newValue);
    }
  }, [isControlled, onOpenChange, open]);

  return (
    <AlertDialogContext.Provider value={{ open, setOpen }}>
      {children}
    </AlertDialogContext.Provider>
  );
};

interface AlertDialogTriggerProps {
  children: React.ReactNode;
  asChild?: boolean;
}

const AlertDialogTrigger = React.forwardRef<HTMLButtonElement, AlertDialogTriggerProps & React.ButtonHTMLAttributes<HTMLButtonElement>>(
  ({ children, asChild = false, ...props }, ref) => {
    const context = React.useContext(AlertDialogContext);
    if (!context) {
      throw new Error("AlertDialogTrigger must be used within an AlertDialog");
    }

    const { setOpen } = context;

    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      setOpen(true);

      // Call the original onClick if it exists
      if (props.onClick) {
        props.onClick(e);
      }
    };

    // Remove onClick from props to avoid duplicate handlers
    const { onClick, ...otherProps } = props;

    if (asChild) {
      return (
        <>
          {React.Children.map(children, child => {
            if (React.isValidElement(child)) {
              const element = child as React.ReactElement<any>;
              return React.cloneElement(element, {
                ...element.props,
                ref,
                onClick: handleClick
              });
            }
            return child;
          })}
        </>
      );
    }

    return (
      <button
        ref={ref}
        type="button"
        onClick={handleClick}
        {...otherProps}
      >
        {children}
      </button>
    );
  }
);
AlertDialogTrigger.displayName = "AlertDialogTrigger";

const AlertDialogPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <>{children}</>;
};

const AlertDialogOverlay = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const context = React.useContext(AlertDialogContext);
  if (!context) {
    throw new Error("AlertDialogOverlay must be used within an AlertDialog");
  }

  const { open } = context;

  // It's less likely for AlertDialogOverlay to have conflicting props,
  // but if the error points here, apply the same filtering.
  // For now, we'll assume the primary issue is in AlertDialogContent.
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          ref={ref}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className={cn(
            "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
            className
          )}
          {...Object.keys(props).reduce((acc: { [key: string]: any }, key) => {
            if (key === 'onDrag' || key === 'onAnimationStart' || key === 'onTransitionEnd') {
              return acc;
            }
            acc[key] = (props as any)[key];
            return acc;
          }, {})}
        />
      )}
    </AnimatePresence>
  );
});
AlertDialogOverlay.displayName = "AlertDialogOverlay";

const AlertDialogContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => {
  const context = React.useContext(AlertDialogContext);
  if (!context) {
    throw new Error("AlertDialogContent must be used within an AlertDialog");
  }

  const { open, setOpen } = context;

  // Add click outside functionality
  const contentRef = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    if (!open) return;

    const handleClickOutside = (event: MouseEvent) => {
      if (contentRef.current && !contentRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [open, setOpen]);

  // Use AnimatePresence and motion.div for animation
  return (
    <AnimatePresence>
      {open && (
        <AlertDialogPortal>
          <AlertDialogOverlay />
          <motion.div
            ref={(node) => {
              // Standard ref handling
              if (typeof ref === "function") {
                ref(node);
              } else if (ref) {
                (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
              }
              // Content ref for click outside
              (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
            }}
            className={cn(
              "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border   bg-background p-6 shadow-lg sm:rounded-lg",
              className
            )}
            initial={{ opacity: 0, scale: 0.3, x: "-50%", y: "-50%" }}
            animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
            exit={{ opacity: 0, scale: 0.3, x: "-50%", y: "-50%" }}
            transition={{
              type: "spring",
              damping: 25,
              stiffness: 400,
              opacity: { duration: 0.2 }
            }}
            // Filter out properties that conflict with Framer Motion's types
            // This is the crucial part for resolving the type error.
            {...Object.keys(props).reduce((acc: { [key: string]: any }, key) => {
              // Add any other conflicting HTML attributes you might discover here.
              // 'onDrag' is the most common one.
              if (key === 'onDrag' || key === 'onAnimationStart' || key === 'onTransitionEnd') {
                return acc; // Omit this property
              }
              acc[key] = (props as any)[key]; // Keep other properties
              return acc;
            }, {})}
          >
            {children}
          </motion.div>
        </AlertDialogPortal>
      )}
    </AnimatePresence>
  );
});
AlertDialogContent.displayName = "AlertDialogContent";

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
);
AlertDialogHeader.displayName = "AlertDialogHeader";

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
);
AlertDialogFooter.displayName = "AlertDialogFooter";

const AlertDialogTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h2
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
));
AlertDialogTitle.displayName = "AlertDialogTitle";

const AlertDialogDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
));
AlertDialogDescription.displayName = "AlertDialogDescription";

interface AlertDialogActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }

const AlertDialogAction = React.forwardRef<
  HTMLButtonElement,
  AlertDialogActionProps
>(({ className, ...props }, ref) => {
  const context = React.useContext(AlertDialogContext);
  if (!context) {
    throw new Error("AlertDialogAction must be used within an AlertDialog");
  }

  const { setOpen } = context;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(false);

    // Call the original onClick if it exists
    if (props.onClick) {
      props.onClick(e);
    }
  };

  // Remove onClick from props to avoid duplicate handlers
  const { onClick, ...otherProps } = props;

  return (
    <button
      ref={ref}
      className={cn(buttonVariants(), className)}
      onClick={handleClick}
      {...otherProps}
    />
  );
});
AlertDialogAction.displayName = "AlertDialogAction";

interface AlertDialogCancelProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }

const AlertDialogCancel = React.forwardRef<
  HTMLButtonElement,
  AlertDialogCancelProps
>(({ className, ...props }, ref) => {
  const context = React.useContext(AlertDialogContext);
  if (!context) {
    throw new Error("AlertDialogCancel must be used within an AlertDialog");
  }

  const { setOpen } = context;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(false);

    // Call the original onClick if it exists
    if (props.onClick) {
      props.onClick(e);
    }
  };

  // Remove onClick from props to avoid duplicate handlers
  const { onClick, ...otherProps } = props;

  return (
    <button
      ref={ref}
      className={cn(
        buttonVariants({ variant: "outline" }),
        "mt-2 sm:mt-0",
        className
      )}
      onClick={handleClick}
      {...otherProps}
    />
  );
});
AlertDialogCancel.displayName = "AlertDialogCancel";

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
};
```
--------------------------------------------------

### COMPONENT: avatar
Category: UI Elements
Description: An image element with a fallback for representing the user.
URL: https://lightswind.com/components/avatar
Import: import { Avatar, AvatarImage, AvatarFallback } from "@/components/lightswind/avatar"
Registry URL: https://lightswind.com/r/avatar.json
Install Command: npx lightswind@latest add avatar

Usage:
```tsx
import { Avatar, AvatarImage, AvatarFallback } from "@/components/lightswind/avatar";

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80" alt="@avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
  src?: string;
  alt?: string;
  fallback?: React.ReactNode;
  status?: "online" | "offline" | "away" | "busy" | null;
}

const DEFAULT_AVATAR = `https://robohash.org/${Math.random().toString(36).substring(7)}.png`;


const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
  ({ className, src, alt, fallback, status, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
          "transition-all duration-300 ease-in-out hover:scale-105",
          className
        )}
        {...props}
      />
    );
  }
);

Avatar.displayName = "Avatar";

interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}

const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
  ({ className, src, alt, onError, onLoad, ...props }, ref) => {
    const [isLoaded, setIsLoaded] = React.useState(false);
    const [imgError, setImgError] = React.useState(false);

    const hasImage = !!src && !imgError;

    const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
      console.log("AvatarImage error occurred, showing fallback");
      setImgError(true);
      if (onError) onError(e);
    };

    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
      setIsLoaded(true);
      if (onLoad) onLoad(e);
    };

    if (!hasImage) {
      return null;
    }

    return (
      <img
        ref={ref}
        src={src}
        alt={alt || "Avatar"}
        className={cn(
          "relative z-10 aspect-square h-full w-full object-cover rounded-full",
          "transition-opacity duration-300 ease-in-out",
          isLoaded ? "opacity-100" : "opacity-0",
          className
        )}
        onError={handleError}
        onLoad={handleLoad}
        {...props}
      />
    );
  }
);
AvatarImage.displayName = "AvatarImage";

interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {}

const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "absolute inset-0 flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-semibold",
        "animate-in fade-in-0 zoom-in-0 duration-300",
        className
      )}
      {...props}
    />
  )
);
AvatarFallback.displayName = "AvatarFallback";

export { Avatar, AvatarImage, AvatarFallback };

```
--------------------------------------------------

### COMPONENT: badge
Category: UI Elements
Description: A small visual indicator used to highlight an item, indicate status, or emphasize information.
URL: https://lightswind.com/components/badge
Import: import { Badge } from "@/components/lightswind/badge"
Registry URL: https://lightswind.com/r/badge.json
Install Command: npx lightswind@latest add badge

Usage:
```tsx
import { Badge } from "@/components/lightswind/badge";

export function BadgeDemo() {
  return <Badge>New</Badge>;
}
```

Source Code:
```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/components/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "badge-3d-default",
        secondary:
          "badge-3d-secondary",
        destructive:
          "badge-3d-destructive",
        outline:
          "badge-3d-outline",
        success:
          "badge-3d-success",
        warning:
          "badge-3d-warning",
        info:
          "badge-3d-info",
        unstyled: "",
      },
      size: {
        default: "px-2.5 py-0.5 text-xs",
        sm: "px-2 py-0.5 text-xs",
        lg: "px-3 py-1 text-sm",
        unstyled: "",
      },
      shape: {
        default: "rounded-full",
        square: "rounded-sm",
        rounded: "rounded-md",
        unstyled: "",
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      shape: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  withDot?: boolean;
  dotColor?: string;
  interactive?: boolean;
  highlighted?: boolean;
}

function Badge({ 
  className, 
  variant, 
  size,
  shape,
  withDot,
  dotColor = "currentColor",
  interactive,
  highlighted,
  ...props 
}: BadgeProps) {
  return (
    <div 
      className={cn(
        badgeVariants({ variant, size, shape }), 
        interactive && "cursor-pointer hover:opacity-80",
        highlighted && "ring-2 ring-offset-2 ring-ring",
        className
      )} 
      {...props}
    >
      {withDot && (
        <span 
          className="mr-1 h-1.5 w-1.5 rounded-full inline-block" 
          style={{ backgroundColor: dotColor }}
        />
      )}
      {props.children}
    </div>
  )
}

export { Badge, badgeVariants }

```
--------------------------------------------------

### COMPONENT: button
Category: UI Elements
Description: A clickable element that triggers an action or event when activated.
URL: https://lightswind.com/components/button
Import: import { Button } from "@/components/lightswind/button"
Registry URL: https://lightswind.com/r/button.json
Install Command: npx lightswind@latest add button

Usage:
```tsx
import { Button } from "@/components/lightswind/button";

export function ButtonDemo() {
  return (
    <Button>Click me</Button>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

// Define button style variants as a constant object (not exported)
const buttonStyles = {
  variant: {
    default: "btn-3d-default",
    destructive: "btn-3d-destructive",
    outline: "btn-3d-outline",
    secondary: "btn-3d-secondary",
    ghost: "btn-3d-ghost",
    link: "btn-3d-link",
    github: "btn-3d-github",
    custom: "btn-3d-custom",
    unstyled: "",
  },
  size: {
    default: "h-10 px-4 py-2 rounded-lg",
    sm: "h-9 px-3 rounded-md",
    lg: "h-11 px-8 rounded-xl",
    icon: "h-10 w-10 rounded-lg",
    unstyled: "",
  }
};

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: keyof typeof buttonStyles.variant;
  size?: keyof typeof buttonStyles.size;
  asChild?: boolean;
}

// Define the buttonVariants function (exported)
export function buttonVariants(options: {
  variant?: keyof typeof buttonStyles.variant;
  size?: keyof typeof buttonStyles.size;
  className?: string;
} = {}): string {
  const { variant = "default", size = "default", className } = options;

  return cn(
    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
    buttonStyles.variant[variant],
    buttonStyles.size[size],
    className
  );
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
    if (asChild) {
      return (
        <React.Fragment>
          {React.Children.map(props.children, child => {
            if (React.isValidElement(child)) {
              // Instead of cloneElement with complex props, use a wrapper
              return (
                <span className={buttonVariants({ variant, size, className })}>
                  {child}
                </span>
              );
            }
            return child;
          })}
        </React.Fragment>
      );
    }

    return (
      <button
        className={buttonVariants({ variant, size, className })}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button };

```
--------------------------------------------------

### COMPONENT: card
Category: UI Elements
Description: A container that groups related content and actions.
URL: https://lightswind.com/components/card
Import: import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/lightswind/card"
Registry URL: https://lightswind.com/r/card.json
Install Command: npx lightswind@latest add card

Usage:
```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/lightswind/card";
import { Button } from "@/components/lightswind/button";

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Makes the card have a hover effect */
  hoverable?: boolean;
  /** Makes the card have a bordered appearance */
  bordered?: boolean;
  /** Renders the card with compact padding */
  compact?: boolean;
}

const Card = React.forwardRef<
  HTMLDivElement,
  CardProps
>(({ className, hoverable = false, bordered = false, compact = false, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-2xl bg-white/80 dark:bg-zinc-900/60 text-card-foreground backdrop-blur-md border border-zinc-200/80 dark:border-zinc-800/80 shadow-xs transition-all duration-300",
      bordered && "border border-zinc-200/80 dark:border-zinc-800/80",
      hoverable ? "hover:shadow-xl hover:shadow-primarylw/5 hover:border-zinc-300 dark:hover:border-zinc-700/80 hover:-translate-y-0.5" : "",
      compact ? "p-3 sm:p-4" : "p-0",
      className
    )}
    {...props}
  />
));
Card.displayName = "Card";

interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Adjusts the spacing in the header */
  spacing?: "default" | "compact" | "relaxed";
}

const CardHeader = React.forwardRef<
  HTMLDivElement,
  CardHeaderProps
>(({ className, spacing = "default", ...props }, ref) => {
  const spacingClasses = {
    compact: "flex flex-col space-y-1 p-4",
    default: "flex flex-col space-y-1.5 p-6",
    relaxed: "flex flex-col space-y-2 p-8",
  };

  return (
    <div
      ref={ref}
      className={cn(spacingClasses[spacing], className)}
      {...props}
    />
  );
});
CardHeader.displayName = "CardHeader";

interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  /** HTML heading level to use */
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  /** Adjusts the text size */
  size?: "sm" | "default" | "lg";
}

const CardTitle = React.forwardRef<
  HTMLParagraphElement,
  CardTitleProps
>(({ className, as = "h3", size = "default", ...props }, ref) => {
  const Component = as;
  const sizeClasses = {
    sm: "text-lg",
    default: "text-2xl",
    lg: "text-3xl"
  };

  return (
    <Component
      ref={ref}
      className={cn(
        "font-semibold leading-none tracking-tight",
        sizeClasses[size],
        className
      )}
      {...props}
    />
  );
});
CardTitle.displayName = "CardTitle";

interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
  /** Makes text smaller or larger */
  size?: "xs" | "sm" | "default";
}

const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  CardDescriptionProps
>(({ className, size = "default", ...props }, ref) => {
  const sizeClasses = {
    xs: "text-xs",
    sm: "text-sm",
    default: "text-sm"
  };

  return (
    <p
      ref={ref}
      className={cn(
        "text-muted-foreground",
        sizeClasses[size],
        className
      )}
      {...props}
    />
  );
});
CardDescription.displayName = "CardDescription";

interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Removes the top padding when used after CardHeader */
  removeTopPadding?: boolean;
  /** Adjusts content padding */
  padding?: "none" | "sm" | "default" | "lg";
}

const CardContent = React.forwardRef<
  HTMLDivElement,
  CardContentProps
>(({ className, removeTopPadding = true, padding = "default", ...props }, ref) => {
  const paddingClasses = {
    none: "p-0",
    sm: "px-4 py-3",
    default: "p-6",
    lg: "p-8"
  };

  return (
    <div 
      ref={ref} 
      className={cn(
        paddingClasses[padding], 
        removeTopPadding && padding !== "none" ? "pt-0" : "",
        className
      )} 
      {...props}
    />
  );
});
CardContent.displayName = "CardContent";

interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Changes the alignment of footer items */
  align?: "start" | "center" | "end" | "between" | "around";
  /** Changes the direction of footer items */
  direction?: "row" | "column";
}

const CardFooter = React.forwardRef<
  HTMLDivElement,
  CardFooterProps
>(({ className, align = "center", direction = "row", ...props }, ref) => {
  const alignClasses = {
    start: "justify-start",
    center: "justify-center",
    end: "justify-end",
    between: "justify-between",
    around: "justify-around"
  };

  const directionClasses = {
    row: "flex-row",
    column: "flex-col"
  };

  return (
    <div
      ref={ref}
      className={cn(
        "flex items-center p-6 pt-0",
        alignClasses[align],
        directionClasses[direction],
        className
      )}
      {...props}
    />
  );
});
CardFooter.displayName = "CardFooter";

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

```
--------------------------------------------------

### COMPONENT: carousel
Category: UI Elements
Description: A carousel component with scroll controls and pagination.
URL: https://lightswind.com/components/carousel
Import: import { 
  Carousel, 
  CarouselContent, 
  CarouselItem, 
  CarouselPrevious, 
  CarouselNext 
} from "@/components/lightswind/carousel"
Registry URL: https://lightswind.com/r/carousel.json
Install Command: npx lightswind@latest add carousel

Usage:
```tsx
<Carousel>
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item.id}>
        <div className="p-1">
          <Card>
            <CardContent className="flex aspect-square items-center justify-center p-6">
              <span className="text-4xl font-semibold">{item.title}</span>
            </CardContent>
          </Card>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

Source Code:
```tsx
import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/components/lib/utils"
import { Button } from "./button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) {
        return
      }

      onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

      return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}

```
--------------------------------------------------

### COMPONENT: chart
Category: UI Elements
Description: A versatile chart component built on Recharts that supports various chart types like line, bar, area, and pie charts.
URL: https://lightswind.com/components/chart
Import: import { Chart } from "@/components/lightswind/chart"
Registry URL: https://lightswind.com/r/chart.json
Install Command: npx lightswind@latest add chart

Usage:
```tsx
import { Chart } from "@/components/lightswind/chart";

export function LineChartExample() {
  const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 },
    { name: 'Apr', value: 800 },
    { name: 'May', value: 500 },
    { name: 'Jun', value: 900 },
  ];

  return (
    <Chart 
      type="line" 
      data={data}
      xAxis="name"
      series={[{ key: "value", name: "Revenue" }]}
      height={300}
    />
  );
}
```

Source Code:
```tsx
import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/components/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

    const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

      const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

      if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

      if (!value) {
        return null
      }

      return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

    if (!active || !payload?.length) {
      return null
    }

    const nestLabel = payload.length === 1 && indicator !== "dot"

    return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border   bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

    if (!payload?.length) {
      return null
    }

    return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}

```
--------------------------------------------------

### COMPONENT: collapsible
Category: UI Elements
Description: An interactive component that can be expanded or collapsed to reveal or hide content.
URL: https://lightswind.com/components/collapsible
Import: import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent
} from "@/components/lightswind/collapsible"
Registry URL: https://lightswind.com/r/collapsible.json
Install Command: npx lightswind@latest add collapsible

Usage:
```tsx
<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Content that can be expanded or collapsed.</p>
  </CollapsibleContent>
</Collapsible>
```

Source Code:
```tsx
import * as React from "react";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming you have a utility for combining class names

// --- Context ---
interface CollapsibleContextValue {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  disabled?: boolean;
}

const CollapsibleContext = React.createContext<
  CollapsibleContextValue | undefined
>(undefined);

// --- Root Component ---
interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
  open?: boolean;
  defaultOpen?: boolean;
  disabled?: boolean;
  onOpenChange?: (open: boolean) => void;
}

const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
  (
    {
      children,
      open,
      defaultOpen = false,
      disabled = false,
      onOpenChange,
      className,
      ...props
    },
    ref
  ) => {
    const [isOpen, setIsOpen] = React.useState(defaultOpen);

    const isControlled = open !== undefined;
    const currentOpen = isControlled ? open : isOpen;

    const handleOpenChange = React.useCallback(
      (value: boolean) => {
        if (disabled) return;
        if (!isControlled) {
          setIsOpen(value);
        }
        onOpenChange?.(value);
      },
      [disabled, isControlled, onOpenChange]
    );

    return (
      <CollapsibleContext.Provider
        value={{ open: currentOpen!, onOpenChange: handleOpenChange, disabled }}
      >
        <div
          ref={ref}
          className={cn("", className)}
          data-state={currentOpen ? "open" : "closed"}
          data-disabled={disabled ? "" : undefined}
          {...props}
        >
          {children}
        </div>
      </CollapsibleContext.Provider>
    );
  }
);
Collapsible.displayName = "Collapsible";

// --- Trigger Component ---
interface CollapsibleTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const CollapsibleTrigger = React.forwardRef<
  HTMLButtonElement,
  CollapsibleTriggerProps
>(({ className, children, asChild = false, ...props }, ref) => {
  const context = React.useContext(CollapsibleContext);
  if (!context) {
    throw new Error("CollapsibleTrigger must be used within a Collapsible");
  }

  const { open, onOpenChange, disabled } = context;

  const handleClick = () => {
    onOpenChange(!open);
  };

  if (asChild) {
    return (
      <>
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            const element = child as React.ReactElement<any>;
            return React.cloneElement(element, {
              ...element.props,
              ref,
              onClick: (e: React.MouseEvent) => {
                handleClick();
                if (element.props.onClick) {
                  element.props.onClick(e);
                }
              },
              disabled: disabled || element.props.disabled,
              "data-state": open ? "open" : "closed",
              "data-disabled": disabled ? "" : undefined,
              "aria-expanded": open,
            });
          }
          return child;
        })}
      </>
    );
  }

  return (
    <button
      ref={ref}
      type="button"
      disabled={disabled}
      data-state={open ? "open" : "closed"}
      data-disabled={disabled ? "" : undefined}
      aria-expanded={open}
      className={cn("", className)}
      onClick={handleClick}
      {...props}
    >
      {children}
    </button>
  );
});
CollapsibleTrigger.displayName = "CollapsibleTrigger";

// --- Content Component ---
// Omit event handlers that conflict with Framer Motion's types
type OmittedHTMLAttributes = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  | "onAnimationStart"
  | "onAnimationEnd"
  | "onAnimationIteration"
  | "onTransitionEnd"
  | "onDrag"
  | "onDragEnd"
  | "onDragEnter"
  | "onDragExit"
  | "onDragLeave"
  | "onDragOver"
  | "onDragStart"
  | "onDrop"
  | "onMouseDown"
  | "onMouseEnter"
  | "onMouseLeave"
  | "onMouseMove"
  | "onMouseOut"
  | "onMouseOver"
  | "onMouseUp"
  | "onTouchCancel"
  | "onTouchEnd"
  | "onTouchMove"
  | "onTouchStart"
  | "onPointerDown"
  | "onPointerMove"
  | "onPointerUp"
  | "onPointerCancel"
  | "onPointerEnter"
  | "onPointerLeave"
  | "onPointerOver"
  | "onPointerOut"
  | "onGotPointerCapture"
  | "onLostPointerCapture"
>;

interface CollapsibleContentProps extends OmittedHTMLAttributes {
  forceMount?: boolean;
}

const CollapsibleContent = React.forwardRef<
  HTMLDivElement,
  CollapsibleContentProps
>(({ className, children, forceMount, ...props }, ref) => {
  const context = React.useContext(CollapsibleContext);
  if (!context) {
    throw new Error("CollapsibleContent must be used within a Collapsible");
  }

  const { open } = context;
  const contentRef = React.useRef<HTMLDivElement>(null);

  React.useImperativeHandle(ref, () => contentRef.current!);

  // Framer Motion variants for a professional, smooth animation
  const variants = {
    closed: {
      height: 0,
      opacity: 0,
      scale: 0.98,
      y: -10,
      transition: {
        height: { duration: 0.2 },
        opacity: { duration: 0.15 },
        scale: { duration: 0.2 },
        y: { duration: 0.2 }
      }
    },
    open: {
      height: "auto",
      opacity: 1,
      scale: 1,
      y: 0,
      transition: {
        height: {
          type: "spring",
          damping: 25,
          stiffness: 300
        } as any,
        opacity: { duration: 0.2, delay: 0.05 },
        scale: {
          type: "spring",
          damping: 20,
          stiffness: 200
        } as any,
        y: {
          type: "spring",
          damping: 20,
          stiffness: 200
        } as any
      }
    },
  };

  return (
    <AnimatePresence initial={false}>
      {(open || forceMount) && (
        <motion.div
          key="collapsible-content"
          initial="closed"
          animate="open"
          exit="closed"
          variants={variants}
          style={{ overflow: "hidden" }} // Crucial for a smooth height animation
          className={cn(className)}
          data-state={open ? "open" : "closed"}
          {...(props as HTMLMotionProps<"div">)}
        >
          {/* This inner div is what we measure if we needed it, but height: auto handles it now */}
          <div>{children}</div>
        </motion.div>
      )}
    </AnimatePresence>
  );
});
CollapsibleContent.displayName = "CollapsibleContent";

export { Collapsible, CollapsibleTrigger, CollapsibleContent };
```
--------------------------------------------------

### COMPONENT: context-menu
Category: UI Elements
Description: Displays a context menu when the user right-clicks or uses the context menu key on an element.
URL: https://lightswind.com/components/context-menu
Import: import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@/components/lightswind/context-menu"
Registry URL: https://lightswind.com/r/context-menu.json
Install Command: npx lightswind@latest add context-menu

Usage:
```tsx
// Basic usage
<ContextMenu>
  <ContextMenuTrigger>
    <div className="border p-4 rounded">
      Right click me
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Settings</ContextMenuItem>
    <ContextMenuItem>Logout</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

Source Code:
```tsx

import * as React from "react";
import { Check, ChevronRight, Circle } from "lucide-react";
import { cn } from "@/components/lib/utils";

type ContextMenuContextValue = {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  position: { x: number; y: number };
  setPosition: React.Dispatch<React.SetStateAction<{ x: number; y: number }>>;
  subMenuOpen: Record<string, boolean>;
  setSubMenuOpen: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
  activeItem: string | null;
  setActiveItem: React.Dispatch<React.SetStateAction<string | null>>;
};

const ContextMenuContext = React.createContext<ContextMenuContextValue | undefined>(undefined);

function useContextMenu() {
  const context = React.useContext(ContextMenuContext);
  if (!context) {
    throw new Error("useContextMenu must be used within a ContextMenu");
  }
  return context;
}

interface ContextMenuProps {
  children: React.ReactNode;
}

const ContextMenu = ({ children }: ContextMenuProps) => {
  const [open, setOpen] = React.useState(false);
  const [position, setPosition] = React.useState({ x: 0, y: 0 });
  const [subMenuOpen, setSubMenuOpen] = React.useState<Record<string, boolean>>({});
  const [activeItem, setActiveItem] = React.useState<string | null>(null);

  return (
    <ContextMenuContext.Provider
      value={{
        open,
        setOpen,
        position,
        setPosition,
        subMenuOpen,
        setSubMenuOpen,
        activeItem,
        setActiveItem,
      }}
    >
      {children}
    </ContextMenuContext.Provider>
  );
};

interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> { }

const ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(
  ({ children, ...props }, ref) => {
    const { setOpen, setPosition } = useContextMenu();

    const handleContextMenu = (e: React.MouseEvent) => {
      e.preventDefault();
      setPosition({ x: e.clientX, y: e.clientY });
      setOpen(true);
    };

    return (
      <div ref={ref} onContextMenu={handleContextMenu} {...props}>
        {children}
      </div>
    );
  }
);
ContextMenuTrigger.displayName = "ContextMenuTrigger";

interface ContextMenuPortalProps {
  children: React.ReactNode;
}

const ContextMenuPortal = ({ children }: ContextMenuPortalProps) => {
  return <>{children}</>;
};

interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> { }

import { motion, AnimatePresence } from "framer-motion";

const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(
  ({ className, children, ...props }, ref) => {
    const { open, position, setOpen } = useContextMenu();
    const contentRef = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
      if (open) {
        const handleOutsideClick = (e: MouseEvent) => {
          if (contentRef.current && !contentRef.current.contains(e.target as Node)) {
            setOpen(false);
          }
        };

        document.addEventListener("mousedown", handleOutsideClick);
        return () => {
          document.removeEventListener("mousedown", handleOutsideClick);
        };
      }
    }, [open, setOpen]);

    return (
      <AnimatePresence>
        {open && (
          <ContextMenuPortal>
            <motion.div
              ref={(node) => {
                if (typeof ref === "function") ref(node);
                else if (ref) (ref as any).current = node;
                (contentRef as any).current = node;
              }}
              initial={{ opacity: 0, scale: 0.3, transformOrigin: "top left" }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.3 }}
              transition={{
                type: "spring",
                damping: 20,
                stiffness: 300,
                opacity: { duration: 0.15 }
              }}
              style={{
                position: "fixed",
                top: `${position.y}px`,
                left: `${position.x}px`,
                zIndex: 9999
              }}
              className={cn(
                "z-50 min-w-[10rem] overflow-hidden rounded-xl border bg-background/95 backdrop-blur-xl p-1 text-popover-foreground shadow-2xl animate-in fade-in zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
                className
              )}
              {...(props as any)}
            >
              {children}
            </motion.div>
          </ContextMenuPortal>
        )}
      </AnimatePresence>
    );
  }
);
ContextMenuContent.displayName = "ContextMenuContent";

interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  inset?: boolean;
}

const ContextMenuItem = React.forwardRef<HTMLButtonElement, ContextMenuItemProps>(
  ({ className, inset, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(
          "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          inset && "pl-8",
          className
        )}
        {...props}
      />
    );
  }
);
ContextMenuItem.displayName = "ContextMenuItem";

// Simplified implementation of other context menu components
const ContextMenuCheckboxItem = ({ children, checked, className, ...props }: React.HTMLAttributes<HTMLButtonElement> & { checked?: boolean }) => (
  <button
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      {checked && <Check className="h-4 w-4" />}
    </span>
    {children}
  </button>
);

const ContextMenuRadioItem = ({ children, className, ...props }: React.HTMLAttributes<HTMLButtonElement>) => (
  <button
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <Circle className="h-2 w-2 fill-current" />
    </span>
    {children}
  </button>
);

const ContextMenuLabel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }
>(({ className, inset, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
));
ContextMenuLabel.displayName = "ContextMenuLabel";

const ContextMenuSeparator = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-background", className)}
    {...props}
  />
));
ContextMenuSeparator.displayName = "ContextMenuSeparator";

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  );
};

// Simplified implementations for remaining context menu components
const ContextMenuGroup = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div {...props}>{children}</div>
);

const ContextMenuSub = ({ children }: { children: React.ReactNode }) => {
  return <>{children}</>;
};

const ContextMenuSubTrigger = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & { inset?: boolean }
>(({ className, inset, children, ...props }, ref) => (
  <button
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </button>
));
ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";

const ContextMenuSubContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border   bg-popover p-1 text-popover-foreground shadow-md",
      className
    )}
    {...props}
  />
));
ContextMenuSubContent.displayName = "ContextMenuSubContent";

const ContextMenuRadioGroup = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div {...props}>{children}</div>
);

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
};

```
--------------------------------------------------

### COMPONENT: dialog
Category: UI Elements
Description: A modal window overlaid on the primary window, rendering content that requires user interaction.
URL: https://lightswind.com/components/dialog
Import: import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@/components/lightswind/dialog"
Registry URL: https://lightswind.com/r/dialog.json
Install Command: npx lightswind@latest add dialog

Usage:
```tsx
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

Source Code:
```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { cn } from "@/components/lib/utils"; // Assuming a utility for classnames
import { X } from "lucide-react";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";

// Helper for cn if not provided
const dummyCn = (...inputs) => {
    return inputs.filter(Boolean).join(' ');
};
const cnFunction = typeof cn !== 'undefined' ? cn : dummyCn;


interface DialogContextType {
    open: boolean;
    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const DialogContext = React.createContext<DialogContextType | undefined>(undefined);

interface DialogProps {
    children: React.ReactNode;
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
}

const Dialog: React.FC<DialogProps> = ({
    children,
    defaultOpen = false,
    open: controlledOpen,
    onOpenChange,
}) => {
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

    const isControlled = controlledOpen !== undefined;
    const open = isControlled ? controlledOpen : uncontrolledOpen;

    const setOpen = React.useCallback((value: boolean | ((prev: boolean) => boolean)) => {
        if (!isControlled) {
            setUncontrolledOpen(value);
        }
        if (onOpenChange) {
            const newValue = typeof value === "function" ? value(open) : value;
            onOpenChange(newValue);
        }
    }, [isControlled, onOpenChange, open]);

    return (
        <DialogContext.Provider value={{ open, setOpen }}>
            {children}
        </DialogContext.Provider>
    );
};

interface DialogTriggerProps {
    children: React.ReactNode;
    asChild?: boolean;
}

const DialogTrigger = React.forwardRef<HTMLDivElement, DialogTriggerProps & React.HTMLAttributes<HTMLDivElement>>(
    ({ children, asChild = false, ...props }, ref) => {
        const context = React.useContext(DialogContext);
        if (!context) {
            throw new Error("DialogTrigger must be used within a Dialog");
        }

        const { setOpen } = context;

        const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
            e.preventDefault();
            setOpen(true);

            if (props.onClick) {
                props.onClick(e);
            }
        };

        const { onClick, ...otherProps } = props;

        if (asChild) {
            return (
                <div
                    ref={ref}
                    onClick={handleClick}
                    {...otherProps}
                >
                    {React.Children.map(children, child => {
                        if (React.isValidElement(child)) {
                            const element = child as React.ReactElement<any>;
                            return React.cloneElement(element, {
                                ...element.props
                            });
                        }
                        return child;
                    })}
                </div>
            );
        }

        return (
            <div
                ref={ref}
                onClick={handleClick}
                {...otherProps}
            >
                {children}
            </div>
        );
    }
);
DialogTrigger.displayName = "DialogTrigger";

type OmittedDialogContentHTMLAttributes = Omit<React.HTMLAttributes<HTMLDivElement>,
    'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' |
    'onTransitionEnd' | 'onDrag' | 'onDragEnd' | 'onDragEnter' |
    'onDragExit' | 'onDragLeave' | 'onDragOver' | 'onDragStart' |
    'onDrop' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' |
    'onMouseMove' | 'onMouseOut' | 'onMouseOver' | 'onMouseUp' |
    'onTouchCancel' | 'onTouchEnd' | 'onTouchMove' | 'onTouchStart' |
    'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel' |
    'onPointerEnter' | 'onPointerLeave' | 'onPointerOver' | 'onPointerOut' |
    'onGotPointerCapture' | 'onLostPointerCapture'
>;

// Define Props Interface
interface DialogContentProps extends OmittedDialogContentHTMLAttributes {
    hideCloseButton?: boolean;
}

const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
    ({ className, children, hideCloseButton, ...props }, ref) => {
        const context = React.useContext(DialogContext);
        if (!context) {
            throw new Error("DialogContent must be used within a Dialog");
        }

        const { open, setOpen } = context;

        const [mounted, setMounted] = React.useState(false);

        React.useEffect(() => {
            setMounted(true);
        }, []);

        React.useEffect(() => {
            if (open) {
                document.body.style.overflow = "hidden";
            } else {
                document.body.style.overflow = "";
            }
            return () => {
                document.body.style.overflow = "";
            };
        }, [open]);

        if (!mounted) return null;

        return ReactDOM.createPortal(
            <AnimatePresence>
                {open && (
                    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
                        {/* Backdrop Overlay */}
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            transition={{ duration: 0.2 }}
                            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
                            onClick={() => setOpen(false)}
                        />

                        {/* Dialog Content */}
                        <motion.div
                            ref={ref}
                            initial={{ opacity: 0, scale: 0.3 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.3 }}
                            transition={{
                                type: "spring",
                                damping: 25,
                                stiffness: 400,
                                opacity: { duration: 0.2 }
                            }}
                            className={cnFunction(
                                `relative z-[9999] w-full max-w-lg rounded-2xl border 
                bg-background p-6 shadow-lg max-h-[90vh] overflow-y-auto`,
                                className
                            )}
                            role="dialog"
                            aria-modal="true"
                            data-lenis-prevent
                            {...props as HTMLMotionProps<'div'>}
                        >
                            {children}
                            {!hideCloseButton && (
                                <button
                                    onClick={() => setOpen(false)}
                                    className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
                                    aria-label="Close dialog"
                                >
                                    <X className="h-4 w-4" />
                                    <span className="sr-only">Close</span>
                                </button>
                            )}
                        </motion.div>
                    </div>
                )}
            </AnimatePresence>,
            document.body
        );
    }
);
DialogContent.displayName = "DialogContent";

const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
        <div
            ref={ref}
            className={cnFunction("flex flex-col space-y-1.5 text-center sm:text-left", className)}
            {...props}
        />
    )
);
DialogHeader.displayName = "DialogHeader";

const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
        <h2
            ref={ref}
            className={cnFunction(
                "text-lg font-semibold leading-none tracking-tight",
                className
            )}
            {...props}
        />
    )
);
DialogTitle.displayName = "DialogTitle";

const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
        <p
            ref={ref}
            className={cnFunction("text-sm text-muted-foreground", className)}
            {...props}
        />
    )
);
DialogDescription.displayName = "DialogDescription";

const DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
        <div
            ref={ref}
            className={cnFunction(
                "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
                className
            )}
            {...props}
        />
    )
);
DialogFooter.displayName = "DialogFooter";

const DialogClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
    ({ className, ...props }, ref) => {
        const context = React.useContext(DialogContext);
        const setOpen = context ? context.setOpen : () => { };

        return (
            <button
                ref={ref}
                type="button"
                className={className}
                onClick={(e) => {
                    setOpen(false);
                    props.onClick?.(e);
                }}
                {...props}
            />
        );
    }
);
DialogClose.displayName = "DialogClose";

export {
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
    DialogClose
};

```
--------------------------------------------------

### COMPONENT: dock
Category: UI Elements
Description: A customizable macOS-style dock component with proximity-based magnification, badges, frosted glass, separators, and full layout control.
URL: https://lightswind.com/components/dock
Import: import Dock from '@/components/lightswind/dock';
Registry URL: https://lightswind.com/r/dock.json
Install Command: npx lightswind@latest add dock

Usage:
```tsx
import Dock from '@/components/lightswind/dock';
import { Home, Settings, Mail, Calendar, Music, User } from 'lucide-react';

const dockItems = [
  { icon: <Home size={22} />, label: 'Home', onClick: () => console.log('Home') },
  { icon: <Mail size={22} />, label: 'Mail', onClick: () => console.log('Mail'), badgeCount: 4 },
  { icon: <Calendar size={22} />, label: 'Calendar', onClick: () => console.log('Calendar') },
  { icon: <Music size={22} />, label: 'Music', onClick: () => console.log('Music') },
  { icon: <Settings size={22} />, label: 'Settings', onClick: () => console.log('Settings') },
  { icon: <User size={22} />, label: 'Profile', onClick: () => console.log('Profile'), badgeCount: 1 },
];

<Dock
  items={dockItems}
  magnification={70}
  baseItemSize={50}
  distance={200}
  blurBackground
  labelPosition="top"
  badgeColor="bg-red-500"
/>
```

Source Code:
```tsx
"use client";

import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  AnimatePresence,
  MotionValue,
} from "framer-motion";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/components/lib/utils";

function useDockItemSize(
  mouseX: MotionValue<number>,
  baseItemSize: number,
  magnification: number,
  distance: number,
  ref: React.RefObject<HTMLDivElement | null>,
  spring: { mass: number; stiffness: number; damping: number }
) {
  const mouseDistance = useTransform(mouseX, (val) => {
    if (typeof val !== "number" || isNaN(val)) return 0;
    const rect = ref.current?.getBoundingClientRect() ?? {
      x: 0,
      width: baseItemSize,
    };
    return val - rect.x - baseItemSize / 2;
  });

  const targetSize = useTransform(
    mouseDistance,
    [-distance, 0, distance],
    [baseItemSize, magnification, baseItemSize]
  );

  return useSpring(targetSize, spring);
}

interface DockItemProps {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  mouseX: MotionValue<number>;
  baseItemSize: number;
  magnification: number;
  distance: number;
  spring: { mass: number; stiffness: number; damping: number };
  badgeCount?: number;
  badgeColor?: string;
  itemBackground?: string;
  itemBorderColor?: string;
  borderRadius?: string;
  hideLabels?: boolean;
  labelPosition?: "top" | "bottom";
  labelBackground?: string;
  labelTextColor?: string;
}

function DockItem({
  icon,
  label,
  onClick,
  mouseX,
  baseItemSize,
  magnification,
  distance,
  spring,
  badgeCount,
  badgeColor = "bg-red-500",
  itemBackground,
  itemBorderColor,
  borderRadius,
  hideLabels = false,
  labelPosition = "top",
  labelBackground,
  labelTextColor,
}: DockItemProps) {
  const ref = useRef<HTMLDivElement>(null);
  const isHovered = useMotionValue(0);
  const size = useDockItemSize(mouseX, baseItemSize, magnification, distance, ref, spring);
  const [showLabel, setShowLabel] = useState(false);

  useEffect(() => {
    const unsubscribe = isHovered.on("change", (value) =>
      setShowLabel(value === 1)
    );
    return () => unsubscribe();
  }, [isHovered]);

  const labelOffsetStyle =
    labelPosition === "bottom"
      ? { top: "calc(100% + 8px)", bottom: "auto" }
      : { bottom: "calc(100% + 8px)", top: "auto" };

  return (
    <motion.div
      ref={ref}
      style={{ width: size, height: size }}
      onHoverStart={() => isHovered.set(1)}
      onHoverEnd={() => isHovered.set(0)}
      onFocus={() => isHovered.set(1)}
      onBlur={() => isHovered.set(0)}
      onClick={onClick}
      className={cn(
        "relative inline-flex items-center justify-center shadow-md cursor-pointer",
        borderRadius ?? "rounded-full",
        itemBackground ?? "bg-background",
        itemBorderColor ? `border-2 ${itemBorderColor}` : ""
      )}
      tabIndex={0}
      role="button"
      aria-haspopup="true"
    >
      <div className="flex items-center justify-center">{icon}</div>

      {/* Badge */}
      {badgeCount !== undefined && badgeCount > 0 && (
        <span
          className={cn(
            "absolute -top-2 -right-2 flex items-center justify-center w-5 h-5 text-xs font-bold text-white rounded-full",
            badgeColor
          )}
        >
          {badgeCount > 99 ? "99+" : badgeCount}
        </span>
      )}

      {/* Tooltip Label */}
      {!hideLabels && (
        <AnimatePresence>
          {showLabel && (
            <motion.div
              initial={{ opacity: 0, y: labelPosition === "bottom" ? -4 : 4 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: labelPosition === "bottom" ? -4 : 4 }}
              transition={{ duration: 0.18 }}
              className={cn(
                "absolute left-1/2 w-fit whitespace-pre rounded-md border px-2 py-0.5 text-xs pointer-events-none z-50",
                labelBackground ?? "bg-[#060606]",
                labelTextColor ?? "text-white"
              )}
              style={{ x: "-50%", ...labelOffsetStyle }}
              role="tooltip"
            >
              {label}
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </motion.div>
  );
}

interface DockItemData {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  badgeCount?: number;
}

interface DockProps {
  /** Items to render inside the dock. Each needs an icon, label, and optional onClick + badgeCount. */
  items: DockItemData[];
  /** Extra CSS classes for the dock panel container. */
  className?: string;
  /** Framer Motion spring physics for all animations. */
  spring?: { mass: number; stiffness: number; damping: number };
  /** Maximum size in px items magnify to on hover. @default 70 */
  magnification?: number;
  /** Distance in px over which magnification spreads to neighbours. @default 200 */
  distance?: number;
  /** Dock panel height in px when idle. @default 64 */
  panelHeight?: number;
  /** Dock panel max height in px when expanded. @default 256 */
  dockHeight?: number;
  /** Base (idle) size of each item in px. @default 50 */
  baseItemSize?: number;
  /** Dock position on screen. Only "bottom" is currently animated. @default "bottom" */
  position?: "bottom" | "top";
  /** Gap between dock items. Tailwind gap class e.g. "gap-2", "gap-6". @default "gap-4" */
  gap?: string;
  /** Background color for individual item icons. Tailwind class or CSS value. */
  itemBackground?: string;
  /** Border color class for each item (e.g. "border-zinc-300"). */
  itemBorderColor?: string;
  /** Border radius override for items. Tailwind class (e.g. "rounded-xl"). @default "rounded-full" */
  borderRadius?: string;
  /** Color for the notification badge dot. Tailwind bg class. @default "bg-red-500" */
  badgeColor?: string;
  /** Whether to hide all hover labels. @default false */
  hideLabels?: boolean;
  /** Position of the hover label relative to the icon. @default "top" */
  labelPosition?: "top" | "bottom";
  /** Background for the hover label tooltip. Tailwind class. @default "bg-[#060606]" */
  labelBackground?: string;
  /** Text color for the hover label tooltip. Tailwind class. @default "text-white" */
  labelTextColor?: string;
  /** If true, renders a frosted glass blur panel behind the dock. @default false */
  blurBackground?: boolean;
  /** If true, wraps the dock with the blocks multi-layer border concept frame. @default true */
  multiBorder?: boolean;
  /** Show a visual separator line. @default false */
  showSeparator?: boolean;
  /** Index after which the separator is placed (0-based). */
  separatorIndex?: number;
}

export default function Dock({
  items,
  className = "",
  spring = { mass: 0.1, stiffness: 150, damping: 12 },
  magnification = 70,
  distance = 200,
  panelHeight = 64,
  dockHeight = 256,
  baseItemSize = 50,
  gap = "gap-4",
  itemBackground,
  itemBorderColor,
  borderRadius,
  badgeColor = "bg-red-500",
  hideLabels = false,
  labelPosition = "top",
  labelBackground,
  labelTextColor,
  blurBackground = false,
  multiBorder = true,
  showSeparator = false,
  separatorIndex,
}: DockProps) {
  const mouseX = useMotionValue(Infinity);
  const isHovered = useMotionValue(0);

  const maxHeight = useMemo(
    () => Math.max(dockHeight, magnification + magnification / 2 + 4),
    [magnification, dockHeight]
  );

  const animatedHeight = useSpring(
    useTransform(isHovered, [0, 1], [panelHeight, maxHeight]),
    spring
  );

  return (
    <motion.div
      style={{ height: animatedHeight }}
      className="mx-2 flex max-w-full items-center justify-center"
    >
      <motion.div
        onMouseMove={({ pageX }) => {
          isHovered.set(1);
          mouseX.set(pageX);
        }}
        onMouseLeave={() => {
          isHovered.set(0);
          mouseX.set(Infinity);
        }}
        className={cn(
          "absolute bottom-2 left-1/2 -translate-x-1/2 transform flex items-center justify-center w-fit transition-all duration-300",
          multiBorder
            ? "p-[3px] rounded-[24px] sm:rounded-[28px] border border-zinc-200/80 dark:border-zinc-800/80 bg-zinc-100/80 dark:bg-zinc-900/80 shadow-lg backdrop-blur-xl"
            : "",
          className
        )}
        style={{ height: panelHeight }}
        role="toolbar"
        aria-label="Application dock"
      >
        <div
          className={cn(
            "flex items-end w-fit rounded-[20px] sm:rounded-[24px] px-4 pb-2 h-full transition-all duration-300",
            gap,
            multiBorder
              ? "border border-zinc-200/90 dark:border-zinc-800/90 bg-white/90 dark:bg-black/90 shadow-inner"
              : blurBackground
              ? "bg-white/10 dark:bg-black/20 backdrop-blur-xl border-2 border-white/20 dark:border-white/10 shadow-md"
              : "bg-background border-2 border-border shadow-md"
          )}
        >
          {items.map((item, index) => (
            <React.Fragment key={index}>
              <DockItem
                icon={item.icon}
                label={item.label}
                onClick={item.onClick}
                mouseX={mouseX}
                baseItemSize={baseItemSize}
                magnification={magnification}
                distance={distance}
                spring={spring}
                badgeCount={item.badgeCount}
                badgeColor={badgeColor}
                itemBackground={itemBackground}
                itemBorderColor={itemBorderColor}
                borderRadius={borderRadius}
                hideLabels={hideLabels}
                labelPosition={labelPosition}
                labelBackground={labelBackground}
                labelTextColor={labelTextColor}
              />
              {showSeparator && separatorIndex === index && (
                <div className="self-center h-8 w-px bg-zinc-300 dark:bg-zinc-600 mx-1 shrink-0" />
              )}
            </React.Fragment>
          ))}
        </div>
      </motion.div>
    </motion.div>
  );
}

export { Dock };


```
--------------------------------------------------

### COMPONENT: drawer
Category: UI Elements
Description: A drawer component that slides in from the edge of the screen.
URL: https://lightswind.com/components/drawer
Import: import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerClose,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription
} from "@/components/lightswind/drawer"
Registry URL: https://lightswind.com/r/drawer.json
Install Command: npx lightswind@latest add drawer

Usage:
```tsx
<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer description text goes here.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">Drawer content goes here</div>
    <DrawerFooter>
      <Button>Save changes</Button>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

Source Code:
```tsx
import * as React from "react";
import { createPortal } from "react-dom";
import { cn } from "@/components/lib/utils";
import { X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion"; // Import HTMLMotionProps

interface DrawerContextValue {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  side: "top" | "bottom" | "left" | "right";
}

const DrawerContext = React.createContext<DrawerContextValue | undefined>(
  undefined
);

function useDrawerContext() {
  const context = React.useContext(DrawerContext);
  if (!context) {
    throw new Error("useDrawerContext must be used within a Drawer");
  }
  return context;
}

interface DrawerProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  side?: "top" | "bottom" | "left" | "right";
}

const Drawer = ({
  children,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  side = "bottom",
}: DrawerProps) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback(
    (value: React.SetStateAction<boolean>) => {
      if (!isControlled) {
        setUncontrolledOpen(value);
      }

      if (onOpenChange) {
        const nextValue = typeof value === "function" ? value(open) : value;
        onOpenChange(nextValue);
      }
    },
    [isControlled, onOpenChange, open]
  );

  return (
    <DrawerContext.Provider value={{ open, setOpen, side }}>
      {children}
    </DrawerContext.Provider>
  );
};

interface DrawerTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerProps>(
  ({ children, asChild = false, ...props }, ref) => {
    const { setOpen } = useDrawerContext();

    if (asChild && React.isValidElement(children)) {
      return React.cloneElement(children as React.ReactElement<any>, {
        ...props,
        ref,
        onClick: (e: React.MouseEvent<any>) => {
          (children as React.ReactElement<any>).props.onClick?.(e);
          props.onClick?.(e as any);
          setOpen(true);
        },
      });
    }

    return (
      <button ref={ref} type="button" onClick={() => setOpen(true)} {...props}>
        {children}
      </button>
    );
  }
);
DrawerTrigger.displayName = "DrawerTrigger";

// Define a type that omits conflicting HTML attributes for Framer Motion
type OmittedDrawerContentHTMLAttributes = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  | "onAnimationStart"
  | "onAnimationEnd"
  | "onAnimationIteration"
  | "onTransitionEnd"
  | "onDrag"
  | "onDragEnd"
  | "onDragEnter"
  | "onDragExit"
  | "onDragLeave"
  | "onDragOver"
  | "onDragStart"
  | "onDrop"
  | "onMouseDown"
  | "onMouseEnter"
  | "onMouseLeave"
  | "onMouseMove"
  | "onMouseOut"
  | "onMouseOver"
  | "onMouseUp"
  | "onTouchCancel"
  | "onTouchEnd"
  | "onTouchMove"
  | "onTouchStart"
  | "onPointerDown"
  | "onPointerMove"
  | "onPointerUp"
  | "onPointerCancel"
  | "onPointerEnter"
  | "onPointerLeave"
  | "onPointerOver"
  | "onPointerOut"
  | "onGotPointerCapture"
  | "onLostPointerCapture"
>;

interface DrawerContentProps extends OmittedDrawerContentHTMLAttributes {
  // Use the new type here
  className?: string;
}

const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
  ({ children, className, ...props }, ref) => {
    const { open, setOpen, side } = useDrawerContext();

    const variants = {
      top: {
        initial: { y: "-100%", opacity: 0.5, scale: 0.9 },
        animate: { y: 0, opacity: 1, scale: 1 },
        exit: { y: "-100%", opacity: 0.5, scale: 0.9 }
      },
      bottom: {
        initial: { y: "100%", opacity: 0.5, scale: 0.9 },
        animate: { y: 0, opacity: 1, scale: 1 },
        exit: { y: "100%", opacity: 0.5, scale: 0.9 }
      },
      left: {
        initial: { x: "-100%", opacity: 0.5, scale: 0.9 },
        animate: { x: 0, opacity: 1, scale: 1 },
        exit: { x: "-100%", opacity: 0.5, scale: 0.9 }
      },
      right: {
        initial: { x: "100%", opacity: 0.5, scale: 0.9 },
        animate: { x: 0, opacity: 1, scale: 1 },
        exit: { x: "100%", opacity: 0.5, scale: 0.9 }
      },
    };

    const sideOrigins = {
      top: "top center",
      bottom: "bottom center",
      left: "center left",
      right: "center right",
    };

    const [mounted, setMounted] = React.useState(false);
    React.useEffect(() => setMounted(true), []);
    if (!mounted) return null;

    return createPortal(
      <AnimatePresence>
        {open && (
          <div
            className={cn(
              "fixed inset-0 z-50 flex mx-auto",
              side === "top" && "flex-col items-center justify-start",
              side === "bottom" && "flex-col items-center justify-end",
              side === "left" && "flex-row items-start justify-start",
              side === "right" && "flex-row items-start justify-end"
            )}
          >
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.3 }}
              className="absolute inset-0 bg-background/80 backdrop-blur-sm"
              onClick={() => setOpen(false)}
              aria-hidden="true"
            />

            <motion.div
              ref={ref}
              initial={variants[side].initial}
              animate={variants[side].animate}
              exit={variants[side].exit}
              transition={{
                type: "spring",
                damping: 25,
                stiffness: 300,
                opacity: { duration: 0.2 }
              }}
              style={{ transformOrigin: sideOrigins[side] }}
              className={cn(
                "relative z-50 bg-background shadow-2xl outline-none border-border/50",
                (side === "top" || side === "bottom") && "w-full rounded-t-3xl border-t max-h-[90vh] overflow-y-auto",
                (side === "left") && "h-full w-3/4 max-w-sm border-r rounded-r-3xl overflow-y-auto",
                (side === "right") && "h-full w-3/4 max-w-sm border-l rounded-l-3xl overflow-y-auto",
                className
              )}
              role="dialog"
              aria-modal="true"
              {...Object.keys(props).reduce((acc: { [key: string]: any }, key) => {
                if (key === 'onDrag' || key === 'onAnimationStart' || key === 'onTransitionEnd') {
                  return acc;
                }
                acc[key] = (props as any)[key];
                return acc;
              }, {})}
            >
              {(side === "bottom" || side === "top") && (
                <div className="mx-auto my-2 h-1.5 w-16 rounded-full bg-muted" />
              )}
              {children}
              <button
                onClick={() => setOpen(false)}
                className="absolute right-4 top-6 rounded-sm opacity-70 
                ring-offset-background transition-opacity hover:opacity-100 
                focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
                aria-label="Close drawer"
              >
                <X className="h-4 w-4 lg:h-8 lg:w-8 z-999" />
                <span className="sr-only">Close drawer</span>
              </button>
            </motion.div>
          </div>
        )}
      </AnimatePresence>,
      document.body
    );
  }
);
DrawerContent.displayName = "DrawerContent";

// Add the missing exports for the Drawer components
interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const DrawerClose = React.forwardRef<HTMLButtonElement, DrawerCloseProps>(
  ({ children, asChild = false, ...props }, ref) => {
    const { setOpen } = useDrawerContext();

    if (asChild && React.isValidElement(children)) {
      return React.cloneElement(children as React.ReactElement<any>, {
        ...props,
        ref,
        onClick: (e: React.MouseEvent<any>) => {
          (children as React.ReactElement<any>).props.onClick?.(e);
          props.onClick?.(e as any);
          setOpen(false);
        },
      });
    }

    return (
      <button ref={ref} type="button" onClick={() => setOpen(false)} {...props}>
        {children}
      </button>
    );
  }
);
DrawerClose.displayName = "DrawerClose";

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left p-4",
      className
    )}
    {...props}
  />
);
DrawerHeader.displayName = "DrawerHeader";

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-4",
      className
    )}
    {...props}
  />
);
DrawerFooter.displayName = "DrawerFooter";

const DrawerTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
));
DrawerTitle.displayName = "DrawerTitle";

const DrawerDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
));
DrawerDescription.displayName = "DrawerDescription";

export {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerClose,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
};

```
--------------------------------------------------

### COMPONENT: dropdown-menu
Category: UI Elements
Description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
URL: https://lightswind.com/components/dropdown-menu
Import: import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuGroup
} from "@/components/lightswind/dropdown-menu"
Registry URL: https://lightswind.com/r/dropdown-menu.json
Install Command: npx lightswind@latest add dropdown-menu

Usage:
```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

Source Code:
```tsx
import * as React from "react";
import ReactDOM from "react-dom";
import { cva } from "class-variance-authority";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/components/lib/utils";

interface DropdownMenuContextType {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  hoverMode?: boolean;
  triggerRef: React.MutableRefObject<HTMLElement | null>;
  timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
}

const DropdownMenuContext = React.createContext<DropdownMenuContextType | undefined>(undefined);

interface DropdownMenuProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  hoverMode?: boolean;
}

const DropdownMenu: React.FC<DropdownMenuProps> = ({
  children,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  hoverMode = false,
}) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
  const triggerRef = React.useRef<HTMLElement | null>(null);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback(
    (value: React.SetStateAction<boolean>) => {
      if (!isControlled) {
        setUncontrolledOpen(value);
      } else if (onOpenChange) {
        const nextOpen = typeof value === "function" ? (value as (p: boolean) => boolean)(controlledOpen ?? false) : value;
        onOpenChange(nextOpen);
      }
    },
    [isControlled, onOpenChange, controlledOpen]
  );

  // Notify parent of uncontrolled state changes — outside state updaters to avoid Strict Mode issues
  React.useEffect(() => {
    if (!isControlled && onOpenChange) {
      onOpenChange(uncontrolledOpen);
    }
  }, [uncontrolledOpen, isControlled, onOpenChange]);

  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);

  React.useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <DropdownMenuContext.Provider value={{ open: open || false, setOpen, hoverMode, triggerRef, timeoutRef }}>
      {children}
    </DropdownMenuContext.Provider>
  );
};

interface DropdownMenuTriggerProps {
  children: React.ReactNode;
  asChild?: boolean;
}

const DropdownMenuTrigger = React.forwardRef<
  HTMLButtonElement,
  DropdownMenuTriggerProps & React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ children, asChild, ...props }, ref) => {
  const context = React.useContext(DropdownMenuContext);
  if (!context) throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");

  const { setOpen, hoverMode, triggerRef, timeoutRef } = context;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    if (hoverMode) {
      // In hover mode, click should only open (not toggle), to avoid
      // fighting with the hover timers on first interaction
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      setOpen(true);
    } else {
      setOpen((prev) => !prev);
    }
    if (props.onClick) props.onClick(e);
  };

  React.useImperativeHandle(ref, () => {
    if (!triggerRef.current) return document.createElement("button");
    return triggerRef.current as HTMLButtonElement;
  }, [triggerRef]);

  const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
    if (hoverMode) {
      // Always clear any pending timer (open or close)
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      // Schedule open — setOpen(true) is idempotent if already open
      timeoutRef.current = setTimeout(() => setOpen(true), 150);
    }
    if (props.onMouseEnter) props.onMouseEnter(e as React.MouseEvent<HTMLButtonElement>);
  };

  const handleMouseLeaveTrigger = (e: React.MouseEvent<HTMLElement>) => {
    if (hoverMode) {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      timeoutRef.current = setTimeout(() => setOpen(false), 200);
    }
    if (props.onMouseLeave) props.onMouseLeave(e as React.MouseEvent<HTMLButtonElement>);
  };

  const { onClick, onMouseEnter, onMouseLeave, ...otherProps } = props;

  if (asChild) {
    const child = React.Children.only(children) as React.ReactElement<any>;
    return React.cloneElement(child, {
      ...child.props,
      ref: (node: HTMLElement | null) => {
        triggerRef.current = node;
        if (typeof ref === "function") ref(node as HTMLButtonElement);
        else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;

        // Handle child's original ref
        const childRef = (child as any).ref;
        if (childRef) {
          if (typeof childRef === "function") childRef(node);
          else if (childRef.hasOwnProperty("current")) childRef.current = node;
        }
      },
      onClick: (e: React.MouseEvent) => {
        handleClick(e as React.MouseEvent<HTMLButtonElement>);
        if (child.props.onClick) child.props.onClick(e);
      },
      onMouseEnter: (e: React.MouseEvent) => {
        handleMouseEnter(e as React.MouseEvent<HTMLElement>);
        if (child.props.onMouseEnter) child.props.onMouseEnter(e);
      },
      onMouseLeave: (e: React.MouseEvent) => {
        // Start a close timer; the content's onMouseEnter will cancel it if
        // the cursor moves into the portal-rendered dropdown before the timer fires.
        handleMouseLeaveTrigger(e as React.MouseEvent<HTMLElement>);
        if (child.props.onMouseLeave) child.props.onMouseLeave(e);
      },
      ...otherProps,
    });
  }

  return (
    <button
      ref={(node) => {
        triggerRef.current = node;
        if (typeof ref === "function") ref(node);
        else if (ref) ref.current = node;
      }}
      type="button"
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeaveTrigger}
      {...otherProps}
    >
      {children}
    </button>
  );
});
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";

const dropdownMenuContentVariants = cva(
  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
  {
    variants: {
      variant: {
        default: "",
        contextMenu: "min-w-0",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

interface DropdownMenuContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> {
  align?: "start" | "center" | "end";
  alignOffset?: number;
  side?: "top" | "right" | "bottom" | "left";
  sideOffset?: number;
  variant?: "default" | "contextMenu";
}

const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(
  ({ className, children, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, variant, ...props }, ref) => {
    const context = React.useContext(DropdownMenuContext);
    if (!context) throw new Error("DropdownMenuContent must be used within a DropdownMenu");

    const { open, setOpen, hoverMode, triggerRef } = context;
    const menuRef = React.useRef<HTMLDivElement | null>(null);
    const [position, setPosition] = React.useState({ top: 0, left: 0 });
    const [mounted, setMounted] = React.useState(false);
    const [positioned, setPositioned] = React.useState(false);

    React.useEffect(() => {
      setMounted(true);
    }, []);

    // Reset positioned to false ONLY when closed, avoids flickering when children change
    React.useEffect(() => {
      if (!open) {
        setPositioned(false);
      }
    }, [open]);

    // Body scroll lock removed
    // Previous logic was interfering with page navigation

    // Close on click outside
    React.useEffect(() => {
      if (!open) return;
      const handleClickOutside = (e: MouseEvent) => {
        if (
          menuRef.current &&
          !menuRef.current.contains(e.target as Node) &&
          triggerRef.current &&
          !triggerRef.current.contains(e.target as Node)
        ) {
          setOpen(false);
        }
      };
      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }, [open, setOpen, triggerRef]);

    // Position updates
    React.useEffect(() => {
      if (!open || !triggerRef.current) return;

      const updatePosition = () => {
        if (!triggerRef.current) return;
        const triggerRect = triggerRef.current.getBoundingClientRect();
        
        // Use offsetWidth / offsetHeight to get unscaled layout dimensions
        const menuWidth = menuRef.current ? menuRef.current.offsetWidth : 0;
        const menuHeight = menuRef.current ? menuRef.current.offsetHeight : 0;

        let top = 0;
        let left = 0;

        // Basic positioning logic tailored for Portal (relative to viewport)
        if (side === "bottom") {
          top = triggerRect.bottom + sideOffset;
        } else if (side === "top") {
          top = triggerRect.top - menuHeight - sideOffset;
        } else if (side === "left" || side === "right") {
          top = triggerRect.top + triggerRect.height / 2 - menuHeight / 2;
        }

        if (side === "right") {
          left = triggerRect.right + sideOffset;
        } else if (side === "left") {
          left = triggerRect.left - menuWidth - sideOffset;
        } else {
          if (align === "start") left = triggerRect.left + alignOffset;
          else if (align === "center") left = triggerRect.left + triggerRect.width / 2 - menuWidth / 2 + alignOffset;
          else if (align === "end") left = triggerRect.right - menuWidth - alignOffset;
        }

        // Viewport collision detection
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        if (left + menuWidth > windowWidth) left = windowWidth - menuWidth - 8;
        if (left < 8) left = 8;

        if (top + menuHeight > windowHeight) {
          if (side === "bottom" && triggerRect.top > menuHeight + sideOffset) {
            top = triggerRect.top - menuHeight - sideOffset;
          } else {
            const maxHeight = windowHeight - top - 8;
            if (menuRef.current) menuRef.current.style.maxHeight = `${maxHeight}px`;
          }
        }

        setPosition({ top, left });
      };

      // Run update immediately and on scroll/resize
      // Use rAF to ensure the DOM has painted the portal content before measuring
      const raf = requestAnimationFrame(() => {
        updatePosition();
        setPositioned(true);
      });
      window.addEventListener("scroll", updatePosition, true);
      window.addEventListener("resize", updatePosition);

      // Set up ResizeObserver to recalculate if the size of the menu changes during mount/styling/render
      const resizeObserver = new ResizeObserver(() => {
        updatePosition();
      });
      if (menuRef.current) {
        resizeObserver.observe(menuRef.current);
      }

      // Also update after a short delay to ensure Framer Motion has rendered the initial frame
      const timeout = setTimeout(() => {
        updatePosition();
        setPositioned(true);
      }, 0);

      return () => {
        window.removeEventListener("scroll", updatePosition, true);
        window.removeEventListener("resize", updatePosition);
        cancelAnimationFrame(raf);
        clearTimeout(timeout);
        resizeObserver.disconnect();
      };
    }, [open, align, alignOffset, side, sideOffset, triggerRef, children, variant, className, mounted]);

    if (!mounted) return null;

    return ReactDOM.createPortal(
      <AnimatePresence>
        {open && (
          <motion.div
            ref={(node) => {
              if (typeof ref === "function") ref(node);
              else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
              menuRef.current = node;
            }}
            className={cn(dropdownMenuContentVariants({ variant }), "dropdown-scrollbar", className)}
            style={{
              position: "fixed",
              top: `${position.top}px`,
              left: `${position.left}px`,
              zIndex: 99999,
              maxHeight: "calc(90vh - 60px)",
              overflowY: "auto",
              transformOrigin: side === "bottom" ? "top center" : side === "top" ? "bottom center" : side === "left" ? "center right" : "center left",
            }}
            initial={{ opacity: 0, scale: 0.9, y: side === "bottom" ? -4 : side === "top" ? 4 : 0 }}
            animate={positioned ? { opacity: 1, scale: 1, y: 0, pointerEvents: "auto" as const } : { opacity: 0, scale: 0.9, pointerEvents: "none" as const }}
            exit={{ opacity: 0, scale: 0.9, y: side === "bottom" ? -4 : side === "top" ? 4 : 0, transition: { duration: 0.15 }, pointerEvents: "none" as const }}
            transition={{
              type: "spring",
              damping: 20,
              stiffness: 300
            }}
            onMouseEnter={(e) => {
              if (hoverMode && context.timeoutRef.current) {
                clearTimeout(context.timeoutRef.current);
              }
              if (props.onMouseEnter) props.onMouseEnter(e as any);
            }}
            onMouseLeave={(e) => {
              if (hoverMode) {
                context.timeoutRef.current = setTimeout(() => setOpen(false), 200);
              }
              if (props.onMouseLeave) props.onMouseLeave(e as any);
            }}
            data-lenis-prevent
            {...props}
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>,
      document.body
    );
  }
);
DropdownMenuContent.displayName = "DropdownMenuContent";

const DropdownMenuLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
  )
);
DropdownMenuLabel.displayName = "DropdownMenuLabel";

interface DropdownMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
  inset?: boolean;
  disabled?: boolean;
  asChild?: boolean;
}

const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(
  ({ className, inset, asChild, disabled = false, ...props }, ref) => {
    const context = React.useContext(DropdownMenuContext);
    if (!context) throw new Error("DropdownMenuItem must be used within a DropdownMenu");
    const { setOpen } = context;

    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
      if (disabled) {
        e.preventDefault();
        return;
      }
      setOpen(false);
      if (props.onClick) props.onClick(e);
    };

    return (
      <div
        ref={ref}
        className={cn(
          "relative flex gap-1 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          inset && "pl-8",
          className
        )}
        onClick={handleClick}
        data-disabled={disabled ? "" : undefined}
        {...props}
      />
    );
  }
);
DropdownMenuItem.displayName = "DropdownMenuItem";

const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
  )
);
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";

const DropdownMenuGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("space-y-1", className)} {...props} />
  )
);
DropdownMenuGroup.displayName = "DropdownMenuGroup";

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuGroup,
};

```
--------------------------------------------------

### COMPONENT: hover-card
Category: UI Elements
Description: A card that appears when hovering over a trigger element, providing additional information or context.
URL: https://lightswind.com/components/hover-card
Import: import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/lightswind/hover-card";
Registry URL: https://lightswind.com/r/hover-card.json
Install Command: npx lightswind@latest add hover-card

Usage:
```tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/lightswind/hover-card";
import { Button } from "@/components/lightswind/button";

export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">Hover me</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="p-2">
          <h4 className="font-medium">Hover Card Content</h4>
          <p className="text-sm text-muted-foreground">
            Additional information displayed on hover.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils"; // Ensure this utility is present or replace with className logic
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; // Import HTMLMotionProps

interface HoverCardContextType {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const HoverCardContext = React.createContext<HoverCardContextType | undefined>(undefined);

interface HoverCardProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  openDelay?: number;
  closeDelay?: number;
}

const HoverCard: React.FC<HoverCardProps> = ({
  children,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  openDelay = 700,
  closeDelay = 300,
}) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback(
    (value: boolean | ((prev: boolean) => boolean)) => {
      if (!isControlled) {
        setUncontrolledOpen(value);
      }
      if (onOpenChange) {
        const newValue = typeof value === "function" ? value(open) : value;
        onOpenChange(newValue);
      }
    },
    [isControlled, onOpenChange, open]
  );

  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleOpen = React.useCallback(() => {
    if (closeTimerRef.current) {
      clearTimeout(closeTimerRef.current);
      closeTimerRef.current = null;
    }

    if (!open) {
      openTimerRef.current = setTimeout(() => {
        setOpen(true);
      }, openDelay);
    }
  }, [open, openDelay, setOpen]);

  const handleClose = React.useCallback(() => {
    if (openTimerRef.current) {
      clearTimeout(openTimerRef.current);
      openTimerRef.current = null;
    }

    if (open) {
      closeTimerRef.current = setTimeout(() => {
        setOpen(false);
      }, closeDelay);
    }
  }, [open, closeDelay, setOpen]);

  // Clear timers on unmount
  React.useEffect(() => {
    return () => {
      if (openTimerRef.current) clearTimeout(openTimerRef.current);
      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
    };
  }, []);

  return (
    <HoverCardContext.Provider value={{ open, setOpen }}>
      <div
        className="relative inline-block"
        onMouseEnter={handleOpen}
        onMouseLeave={handleClose}
        onFocusCapture={handleOpen} // Use capture phase to ensure it fires before child's onFocus
        onBlurCapture={handleClose}  // Use capture phase
      >
        {children}
      </div>
    </HoverCardContext.Provider>
  );
};

interface HoverCardTriggerProps {
  children: React.ReactNode;
  asChild?: boolean;
}

const HoverCardTrigger: React.FC<HoverCardTriggerProps> = ({ children, asChild = false }) => {
  // If asChild is true, we just render the child directly.
  // The onMouseEnter/Leave/Focus/Blur listeners are on the parent HoverCard div.
  if (asChild) {
    return <>{children}</>;
  }

  // If not asChild, we wrap the children in a div to ensure the HoverCard has a DOM element to attach listeners to.
  // This div also needs to be part of the hover/focus interaction, so it's placed inside the HoverCard's event listeners.
  // The outer div in HoverCard handles the events, so this div simply renders the content.
  return <div tabIndex={0}>{children}</div>; // Add tabIndex for keyboard accessibility
};

// ---
// **CHANGE MADE HERE:**
// Changed `React.HTMLAttributes<HTMLDivElement>` to `HTMLMotionProps<"div">`
// ---
interface HoverCardContentProps extends HTMLMotionProps<"div"> {
  align?: "center" | "start" | "end";
  sideOffset?: number;
}

const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(
  ({ className, align = "center", sideOffset = 4, ...props }, ref) => {
    const context = React.useContext(HoverCardContext);
    if (!context) {
      throw new Error("HoverCardContent must be used within a HoverCard");
    }

    const { open } = context;

    return (
      <AnimatePresence>
        {open && ( // Conditionally render the motion.div based on `open` state
          <motion.div
            ref={ref}
            initial={{ opacity: 0, scale: 0.9, y: -4 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: -4 }}
            transition={{
              type: "spring",
              damping: 20,
              stiffness: 300
            }}
            className={cn(
              `absolute z-50 w-64 rounded-md border   bg-white
               p-4 text-black shadow-md`,
              className
            )}
            style={{
              top: `calc(100% + ${sideOffset}px)`, // Position below the trigger
              left: align === "center" ? "50%" : align === "start" ? "0" : "auto",
              right: align === "end" ? "0" : "auto",
              transform: align === "center" ? "translateX(-50%)" : "none", // Center horizontally if align="center"
              // No need for transform here directly, framer-motion handles it
            }}
            {...props} // Pass through Framer Motion props
          />
        )}
      </AnimatePresence>
    );
  }
);
HoverCardContent.displayName = "HoverCardContent";

// Exports
export { HoverCard, HoverCardTrigger, HoverCardContent };
```
--------------------------------------------------

### COMPONENT: popover
Category: UI Elements
Description: A small overlay that appears relative to a trigger element, containing additional UI or information.
URL: https://lightswind.com/components/popover
Import: import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/lightswind/popover";
Registry URL: https://lightswind.com/r/popover.json
Install Command: npx lightswind@latest add popover

Usage:
```tsx
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/lightswind/popover";
import { Button } from "@/components/lightswind/button";
import { SlidersHorizontal, Paintbrush } from "lucide-react";

export function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2">
          <SlidersHorizontal className="w-4 h-4 text-indigo-500" />
          <span>Layer Properties</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[320px] p-4 space-y-3">
        <div className="flex items-center gap-2 pb-2 border-b">
          <Paintbrush className="w-4 h-4 text-indigo-500" />
          <h4 className="font-semibold text-sm">Style Inspector</h4>
        </div>
        <p className="text-xs text-muted-foreground">Adjust accent color and opacity settings for this layer.</p>
      </PopoverContent>
    </Popover>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import ReactDOM from "react-dom";
import { cn } from "@/components/lib/utils";
import { CircleXIcon } from "lucide-react";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";

// --- Context and Props (with the new prop added) ---

interface PopoverContextType {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  closeOnOutsideClick?: boolean;
}

const PopoverContext = React.createContext<PopoverContextType | undefined>(
  undefined
);

interface PopoverProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  closeOnOutsideClick?: boolean; // New prop for controlling outside click behavior
}

// --- The Updated Popover Component ---

const Popover: React.FC<PopoverProps> = ({
  children,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  closeOnOutsideClick = true,
}) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback(
    (value: boolean | ((prev: boolean) => boolean)) => {
      if (!isControlled) {
        setUncontrolledOpen(value);
      }
      if (onOpenChange) {
        const newValue = typeof value === "function" ? value(open) : value;
        onOpenChange(newValue);
      }
    },
    [isControlled, onOpenChange, open]
  );

  React.useEffect(() => {
    if (!open || !closeOnOutsideClick) {
      return;
    }

    const handleClickOutside = (event: MouseEvent) => {
      const popoverContents = document.querySelectorAll(
        "[data-popover-content]"
      );
      let isClickInside = false;

      popoverContents.forEach((content) => {
        if (content.contains(event.target as Node)) {
          isClickInside = true;
        }
      });

      if (!isClickInside) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [open, setOpen, closeOnOutsideClick]);

  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <PopoverContext.Provider value={{ open, setOpen, closeOnOutsideClick }}>
      {children}
    </PopoverContext.Provider>
  );
};

interface PopoverTriggerProps {
  asChild?: boolean;
  children: React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLElement>;
}

const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
  onClick,
  asChild,
  children,
}) => {
  const context = React.useContext(PopoverContext);
  if (!context) {
    throw new Error("PopoverTrigger must be used within a Popover");
  }

  const { open, setOpen } = context;

  const handleClick: React.MouseEventHandler<HTMLElement> = (e) => {
    setOpen(!open);
    onClick?.(e);
  };

  if (asChild) {
    return (
      <>
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            const element = child as React.ReactElement<any>;
            const childProps = {
              ...element.props,
              onClick: (e: React.MouseEvent) => {
                handleClick(e as React.MouseEvent<HTMLElement>);
                if (element.props.onClick) element.props.onClick(e);
              },
            };
            return React.cloneElement(element, childProps);
          }
          return child;
        })}
      </>
    );
  }

  return (
    <button type="button" onClick={handleClick} aria-expanded={open}>
      {children}
    </button>
  );
};

interface PopoverContentProps extends Omit<HTMLMotionProps<"div">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> {
  align?: "center" | "start" | "end";
  sideOffset?: number;
  hideCloseButton?: boolean;
}

const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
  ({ className, align = "center", sideOffset = 4, hideCloseButton = false, children, ...props }, ref) => {
    const context = React.useContext(PopoverContext);
    if (!context) {
      throw new Error("PopoverContent must be used within a Popover");
    }

    const { open, setOpen } = context;

    if (typeof window === "undefined") return null;

    return ReactDOM.createPortal(
      <AnimatePresence>
        {open && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => {
                if (context.closeOnOutsideClick) {
                  setOpen(false);
                }
              }}
              className="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-xs transition-opacity"
            />
            <motion.div
              ref={ref}
              data-popover-content
              initial={{ opacity: 0, scale: 0.92, x: "-50%", y: "-50%" }}
              animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
              exit={{ opacity: 0, scale: 0.92, x: "-50%", y: "-50%" }}
              transition={{ type: "spring", damping: 22, stiffness: 350 }}
              className={cn(
                "fixed z-[9999] left-1/2 top-1/2 w-[95vw] sm:w-auto max-w-[95vw] sm:max-w-[90vw] rounded-2xl border bg-popover text-popover-foreground shadow-2xl outline-none p-5",
                "max-h-[90dvh] sm:max-h-[calc(100dvh-4rem)] overflow-y-auto",
                "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
                "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
                "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_16px_32px_-8px_rgba(0,0,0,0.12)]",
                "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_16px_32px_-8px_rgba(0,0,0,0.5)]",
                className
              )}
              data-lenis-prevent
              {...props}
            >
              {!hideCloseButton && (
                <button
                  onClick={() => setOpen(false)}
                  className="absolute top-3.5 right-3.5 z-50 p-1.5 bg-muted/60 hover:bg-muted text-muted-foreground hover:text-foreground backdrop-blur-md rounded-full border border-border/50 transition-all cursor-pointer"
                >
                  <CircleXIcon className="w-4 h-4" />
                </button>
              )}
              {(children as React.ReactNode)}
            </motion.div>
          </>
        )}
      </AnimatePresence>,
      document.body
    );
  }
);
PopoverContent.displayName = "PopoverContent";

export { Popover, PopoverTrigger, PopoverContent };
```
--------------------------------------------------

### COMPONENT: progress
Category: UI Elements
Description: Displays an indicator showing the completion progress of a task.
URL: https://lightswind.com/components/progress
Import: import { Progress } from "@/components/lightswind/progress";
Registry URL: https://lightswind.com/r/progress.json
Install Command: npx lightswind@latest add progress

Usage:
```tsx
import { Progress } from "@/components/lightswind/progress";

export function ProgressDemo() {
  return <Progress value={60} />;
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Current progress value */
  value?: number;
  /** Maximum progress value */
  max?: number;
  /** Optional class name for the indicator element */
  indicatorClassName?: string;
  /** Whether to show indeterminate loading animation */
  indeterminate?: boolean;
  /** Color variant for the progress bar */
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Size variant of the progress bar */
  size?: "sm" | "md" | "lg";
  /** Whether to show the progress value as text */
  showValue?: boolean;
  /** Animation speed for the progress transitions */
  animationSpeed?: "slow" | "normal" | "fast";
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  ({ 
    className, 
    value = 0, 
    max = 100, 
    indicatorClassName,
    indeterminate = false,
    color = "default",
    size = "md",
    showValue = false,
    animationSpeed = "normal",
    ...props 
  }, ref) => {
    const percentage = value ? (value / max) * 100 : 0;
    const [prevPercentage, setPrevPercentage] = React.useState(percentage);
    const [isAnimating, setIsAnimating] = React.useState(false);
    
    React.useEffect(() => {
      // Only animate when the value actually changes
      if (percentage !== prevPercentage) {
        setIsAnimating(true);
        setPrevPercentage(percentage);
        
        // Reset the animation state after the transition is complete
        const timeout = setTimeout(() => {
          setIsAnimating(false);
        }, 1000); // This should match the CSS transition duration
        
        return () => clearTimeout(timeout);
      }
    }, [percentage, prevPercentage]);
    
    // Color variants
    const colorVariants = {
      default: "bg-primary",
      primary: "bg-primary",
      secondary: "bg-secondary",
      success: "bg-green-500",
      warning: "bg-yellow-500",
      danger: "bg-red-500"
    };
    
    // Size variants
    const sizeVariants = {
      sm: "h-2",
      md: "h-4",
      lg: "h-6"
    };
    
    // Animation speed variants in milliseconds
    const animationSpeedMs = {
      slow: 1000,
      normal: 700,
      fast: 300
    };
    
    return (
      <div
        ref={ref}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={indeterminate ? undefined : value}
        aria-valuetext={indeterminate ? undefined : `${Math.round(percentage)}%`}
        className={cn(
          "relative w-full overflow-hidden rounded-full bg-secondary",
          "transition-colors", // Smooth colors/shadows transition for theme toggle
          // 3D track recessed styling
          "[.lw-3d_&]:shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(255,255,255,0.05)]",
          "dark:[.lw-3d_&]:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3)]",
          "[.lw-3d_&]:border [.lw-3d_&]:border-black/5 dark:[.lw-3d_&]:border-white/5",
          sizeVariants[size],
          className
        )}
        {...props}
      >
        <div
          className={cn(
            "h-full w-full flex-1",
            colorVariants[color],
            // 3D indicator raised styling
            "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white/20 [.lw-3d_&]:to-black/10",
            "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_-1px_0_0_rgba(0,0,0,0.15)]",
            "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.35),inset_0_-1.5px_0_0_rgba(0,0,0,0.3)]",
            indeterminate ? "animate-progress-indeterminate origin-left" : "",
            indicatorClassName
          )}
          style={{
            ...(indeterminate ? {} : { transform: `translateX(-${100 - percentage}%)` }),
            transition: indeterminate
              ? "background-color 200ms, border-color 200ms, box-shadow 200ms"
              : isAnimating
              ? `transform ${animationSpeedMs[animationSpeed]}ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms, border-color 200ms, box-shadow 200ms`
              : "background-color 200ms, border-color 200ms, box-shadow 200ms"
          }}
        />
        {showValue && (
          <div className={cn(
            "absolute inset-0 flex items-center justify-center text-xs font-semibold",
            isAnimating ? "transition-opacity duration-300" : ""
          )}>
            {Math.round(percentage)}%
          </div>
        )}
      </div>
    );
  }
);
Progress.displayName = "Progress";

export { Progress };

```
--------------------------------------------------

### COMPONENT: sheet
Category: UI Elements
Description: A dialog that slides in from the edge of the screen, useful for side panels or drawers.
URL: https://lightswind.com/components/sheet
Import: import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from "@/components/lightswind/sheet";
Registry URL: https://lightswind.com/r/sheet.json
Install Command: npx lightswind@latest add sheet

Usage:
```tsx
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from "@/components/lightswind/sheet";
import { Button } from "@/components/lightswind/button";

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit Profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          {/* Form content here */}
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button>Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";

interface SheetContextValue {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const SheetContext = React.createContext<SheetContextValue | undefined>(undefined);

interface SheetProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

const Sheet = ({ children, defaultOpen = false, open: controlledOpen, onOpenChange }: SheetProps) => {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  const setOpen = React.useCallback((value: React.SetStateAction<boolean>) => {
    if (!isControlled) {
      setUncontrolledOpen(value);
    }

    if (onOpenChange) {
      const nextValue = typeof value === "function" ? value(open) : value;
      onOpenChange(nextValue);
    }
  }, [isControlled, onOpenChange, open]);

  return (
    <SheetContext.Provider value={{ open, setOpen }}>
      {children}
    </SheetContext.Provider>
  );
};

interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
  ({ children, asChild, ...props }, forwardedRef) => {
    const { setOpen } = React.useContext(SheetContext) || { setOpen: () => { } };

    // Derive dependencies for the hook before the hook itself.
    // This logic can be conditional as it does not involve hooks.
    const child = asChild ? React.Children.only(children) : null;
    const childRef = child && React.isValidElement(child) ? (child as any).ref : undefined;

    // Call the hook unconditionally at the top level of the component.
    const mergedRef = React.useCallback(
      (node: HTMLElement | null) => {
        // Call the forwarded ref
        if (typeof forwardedRef === 'function') {
          forwardedRef(node as HTMLButtonElement | null);
        } else if (forwardedRef) {
          (forwardedRef as React.MutableRefObject<HTMLButtonElement | null>).current = node as HTMLButtonElement | null;
        }

        // Call the child's original ref
        if (typeof childRef === 'function') {
          childRef(node);
        } else if (childRef) {
          (childRef as React.MutableRefObject<HTMLElement | null>).current = node;
        }
      },
      [forwardedRef, childRef]
    );

    if (asChild) {
      if (!React.isValidElement(child)) {
        console.error("SheetTrigger with `asChild` expects a single valid React element child.");
        return null;
      }

      const element = child as React.ReactElement<any>;
      // Use the memoized `mergedRef` inside the conditional block.
      return React.cloneElement(element, {
        ...element.props,
        ...props, // Pass down props like className, etc., to the child
        onClick: (e: React.MouseEvent) => {
          setOpen(true);
          if (element.props.onClick) element.props.onClick(e);
        },
        ref: mergedRef,
      });
    }

    return (
      <button
        ref={forwardedRef}
        type="button"
        onClick={() => setOpen(true)}
        {...props}
      >
        {children}
      </button>
    );
  }
);
SheetTrigger.displayName = "SheetTrigger";


interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(
  ({ children, asChild = false, ...props }, ref) => {
    const { setOpen } = React.useContext(SheetContext) || { setOpen: () => { } };

    if (asChild && React.isValidElement(children)) {
      return React.cloneElement(children as React.ReactElement<any>, {
        ...props,
        ref,
        onClick: (e: React.MouseEvent<any>) => {
          (children as React.ReactElement<any>).props.onClick?.(e);
          setOpen(false);
        },
      });
    }

    return (
      <button ref={ref} type="button" onClick={() => setOpen(false)} {...props}>
        {children}
      </button>
    );
  }
);
SheetClose.displayName = "SheetClose";

const SheetPortal = ({ children }: { children: React.ReactNode }) => {
  const { open } = React.useContext(SheetContext) || { open: false };
  return open ? <>{children}</> : null;
};
SheetPortal.displayName = "SheetPortal";

const SheetOverlay = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { setOpen } = React.useContext(SheetContext) || { setOpen: () => { } };

  const {
    onDrag: _,
    onDragEnd: __,
    onDragStart: ___,
    onDragExit: ____,
    onDragEnter: _____,
    onDragLeave: ______,
    onDragOver: _______,
    onDrop: ________,
    onAnimationStart: _________,
    ...restProps
  } = props;

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3, ease: "easeInOut" }}
      className={cn(
        "fixed inset-0 z-50 bg-black/80",
        className
      )}
      onClick={() => setOpen(false)}
      {...restProps}
    />
  );
});
SheetOverlay.displayName = "SheetOverlay";

interface SheetContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
  side?: "top" | "right" | "bottom" | "left";
}

const sideVariants = {
  top: {
    initial: { y: "-100%", opacity: 0.5, scale: 0.9 },
    animate: { y: "0%", opacity: 1, scale: 1 },
    exit: { y: "-100%", opacity: 0.5, scale: 0.9 },
  },
  bottom: {
    initial: { y: "100%", opacity: 0.5, scale: 0.9 },
    animate: { y: "0%", opacity: 1, scale: 1 },
    exit: { y: "100%", opacity: 0.5, scale: 0.9 },
  },
  left: {
    initial: { x: "-100%", opacity: 0.5, scale: 0.9 },
    animate: { x: "0%", opacity: 1, scale: 1 },
    exit: { x: "-100%", opacity: 0.5, scale: 0.9 },
  },
  right: {
    initial: { x: "100%", opacity: 0.5, scale: 0.9 },
    animate: { x: "0%", opacity: 1, scale: 1 },
    exit: { x: "100%", opacity: 0.5, scale: 0.9 },
  },
};

const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
  ({ side = "right", className, children, ...props }, ref) => {
    const { open, setOpen } = React.useContext(SheetContext) || { open: false, setOpen: () => { } };
    const contentLocalRef = React.useRef<HTMLDivElement | null>(null);

    const combinedRef = React.useCallback((node: HTMLDivElement | null) => {
      contentLocalRef.current = node;
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref) {
        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
      }
    }, [ref]);

    React.useEffect(() => {
      if (!open) return;

      const handleMouseDown = (event: MouseEvent) => {
        if (contentLocalRef.current && !contentLocalRef.current.contains(event.target as Node)) {
          setOpen(false);
        }
      };

      const handleKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
          setOpen(false);
        }
      };

      document.addEventListener('mousedown', handleMouseDown);
      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('mousedown', handleMouseDown);
        document.removeEventListener('keydown', handleKeyDown);
      };
    }, [open, setOpen]);

    const {
      onDrag: _,
      onDragEnd: __,
      onDragStart: ___,
      onDragExit: ____,
      onDragEnter: _____,
      onDragLeave: ______,
      onDragOver: _______,
      onDrop: ________,
      onAnimationStart: _________,
      ...restProps
    } = props;

    const [mounted, setMounted] = React.useState(false);
    React.useEffect(() => setMounted(true), []);
    if (!mounted) return null;

    return createPortal(
      <AnimatePresence>
        {open && (
          <SheetPortal>
            <SheetOverlay />
            <motion.div
              ref={combinedRef}
              key="sheet-content"
              initial={sideVariants[side].initial}
              animate={sideVariants[side].animate}
              exit={sideVariants[side].exit}
              transition={{
                type: "spring",
                damping: 25,
                stiffness: 300,
                opacity: { duration: 0.2 }
              }}
              style={{
                transformOrigin:
                  side === "top" ? "top center" :
                    side === "bottom" ? "bottom center" :
                      side === "left" ? "center left" :
                        "center right"
              }}
              className={cn(
                "fixed z-50 gap-4 bg-background p-6 shadow-lg pt-10",
                side === "top" && "inset-x-0 top-0 border-b  border-gray-200 dark:border-gray-800/40",
                side === "bottom" && "inset-x-0 bottom-0 border-t border-gray-200 dark:border-gray-800/40 ",
                side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-gray-200 dark:border-gray-800/40  sm:max-w-sm",
                side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-gray-200 dark:border-gray-800/40  sm:max-w-sm",
                className
              )}
              data-lenis-prevent
              {...restProps}
            >
              {children}
              <SheetClose className="absolute right-4 top-11 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
                <X className="h-4 w-4" />
                <span className="sr-only">Close</span>
              </SheetClose>
            </motion.div>
          </SheetPortal>
        )}
      </AnimatePresence>,
      document.body
    );
  }
);
SheetContent.displayName = "SheetContent";

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
);
SheetHeader.displayName = "SheetHeader";

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
);
SheetFooter.displayName = "SheetFooter";

const SheetTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
));
SheetTitle.displayName = "SheetTitle";

const SheetDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
));
SheetDescription.displayName = "SheetDescription";

export {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetOverlay,
  SheetPortal,
  SheetTitle,
  SheetTrigger,
};
```
--------------------------------------------------

### COMPONENT: skeleton
Category: UI Elements
Description: A placeholder preview for content that is loading, reducing layout shift and improving perceived performance.
URL: https://lightswind.com/components/skeleton
Import: import { Skeleton } from "@/components/lightswind/skeleton";
Registry URL: https://lightswind.com/r/skeleton.json
Install Command: npx lightswind@latest add skeleton

Usage:
```tsx
import { Skeleton } from "@/components/lightswind/skeleton";

export function SkeletonDemo() {
  return <Skeleton className="h-[20px] w-[100px]" />;
}
```

Source Code:
```tsx

import { cn } from "@/components/lib/utils";
import * as React from "react";

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Shape of the skeleton */
  variant?: "default" | "circle" | "rounded" | "square";
  /** Width of the skeleton */
  width?: string | number;
  /** Height of the skeleton */
  height?: string | number;
  /** Animation type for the skeleton */
  animation?: "pulse" | "wave" | "none";
  /** Whether to show a shimmer effect */
  shimmer?: boolean;
  /** Number of skeleton items to display */
  count?: number;
}

function Skeleton({
  className,
  variant = "default",
  width,
  height,
  animation = "wave",
  shimmer = false,
  count = 1,
  ...props
}: SkeletonProps) {
  // Variant classes
  const variantClasses = {
    default: "rounded-md",
    circle: "rounded-full",
    rounded: "rounded-xl",
    square: "rounded-none"
  };

  // Animation classes
  const animationClasses = {
    pulse: "animate-pulse",
    wave: "",
    none: ""
  };

  // Style object for width and height
  const style: React.CSSProperties = {
    width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
    height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
    ...props.style
  };

  const hasShimmer = shimmer || animation === "wave";

  // Render multiple skeleton items if count > 1
  if (count > 1) {
    return (
      <div className={cn("flex flex-col gap-2", className)} {...props}>
        {Array.from({ length: count }).map((_, index) => (
          <div
            key={index}
            className={cn(
              "bg-muted relative overflow-hidden",
              "transition-all duration-300",
              "[.lw-3d_&]:shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(255,255,255,0.05)]",
              "dark:[.lw-3d_&]:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3)]",
              "[.lw-3d_&]:border [.lw-3d_&]:border-black/5 dark:[.lw-3d_&]:border-white/5",
              variantClasses[variant],
              animationClasses[animation],
              hasShimmer && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 dark:before:via-white/10 before:to-transparent"
            )}
            style={style}
          />
        ))}
      </div>
    );
  }

  return (
    <div
      className={cn(
        "bg-primary/20 relative overflow-hidden",
        "transition-all duration-300",
        "[.lw-3d_&]:shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(255,255,255,0.05)]",
        "dark:[.lw-3d_&]:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3)]",
        "[.lw-3d_&]:border [.lw-3d_&]:border-black/5 dark:[.lw-3d_&]:border-white/5",
        variantClasses[variant],
        animationClasses[animation],
        hasShimmer && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 dark:before:via-white/10 before:to-transparent",
        className
      )}
      style={style}
      {...props}
    />
  );
}

// Template Card Skeleton component for reuse
function TemplateCardSkeleton() {
  return (
    <div className="rounded-lg border   bg-card overflow-hidden shadow-sm">
      <div className="space-y-3">
        {/* Image placeholder */}
        <Skeleton className="h-48 w-full rounded-t-lg rounded-b-none" shimmer />

        {/* Content area */}
        <div className="p-4 space-y-3">
          {/* Title */}
          <Skeleton className="h-6 w-3/4" shimmer />

          {/* Description */}
          <div className="space-y-2">
            <Skeleton className="h-4 w-full" shimmer />
            <Skeleton className="h-4 w-5/6" shimmer />
          </div>

          {/* Tags */}
          <div className="flex flex-wrap gap-2 pt-2">
            <Skeleton className="h-5 w-16 rounded-full" shimmer />
            <Skeleton className="h-5 w-20 rounded-full" shimmer />
            <Skeleton className="h-5 w-14 rounded-full" shimmer />
          </div>

          {/* Price and button */}
          <div className="flex justify-between items-center pt-3">
            <Skeleton className="h-6 w-20" shimmer />
            <Skeleton className="h-9 w-28 rounded-md" shimmer />
          </div>
        </div>
      </div>
    </div>
  );
}

export { Skeleton, TemplateCardSkeleton };

```
--------------------------------------------------

### COMPONENT: stepper
Category: UI Elements
Description: A sleek animated increment/decrement stepper with spring physics, number-flip transitions, and boundary-aware disabled states.
URL: https://lightswind.com/components/stepper
Import: import { Stepper } from "@/components/lightswind/stepper"
Registry URL: https://lightswind.com/r/stepper.json
Install Command: npx lightswind@latest add stepper

Usage:
```tsx
import { Stepper } from "@/components/lightswind/stepper";

export function StepperDemo() {
  return (
    <div className="flex justify-center py-8">
      <Stepper defaultValue={1} min={1} max={10} size="lg" />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Minus, Plus } from "lucide-react";
import { cn } from "@/components/lib/utils";

interface StepperProps {
  /** Initial value */
  defaultValue?: number;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** onChange callback */
  onChange?: (value: number) => void;
  /** Size variant */
  size?: "sm" | "md" | "lg";
  /** Label for accessibility */
  label?: string;
  /** Additional CSS classes */
  className?: string;
}

export function Stepper({
  defaultValue = 1,
  min = 0,
  max = 99,
  step = 1,
  onChange,
  size = "md",
  label = "Quantity",
  className,
}: StepperProps) {
  const [value, setValue] = useState(defaultValue);
  const [direction, setDirection] = useState<"up" | "down">("up");

  const sizes = {
    sm: {
      container: "h-9 gap-1",
      button: "h-9 w-9 text-sm",
      display: "w-12 h-9 text-sm",
    },
    md: {
      container: "h-11 gap-1.5",
      button: "h-11 w-11",
      display: "w-16 h-11 text-base",
    },
    lg: {
      container: "h-14 gap-2",
      button: "h-14 w-14 text-lg",
      display: "w-20 h-14 text-lg",
    },
  };

  const iconSizes = {
    sm: "h-3.5 w-3.5",
    md: "h-4 w-4",
    lg: "h-5 w-5",
  };

  const s = sizes[size];

  const handleDecrement = () => {
    if (value - step < min) return;
    setDirection("down");
    const next = Math.max(min, value - step);
    setValue(next);
    onChange?.(next);
  };

  const handleIncrement = () => {
    if (value + step > max) return;
    setDirection("up");
    const next = Math.min(max, value + step);
    setValue(next);
    onChange?.(next);
  };

  const isAtMin = value <= min;
  const isAtMax = value >= max;

  const variants = {
    enter: (dir: "up" | "down") => ({
      y: dir === "up" ? 16 : -16,
      opacity: 0,
    }),
    center: { y: 0, opacity: 1 },
    exit: (dir: "up" | "down") => ({
      y: dir === "up" ? -16 : 16,
      opacity: 0,
    }),
  };

  return (
    <div
      className={cn("inline-flex items-center", s.container, className)}
      aria-label={label}
    >
      {/* Decrement Button */}
      <motion.button
        type="button"
        onClick={handleDecrement}
        disabled={isAtMin}
        aria-label="Decrement"
        className={cn(
          "relative flex items-center justify-center rounded-xl border bg-background shadow-sm transition-colors",
          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
          "disabled:opacity-30 disabled:cursor-not-allowed",
          s.button
        )}
        whileTap={{ scale: isAtMin ? 1 : 0.88 }}
        whileHover={{ scale: isAtMin ? 1 : 1.05 }}
        transition={{ type: "spring", stiffness: 400, damping: 20 }}
      >
        <Minus className={iconSizes[size]} />
      </motion.button>

      {/* Number Display */}
      <div
        className={cn(
          "relative flex items-center justify-center overflow-hidden rounded-xl border bg-muted/30 font-semibold tabular-nums select-none",
          s.display
        )}
      >
        <AnimatePresence mode="popLayout" custom={direction} initial={false}>
          <motion.span
            key={value}
            custom={direction}
            variants={variants}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{
              y: { type: "spring", stiffness: 500, damping: 35 },
              opacity: { duration: 0.12 },
            }}
            className="absolute"
          >
            {value}
          </motion.span>
        </AnimatePresence>
      </div>

      {/* Increment Button */}
      <motion.button
        type="button"
        onClick={handleIncrement}
        disabled={isAtMax}
        aria-label="Increment"
        className={cn(
          "relative flex items-center justify-center rounded-xl border bg-background shadow-sm transition-colors",
          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
          "disabled:opacity-30 disabled:cursor-not-allowed",
          s.button
        )}
        whileTap={{ scale: isAtMax ? 1 : 0.88 }}
        whileHover={{ scale: isAtMax ? 1 : 1.05 }}
        transition={{ type: "spring", stiffness: 400, damping: 20 }}
      >
        <Plus className={iconSizes[size]} />
      </motion.button>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: table
Category: UI Elements
Description: A responsive table component for displaying tabular data.
URL: https://lightswind.com/components/table
Import: import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/lightswind/table";
Registry URL: https://lightswind.com/r/table.json
Install Command: npx lightswind@latest add table

Usage:
```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/lightswind/table";

export function TableDemo() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>INV002</TableCell>
          <TableCell>Pending</TableCell>
          <TableCell>PayPal</TableCell>
          <TableCell className="text-right">$125.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils";
import { ArrowUpDown, ArrowUp, ArrowDown, Inbox } from "lucide-react";

interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
  /** Disables outer scroll container wrapper */
  noScroll?: boolean;
  /** Reduces cell padding for high-density data views */
  dense?: boolean;
  /** Adds subtle row hover background highlight */
  hoverable?: boolean;
  /** Alternating zebra stripe backgrounds for rows */
  striped?: boolean;
  /** Adds full grid borders around table cells */
  bordered?: boolean;
  /** Fixes table header to top during scrolling */
  stickyHeader?: boolean;
}

const TableContext = React.createContext<{
  dense?: boolean;
  hoverable?: boolean;
  striped?: boolean;
  bordered?: boolean;
}>({});

const Table = React.forwardRef<HTMLTableElement, TableProps>(
  (
    {
      className,
      noScroll,
      dense = false,
      hoverable = true,
      striped = false,
      bordered = false,
      stickyHeader = false,
      children,
      ...props
    },
    ref
  ) => {
    const table = (
      <TableContext.Provider value={{ dense, hoverable, striped, bordered }}>
        <table
          ref={ref}
          className={cn(
            "w-full text-sm text-left border-collapse",
            bordered && "border border-zinc-200 dark:border-zinc-800",
            className
          )}
          {...props}
        >
          {children}
        </table>
      </TableContext.Provider>
    );

    if (noScroll) return table;

    return (
      <div
        className={cn(
          "relative w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-background shadow-sm overflow-hidden transition-all duration-300",
          bordered && "border-2",
          /* 3D Mode Styling */
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-950 dark:[.lw-3d_&]:to-zinc-900/90",
          "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_12px_24px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.04)]",
          "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_12px_24px_-4px_rgba(0,0,0,0.3),0_4px_12px_-2px_rgba(0,0,0,0.2)]",
          "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10"
        )}
      >
        <div
          className={cn(
            "w-full overflow-auto max-h-[calc(80vh-70px)] custom-scrollbar",
            stickyHeader && "relative"
          )}
          data-lenis-prevent
        >
          {table}
        </div>
      </div>
    );
  }
);
Table.displayName = "Table";

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead
    ref={ref}
    className={cn(
      "sticky top-0 z-10 bg-zinc-100/90 dark:bg-zinc-900/90 border-b border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-100",
      "[.lw-3d_&]:bg-zinc-900 [.lw-3d_&]:text-white dark:[.lw-3d_&]:bg-zinc-100 dark:[.lw-3d_&]:text-zinc-950",
      className
    )}
    {...props}
  />
));
TableHeader.displayName = "TableHeader";

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("divide-y divide-zinc-100 dark:divide-zinc-800/60", className)}
    {...props}
  />
));
TableBody.displayName = "TableBody";

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 font-medium text-muted-foreground transition-all duration-300",
      "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-zinc-100 [.lw-3d_&]:to-zinc-200/80 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
      "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.45)] dark:[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]",
      className
    )}
    {...props}
  />
));
TableFooter.displayName = "TableFooter";

interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
  /** Highlights the row as selected */
  selected?: boolean;
  /** Shows cursor pointer on hover */
  clickable?: boolean;
}

const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
  ({ className, selected = false, clickable = false, ...props }, ref) => {
    const { hoverable, striped } = React.useContext(TableContext);

    return (
      <tr
        ref={ref}
        className={cn(
          "transition-colors",
          hoverable && "hover:bg-zinc-100/60 dark:hover:bg-zinc-900/60",
          striped && "even:bg-zinc-50/40 dark:even:bg-zinc-900/20",
          selected && "bg-primarylw/10 dark:bg-primarylw/20 font-medium",
          clickable && "cursor-pointer select-none",
          /* 3D Mode Row Styling */
          "[.lw-3d_&]:hover:bg-zinc-100/80 dark:[.lw-3d_&]:hover:bg-zinc-800/60",
          "data-[state=selected]:[.lw-3d_&]:bg-gradient-to-b data-[state=selected]:[.lw-3d_&]:from-primarylw/20 data-[state=selected]:[.lw-3d_&]:to-primarylw/10",
          "data-[state=selected]:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.3)] dark:data-[state=selected]:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.1)]",
          className
        )}
        data-state={selected ? "selected" : undefined}
        {...props}
      />
    );
  }
);
TableRow.displayName = "TableRow";

interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
  /** Text alignment */
  align?: "left" | "center" | "right";
  /** Enables sortable column header button styling */
  sortable?: boolean;
  /** Current active sort direction */
  sortDirection?: "asc" | "desc" | false;
  /** Callback triggered when column header is clicked */
  onSort?: () => void;
}

const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
  (
    {
      className,
      align = "left",
      sortable = false,
      sortDirection = false,
      onSort,
      children,
      ...props
    },
    ref
  ) => {
    const { dense, bordered } = React.useContext(TableContext);

    const alignmentClasses = {
      left: "text-left justify-start",
      center: "text-center justify-center",
      right: "text-right justify-end",
    };

    return (
      <th
        ref={ref}
        className={cn(
          "align-middle font-semibold text-zinc-700 dark:text-zinc-300 transition-all duration-200 select-none",
          dense ? "h-9 px-3 text-xs" : "h-11 px-4 text-xs tracking-wide uppercase",
          bordered && "border-r border-zinc-200 dark:border-zinc-800 last:border-r-0",
          sortable && "cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800/80",
          /* 3D Mode Header Styling (when .lw-3d is active on root) */
          "[.lw-3d_&]:bg-zinc-900 [.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-zinc-800 [.lw-3d_&]:to-zinc-950 [.lw-3d_&]:text-white",
          "[.lw-3d_&]:border-t [.lw-3d_&]:border-t-white/10 [.lw-3d_&]:border-b [.lw-3d_&]:border-b-zinc-900/50",
          "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.05)]",
          "dark:[.lw-3d_&]:bg-zinc-100 dark:[.lw-3d_&]:from-white dark:[.lw-3d_&]:to-zinc-200 dark:[.lw-3d_&]:text-zinc-950",
          "dark:[.lw-3d_&]:border-t-white/80 dark:[.lw-3d_&]:border-b-zinc-300",
          "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.9),0_1px_2px_0_rgba(0,0,0,0.15)]",
          "[&:first-child]:[.lw-3d_&]:rounded-tl-lg [&:last-child]:[.lw-3d_&]:rounded-tr-lg",
          className
        )}
        onClick={sortable ? onSort : undefined}
        {...props}
      >
        <div className={cn("inline-flex items-center gap-1.5 w-full", alignmentClasses[align])}>
          <span>{children}</span>
          {sortable && (
            <span className="shrink-0 text-muted-foreground [.lw-3d_&]:text-inherit">
              {sortDirection === "asc" ? (
                <ArrowUp className="w-3.5 h-3.5 text-primarylw [.lw-3d_&]:text-inherit" />
              ) : sortDirection === "desc" ? (
                <ArrowDown className="w-3.5 h-3.5 text-primarylw [.lw-3d_&]:text-inherit" />
              ) : (
                <ArrowUpDown className="w-3.5 h-3.5 opacity-40 group-hover:opacity-100" />
              )}
            </span>
          )}
        </div>
      </th>
    );
  }
);
TableHead.displayName = "TableHead";

interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
  /** Text alignment */
  align?: "left" | "center" | "right";
}

const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
  ({ className, align = "left", ...props }, ref) => {
    const { dense, bordered } = React.useContext(TableContext);

    const alignmentClasses = {
      left: "text-left",
      center: "text-center",
      right: "text-right",
    };

    return (
      <td
        ref={ref}
        className={cn(
          "align-middle text-foreground/90",
          dense ? "py-2 px-3 text-xs" : "py-3.5 px-4 text-sm",
          bordered && "border-r border-zinc-200 dark:border-zinc-800 last:border-r-0",
          alignmentClasses[align],
          className
        )}
        {...props}
      />
    );
  }
);
TableCell.displayName = "TableCell";

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("py-3 text-xs text-muted-foreground font-medium", className)}
    {...props}
  />
));
TableCaption.displayName = "TableCaption";

/** Ready-to-use empty state placeholder inside tables */
const TableEmptyState: React.FC<{
  icon?: React.ReactNode;
  title?: string;
  description?: string;
  action?: React.ReactNode;
  colSpan?: number;
}> = ({
  icon = <Inbox className="w-8 h-8 text-muted-foreground/60" />,
  title = "No results found",
  description = "No matching records were found for your current query.",
  action,
  colSpan = 10,
}) => (
  <tr>
    <td colSpan={colSpan} className="py-12 text-center">
      <div className="flex flex-col items-center justify-center space-y-2 max-w-sm mx-auto">
        <div className="p-3 rounded-full bg-zinc-100 dark:bg-zinc-800/80 mb-1">
          {icon}
        </div>
        <h4 className="text-sm font-semibold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
        {action && <div className="pt-2">{action}</div>}
      </div>
    </td>
  </tr>
);

/** Skeleton loading rows for table async loading */
const TableSkeletonRows: React.FC<{
  rows?: number;
  columns?: number;
}> = ({ rows = 5, columns = 4 }) => (
  <>
    {Array.from({ length: rows }).map((_, rIdx) => (
      <tr key={rIdx} className="animate-pulse">
        {Array.from({ length: columns }).map((_, cIdx) => (
          <td key={cIdx} className="py-3.5 px-4">
            <div className="h-4 bg-zinc-200 dark:bg-zinc-800 rounded-md w-full max-w-[120px]" />
          </td>
        ))}
      </tr>
    ))}
  </>
);

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  TableEmptyState,
  TableSkeletonRows,
};
```
--------------------------------------------------

### COMPONENT: toast
Category: UI Elements
Description: A notification component used to provide feedback to the user about an action or system event.
URL: https://lightswind.com/components/toast
Import: import { useToast } from '@/components/lightswind/use-toast';
import { Toaster } from '@/components/lightswind/toaster';
import { ToastAction } from '@/components/lightswind/toast';
Registry URL: https://lightswind.com/r/toast.json
Install Command: npx lightswind@latest add toast

Usage:
```tsx
import { useToast } from '@/components/lightswind/use-toast';
import { ToastAction } from '@/components/lightswind/toast';
import { Button } from '@/components/lightswind/button';

export function ToastDemo() {
  const { toast } = useToast();
  
  return (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled",
          description: "Your meeting has been scheduled for 4:30 PM.",
          action: (
            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
          ),
        })
      }}
    >
      Show Toast
    </Button>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { 
  X, 
  CheckCircle2, 
  AlertCircle, 
  AlertTriangle, 
  Info, 
  Loader2 
} from "lucide-react";
import { cva } from "class-variance-authority";
import { motion, HTMLMotionProps } from "framer-motion";

/* Toast Components */
const ToastProvider = ({ children }: { children: React.ReactNode }) => {
  return <div className="toast-provider">{children}</div>;
};

export type ToastPosition =
  | "top-right"
  | "top-left"
  | "bottom-right"
  | "bottom-left"
  | "top-center"
  | "bottom-center";

const toastViewportVariants = cva(
  "fixed z-[100] flex flex-col gap-2.5 p-4 w-full md:max-w-[420px] pointer-events-none",
  {
    variants: {
      position: {
        "top-right": "top-0 right-0 flex-col-reverse items-end",
        "top-left": "top-0 left-0 flex-col-reverse items-start",
        "bottom-right": "bottom-0 right-0 flex-col items-end",
        "bottom-left": "bottom-0 left-0 flex-col items-start",
        "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col items-center",
      },
    },
    defaultVariants: {
      position: "top-right",
    },
  }
);

export interface ToastViewportProps
  extends React.HTMLAttributes<HTMLDivElement> {
  position?: ToastPosition;
}

const ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(
  ({ className, position = "top-right", ...props }, ref) => (
    <div
      ref={ref}
      className={cn(toastViewportVariants({ position }), className)}
      {...props}
    />
  )
);
ToastViewport.displayName = "ToastViewport";

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full max-w-sm items-center justify-between gap-3 overflow-hidden rounded-2xl border p-4 pr-9 shadow-xl backdrop-blur-xl transition-all duration-300",
  {
    variants: {
      variant: {
        default: 
          "border-zinc-200/80 bg-background/95 text-foreground dark:border-zinc-800/80 shadow-zinc-950/5 dark:shadow-black/40",
        destructive: 
          "border-rose-500/30 bg-rose-500/10 text-rose-950 dark:text-rose-100 shadow-rose-500/10 dark:border-rose-500/30 dark:bg-rose-950/40",
        success: 
          "border-emerald-500/30 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100 shadow-emerald-500/10 dark:border-emerald-500/30 dark:bg-emerald-950/40",
        warning: 
          "border-amber-500/30 bg-amber-500/10 text-amber-950 dark:text-amber-100 shadow-amber-500/10 dark:border-amber-500/30 dark:bg-amber-950/40",
        info: 
          "border-sky-500/30 bg-sky-500/10 text-sky-950 dark:text-sky-100 shadow-sky-500/10 dark:border-sky-500/30 dark:bg-sky-950/40",
        loading: 
          "border-indigo-500/30 bg-indigo-500/10 text-indigo-950 dark:text-indigo-100 shadow-indigo-500/10 dark:border-indigo-500/30 dark:bg-indigo-950/40",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface ToastProps extends Omit<HTMLMotionProps<"div">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> {
  variant?: "default" | "destructive" | "success" | "warning" | "info" | "loading";
  duration?: number;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  onClose?: () => void;
  icon?: React.ReactNode;
  avatar?: string;
  showProgress?: boolean;
}

const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
  (
    {
      className,
      variant = "default",
      duration = 5000,
      open = true,
      onOpenChange,
      onClose,
      children,
      icon,
      avatar,
      showProgress = true,
      ...props
    },
    ref
  ) => {
    const [paused, setPaused] = React.useState(false);

    const defaultIcons = {
      default: null,
      success: <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />,
      destructive: <AlertCircle className="w-5 h-5 text-rose-500 shrink-0" />,
      warning: <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0" />,
      info: <Info className="w-5 h-5 text-sky-500 shrink-0" />,
      loading: <Loader2 className="w-5 h-5 text-indigo-500 animate-spin shrink-0" />,
    };

    const activeIcon = icon !== undefined ? icon : defaultIcons[variant];

    return (
      <motion.div
        ref={ref}
        layout
        initial={{ opacity: 0, scale: 0.85, y: 15 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.85, y: 15 }}
        transition={{
          type: "spring",
          damping: 22,
          stiffness: 350,
          mass: 0.8,
        }}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        className={cn(
          toastVariants({ variant }),
          "relative z-50 overflow-hidden",
          "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),inset_0_-1px_0_0_rgba(0,0,0,0.06),0_12px_24px_-4px_rgba(0,0,0,0.12)]",
          "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_0_rgba(0,0,0,0.3),0_12px_24px_-4px_rgba(0,0,0,0.4)]",
          "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
          className
        )}
        {...props}
      >
        <div className="flex items-start gap-3 w-full">
          {avatar ? (
            <img
              src={avatar}
              alt="Avatar"
              className="w-8 h-8 rounded-full object-cover shrink-0 border border-border/50 shadow-sm"
            />
          ) : (
            activeIcon && <div className="mt-0.5 shrink-0">{activeIcon}</div>
          )}

          <div className="flex-1 min-w-0 pr-2">{children as React.ReactNode}</div>
        </div>

        {/* Progress Bar with pause on hover */}
        {showProgress && duration !== Infinity && variant !== "loading" && (
          <div className="absolute bottom-0 left-0 right-0 h-1 bg-black/5 dark:bg-white/5 overflow-hidden">
            <motion.div
              initial={{ width: "0%" }}
              animate={{ width: paused ? "100%" : "100%" }}
              style={{ animationPlayState: paused ? "paused" : "running" }}
              transition={{ duration: duration / 1000, ease: "linear" }}
              className={cn(
                "h-full transition-all",
                variant === "destructive" ? "bg-rose-500" :
                variant === "success" ? "bg-emerald-500" :
                variant === "warning" ? "bg-amber-500" :
                variant === "info" ? "bg-sky-500" :
                "bg-indigo-500"
              )}
            />
          </div>
        )}

        {/* Close Button */}
        <button
          onClick={() => {
            onOpenChange?.(false);
            onClose?.();
          }}
          className="absolute right-2.5 top-3 p-1 rounded-full text-foreground/50 hover:text-foreground hover:bg-muted/80 transition-all cursor-pointer opacity-70 group-hover:opacity-100"
          aria-label="Close toast"
        >
          <X className="h-3.5 w-3.5" />
        </button>
      </motion.div>
    );
  }
);
Toast.displayName = "Toast";

const ToastClose = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ className, ...props }, ref) => (
  <button
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/70 opacity-70 transition-opacity hover:text-foreground hover:opacity-100",
      className
    )}
    aria-label="Close toast"
    {...props}
  >
    <X className="h-4 w-4" />
  </button>
));
ToastClose.displayName = "ToastClose";

const ToastTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h2
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
));
ToastTitle.displayName = "ToastTitle";

const ToastDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
));
ToastDescription.displayName = "ToastDescription";

const ToastAction = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ className, ...props }, ref) => (
  <button
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-muted focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
      className
    )}
    {...props}
  />
));
ToastAction.displayName = "ToastAction";

export {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
};

```
--------------------------------------------------

### COMPONENT: tooltip
Category: UI Elements
Description: A popup that displays informative text when users hover over or focus on an element.
URL: https://lightswind.com/components/tooltip
Import: import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';
Registry URL: https://lightswind.com/r/tooltip.json
Install Command: npx lightswind@latest add tooltip

Usage:
```tsx
import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';
import { Button } from '@/components/lightswind/button';

export function TooltipDemo() {
  return (
    <Tooltip 
      content="Add to library"
      variant="default"
      side="top"
    >
      <TooltipTrigger asChild>
        <Button variant="outline">Hover Me</Button>
      </TooltipTrigger>
    </Tooltip>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils"; // Assuming utils.ts is in lib/
import { motion, AnimatePresence, Variants } from "framer-motion";
import ReactDOM from "react-dom";

// --- Context Types ---
interface TooltipContextType {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  content: React.ReactNode;
  config: TooltipConfig;
  triggerRef: React.MutableRefObject<HTMLElement | null>;
  showTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
  hideTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
  handleMouseEnter: () => void;
  handleMouseLeave: () => void;
}

interface TooltipConfig {
  side: "top" | "right" | "bottom" | "left";
  align: "center" | "start" | "end";
  sideOffset: number;
  variant: "default" | "info" | "success" | "warning" | "error";
  hideArrow: boolean;
  maxWidth: string | number;
}

const TooltipContext = React.createContext<TooltipContextType | undefined>(undefined);

// --- Tooltip Props ---
interface TooltipProps {
  children: React.ReactNode;
  content?: React.ReactNode;
  defaultOpen?: boolean;
  open?: boolean; // Controlled open state
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number; // Delay before showing tooltip
  hideDelay?: number; // Delay before hiding tooltip
  side?: "top" | "right" | "bottom" | "left";
  align?: "center" | "start" | "end";
  sideOffset?: number; // Distance from trigger
  variant?: "default" | "info" | "success" | "warning" | "error";
  hideArrow?: boolean;
  maxWidth?: string | number;
  asChild?: boolean; // If true, children is rendered directly without a wrapper div
  disabled?: boolean; // If true, tooltip interactions are disabled
}

// --- Tooltip Component ---
const Tooltip: React.FC<TooltipProps> = ({
  children,
  content,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  delayDuration = 300,
  hideDelay = 100,
  side = "top",
  align = "center",
  sideOffset = 8,
  variant = "default",
  hideArrow = false,
  maxWidth = "20rem",
  asChild = false,
  disabled = false,
}) => {
  // Manage uncontrolled open state
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  // Determine if the component is controlled or uncontrolled
  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : uncontrolledOpen;

  // Ref for the trigger element, passed via context to TooltipContentDisplay
  const triggerRef = React.useRef<HTMLElement | null>(null);

  // Function to update the open state, handling both controlled and uncontrolled modes
  const setOpen = React.useCallback((value: boolean | ((prev: boolean) => boolean)) => {
    if (!isControlled) {
      setUncontrolledOpen(value);
    }
    if (onOpenChange) {
      // Calculate the new value if a function is passed
      const newValue = typeof value === "function" ? value(open) : value;
      onOpenChange(newValue);
    }
  }, [isControlled, onOpenChange, open]);

  // Refs for managing show/hide timeouts
  const showTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const hideTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  // Memoize configuration object to prevent unnecessary re-renders
  const config = React.useMemo(() => ({
    side,
    align,
    sideOffset,
    variant,
    hideArrow,
    maxWidth,
  }), [side, align, sideOffset, variant, hideArrow, maxWidth]);

  // Clean up any pending timeouts on component unmount
  React.useEffect(() => {
    return () => {
      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
    };
  }, []);

  const handleMouseEnter = React.useCallback(() => {
    if (disabled) return;
    // Always clear both timers to prevent race conditions
    if (hideTimeoutRef.current) {
      clearTimeout(hideTimeoutRef.current);
      hideTimeoutRef.current = null;
    }
    if (showTimeoutRef.current) {
      clearTimeout(showTimeoutRef.current);
      showTimeoutRef.current = null;
    }
    showTimeoutRef.current = setTimeout(() => setOpen(true), delayDuration);
  }, [disabled, setOpen, delayDuration]);

  const handleMouseLeave = React.useCallback(() => {
    if (disabled) return;
    // Always clear both timers to prevent race conditions
    if (showTimeoutRef.current) {
      clearTimeout(showTimeoutRef.current);
      showTimeoutRef.current = null;
    }
    if (hideTimeoutRef.current) {
      clearTimeout(hideTimeoutRef.current);
      hideTimeoutRef.current = null;
    }
    hideTimeoutRef.current = setTimeout(() => setOpen(false), hideDelay);
  }, [disabled, setOpen, hideDelay]);

  // Memoize the context value to prevent unnecessary re-renders of consumers
  const contextValue = React.useMemo(() => ({
    open,
    setOpen,
    content,
    config,
    triggerRef,
    showTimeoutRef,
    hideTimeoutRef,
    handleMouseEnter,
    handleMouseLeave,
  }), [open, setOpen, content, config, triggerRef, handleMouseEnter, handleMouseLeave]);

  return (
    <TooltipContext.Provider value={contextValue}>
      {disabled ? children : (
        <TooltipTrigger
          asChild={asChild}
          triggerRef={triggerRef}
        >
          {children}
        </TooltipTrigger>
      )}
      <TooltipContentDisplay />
    </TooltipContext.Provider>
  );
};

// --- TooltipTrigger Props ---
interface TooltipTriggerProps {
  children: React.ReactNode;
  delayDuration?: number;
  hideDelay?: number;
  asChild?: boolean;
  triggerRef?: React.MutableRefObject<HTMLElement | null>;
}

// --- TooltipTrigger Component ---
const TooltipTrigger = React.forwardRef<HTMLElement, TooltipTriggerProps>(
  ({ children, asChild = false, triggerRef }, ref) => {
    const context = React.useContext(TooltipContext);
    if (!context) {
      throw new Error("TooltipTrigger must be used within a Tooltip");
    }

    // Combined ref to set both the forwarded ref and the internal triggerRef
    const combinedRef = React.useCallback((node: HTMLElement | null) => {
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref) {
        (ref as React.MutableRefObject<HTMLElement | null>).current = node;
      }
      if (triggerRef) {
        triggerRef.current = node;
      }
    }, [ref, triggerRef]);

    // Props to be applied to the trigger element
    const triggerProps = {
      ref: combinedRef, // Use the combined ref
      onMouseEnter: context.handleMouseEnter,
      onMouseLeave: context.handleMouseLeave,
      onFocus: () => context.setOpen(true),
      onBlur: () => context.setOpen(false),
    };

    // If asChild is true, clone props onto the child element
    if (asChild && React.isValidElement(children)) {
      return React.cloneElement(children, triggerProps);
    }

    // Default rendering if asChild is false
    return (
      <div
        className="inline-block relative" // Keeps the trigger as a block for correct positioning
        {...triggerProps}
      >
        {children}
      </div>
    );
  }
);
TooltipTrigger.displayName = "TooltipTrigger";

// --- TooltipContentDisplay Component ---
// This component renders the actual tooltip content and handles its positioning.
const TooltipContentDisplay = () => {
  const context = React.useContext(TooltipContext);
  if (!context) {
    throw new Error("TooltipContentDisplay must be used within a Tooltip");
  }

  const { open, content, config, triggerRef } = context;
  const [position, setPosition] = React.useState({ x: 0, y: 0 });
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  const getAnimationVariants = React.useCallback((): Variants => {
    const { side } = config;
    const distance = 8;

    return {
      hidden: {
        opacity: 0,
        scale: 0.8,
        x: side === "left" ? distance : side === "right" ? -distance : 0,
        y: side === "top" ? distance : side === "bottom" ? -distance : 0,
      },
      visible: {
        opacity: 1,
        scale: 1,
        x: 0,
        y: 0,
        transition: {
          type: "spring",
          damping: 20,
          stiffness: 400,
        },
      },
      exit: {
        opacity: 0,
        scale: 0.8,
        transition: { duration: 0.15, ease: "easeIn" },
        pointerEvents: "none",
      },
    };
  }, [config]);

  const updatePosition = React.useCallback(() => {
    if (!contentRef.current || !triggerRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const contentRect = contentRef.current.getBoundingClientRect();

    let x = 0;
    let y = 0;
    const { side, align, sideOffset } = config;

    switch (side) {
      case "top":
        y = triggerRect.top - contentRect.height - sideOffset;
        break;
      case "bottom":
        y = triggerRect.bottom + sideOffset;
        break;
      case "left":
        x = triggerRect.left - contentRect.width - sideOffset;
        break;
      case "right":
        x = triggerRect.right + sideOffset;
        break;
    }

    if (side === "top" || side === "bottom") {
      switch (align) {
        case "start":
          x = triggerRect.left;
          break;
        case "end":
          x = triggerRect.right - contentRect.width;
          break;
        default:
          x = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
          break;
      }
    } else {
      switch (align) {
        case "start":
          y = triggerRect.top;
          break;
        case "end":
          y = triggerRect.bottom - contentRect.height;
          break;
        default:
          y = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
          break;
      }
    }

    const padding = 8;
    if (x < padding) x = padding;
    if (x + contentRect.width > window.innerWidth - padding)
      x = window.innerWidth - contentRect.width - padding;
    if (y < padding) y = padding;
    if (y + contentRect.height > window.innerHeight - padding)
      y = window.innerHeight - contentRect.height - padding;

    setPosition({ x, y });
  }, [config, triggerRef]);

  React.useEffect(() => {
    if (open) {
      const id = requestAnimationFrame(updatePosition);
      window.addEventListener("resize", updatePosition);
      window.addEventListener("scroll", updatePosition, true);
      return () => {
        cancelAnimationFrame(id);
        window.removeEventListener("resize", updatePosition);
        window.removeEventListener("scroll", updatePosition, true);
      };
    }
  }, [open, updatePosition]);

  const getArrowStyle = React.useCallback(() => {
    const { side, align } = config;
    const arrowSize = 8;
    let style: React.CSSProperties = {
      position: "absolute",
      width: arrowSize,
      height: arrowSize,
      transform: "rotate(45deg)",
      zIndex: -1,
    };

    switch (side) {
      case "top":
        style.bottom = -arrowSize / 2;
        style.left = align === "center" ? "50%" : align === "start" ? "15%" : undefined;
        if (align === "end") style.right = "15%";
        if (align === "center") style.transform = "translateX(-50%) rotate(45deg)";
        break;
      case "bottom":
        style.top = -arrowSize / 2;
        style.left = align === "center" ? "50%" : align === "start" ? "15%" : undefined;
        if (align === "end") style.right = "15%";
        if (align === "center") style.transform = "translateX(-50%) rotate(45deg)";
        break;
      case "left":
        style.right = -arrowSize / 2;
        style.top = align === "center" ? "50%" : align === "start" ? "15%" : undefined;
        if (align === "end") style.bottom = "15%";
        if (align === "center") style.transform = "translateY(-50%) rotate(45deg)";
        break;
      case "right":
        style.left = -arrowSize / 2;
        style.top = align === "center" ? "50%" : align === "start" ? "15%" : undefined;
        if (align === "end") style.bottom = "15%";
        if (align === "center") style.transform = "translateY(-50%) rotate(45deg)";
        break;
    }

    return style;
  }, [config]);

  const getVariantClasses = React.useCallback(() => {
    const { variant } = config;
    switch (variant) {
      case "info":
        return cn(
          "bg-primarylw text-white border-[color-mix(in_srgb,var(--primarylw)_20%,transparent)]",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-blue-500 [.lw-3d_&]:to-blue-600",
          "[.lw-3d_&]:border-blue-600/30 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25)]"
        );
      case "success":
        return cn(
          "bg-emerald-600 text-white border-emerald-400/20",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-emerald-500 [.lw-3d_&]:to-emerald-600",
          "[.lw-3d_&]:border-emerald-600/30 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25)]"
        );
      case "warning":
        return cn(
          "bg-amber-500 text-black border-amber-400/20",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-amber-400 [.lw-3d_&]:to-amber-500",
          "[.lw-3d_&]:border-amber-500/30 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.4)]"
        );
      case "error":
        return cn(
          "bg-rose-600 text-white border-rose-400/20",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-rose-500 [.lw-3d_&]:to-rose-600",
          "[.lw-3d_&]:border-rose-600/30 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25)]"
        );
      default:
        return cn(
          "bg-popover/90 text-popover-foreground border-gray-200 dark:border-gray-800 backdrop-blur-md shadow-xl",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/90",
          "dark:[.lw-3d_&]:from-zinc-800 dark:[.lw-3d_&]:to-zinc-900",
          "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.6)]",
          "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15)]"
        );
    }
  }, [config]);

  if (!mounted) return null;

  return ReactDOM.createPortal(
    <AnimatePresence>
      {open && (
        <motion.div
          ref={contentRef}
          onMouseEnter={context.handleMouseEnter}
          onMouseLeave={context.handleMouseLeave}
          style={{
            position: "fixed",
            top: position.y,
            left: position.x,
            maxWidth: config.maxWidth,
            zIndex: 9999,
          }}
          initial="hidden"
          animate="visible"
          exit="exit"
          variants={getAnimationVariants()}
          className={cn(
            "rounded-md px-3 py-1.5 text-xs font-medium border border-transparent",
            "transition-all duration-300",
            "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.35),0_2px_4px_0_rgba(0,0,0,0.06),0_4px_12px_0_rgba(0,0,0,0.08)]",
            "dark:[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),0_2px_4px_0_rgba(0,0,0,0.2),0_4px_12px_0_rgba(0,0,0,0.3)]",
            "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
            getVariantClasses()
          )}
        >
          {!config.hideArrow && (
            <div
              className={cn("absolute w-2 h-2", getVariantClasses(), "border-0")}
              style={getArrowStyle()}
            />
          )}
          {content}
        </motion.div>
      )}
    </AnimatePresence>,
    document.body
  );
};

// Re-export as named export
export { Tooltip, TooltipTrigger };

// For legacy compatibility (if needed, otherwise remove)
export const Tooltips = Tooltip;

// Deprecated TooltipContent, kept for backward compatibility with a warning
export const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  (props, _ref) => {
    console.warn("TooltipContent is deprecated. Use the Tooltip component with content prop instead.");
    return <div {...props} />;
  }
);
TooltipContent.displayName = "TooltipContent";

// Backward compatibility for TooltipProvider (if needed, otherwise remove)
export const TooltipProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <>{children}</>;
};
```
--------------------------------------------------

## CATEGORY (FREE): Form Controls (15)

### COMPONENT: calendar
Category: Form Controls
Description: A premium date picker component with high-fps animations, glassmorphism, and silky month transitions.
URL: https://lightswind.com/components/calendar
Import: import { Calendar } from "@/components/lightswind/calendar"
Registry URL: https://lightswind.com/r/calendar.json
Install Command: npx lightswind@latest add calendar

Usage:
```tsx
import { Calendar } from "@/components/lightswind/calendar";
import { useState } from "react";

export function CalendarDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-2xl border border-gray-200"
    />
  );
}
```

Source Code:
```tsx
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { motion, AnimatePresence } from "framer-motion"

import { cn } from "@/components/lib/utils"
import { buttonVariants } from "./button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  const [direction, setDirection] = React.useState(0)
  const [month, setMonth] = React.useState<Date>(props.month || props.defaultMonth || new Date())

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      month={month}
      onMonthChange={(newMonth) => {
        setDirection(newMonth > month ? 1 : -1)
        setMonth(newMonth)
        props.onMonthChange?.(newMonth)
      }}
      className={cn(
        "p-4 bg-white/70 dark:bg-black/40 backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl transition-all duration-300",
        "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
        "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
        "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_12px_24px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.04)]",
        "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_12px_24px_-4px_rgba(0,0,0,0.3),0_4px_12px_-2px_rgba(0,0,0,0.2)]",
        className
      )}
      classNames={{
        months: "relative",
        month: "space-y-4",
        month_caption: "flex justify-center pt-1 relative items-center h-10",
        caption_label: "text-sm font-bold tracking-tight text-foreground/90",
        nav: "flex items-center space-x-1",
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-8 w-8 bg-background/50 p-0 opacity-70 hover:opacity-100 hover:bg-accent border-gray-200 dark:border-gray-800 rounded-full absolute left-1 top-1 z-20 transition-all active:scale-90"
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-8 w-8 bg-background/50 p-0 opacity-70 hover:opacity-100 hover:bg-accent border-gray-200 dark:border-gray-800 rounded-full absolute right-1 top-1 z-20 transition-all active:scale-90"
        ),
        month_grid: "w-full border-collapse space-y-1",
        weekdays: "flex justify-between",
        weekday: "text-muted-foreground/60 w-9 font-bold text-[0.65rem] uppercase tracking-[0.1em] text-center",
        week: "flex w-full mt-1 justify-between",
        day: "h-9 w-9 text-center text-sm p-0 relative focus-within:relative focus-within:z-20",
        day_button: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-medium transition-all duration-300 hover:bg-primary/10 dark:hover:bg-primary/20",
          "aria-selected:opacity-100 rounded-full relative overflow-visible"
        ),
        selected: "text-primary-foreground",
        today: "text-primary font-bold after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-primary after:rounded-full",
        outside: "day-outside text-muted-foreground/30 opacity-40",
        disabled: "text-muted-foreground opacity-20 cursor-not-allowed",
        range_start: "day-range-start rounded-l-full",
        range_end: "day-range-end rounded-r-full",
        range_middle: "aria-selected:bg-primary/20 aria-selected:text-primary dark:aria-selected:bg-primary/20 dark:aria-selected:text-primary rounded-none",
        hidden: "invisible",
        ...classNames,
      }}
      components={{
        Chevron: ({ orientation }) => {
          const Icon = orientation === "left" ? ChevronLeft : ChevronRight
          return (
            <motion.div
              whileHover={{ scale: 1.2 }}
              whileTap={{ scale: 0.8 }}
              className="flex items-center justify-center"
            >
              <Icon className="h-4 w-4" />
            </motion.div>
          )
        },
        Month: ({ children, ...props }) => (
          <AnimatePresence mode="popLayout" custom={direction} initial={false}>
            <motion.div
              key={month.toISOString()}
              custom={direction}
              initial={{ opacity: 0, x: direction * 20, filter: "blur(4px)" }}
              animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
              exit={{ opacity: 0, x: -direction * 20, filter: "blur(4px)" }}
              transition={{
                type: "spring",
                stiffness: 400,
                damping: 30,
                mass: 1
              }}
              className="w-full h-full"
            >
              {children}
            </motion.div>
          </AnimatePresence>
        ),
        DayButton: ({ day, modifiers, ...buttonProps }) => {
          const isSelected = modifiers.selected;
          const isRangeStart = modifiers.range_start;
          const isRangeEnd = modifiers.range_end;
          const isRangeMiddle = modifiers.range_middle;
          const isRange = isRangeStart || isRangeEnd || isRangeMiddle;
          // Avoid jumping layout animations when a range is spanning
          const useLayoutAnim = isSelected && !isRange;

          // Filter out props that conflict with Framer Motion's motion.button
          const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDragExit, className, ...validProps } = buttonProps as any;

          return (
            <div className="relative w-full h-full flex items-center justify-center">
              {useLayoutAnim && (
                <motion.div
                  layoutId={props.mode === "multiple" ? undefined : "calendar-selection-pro"}
                  className={cn(
                    "absolute inset-0 bg-primary rounded-full shadow-lg shadow-primary/20",
                    "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white/15 [.lw-3d_&]:to-black/15",
                    "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.3),inset_0_-1.5px_0_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.15)]"
                  )}
                  transition={{
                    type: "spring",
                    stiffness: 500,
                    damping: 35,
                  }}
                  style={{ zIndex: 0 }}
                />
              )}
              {/* Fallback solid background for the edges of a range */}
              {isRange && (isRangeStart || isRangeEnd) && (
                <div className={cn(
                  "absolute inset-0 bg-primary rounded-full shadow-lg shadow-primary/20 z-0",
                  "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white/15 [.lw-3d_&]:to-black/15",
                  "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.3),inset_0_-1.5px_0_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.15)]"
                )} />
              )}
              <motion.button
                {...validProps}
                className={cn(
                  className, // Incorporate dynamically generated classes from RDP
                  "z-10 relative overflow-visible flex items-center justify-center",
                  // Ensure start/end of a range or single selection shows white text
                  (useLayoutAnim || isRangeStart || isRangeEnd) && "text-primary-foreground focus:text-primary-foreground hover:text-primary-foreground focus:bg-transparent",
                  // Ensure middle selections use theme colored text instead of turning white
                  isRangeMiddle && "text-primary dark:text-primary font-medium"
                )}
                whileHover={!isRange ? { scale: 1.1 } : undefined}
                whileTap={!isRange ? { scale: 0.9 } : undefined}
              >
                {day.date.getDate()}
              </motion.button>
            </div>
          )
        }
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

```
--------------------------------------------------

### COMPONENT: checkbox
Category: Form Controls
Description: A control that allows the user to toggle between checked and not checked.
URL: https://lightswind.com/components/checkbox
Import: import { Checkbox } from '@/components/lightswind/checkbox';
Registry URL: https://lightswind.com/r/checkbox.json
Install Command: npx lightswind@latest add checkbox

Usage:
```tsx
import { Checkbox } from '@/components/lightswind/checkbox';

export function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label
        htmlFor="terms"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { Check } from "lucide-react";

export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
}

const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, checked, defaultChecked, onCheckedChange, ...props }, ref) => {
    const [isChecked, setIsChecked] = React.useState(
      checked !== undefined ? checked : (defaultChecked || false)
    );
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
      if (checked !== undefined) {
        setIsChecked(checked);
        setIsAnimating(true);
        
        // Reset animation state after transition completes
        const timer = setTimeout(() => {
          setIsAnimating(false);
        }, 300);
        
        return () => clearTimeout(timer);
      }
    }, [checked]);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const newChecked = event.target.checked;
      setIsChecked(newChecked);
      setIsAnimating(true);
      
      // Reset animation state after transition completes
      setTimeout(() => {
        setIsAnimating(false);
      }, 300);
      
      onCheckedChange?.(newChecked);
      props.onChange?.(event);
    };

    return (
      <div className="relative">
        <input
          type="checkbox"
          className="absolute h-4 w-4 opacity-0"
          ref={ref}
          checked={isChecked}
          onChange={handleChange}
          {...props}
        />
        <div
          className={cn(
            "peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background",
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
            "disabled:cursor-not-allowed disabled:opacity-50",
            "transition-all duration-300 ease-in-out",
            isAnimating && "scale-110",
            "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
            isChecked 
              ? "bg-primary [.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white/15 [.lw-3d_&]:to-black/15 [.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_-1px_0_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(0,0,0,0.05)]" 
              : "bg-transparent hover:bg-primary/10 [.lw-3d_&]:shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.15)]",
            className
          )}
        >
          {isChecked && (
            <div className={cn(
              "flex items-center justify-center text-current",
              "animate-in fade-in-0 zoom-in-0 duration-300"
            )}>
              <Check className="h-4 w-4 text-white dark:text-black" />
            </div>
          )}
        </div>
      </div>
    );
  }
);
Checkbox.displayName = "Checkbox";

export { Checkbox };

```
--------------------------------------------------

### COMPONENT: command
Category: Form Controls
Description: A command palette that provides keyboard-centric and search-enabled command execution.
URL: https://lightswind.com/components/command
Import: import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandBadge } from '@/components/lightswind/command';
Registry URL: https://lightswind.com/r/command.json
Install Command: npx lightswind@latest add command

Usage:
```tsx
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandBadge } from '@/components/lightswind/command';
import { Calendar, Smile, Settings } from 'lucide-react';

export function CommandDemo() {
  return (
    <Command className="rounded-2xl border shadow-xl">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar className="mr-2 h-4 w-4 text-indigo-500" />
            <span>Calendar</span>
            <CommandBadge variant="indigo">Popular</CommandBadge>
          </CommandItem>
          <CommandItem>
            <Smile className="mr-2 h-4 w-4 text-amber-500" />
            <span>Search Emoji</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}
```

Source Code:
```tsx
"use client";

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { Dialog, DialogContent } from "./dialog";
import { Search, Loader2 } from "lucide-react";

interface CommandContextType {
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  isLoading?: boolean;
  emptyMessage?: string;
  visibleItemCount: number;
  registerItem: (id: string, text: string) => void;
  unregisterItem: (id: string) => void;
  setItemVisible: (id: string, visible: boolean) => void;
  selectedIndex: number;
  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
  itemIds: string[];
}

const CommandContext = React.createContext<CommandContextType | undefined>(undefined);

function useCommand() {
  const context = React.useContext(CommandContext);
  if (!context) {
    throw new Error("useCommand must be used within a Command component");
  }
  return context;
}

interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
  isLoading?: boolean;
  emptyMessage?: string;
  value?: string;
  onValueChange?: (value: string) => void;
}

const Command = React.forwardRef<HTMLDivElement, CommandProps>(
  (
    {
      className,
      isLoading = false,
      emptyMessage = "No results found.",
      value: controlledValue,
      onValueChange,
      children,
      ...props
    },
    ref
  ) => {
    const [uncontrolledQuery, setUncontrolledQuery] = React.useState("");
    const isControlled = controlledValue !== undefined;
    const searchQuery = isControlled ? controlledValue : uncontrolledQuery;

    const setSearchQuery = React.useCallback(
      (q: string) => {
        if (!isControlled) {
          setUncontrolledQuery(q);
        }
        onValueChange?.(q);
      },
      [isControlled, onValueChange]
    );

    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const noop = React.useCallback(() => {}, []);

    // Reset selection when query changes
    React.useEffect(() => {
      setSelectedIndex(0);
    }, [searchQuery]);

    return (
      <CommandContext.Provider
        value={{
          searchQuery,
          setSearchQuery,
          isLoading,
          emptyMessage,
          visibleItemCount: 1, // Fallback for components checking count
          registerItem: noop,
          unregisterItem: noop,
          setItemVisible: noop,
          selectedIndex,
          setSelectedIndex,
          itemIds: [],
        }}
      >
        <div
          ref={ref}
          className={cn(
            "flex h-full w-full flex-col overflow-hidden rounded-2xl border border-zinc-200/80 dark:border-zinc-800/80 bg-popover text-popover-foreground shadow-2xl backdrop-blur-md transform-gpu",
            "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
            "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
            className
          )}
          {...props}
          cmdk-root=""
        >
          {children}
        </div>
      </CommandContext.Provider>
    );
  }
);
Command.displayName = "Command";

interface CommandDialogProps {
  children: React.ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
}

const CommandDialog: React.FC<CommandDialogProps> = ({
  children,
  open,
  onOpenChange,
  className,
}) => {
  const handleDialogClick = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  React.useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault();
        onOpenChange?.(false);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open, onOpenChange]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        hideCloseButton
        className={cn(
          "overflow-hidden p-0 shadow-2xl border-zinc-200/80 dark:border-zinc-800/80 bg-background/98 max-w-2xl sm:max-w-2xl rounded-2xl z-[70] transform-gpu will-change-transform",
          className
        )}
        onClick={handleDialogClick}
      >
        <Command className="border-none shadow-none bg-transparent">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  );
};

interface CommandInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  onValueChange?: (value: string) => void;
  isLoading?: boolean;
}

const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
  (
    { className, onValueChange, isLoading: controlledLoading, autoFocus = true, ...props },
    ref
  ) => {
    const { searchQuery, setSearchQuery, isLoading: contextLoading } = useCommand();
    const isLoading = controlledLoading !== undefined ? controlledLoading : contextLoading;
    const internalRef = React.useRef<HTMLInputElement | null>(null);

    React.useImperativeHandle(ref, () => internalRef.current as HTMLInputElement);

    React.useEffect(() => {
      if (autoFocus) {
        const focusInput = () => {
          if (internalRef.current) {
            internalRef.current.focus();
          }
        };
        // Immediate attempt + delayed attempt after modal entrance animation
        requestAnimationFrame(focusInput);
        const timer = setTimeout(focusInput, 60);
        return () => clearTimeout(timer);
      }
    }, [autoFocus]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const q = e.target.value;
      if (onValueChange) onValueChange(q);
      else setSearchQuery(q);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      const listEl = e.currentTarget.closest('[cmdk-root]')?.querySelector('[cmdk-list]');
      if (!listEl) return;

      const items = Array.from(listEl.querySelectorAll<HTMLElement>('[cmdk-item]:not([data-disabled="true"])'));
      if (items.length === 0) return;

      const currentIndex = items.findIndex((el) => el.getAttribute('data-active') === 'true');

      if (e.key === "ArrowDown") {
        e.preventDefault();
        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
        items.forEach((el, idx) => {
          if (idx === nextIndex) {
            el.setAttribute('data-active', 'true');
            el.scrollIntoView({ block: 'nearest' });
          } else {
            el.removeAttribute('data-active');
          }
        });
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
        items.forEach((el, idx) => {
          if (idx === prevIndex) {
            el.setAttribute('data-active', 'true');
            el.scrollIntoView({ block: 'nearest' });
          } else {
            el.removeAttribute('data-active');
          }
        });
      } else if (e.key === "Enter") {
        e.preventDefault();
        const activeItem = currentIndex >= 0 ? items[currentIndex] : items[0];
        if (activeItem) {
          activeItem.click();
        }
      }
    };

    return (
      <div className="flex items-center border-b border-zinc-200/80 dark:border-zinc-800/80 px-4 py-1" cmdk-input-wrapper="">
        {isLoading ? (
          <Loader2 className="mr-3 h-4 w-4 animate-spin text-primary shrink-0" />
        ) : (
          <Search className="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
        )}
        <input
          ref={internalRef}
          autoFocus={autoFocus}
          value={props.value !== undefined ? props.value : searchQuery}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          className={cn(
            "flex h-11 w-full rounded-md bg-transparent py-3 text-sm border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          placeholder={props.placeholder || "Type a command or search..."}
          cmdk-input=""
          autoComplete="off"
          autoCorrect="off"
          spellCheck="false"
          {...props}
        />
      </div>
    );
  }
);
CommandInput.displayName = "CommandInput";

interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
  isLoading?: boolean;
}

const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
  ({ className, isLoading: controlledLoading, children, ...props }, ref) => {
    const { isLoading: contextLoading } = useCommand();
    const isLoading = controlledLoading !== undefined ? controlledLoading : contextLoading;

    return (
      <div
        ref={ref}
        cmdk-list=""
        className={cn(
          "max-h-[360px] overflow-y-auto overflow-x-hidden p-2 space-y-1 overscroll-contain transform-gpu [contain:content]",
          "[scrollbar-width:thin] [scrollbar-color:rgba(150,150,150,0.3)_transparent]",
          className
        )}
        style={{
          WebkitOverflowScrolling: "touch",
          scrollBehavior: "smooth",
        }}
        data-lenis-prevent
        {...props}
      >
        {isLoading && (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-5 w-5 animate-spin text-primary" />
          </div>
        )}
        {!isLoading && children}
      </div>
    );
  }
);
CommandList.displayName = "CommandList";

interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> { }

const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
  ({ children, className, ...props }, ref) => {
    const { emptyMessage } = useCommand();

    return (
      <div
        ref={ref}
        className={cn("py-10 text-center text-xs font-medium text-muted-foreground space-y-1", className)}
        {...props}
      >
        {typeof children === "string" ? (
          <>
            <Search className="w-5 h-5 mx-auto opacity-40 mb-1" />
            <p>{children}</p>
          </>
        ) : children ? (
          children
        ) : (
          <>
            <Search className="w-5 h-5 mx-auto opacity-40 mb-1" />
            <p>{emptyMessage || "No results found."}</p>
          </>
        )}
      </div>
    );
  }
);
CommandEmpty.displayName = "CommandEmpty";

interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  heading?: string;
  title?: string;
}

const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
  ({ className, heading, title, children, ...props }, ref) => {
    const displayHeading = heading || title;

    return (
      <div
        ref={ref}
        className={cn(
          "overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-muted-foreground/70",
          className
        )}
        {...props}
      >
        {displayHeading && <div cmdk-group-heading="">{displayHeading}</div>}
        <div className="space-y-0.5">{children}</div>
      </div>
    );
  }
);
CommandGroup.displayName = "CommandGroup";

interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> { }

const CommandSeparator = React.forwardRef<
  HTMLDivElement,
  CommandSeparatorProps
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("-mx-2 my-1.5 h-px bg-zinc-200/60 dark:bg-zinc-800/60", className)} {...props} />
));
CommandSeparator.displayName = "CommandSeparator";

interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  onSelect?: () => void;
  value?: string;
  keywords?: string[];
}

const CommandItem = React.memo(
  React.forwardRef<HTMLDivElement, CommandItemProps>(
    ({ className, disabled, onSelect, value, keywords, children, ...props }, ref) => {
      const { searchQuery } = useCommand();

      const isMatch = React.useMemo(() => {
        if (!searchQuery) return true;
        const q = searchQuery.toLowerCase().trim();
        let text = value || "";
        if (typeof children === "string" || typeof children === "number") {
          text += " " + children;
        }
        if (keywords && keywords.length > 0) {
          text += " " + keywords.join(" ");
        }
        return text.toLowerCase().includes(q);
      }, [searchQuery, value, children, keywords]);

      if (!isMatch) return null;

      return (
        <div
          ref={ref}
          cmdk-item=""
          className={cn(
            "relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-xs font-medium outline-none",
            "transition-colors duration-100",
            "hover:bg-zinc-100 hover:text-foreground dark:hover:bg-zinc-800/80",
            "data-[active=true]:bg-zinc-100 data-[active=true]:text-foreground dark:data-[active=true]:bg-zinc-800/80 dark:data-[active=true]:font-semibold",
            disabled && "pointer-events-none opacity-40",
            className
          )}
          style={{
            contentVisibility: "auto",
            containIntrinsicSize: "0 44px",
          }}
          data-disabled={disabled ? "true" : undefined}
          onClick={() => {
            if (!disabled && onSelect) {
              onSelect();
            }
          }}
          {...props}
        >
          {children}
        </div>
      );
    }
  )
);
CommandItem.displayName = "CommandItem";

interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> { }

const CommandShortcut = ({ className, ...props }: CommandShortcutProps) => {
  return (
    <span
      className={cn(
        "ml-auto text-[10px] font-mono font-medium tracking-widest text-muted-foreground/70 bg-zinc-100 dark:bg-zinc-800/60 border border-zinc-200/60 dark:border-zinc-700/60 px-1.5 py-0.5 rounded-md",
        className
      )}
      {...props}
    />
  );
};
CommandShortcut.displayName = "CommandShortcut";

interface CommandBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: "default" | "indigo" | "emerald" | "amber" | "rose";
}

const CommandBadge = ({ className, variant = "default", ...props }: CommandBadgeProps) => {
  const variantStyles = {
    default: "bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-zinc-700",
    indigo: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20",
    emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
    amber: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
    rose: "bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20",
  };

  return (
    <span
      className={cn(
        "ml-auto text-[10px] font-semibold px-2 py-0.5 rounded-full border",
        variantStyles[variant],
        className
      )}
      {...props}
    />
  );
};
CommandBadge.displayName = "CommandBadge";

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandBadge,
  CommandSeparator,
};

```
--------------------------------------------------

### COMPONENT: form
Category: Form Controls
Description: Building forms with React Hook Form and validation with Zod schema.
URL: https://lightswind.com/components/form
Import: import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@/components/lightswind/form"
Registry URL: https://lightswind.com/r/form.json
Install Command: npx lightswind@latest add form

Usage:
```tsx
// Basic usage with React Hook Form and Zod
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Please enter a valid email.",
  })
})

function ProfileForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      email: ""
    },
  })
  
  function onSubmit(values) {
    console.log(values)
  }
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="Enter username" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="Enter email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
```

Source Code:
```tsx
import * as React from "react";
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; // Import HTMLMotionProps

import { cn } from "@/components/lib/utils";
import { Label } from "./label";

const Form = FormProvider;

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName;
};

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
);

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  );
};

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState, formState } = useFormContext();

  const fieldState = getFieldState(fieldContext.name, formState);

  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>");
  }

  const { id } = itemContext;

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  };
};

type FormItemContextValue = {
  id: string;
};

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
);

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId();

  return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  );
});
FormItem.displayName = "FormItem";

const FormLabel = React.forwardRef<
  HTMLLabelElement,
  React.LabelHTMLAttributes<HTMLLabelElement>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField();

  return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  );
});
FormLabel.displayName = "FormLabel";

const FormControl = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();

  return (
    <div
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  );
});
FormControl.displayName = "FormControl";

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField();

  return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  );
});
FormDescription.displayName = "FormDescription";

// Modified FormMessage to use HTMLMotionProps for a <p> element
const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  HTMLMotionProps<"p"> & { children?: React.ReactNode } // Extend with HTMLMotionProps<"p">
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField();
  const body = error ? String(error?.message) : children;

  return (
    <AnimatePresence>
      {body ? (
        <motion.p
          ref={ref}
          key={formMessageId}
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ duration: 0.2, ease: "easeInOut" }}
          id={formMessageId}
          className={cn(
            "text-sm font-medium text-destructive overflow-hidden",
            className
          )}
          {...props} // Pass through Framer Motion props
        >
          {body}
        </motion.p>
      ) : null}
    </AnimatePresence>
  );
});
FormMessage.displayName = "FormMessage";

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
};
```
--------------------------------------------------

### COMPONENT: input
Category: Form Controls
Description: A text input field that allows users to enter data.
URL: https://lightswind.com/components/input
Import: import { Input } from '@/components/lightswind/input';
Registry URL: https://lightswind.com/r/input.json
Install Command: npx lightswind@latest add input

Usage:
```tsx
import { Input } from '@/components/lightswind/input';

export function InputDemo() {
  return <Input type="text" placeholder="Email" />;
}
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils";
import { motion, HTMLMotionProps, AnimatePresence } from "framer-motion";
import { BorderBeam } from "./border-beam";

// Extend HTMLMotionProps with optional beamBorderRadius prop for custom border beam rounding
export interface InputProps extends HTMLMotionProps<"input"> {
  beamBorderRadius?: number;
}

// Helper to determine numeric border radius for BorderBeam animation
function getBeamRadius(className?: string, explicitRadius?: number): number {
  if (explicitRadius !== undefined) return explicitRadius;
  if (!className) return 12;
  if (/\brounded-none\b/.test(className)) return 0;
  if (/\brounded-full\b/.test(className)) return 9999;
  if (/\brounded-3xl\b/.test(className)) return 24;
  if (/\brounded-2xl\b/.test(className)) return 16;
  if (/\brounded-xl\b/.test(className)) return 12;
  if (/\brounded-lg\b/.test(className)) return 8;
  if (/\brounded-md\b/.test(className)) return 6;
  if (/\brounded-sm\b/.test(className)) return 2;
  if (/\brounded\b/.test(className)) return 4;
  return 12;
}

// Helper to determine border radius class for container wrapper
function getRadiusClass(className?: string): string {
  if (!className) return "rounded-xl";
  const match = className.match(/\b(rounded-(?:none|full|3xl|2xl|xl|lg|md|sm)|rounded)\b/);
  return match ? match[0] : "rounded-xl";
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, beamBorderRadius, ...props }, ref) => {
    const [isFocused, setIsFocused] = React.useState(false);

    const classList = className ? className.split(/\s+/) : [];
    const layoutClasses = classList.filter((c) =>
      /^(col-span-|col-start-|col-end-|row-span-|row-start-|row-end-|flex-|shrink-|grow-|self-|order-|justify-self-|align-self-|w-|max-w-)/.test(c)
    );
    const otherClasses = classList.filter((c) =>
      !/^(col-span-|col-start-|col-end-|row-span-|row-start-|row-end-|flex-|shrink-|grow-|self-|order-|justify-self-|align-self-|w-|max-w-)/.test(c)
    );

    const radiusClass = getRadiusClass(className);
    const calculatedBeamRadius = getBeamRadius(className, beamBorderRadius);

    return (
      <div className={cn("relative w-full group/input", radiusClass, layoutClasses.join(" "))}>
        <motion.input
          type={type}
          className={cn(
            `flex h-10 w-full rounded-xl border border-input bg-background 
            px-3 py-2 text-base ring-offset-background/30 
            file:border-0 file:bg-transparent file:text-sm 
            file:font-medium file:text-foreground placeholder:text-muted-foreground/70 
            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1
            disabled:cursor-not-allowed disabled:opacity-50 
            md:text-sm transition-all duration-300`,
            "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-background [.lw-3d_&]:to-muted/20",
            "[.lw-3d_&]:focus-visible:ring-0 [.lw-3d_&]:focus-visible:ring-offset-0",
            isFocused 
              ? "border-zinc-950 dark:border-white ring-1 ring-zinc-950 dark:ring-white shadow-[0_2px_8px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_8px_rgba(255,255,255,0.1)] [.lw-3d_&]:ring-0 [.lw-3d_&]:border-zinc-950 dark:[.lw-3d_&]:border-white [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.6),0_0_0_2px_rgba(0,0,0,0.85),0_4px_12px_rgba(0,0,0,0.1)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25),0_0_0_2px_rgba(255,255,255,0.85),0_4px_12px_rgba(255,255,255,0.15)]" 
              : "[.lw-3d_&]:border-black/15 dark:[.lw-3d_&]:border-white/15 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.5),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
            otherClasses.join(" ")
          )}
          ref={ref}
          onFocus={(e) => {
            setIsFocused(true);
            props.onFocus?.(e);
          }}
          onBlur={(e) => {
            setIsFocused(false);
            props.onBlur?.(e);
          }}
          animate={{
            scale: isFocused ? 1.005 : 1,
          }}
          transition={{
            type: "spring",
            stiffness: 400,
            damping: 20,
          }}
          {...props}
        />
        <AnimatePresence>
          {isFocused && (
            <motion.div
              key="beam-container"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 pointer-events-none rounded-[inherit]"
            >
              <BorderBeam
                size={120}
                duration={3}
                beamBorderRadius={calculatedBeamRadius}
                colorFrom="rgba(0,0,0,0.7)"
                colorTo="rgba(100,100,100,0.5)"
                className="pointer-events-none dark:hidden"
              />
              <BorderBeam
                size={120}
                duration={3}
                beamBorderRadius={calculatedBeamRadius}
                colorFrom="rgba(255,255,255,0.85)"
                colorTo="rgba(160,160,160,0.5)"
                className="pointer-events-none hidden dark:block"
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };
```
--------------------------------------------------

### COMPONENT: input-otp
Category: Form Controls
Description: An input component for one-time password entry, optimized for entering codes received via email or SMS.
URL: https://lightswind.com/components/input-otp
Import: import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';
Registry URL: https://lightswind.com/r/input-otp.json
Install Command: npx lightswind@latest add input-otp

Usage:
```tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';

export function InputOTPDemo() {
  return (
    <InputOTP maxLength={6}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  );
}
```

Source Code:
```tsx
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/components/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

  return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-9 sm:h-10 sm:w-10 items-center justify-center border border-input bg-background text-sm sm:text-base font-mono font-semibold transition-all duration-200 first:rounded-l-lg last:rounded-r-lg border-r-0 last:border-r shadow-2xs select-none",
        "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-background [.lw-3d_&]:to-muted/20",
        "[.lw-3d_&]:border-black/15 dark:[.lw-3d_&]:border-white/15",
        char && "border-zinc-900/40 dark:border-white/40 bg-zinc-50 dark:bg-zinc-900/60 font-bold",
        isActive 
          ? "border-zinc-950 dark:border-white ring-2 ring-zinc-950/20 dark:ring-white/20 z-10 shadow-xs [.lw-3d_&]:ring-0 [.lw-3d_&]:border-zinc-950 dark:[.lw-3d_&]:border-white [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.6),0_0_0_2px_rgba(0,0,0,0.85)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25),0_0_0_2px_rgba(255,255,255,0.85)]"
          : "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.5),0_1.5px_2px_0_rgba(0,0,0,0.06)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-0.5 animate-caret-blink bg-foreground duration-1000 rounded-full" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} role="separator" className={cn("flex items-center justify-center px-1 text-muted-foreground/60 font-bold", className)} {...props}>
    <Dot className="w-6 h-6" />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

```
--------------------------------------------------

### COMPONENT: label
Category: Form Controls
Description: A form label component that can be associated with form controls to improve accessibility.
URL: https://lightswind.com/components/label
Import: import { Label } from '@/components/lightswind/label';
Registry URL: https://lightswind.com/r/label.json
Install Command: npx lightswind@latest add label

Usage:
```tsx
import { Label } from '@/components/lightswind/label';
import { Input } from '@/components/lightswind/input';

export function LabelDemo() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor?: string;
}

const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
  ({ className, htmlFor, ...props }, ref) => {
    return (
      <label
        ref={ref}
        htmlFor={htmlFor}
        className={cn(
          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
          className
        )}
        {...props}
      />
    );
  }
);
Label.displayName = "Label";

export { Label };

```
--------------------------------------------------

### COMPONENT: radio-group
Category: Form Controls
Description: A control that allows users to select a single option from a list of predefined options.
URL: https://lightswind.com/components/radio-group
Import: import { RadioGroup, RadioGroupItem } from "@/components/lightswind/radio-group"
Registry URL: https://lightswind.com/r/radio-group.json
Install Command: npx lightswind@latest add radio-group

Usage:
```tsx
<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils";

interface RadioGroupContextType {
  value: string;
  onValueChange: (value: string) => void;
  name?: string;
  orientation?: "horizontal" | "vertical";
}

const RadioGroupContext = React.createContext<
  RadioGroupContextType | undefined
>(undefined);

interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  name?: string;
  disabled?: boolean;
  orientation?: "horizontal" | "vertical";
}

const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
  (
    {
      className,
      value,
      defaultValue,
      onValueChange,
      name,
      orientation = "vertical",
      ...props
    },
    ref
  ) => {
    const [selectedValue, setSelectedValue] = React.useState(
      value || defaultValue || ""
    );

    React.useEffect(() => {
      if (value !== undefined) {
        setSelectedValue(value);
      }
    }, [value]);

    const handleValueChange = React.useCallback(
      (newValue: string) => {
        if (value === undefined) {
          setSelectedValue(newValue);
        }
        onValueChange?.(newValue);
      },
      [onValueChange, value]
    );

    return (
      <RadioGroupContext.Provider
        value={{
          value: selectedValue,
          onValueChange: handleValueChange,
          name,
          orientation,
        }}
      >
        <div
          ref={ref}
          className={cn(
            orientation === "horizontal"
              ? "flex items-center space-x-4"
              : "grid gap-2",
            className
          )}
          role="radiogroup"
          {...props}
        />
      </RadioGroupContext.Provider>
    );
  }
);
RadioGroup.displayName = "RadioGroup";

interface RadioGroupItemProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
  value: string;
  customSize?: "sm" | "md" | "lg";
}

const RadioGroupItem = React.forwardRef<HTMLDivElement, RadioGroupItemProps>(
  ({ className, value, customSize = "md", ...props }, ref) => {
    const context = React.useContext(RadioGroupContext);
    if (!context) {
      throw new Error("RadioGroupItem must be used within a RadioGroup");
    }

    const { value: selectedValue, onValueChange, name } = context;
    const checked = selectedValue === value;
    const [focused, setFocused] = React.useState(false);
    const radioRef = React.useRef<HTMLInputElement>(null);

    // Size mappings for custom sizes
    const sizeMap = {
      sm: { outer: "h-3.5 w-3.5", inner: "h-1.5 w-1.5", icon: "h-2 w-2" },
      md: { outer: "h-4 w-4", inner: "h-2 w-2", icon: "h-2.5 w-2.5" },
      lg: { outer: "h-5 w-5", inner: "h-2.5 w-2.5", icon: "h-3 w-3" },
    };

    const itemSize = sizeMap[customSize];

    const handleChange = () => {
      onValueChange(value);
    };

    const handleFocus = () => setFocused(true);
    const handleBlur = () => setFocused(false);

    return (
      <div className="relative flex items-center space-x-2">
        <div ref={ref} className="relative flex items-center">
          <input
            ref={radioRef}
            type="radio"
            value={value}
            checked={checked}
            name={name}
            className="absolute h-0 w-0 opacity-0"
            onChange={handleChange}
            onFocus={handleFocus}
            onBlur={handleBlur}
            {...props}
          />
          <div
            className={cn(
              `relative flex items-center justify-center rounded-full border
              border-gray-300 dark:border-gray-800 ring-foreground transition-all duration-200`,
              checked && "border-foreground/80 dark:border-foreground/80",
              focused && "ring-2 ring-ring ring-offset-2",
              "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
              checked 
                ? "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_-1px_0_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(0,0,0,0.05)]" 
                : "[.lw-3d_&]:shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.15)]",
              props.disabled
                ? "cursor-not-allowed opacity-50"
                : "cursor-pointer",
              itemSize.outer,
              className
            )}
            onClick={() => radioRef.current?.click()}
          >
            <div
              className={cn(
                "absolute rounded-full bg-primary scale-0 transition-transform duration-200 ease-in-out",
                "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white/15 [.lw-3d_&]:to-black/15",
                checked && "scale-100",
                itemSize.inner
              )}
            />
          </div>
        </div>
        {props.children && (
          <label
            htmlFor={props.id}
            className={cn(
              "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
              props.disabled && "opacity-50 cursor-not-allowed"
            )}
            onClick={() => !props.disabled && radioRef.current?.click()}
          >
            {props.children}
          </label>
        )}
      </div>
    );
  }
);
RadioGroupItem.displayName = "RadioGroupItem";

export { RadioGroup, RadioGroupItem };

```
--------------------------------------------------

### COMPONENT: select
Category: Form Controls
Description: Displays a list of options for the user to pick from—triggered by a button.
URL: https://lightswind.com/components/select
Import: import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/lightswind/select"
Registry URL: https://lightswind.com/r/select.json
Install Command: npx lightswind@latest add select

Usage:
```tsx
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>
```

Source Code:
```tsx
import * as React from "react";
import { createPortal } from "react-dom";
import { Check, ChevronDown } from "lucide-react";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";
import { cn } from "@/components/lib/utils"; // Assuming you have this utility function

interface SelectContextType {
  value: string;
  onValueChange: (value: string) => void;
  open: boolean;
  setOpen: (open: boolean) => void;
  triggerRef: React.RefObject<HTMLButtonElement | null>;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  itemLabels: Record<string, React.ReactNode>;
  registerItem: (value: string, label: React.ReactNode) => void;
}

const SelectContext = React.createContext<SelectContextType | undefined>(
  undefined
);

interface SelectProps {
  children: React.ReactNode;
  defaultValue?: string;
  value?: string;
  onValueChange?: (value: string) => void;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  disabled?: boolean;
}

const Select: React.FC<SelectProps> = ({
  children,
  defaultValue = "",
  value,
  onValueChange,
  defaultOpen = false,
  open,
  onOpenChange,
  disabled = false,
}) => {
  const [selectedValue, setSelectedValue] = React.useState(
    value || defaultValue
  );
  const [isOpen, setIsOpen] = React.useState(open || defaultOpen);
  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [itemLabels, setItemLabels] = React.useState<Record<string, React.ReactNode>>({});

  const registerItem = React.useCallback((val: string, label: React.ReactNode) => {
    setItemLabels((prev) => {
      if (prev[val] === label) return prev;
      return { ...prev, [val]: label };
    });
  }, []);

  React.useEffect(() => {
    if (value !== undefined) {
      setSelectedValue(value);
    }
  }, [value]);

  React.useEffect(() => {
    if (open !== undefined) {
      setIsOpen(open);
    }
  }, [open]);

  React.useEffect(() => {
    if (!isOpen) {
      setSearchQuery("");
    }
  }, [isOpen]);

  const handleValueChange = React.useCallback(
    (newValue: string) => {
      if (value === undefined) {
        setSelectedValue(newValue);
      }
      onValueChange?.(newValue);
    },
    [onValueChange, value]
  );

  const handleOpenChange = React.useCallback(
    (newOpen: boolean) => {
      if (disabled) return;

      if (open === undefined) {
        setIsOpen(newOpen);
      }
      onOpenChange?.(newOpen);
    },
    [onOpenChange, open, disabled]
  );

  return (
    <SelectContext.Provider
      value={{
        value: selectedValue,
        onValueChange: handleValueChange,
        open: isOpen,
        setOpen: handleOpenChange,
        triggerRef,
        searchQuery,
        setSearchQuery,
        itemLabels,
        registerItem,
      }}
    >
      {children}
    </SelectContext.Provider>
  );
};

const SelectGroup: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
  children,
  ...props
}) => {
  return (
    <div className="px-1 py-1.5" {...props}>
      {children}
    </div>
  );
};
SelectGroup.displayName = "SelectGroup";

interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
  placeholder?: string;
}

const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
  ({ className, placeholder, children, ...props }, ref) => {
    const context = React.useContext(SelectContext);
    if (!context) {
      throw new Error("SelectValue must be used within a Select");
    }

    const displayValue = (context.value ? context.itemLabels[context.value] : null) || children || context.value || placeholder;

    return (
      <span ref={ref} className={cn("text-sm truncate block", className)} {...props}>
        {displayValue || (
          <span className="text-muted-foreground">Select an option</span>
        )}
      </span>
    );
  }
);
SelectValue.displayName = "SelectValue";

interface SelectTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> { }

const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
  ({ className, children, ...props }, ref) => {
    const context = React.useContext(SelectContext);
    if (!context) {
      throw new Error("SelectTrigger must be used within a Select");
    }

    const { open, setOpen, triggerRef, searchQuery, setSearchQuery } = context;
    const searchInputRef = React.useRef<HTMLInputElement>(null);

    React.useEffect(() => {
      if (open && searchInputRef.current) {
        searchInputRef.current.focus();
      }
    }, [open]);

    React.useImperativeHandle(ref, () => triggerRef.current!, [triggerRef]);

    return (
      <button
        ref={triggerRef}
        type="button"
        data-state={open ? "open" : "closed"}
        className={cn(
          "flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all duration-300",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
          "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
          "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)]",
          "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
          className
        )}
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        {...props}
      >
        {open ? (
          <input
            ref={searchInputRef}
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            onClick={(e) => e.stopPropagation()}
            placeholder="Search..."
            className="w-full bg-transparent p-0 text-sm 
    border-none outline-none ring-0 focus:outline-none focus:ring-0 
    active:outline-none active:ring-0 text-foreground placeholder:text-muted-foreground"
            style={{ boxShadow: "none" }} // ensure Chrome removes highlight
          />
        ) : (
          children
        )}
        <ChevronDown
          className={cn(
            "h-4 w-4 opacity-50 transition-transform duration-200 shrink-0 ml-1",
            open && "rotate-180"
          )}
        />
      </button>
    );
  }
);
SelectTrigger.displayName = "SelectTrigger";

const SelectScrollUpButton: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
  props
) => <div {...props} />;
SelectScrollUpButton.displayName = "SelectScrollUpButton";

const SelectScrollDownButton: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
  props
) => <div {...props} />;
SelectScrollDownButton.displayName = "SelectScrollDownButton";

// *** FIX APPLIED HERE: Replaced React.HTMLAttributes with HTMLMotionProps ***
interface SelectContentProps extends Omit<HTMLMotionProps<"div">, "children"> {
  children: React.ReactNode; // Explicitly define children as standard ReactNode
  position?: "popper" | "item-aligned";
  align?: "start" | "center" | "end";
  sideOffset?: number;
}

const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(
  (
    {
      className,
      children,
      position = "popper",
      align = "start",
      sideOffset = 4,
      ...props
    },
    ref
  ) => {
    const context = React.useContext(SelectContext);
    if (!context) {
      throw new Error("SelectContent must be used within a Select");
    }

    const { open, setOpen, triggerRef, searchQuery } = context;
    const contentRef = React.useRef<HTMLDivElement | null>(null);

    const [calculatedStyle, setCalculatedStyle] =
      React.useState<React.CSSProperties>({});
    const [currentSide, setCurrentSide] = React.useState<"top" | "bottom">(
      "bottom"
    );
    const [mounted, setMounted] = React.useState(false);

    React.useEffect(() => {
      setMounted(true);
    }, []);

    React.useEffect(() => {
      if (!open || !triggerRef.current) return;

      const updatePosition = () => {
        if (!triggerRef.current) return;

        const triggerRect = triggerRef.current.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        const viewportWidth = window.innerWidth;

        const spaceBelow = viewportHeight - triggerRect.bottom;
        const spaceAbove = triggerRect.top;

        const preferredMaxHeight = 240;

        const showBelow =
          spaceBelow >= 160 || spaceBelow >= spaceAbove;

        const newSide = showBelow ? "bottom" : "top";
        setCurrentSide(newSide);

        const newStyles: React.CSSProperties = {
          position: "fixed",
          width: `${triggerRect.width}px`,
          zIndex: 100001,
        };

        if (newSide === "bottom") {
          const availableHeight = spaceBelow - sideOffset - 12;
          newStyles.maxHeight = `${Math.min(preferredMaxHeight, Math.max(120, availableHeight))}px`;
          newStyles.top = `${triggerRect.bottom + sideOffset}px`;
        } else {
          const availableHeight = spaceAbove - sideOffset - 12;
          newStyles.maxHeight = `${Math.min(preferredMaxHeight, Math.max(120, availableHeight))}px`;
          newStyles.bottom = `${viewportHeight - triggerRect.top + sideOffset}px`;
        }

        let left = triggerRect.left;
        if (align === "center") {
          left = triggerRect.left;
        } else if (align === "end") {
          left = triggerRect.right - triggerRect.width;
        }

        if (left + triggerRect.width > viewportWidth - 8) {
          left = viewportWidth - triggerRect.width - 8;
        }
        if (left < 8) {
          left = 8;
        }

        newStyles.left = `${left}px`;

        setCalculatedStyle(newStyles);
      };

      updatePosition();
      window.addEventListener("resize", updatePosition);
      window.addEventListener("scroll", updatePosition, true);
      return () => {
        window.removeEventListener("resize", updatePosition);
        window.removeEventListener("scroll", updatePosition, true);
      };
    }, [open, align, sideOffset, triggerRef]);

    React.useEffect(() => {
      if (!open) return;
      const handleClickOutside = (e: MouseEvent) => {
        if (
          contentRef.current &&
          !contentRef.current.contains(e.target as Node) &&
          triggerRef.current &&
          !triggerRef.current.contains(e.target as Node)
        ) {
          setOpen(false);
        }
      };
      const handleEscape = (e: KeyboardEvent) => {
        if (e.key === "Escape") {
          setOpen(false);
        }
      };
      document.addEventListener("mousedown", handleClickOutside);
      document.addEventListener("keydown", handleEscape);
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
        document.removeEventListener("keydown", handleEscape);
      };
    }, [open, setOpen, triggerRef]);

    const combinedRef = React.useCallback(
      (node: HTMLDivElement | null) => {
        contentRef.current = node;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref) {
          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
        }
      },
      [ref]
    );

    const filteredChildren = React.useMemo(() => {
      if (!searchQuery) {
        return children;
      }
      const lowerCaseQuery = searchQuery.toLowerCase();

      const getChildText = (child: React.ReactNode): string => {
        if (typeof child === "string" || typeof child === "number") {
          return child.toString();
        }
        if (React.isValidElement(child)) {
          const element = child as React.ReactElement<any>;
          if (element.props.children) {
            return React.Children.map(element.props.children, getChildText).join(
              ""
            );
          }
        }
        return "";
      };

      return React.Children.map(children, (child) => {
        if (!React.isValidElement(child)) {
          return child;
        }

        const element = child as React.ReactElement<any>;

        if ((element.type as any).displayName === "SelectGroup") {
          const matchedItems = React.Children.toArray(
            element.props.children
          ).filter((groupChild) => {
            if (React.isValidElement(groupChild)) {
              const groupElement = groupChild as React.ReactElement<any>;
              if ((groupElement.type as any).displayName === "SelectItem") {
                const text = getChildText(groupElement.props.children);
                return text.toLowerCase().includes(lowerCaseQuery);
              }
            }
            return false;
          });

          if (matchedItems.length > 0) {
            return React.cloneElement(element, {
              ...element.props,
              children: matchedItems,
            });
          }
          return null;
        }

        if ((element.type as any).displayName === "SelectItem") {
          const text = getChildText(element.props.children);
          return text.toLowerCase().includes(lowerCaseQuery) ? element : null;
        }

        return element;
      });
    }, [children, searchQuery]);

    const hasVisibleChildren = React.Children.count(filteredChildren) > 0;

    if (!mounted) return null;

    return createPortal(
      <AnimatePresence>
        {open && (
          <motion.div
            ref={combinedRef}
            style={calculatedStyle}
            className={cn(
              "z-[100001] min-w-[var(--lw-select-trigger-width)] overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 shadow-2xl transition-all duration-200",
              "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950",
              "[.lw-3d_&]:border-black/10 dark:[.lw-3d_&]:border-white/10",
              "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_12px_24px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.04)]",
              "dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_12px_24px_-4px_rgba(0,0,0,0.3),0_4px_12px_-2px_rgba(0,0,0,0.2)]",
              position === "popper" &&
              "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
              className
            )}
            initial={{ opacity: 0, y: currentSide === "bottom" ? -6 : 6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: currentSide === "bottom" ? -6 : 6, scale: 0.98 }}
            transition={{ duration: 0.15, ease: "easeOut" }}
            {...props}
          >
            <SelectScrollUpButton />
            <div
              className="p-1.5 overflow-y-auto overscroll-contain tiny-scrollbar space-y-0.5"
              style={{
                maxHeight: calculatedStyle.maxHeight || "240px",
              }}
              data-lenis-prevent
            >
              {hasVisibleChildren ? (
                filteredChildren
              ) : (
                <div className="px-3 py-3 text-xs text-muted-foreground text-center">
                  No results found.
                </div>
              )}
            </div>
            <SelectScrollDownButton />
          </motion.div>
        )}
      </AnimatePresence>,
      document.body
    );
  }
);
SelectContent.displayName = "SelectContent";

const SelectLabel = React.forwardRef<
  HTMLSpanElement,
  React.HTMLAttributes<HTMLSpanElement>
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
));
SelectLabel.displayName = "SelectLabel";

interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string;
  disabled?: boolean;
}

const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
  ({ className, children, value, disabled = false, ...props }, ref) => {
    const context = React.useContext(SelectContext);
    if (!context) {
      throw new Error("SelectItem must be used within a Select");
    }

    const { value: selectedValue, onValueChange, setOpen, registerItem } = context;
    const isSelected = selectedValue === value;

    React.useEffect(() => {
      if (value && children) {
        registerItem(value, children);
      }
    }, [value, children, registerItem]);

    const handleSelect = (e: React.MouseEvent) => {
      if (disabled) return;
      e.preventDefault();
      e.stopPropagation();
      onValueChange(value);
      setOpen(false);
    };

    return (
      <div
        ref={ref}
        className={cn(
          "relative flex w-full select-none items-center rounded-lg py-2 pl-8 pr-3 text-xs outline-none transition-colors cursor-pointer",
          isSelected
            ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-semibold"
            : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800/70 hover:text-zinc-900 dark:hover:text-white",
          disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
          className
        )}
        onClick={handleSelect}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            handleSelect(e as any);
          }
        }}
        aria-selected={isSelected}
        data-disabled={disabled}
        role="option"
        tabIndex={disabled ? -1 : 0}
        {...props}
      >
        <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
          {isSelected && <Check className="h-3.5 w-3.5 text-foreground" />}
        </span>
        <span className="truncate">{children}</span>
      </div>
    );
  }
);
SelectItem.displayName = "SelectItem";

const SelectSeparator = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
));
SelectSeparator.displayName = "SelectSeparator";

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
};

```
--------------------------------------------------

### COMPONENT: slider
Category: Form Controls
Description: Allows users to select a value or range from a given range.
URL: https://lightswind.com/components/slider
Import: import { Slider } from "@/components/lightswind/slider"
Registry URL: https://lightswind.com/r/slider.json
Install Command: npx lightswind@latest add slider

Usage:
```tsx
<Slider defaultValue={[33]} max={100} step={1} />
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils"; // Assuming this is a utility like classnames

interface SliderProps {
  defaultValue?: number[];
  value?: number[];
  min?: number;
  max?: number;
  step?: number;
  onValueChange?: (value: number[]) => void;
  disabled?: boolean;
  className?: string;
  showTooltip?: boolean;
  showLabels?: boolean;
  thumbClassName?: string;
  trackClassName?: string;
}

const Slider = React.forwardRef<HTMLDivElement, SliderProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof SliderProps>>(
  ({
    className,
    defaultValue = [0],
    value,
    min = 0,
    max = 100,
    step = 1,
    onValueChange,
    disabled = false,
    showTooltip = false,
    showLabels = false,
    thumbClassName = "",
    trackClassName = "",
    ...props
  }, ref) => {
    // Internal state for the slider values
    const [values, setValues] = React.useState<number[]>(value !== undefined ? value : defaultValue);
    // Index of the thumb currently being dragged
    const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null);
    // State to control tooltip visibility on hover
    const [tooltipHoverVisible, setTooltipHoverVisible] = React.useState<boolean>(false);

    // Ref to the slider track element to measure its dimensions
    const trackRef = React.useRef<HTMLDivElement>(null);

    // Effect to synchronize internal state with controlled 'value' prop
    React.useEffect(() => {
      if (value !== undefined) {
        setValues(value);
      }
    }, [value]);

    /**
     * Calculates the percentage position of a value on the track.
     * @param val The value to convert to a percentage.
     * @returns The percentage (0-100)
     */
    const getValuePercent = React.useCallback((val: number) => {
      return ((val - min) / (max - min)) * 100;
    }, [min, max]);

    /**
     * Calculates the slider value from a given horizontal position on the track.
     * Applies snapping to 'step' if defined.
     * @param clientX The clientX coordinate of the pointer event.
     * @returns The calculated slider value.
     */
    const getValueFromClientX = React.useCallback((clientX: number) => {
      const trackRect = trackRef.current?.getBoundingClientRect();
      if (!trackRect) return min;

      // Calculate the position relative to the track's left edge
      const position = clientX - trackRect.left;
      // Clamp the position within the track's width
      const clampedPosition = Math.max(0, Math.min(trackRect.width, position));

      // Calculate the percentage of the track filled
      const percent = clampedPosition / trackRect.width;
      // Convert percentage to raw value within min/max range
      let rawValue = min + percent * (max - min);

      // Apply stepping if step is greater than 0
      if (step > 0) {
        rawValue = Math.round(rawValue / step) * step;
      }

      // Ensure the value is within the min/max bounds
      return Math.max(min, Math.min(max, rawValue));
    }, [min, max, step]);


    /**
     * Handles the start of a drag operation (pointer down on a thumb).
     * @param e The pointer event.
     * @param index The index of the thumb being dragged.
     */
    const handlePointerDown = React.useCallback((e: React.PointerEvent, index: number) => {
      if (disabled) return;
      e.preventDefault(); // Prevent default browser actions (like text selection)

      setDraggingIndex(index);
      // Tooltip visibility for dragging is handled directly in JSX based on `draggingIndex`

      // Capture the pointer to ensure events are received even if the pointer moves off the thumb
      (e.target as HTMLElement).setPointerCapture(e.pointerId);
    }, [disabled]);

    /**
     * Handles pointer movement during a drag operation.
     */
    const handlePointerMove = React.useCallback((e: PointerEvent) => {
      if (draggingIndex === null || !trackRef.current) return;

      const newValue = getValueFromClientX(e.clientX);

      setValues(prevValues => {
        const newValues = [...prevValues];
        newValues[draggingIndex] = newValue;
        // Keep values sorted if there are multiple thumbs to prevent overlaps
        // Sort only if necessary (e.g., if it's a range slider where order matters)
        if (newValues.length > 1) {
          newValues.sort((a, b) => a - b);
        }
        return newValues;
      });

      // Notify parent immediately for smooth feedback.
      // The parent can debounce this callback if needed for external side effects.
      // Pass the current *derived* new values for the callback.
      onValueChange?.([...values].map((val, idx) => idx === draggingIndex ? newValue : val).sort((a, b) => a - b));

    }, [draggingIndex, getValueFromClientX, onValueChange, values]);


    /**
     * Handles the end of a drag operation (pointer up).
     */
    const handlePointerUp = React.useCallback((e: PointerEvent) => {
      if (draggingIndex !== null) {
        // Release pointer capture
        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
      }

      setDraggingIndex(null);
      // Ensure onValueChange is called with the final value after drag ends
      onValueChange?.(values);
    }, [draggingIndex, onValueChange, values]);


    // Attach and clean up global pointer event listeners
    React.useEffect(() => {
      if (draggingIndex !== null) {
        document.addEventListener("pointermove", handlePointerMove);
        document.addEventListener("pointerup", handlePointerUp);
      } else {
        document.removeEventListener("pointermove", handlePointerMove);
        document.removeEventListener("pointerup", handlePointerUp);
      }
      // Cleanup on unmount or when draggingIndex changes
      return () => {
        document.removeEventListener("pointermove", handlePointerMove);
        document.removeEventListener("pointerup", handlePointerUp);
      };
    }, [draggingIndex, handlePointerMove, handlePointerUp]);


    /**
     * Handles clicks on the track to move the closest thumb.
     * @param e The mouse event.
     */
    const handleTrackClick = React.useCallback((e: React.MouseEvent) => {
      if (disabled || draggingIndex !== null) return; // Prevent track click during active drag

      const newValue = getValueFromClientX(e.clientX);

      // Find the closest thumb to update
      const closestThumbIndex = values.reduce((closestIdx, currentValue, idx) => {
        const closestDiff = Math.abs(values[closestIdx] - newValue);
        const currentDiff = Math.abs(currentValue - newValue);
        return currentDiff < closestDiff ? idx : closestIdx;
      }, 0); // Start with index 0 as the closest

      setValues(prevValues => {
        const newValues = [...prevValues];
        newValues[closestThumbIndex] = newValue;
        if (newValues.length > 1) {
          newValues.sort((a, b) => a - b); // Keep sorted for multi-thumb
        }
        return newValues;
      });

      onValueChange?.(values); // Use the updated 'values' state for the callback
    }, [disabled, draggingIndex, getValueFromClientX, onValueChange, values]);


    /**
     * Handles keyboard controls for accessibility.
     * @param e The keyboard event.
     * @param index The index of the thumb.
     */
    const handleKeyDown = React.useCallback((e: React.KeyboardEvent, index: number) => {
      if (disabled) return;

      let newValue = values[index];
      const effectiveStep = step > 0 ? step : (max - min) / 100; // Default to 1% of range if step is 0 or not provided
      const largeStep = (max - min) / 10; // 10% of total range

      switch (e.key) {
        case "ArrowRight":
        case "ArrowUp":
          newValue = Math.min(max, newValue + effectiveStep);
          break;
        case "ArrowLeft":
        case "ArrowDown":
          newValue = Math.max(min, newValue - effectiveStep);
          break;
        case "PageUp":
          newValue = Math.min(max, newValue + largeStep);
          break;
        case "PageDown":
          newValue = Math.max(min, newValue - largeStep);
          break;
        case "Home":
          newValue = min;
          break;
        case "End":
          newValue = max;
          break;
        default:
          return; // Do not prevent default for unhandled keys
      }

      setValues(prevValues => {
        const newValues = [...prevValues];
        newValues[index] = newValue;
        if (newValues.length > 1) {
          newValues.sort((a, b) => a - b); // Keep sorted for multi-thumb
        }
        return newValues;
      });

      onValueChange?.(values); // Use the updated 'values' state for the callback
      e.preventDefault(); // Prevent default scrolling behavior
    }, [disabled, values, min, max, step, onValueChange]);

    // Handle mouse enter/leave for tooltips
    const handleThumbMouseEnter = React.useCallback(() => {
      if (!disabled) {
        setTooltipHoverVisible(true);
      }
    }, [disabled]);

    const handleThumbMouseLeave = React.useCallback(() => {
      setTooltipHoverVisible(false);
    }, []);

    return (
      <div
        ref={ref}
        className={cn(
          "relative flex w-full touch-none select-none items-center h-8", // Added h-8 for better click area
          disabled && "opacity-50 cursor-not-allowed",
          className
        )}
        {...props}
      >
        {showLabels && (
          <div className="absolute w-full flex justify-between text-xs text-muted-foreground -top-2"> {/* Adjusted top */}
            <span>{min}</span>
            <span>{max}</span>
          </div>
        )}

        <div
          ref={trackRef}
          className={cn(
            "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary transition-all duration-300",
            "[.lw-3d_&]:shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.15),0_1px_1px_0_rgba(255,255,255,0.05)]",
            "[.dark.lw-3d_&]:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3)]",
            "[.lw-3d_&]:border [.lw-3d_&]:border-black/10 [.dark.lw-3d_&]:border-white/10",
            trackClassName
          )}
          onClick={handleTrackClick}
        >
          {/* Render the filled track for single-thumb sliders */}
          {values.length === 1 && (
            <div
              className={cn(
                "absolute h-full bg-primary rounded-full transition-all duration-100 ease-out",
                "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-primary [.lw-3d_&]:to-primary/90"
              )}
              style={{
                left: 0,
                width: `${getValuePercent(values[0])}%`
              }}
            />
          )}

          {/* Render the range for multi-thumb sliders */}
          {values.length > 1 && (
            <div
              className={cn(
                "absolute h-full bg-primary rounded-full transition-all duration-100 ease-out",
                "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-primary [.lw-3d_&]:to-primary/90"
              )}
              style={{
                left: `${getValuePercent(Math.min(...values))}%`,
                width: `${getValuePercent(Math.max(...values)) - getValuePercent(Math.min(...values))}%`
              }}
            />
          )}
        </div>

        {/* Tooltips for each thumb */}
        {showTooltip && values.map((value, index) => (
          <div
            key={`tooltip-${index}`}
            className={cn(
              "absolute z-10 flex items-center justify-center",
              // Show tooltip if hovering OR currently dragging this thumb
              (tooltipHoverVisible || draggingIndex === index) ? "opacity-100" : "opacity-0",
              "transition-opacity duration-200",
              "pointer-events-none -top-8"
            )}
            style={{
              left: `${getValuePercent(value)}%`,
              transform: "translateX(-50%)", // Center tooltip precisely
            }}
          >
            <div className="px-2 py-1 text-xs font-semibold text-white dark:text-black bg-primary rounded shadow-sm whitespace-nowrap">
              {Math.round(value * 100) / 100}
            </div>
          </div>
        ))}

        {/* Thumbs for each value */}
        {values.map((value, index) => (
          <div
            key={`thumb-${index}`}
            className={cn(
              "absolute block h-5 w-5 rounded-full border-2 border-primary bg-background shadow-sm transition-all",
              // Key change: Optimized transition for immediate feedback
              "duration-[&lsqb;50ms&rsqb;] ease-out", // Very short transition for responsiveness
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              "hover:scale-110",
              draggingIndex === index && "scale-110 cursor-grabbing", // Apply dragging style
              disabled ? "cursor-not-allowed" : "cursor-grab",
              "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 [.dark.lw-3d_&]:from-zinc-800 [.dark.lw-3d_&]:to-zinc-900",
              "[.lw-3d_&]:border-black/15 [.dark.lw-3d_&]:border-white/15",
              "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)]",
              "[.dark.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
              thumbClassName
            )}
            style={{
              left: `${getValuePercent(value)}%`,
              top: "50%",
              transform: "translate(-50%, -50%)", // Center thumb precisely
              touchAction: "none" // Prevents browser gestures like scrolling
            }}
            onPointerDown={(e) => handlePointerDown(e, index)}
            onMouseEnter={handleThumbMouseEnter}
            onMouseLeave={handleThumbMouseLeave}
            onKeyDown={(e) => handleKeyDown(e, index)}
            role="slider"
            aria-valuemin={min}
            aria-valuemax={max}
            aria-valuenow={value}
            tabIndex={disabled ? -1 : 0}
            data-disabled={disabled ? "" : undefined}
          />
        ))}
      </div>
    );
  }
);
Slider.displayName = "Slider";

export { Slider };
```
--------------------------------------------------

### COMPONENT: range-slider
Category: Form Controls
Description: Ultra-smooth high-FPS spring range slider featuring fluid spring physics, dual-thumb range selection, step tick markers, floating tooltips, and theme color variants.
URL: https://lightswind.com/components/range-slider
Import: import { RangeSlider } from "@/components/lightswind/range-slider"
Registry URL: https://lightswind.com/r/range-slider.json
Install Command: npx lightswind@latest add range-slider

Usage:
```tsx
import { RangeSlider } from "@/components/lightswind/range-slider";

export function RangeSliderDemo() {
  return (
    <RangeSlider
      value={[20, 80]}
      min={0}
      max={100}
      step={10}
      showTicks
      showTooltip="always"
      variant="cyan"
      formatTooltip={(v) => `$${v}`}
      onValueChange={(val) => console.log(val)}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  useVelocity,
  AnimatePresence,
  type MotionValue,
} from "framer-motion";
import { cn } from "@/components/lib/utils";

// Ultra-smooth high-FPS liquid glide physics (380 stiffness, 28 damping for butter-smooth tracking)
const SPRING_GLIDE = { type: "spring", stiffness: 380, damping: 28, mass: 0.3 } as const;
const SPRING_BOUNCY = { type: "spring", stiffness: 450, damping: 14, mass: 0.5 } as const;

export type RangeSliderVariant =
  | "default"
  | "primary"
  | "cyan"
  | "emerald"
  | "purple"
  | "amber"
  | "rose"
  | "glass";

export type RangeSliderSize = "sm" | "md" | "lg";
export type RangeSliderTickType = "line" | "dot";

export interface RangeSliderProps {
  /** Controlled value: single number or array of numbers [minVal, maxVal] */
  value?: number | number[];
  /** Default value if uncontrolled */
  defaultValue?: number | number[];
  /** Minimum range value */
  min?: number;
  /** Maximum range value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Snap strictly to steps during drag (default false for 120 FPS fluid glide) */
  snapToStepWhileDragging?: boolean;
  /** Callback fired on value change during dragging */
  onValueChange?: (val: number | number[]) => void;
  /** Legacy onChange callback */
  onChange?: (val: number) => void;
  /** Callback fired when drag ends */
  onValueCommit?: (val: number | number[]) => void;
  /** Disable slider interaction */
  disabled?: boolean;
  /** Render step tick marks along the track */
  showTicks?: boolean;
  /** Visual style for ticks: "line" (vertical tick bar) or "dot" (circle) */
  tickType?: RangeSliderTickType;
  /** Explicit number of ticks to display along the track */
  tickCount?: number;
  /** Tooltip display mode */
  showTooltip?: "always" | "hover" | "drag" | "never";
  /** Format function for value tooltip & right inline value */
  formatTooltip?: (val: number) => string;
  /** Styling variant */
  variant?: RangeSliderVariant;
  /** Size preset */
  size?: RangeSliderSize;
  /** Optional label displayed above slider */
  label?: string;
  /** Optional inline left label rendered inside the track (matching parameter slider style) */
  leftLabel?: React.ReactNode;
  /** Optional inline right value rendered inside the track */
  rightValue?: React.ReactNode;
  /** Show live current value inside track or beside header */
  showValue?: boolean;
  /** Show min & max labels below the slider */
  showLabels?: boolean;
  /** Container className */
  className?: string;
  /** Track className */
  trackClassName?: string;
  /** Filled range className */
  rangeClassName?: string;
  /** Thumb className */
  thumbClassName?: string;
}

const variantStyles: Record<
  RangeSliderVariant,
  {
    trackBg: string;
    range: string;
    thumb: string;
    tooltip: string;
    tickActive: string;
    tickInactive: string;
    glow: string;
  }
> = {
  default: {
    trackBg: "bg-neutral-200/60 dark:bg-neutral-900 border border-neutral-300/60 dark:border-neutral-800/80",
    range: "bg-neutral-300/90 dark:bg-neutral-800/90",
    thumb: "bg-neutral-950 dark:bg-white shadow-xs",
    tooltip: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950",
    tickActive: "bg-neutral-600/70 dark:bg-neutral-300/70",
    tickInactive: "bg-neutral-400/50 dark:bg-neutral-700/60",
    glow: "shadow-[0_0_12px_rgba(0,0,0,0.15)] dark:shadow-[0_0_12px_rgba(255,255,255,0.2)]",
  },
  primary: {
    trackBg: "bg-blue-50/80 dark:bg-blue-950/40 border border-blue-200/60 dark:border-blue-900/60",
    range: "bg-blue-500/25 dark:bg-blue-500/35",
    thumb: "bg-blue-600 dark:bg-blue-400 shadow-sm",
    tooltip: "bg-blue-600 text-white dark:bg-blue-500 dark:text-white",
    tickActive: "bg-blue-600/80 dark:bg-blue-400/90",
    tickInactive: "bg-blue-300/50 dark:bg-blue-800/50",
    glow: "shadow-[0_0_16px_rgba(37,99,235,0.4)]",
  },
  cyan: {
    trackBg: "bg-cyan-50/80 dark:bg-cyan-950/40 border border-cyan-200/60 dark:border-cyan-900/60",
    range: "bg-cyan-500/25 dark:bg-cyan-400/35",
    thumb: "bg-cyan-600 dark:bg-cyan-400 shadow-sm",
    tooltip: "bg-cyan-500 text-slate-950 dark:bg-cyan-400 dark:text-slate-950 font-bold",
    tickActive: "bg-cyan-600/90 dark:bg-cyan-300/95",
    tickInactive: "bg-cyan-300/50 dark:bg-cyan-800/50",
    glow: "shadow-[0_0_16px_rgba(6,182,212,0.45)]",
  },
  emerald: {
    trackBg: "bg-emerald-50/80 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-900/60",
    range: "bg-emerald-500/25 dark:bg-emerald-400/35",
    thumb: "bg-emerald-600 dark:bg-emerald-400 shadow-sm",
    tooltip: "bg-emerald-600 text-white dark:bg-emerald-400 dark:text-slate-950 font-bold",
    tickActive: "bg-emerald-600/90 dark:bg-emerald-300/95",
    tickInactive: "bg-emerald-300/50 dark:bg-emerald-800/50",
    glow: "shadow-[0_0_16px_rgba(16,185,129,0.45)]",
  },
  purple: {
    trackBg: "bg-purple-50/80 dark:bg-purple-950/40 border border-purple-200/60 dark:border-purple-900/60",
    range: "bg-purple-500/25 dark:bg-purple-500/35",
    thumb: "bg-purple-600 dark:bg-purple-400 shadow-sm",
    tooltip: "bg-purple-600 text-white dark:bg-purple-500 dark:text-white",
    tickActive: "bg-purple-600/90 dark:bg-purple-400/95",
    tickInactive: "bg-purple-300/50 dark:bg-purple-800/50",
    glow: "shadow-[0_0_16px_rgba(147,51,234,0.45)]",
  },
  amber: {
    trackBg: "bg-amber-50/80 dark:bg-amber-950/40 border border-amber-200/60 dark:border-amber-900/60",
    range: "bg-amber-500/25 dark:bg-amber-400/35",
    thumb: "bg-amber-600 dark:bg-amber-400 shadow-sm",
    tooltip: "bg-amber-500 text-slate-950 dark:bg-amber-400 dark:text-slate-950 font-bold",
    tickActive: "bg-amber-600/90 dark:bg-amber-300/95",
    tickInactive: "bg-amber-300/50 dark:bg-amber-800/50",
    glow: "shadow-[0_0_16px_rgba(245,158,11,0.45)]",
  },
  rose: {
    trackBg: "bg-rose-50/80 dark:bg-rose-950/40 border border-rose-200/60 dark:border-rose-900/60",
    range: "bg-rose-500/25 dark:bg-rose-400/35",
    thumb: "bg-rose-600 dark:bg-rose-400 shadow-sm",
    tooltip: "bg-rose-500 text-white dark:bg-rose-400 dark:text-slate-950 font-bold",
    tickActive: "bg-rose-600/90 dark:bg-rose-300/95",
    tickInactive: "bg-rose-300/50 dark:bg-rose-800/50",
    glow: "shadow-[0_0_16px_rgba(244,63,94,0.45)]",
  },
  glass: {
    trackBg: "bg-white/20 dark:bg-black/50 backdrop-blur-xl border border-white/30 dark:border-white/10",
    range: "bg-gradient-to-r from-blue-500/30 via-cyan-400/40 to-emerald-400/30 backdrop-blur-md",
    thumb: "bg-white dark:bg-cyan-400 shadow-[0_0_12px_rgba(6,182,212,0.6)]",
    tooltip: "bg-slate-900/90 text-white backdrop-blur-xl border border-white/20",
    tickActive: "bg-cyan-400/90",
    tickInactive: "bg-white/30 dark:bg-white/15",
    glow: "shadow-[0_0_20px_rgba(6,182,212,0.4)]",
  },
};

const sizeStyles: Record<
  RangeSliderSize,
  {
    trackHeight: string;
    thumbWidth: string;
    thumbHeight: string;
    tickSize: string;
    tickLineHeight: string;
    borderRadius: string;
  }
> = {
  sm: {
    trackHeight: "h-8 sm:h-9",
    thumbWidth: "w-1.5",
    thumbHeight: "h-5 sm:h-6",
    tickSize: "h-1.5 w-1.5",
    tickLineHeight: "h-2 sm:h-2.5",
    borderRadius: "rounded-lg",
  },
  md: {
    trackHeight: "h-10 sm:h-11",
    thumbWidth: "w-1.5",
    thumbHeight: "h-6 sm:h-7",
    tickSize: "h-1.5 w-1.5",
    tickLineHeight: "h-2.5 sm:h-3.5",
    borderRadius: "rounded-xl",
  },
  lg: {
    trackHeight: "h-12 sm:h-13",
    thumbWidth: "w-2",
    thumbHeight: "h-7 sm:h-8",
    tickSize: "h-2 w-2",
    tickLineHeight: "h-3.5 sm:h-4.5",
    borderRadius: "rounded-2xl",
  },
};

/** High-FPS Smooth Thumb with Velocity Stretch */
function SliderThumb({
  index,
  val,
  min,
  max,
  disabled,
  isDragging,
  showTooltip,
  formatTooltip,
  variant,
  size,
  thumbClassName,
  motionPct,
  onKeyDown,
}: {
  index: number;
  val: number;
  min: number;
  max: number;
  disabled?: boolean;
  isDragging: boolean;
  showTooltip: "always" | "hover" | "drag" | "never";
  formatTooltip?: (v: number) => string;
  variant: RangeSliderVariant;
  size: RangeSliderSize;
  thumbClassName?: string;
  motionPct: MotionValue<number>;
  onKeyDown: (e: React.KeyboardEvent, index: number) => void;
}) {
  const [isHovered, setIsHovered] = useState(false);

  // Smooth spring physics glide
  const smoothPct = useSpring(motionPct, SPRING_GLIDE);
  const velocity = useVelocity(smoothPct);

  // Subtle velocity-based dynamic stretch for ultra-high FPS kinetic sensation
  const velocityStretch = useTransform(velocity, [-500, 0, 500], [0.85, 1, 0.85]);

  const leftPos = useTransform(smoothPct, (p) => `${p}%`);
  // Self-offset from 0% to -100% so thumb stays flush inside track container
  const thumbOffset = useTransform(smoothPct, (p) => `${-p}%`);

  const vStyles = variantStyles[variant];
  const sStyles = sizeStyles[size];

  const formattedVal = formatTooltip ? formatTooltip(val) : val.toString();

  const isTooltipVisible =
    showTooltip === "always" ||
    (showTooltip === "hover" && (isHovered || isDragging)) ||
    (showTooltip === "drag" && isDragging);

  return (
    <motion.div
      style={{ left: leftPos, x: thumbOffset, y: "-50%" }}
      className="absolute top-1/2 z-20 pointer-events-none select-none"
    >
      <motion.div
        role="slider"
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={val}
        tabIndex={disabled ? -1 : 0}
        onKeyDown={(e) => onKeyDown(e, index)}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        animate={{
          scaleY: isDragging ? 1.35 : isHovered ? 1.15 : 1,
          scaleX: isDragging ? 0.9 : 1,
        }}
        transition={SPRING_BOUNCY}
        style={{ scaleX: velocityStretch }}
        className={cn(
          "relative flex items-center justify-center rounded-full outline-none pointer-events-auto cursor-grab active:cursor-grabbing transition-colors duration-150",
          sStyles.thumbWidth,
          sStyles.thumbHeight,
          vStyles.thumb,
          isDragging && vStyles.glow,
          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
          thumbClassName
        )}
      >
        {/* Floating Tooltip */}
        <AnimatePresence>
          {isTooltipVisible && (
            <motion.div
              key={`tooltip-${index}`}
              initial={{ opacity: 0, y: 4, scale: 0.85 }}
              animate={{ opacity: 1, y: -34, scale: 1 }}
              exit={{ opacity: 0, y: 4, scale: 0.85 }}
              transition={{ duration: 0.12, ease: "easeOut" }}
              className={cn(
                "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2.5 py-1 rounded-md text-[11px] font-mono font-bold whitespace-nowrap pointer-events-none shadow-md border border-black/10 dark:border-white/15",
                vStyles.tooltip
              )}
            >
              {formattedVal}
              <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-0.5 border-4 border-transparent border-t-current opacity-90" />
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    </motion.div>
  );
}

export function RangeSlider({
  value,
  defaultValue = 50,
  min = 0,
  max = 100,
  step = 1,
  snapToStepWhileDragging = false,
  onValueChange,
  onChange,
  onValueCommit,
  disabled = false,
  showTicks = true,
  tickType = "line",
  tickCount,
  showTooltip = "hover",
  formatTooltip,
  variant = "default",
  size = "md",
  label,
  leftLabel,
  rightValue,
  showLabels = false,
  showValue = false,
  className,
  trackClassName,
  rangeClassName,
  thumbClassName,
}: RangeSliderProps) {
  const isControlled = value !== undefined;
  const initialValues = useMemo(() => {
    const raw = isControlled ? value : defaultValue;
    return Array.isArray(raw) ? [...raw] : [raw];
  }, [isControlled, value, defaultValue]);

  const [values, setValues] = useState<number[]>(initialValues);
  const valuesRef = useRef<number[]>(initialValues);
  valuesRef.current = values;

  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  // Motion Values driving continuous high-FPS visual positions
  const motionPct0 = useMotionValue(
    Math.max(0, Math.min(100, ((initialValues[0] - min) / (max - min)) * 100))
  );
  const motionPct1 = useMotionValue(
    initialValues.length > 1
      ? Math.max(0, Math.min(100, ((initialValues[1] - min) / (max - min)) * 100))
      : 0
  );

  // Synchronize motion values if value prop updates programmatically
  useEffect(() => {
    if (isControlled) {
      const raw = Array.isArray(value) ? [...value] : [value];
      setValues(raw);
      valuesRef.current = raw;

      const p0 = Math.max(0, Math.min(100, ((raw[0] - min) / (max - min)) * 100));
      motionPct0.set(p0);

      if (raw.length > 1) {
        const p1 = Math.max(0, Math.min(100, ((raw[1] - min) / (max - min)) * 100));
        motionPct1.set(p1);
      }
    }
  }, [isControlled, value, min, max, motionPct0, motionPct1]);

  const triggerChange = useCallback(
    (res: number | number[]) => {
      onValueChange?.(res);
      if (typeof res === "number") {
        onChange?.(res);
      } else if (Array.isArray(res) && res.length > 0) {
        onChange?.(res[0]);
      }
    },
    [onValueChange, onChange]
  );

  // Calculate raw continuous percentage (0-100) from pointer clientX
  const getRawPctFromClientX = useCallback(
    (clientX: number) => {
      const track = trackRef.current;
      if (!track) return 0;
      const rect = track.getBoundingClientRect();
      return Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
    },
    []
  );

  // Convert raw percentage to stepped value
  const getValueFromPct = useCallback(
    (pct: number) => {
      let rawVal = min + (pct / 100) * (max - min);
      if (step > 0) {
        rawVal = Math.round((rawVal - min) / step) * step + min;
      }
      return Math.max(min, Math.min(max, Number(rawVal.toFixed(6))));
    },
    [min, max, step]
  );

  // Pointer Down on Track: Starts continuous high-FPS drag immediately
  const handlePointerDown = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (disabled) return;
      e.preventDefault();

      const rawPct = getRawPctFromClientX(e.clientX);
      const steppedVal = getValueFromPct(rawPct);
      const currentValues = valuesRef.current;

      let targetIdx = 0;
      if (currentValues.length > 1) {
        const dist0 = Math.abs(currentValues[0] - steppedVal);
        const dist1 = Math.abs(currentValues[1] - steppedVal);
        targetIdx = dist0 <= dist1 ? 0 : 1;
      }

      setDraggingIndex(targetIdx);
      try {
        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
      } catch (_) {}

      // Set continuous visual position
      const visualPct = snapToStepWhileDragging
        ? ((steppedVal - min) / (max - min)) * 100
        : rawPct;

      if (targetIdx === 0) motionPct0.set(visualPct);
      else motionPct1.set(visualPct);

      const next = [...currentValues];
      next[targetIdx] = steppedVal;

      if (next.length === 2) {
        if (targetIdx === 0 && next[0] > next[1]) next[0] = next[1];
        if (targetIdx === 1 && next[1] < next[0]) next[1] = next[0];
      }

      valuesRef.current = next;
      setValues(next);

      const res = next.length === 1 ? next[0] : next;
      triggerChange(res);
    },
    [disabled, getRawPctFromClientX, getValueFromPct, min, max, motionPct0, motionPct1, snapToStepWhileDragging, triggerChange]
  );

  // Pointer Move: Glides continuously at 120 FPS
  const handlePointerMove = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (draggingIndex === null || disabled) return;

      const rawPct = getRawPctFromClientX(e.clientX);
      const steppedVal = getValueFromPct(rawPct);
      const currentValues = valuesRef.current;

      const visualPct = snapToStepWhileDragging
        ? ((steppedVal - min) / (max - min)) * 100
        : rawPct;

      // Update continuous motion value for butter-smooth visual glide
      if (draggingIndex === 0) motionPct0.set(visualPct);
      else motionPct1.set(visualPct);

      // Only update React state and callbacks when numeric value changes
      if (currentValues[draggingIndex] !== steppedVal) {
        const next = [...currentValues];
        next[draggingIndex] = steppedVal;

        if (next.length === 2) {
          if (draggingIndex === 0 && next[0] > next[1]) next[0] = next[1];
          if (draggingIndex === 1 && next[1] < next[0]) next[1] = next[0];
        }

        valuesRef.current = next;
        setValues(next);

        const res = next.length === 1 ? next[0] : next;
        triggerChange(res);
      }
    },
    [draggingIndex, disabled, getRawPctFromClientX, getValueFromPct, min, max, motionPct0, motionPct1, snapToStepWhileDragging, triggerChange]
  );

  // Pointer Up: Soft-snaps visual position to step tick and commits value
  const handlePointerUp = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (draggingIndex !== null) {
        try {
          (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
        } catch (_) {}

        const currentValues = valuesRef.current;
        const currentVal = currentValues[draggingIndex];
        const finalPct = Math.max(0, Math.min(100, ((currentVal - min) / (max - min)) * 100));

        // Soft-snap to exact step mark
        if (draggingIndex === 0) motionPct0.set(finalPct);
        else motionPct1.set(finalPct);

        setDraggingIndex(null);

        const res = currentValues.length === 1 ? currentValues[0] : currentValues;
        onValueCommit?.(res);
      }
    },
    [draggingIndex, min, max, motionPct0, motionPct1, onValueCommit]
  );

  // Keyboard navigation
  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent, index: number) => {
      if (disabled) return;

      const currentValues = valuesRef.current;
      const current = currentValues[index];
      const effStep = step > 0 ? step : (max - min) / 100;
      const largeStep = (max - min) / 10;
      let nextVal = current;

      switch (e.key) {
        case "ArrowRight":
        case "ArrowUp":
          nextVal = Math.min(max, current + effStep);
          break;
        case "ArrowLeft":
        case "ArrowDown":
          nextVal = Math.max(min, current - effStep);
          break;
        case "PageUp":
          nextVal = Math.min(max, current + largeStep);
          break;
        case "PageDown":
          nextVal = Math.max(min, current - largeStep);
          break;
        case "Home":
          nextVal = min;
          break;
        case "End":
          nextVal = max;
          break;
        default:
          return;
      }

      e.preventDefault();
      nextVal = Number(nextVal.toFixed(6));

      const next = [...currentValues];
      next[index] = nextVal;
      if (next.length === 2) {
        if (index === 0 && next[0] > next[1]) next[0] = next[1];
        if (index === 1 && next[1] < next[0]) next[1] = next[0];
      }

      const finalPct = Math.max(0, Math.min(100, ((nextVal - min) / (max - min)) * 100));
      if (index === 0) motionPct0.set(finalPct);
      else motionPct1.set(finalPct);

      valuesRef.current = next;
      setValues(next);

      const res = next.length === 1 ? next[0] : next;
      triggerChange(res);
      onValueCommit?.(res);
    },
    [disabled, min, max, step, motionPct0, motionPct1, triggerChange, onValueCommit]
  );

  // Robust Tick Generation: Always displays clean step lines across the slider
  const ticks = useMemo(() => {
    if (!showTicks) return [];

    // 1. Explicit tick count requested
    if (tickCount && tickCount > 1) {
      const interval = (max - min) / (tickCount - 1);
      return Array.from({ length: tickCount }, (_, i) =>
        Number((min + i * interval).toFixed(6))
      );
    }

    // 2. Step-based ticks if step yields a sensible count (between 2 and 25)
    if (step > 0) {
      const totalSteps = Math.floor(Number(((max - min) / step).toFixed(6)));
      if (totalSteps >= 2 && totalSteps <= 25) {
        return Array.from({ length: totalSteps + 1 }, (_, i) =>
          Number((min + i * step).toFixed(6))
        );
      }
    }

    // 3. Smart default: 7 evenly spaced tick marks across the range
    const defaultTickCount = 7;
    const interval = (max - min) / (defaultTickCount - 1);
    return Array.from({ length: defaultTickCount }, (_, i) =>
      Number((min + i * interval).toFixed(6))
    );
  }, [showTicks, tickCount, min, max, step]);

  const isDual = values.length > 1;

  // Spring-smoothed active range fill driven directly by spring glide motions
  const smooth0 = useSpring(motionPct0, SPRING_GLIDE);
  const smooth1 = useSpring(motionPct1, SPRING_GLIDE);

  const fillLeft = useTransform(smooth0, (p0: number) => {
    if (!isDual) return "0%";
    const p1 = Number(smooth1.get());
    return `${Math.min(p0, p1)}%`;
  });

  const fillWidth = useTransform(smooth0, (p0: number) => {
    if (!isDual) return `${p0}%`;
    const p1 = Number(smooth1.get());
    return `${Math.abs(p1 - p0)}%`;
  });

  const minVal = isDual ? Math.min(values[0], values[1]) : min;
  const maxVal = isDual ? Math.max(values[0], values[1]) : values[0];

  const vStyles = variantStyles[variant];
  const sStyles = sizeStyles[size];

  const displayValText = isDual
    ? `${formatTooltip ? formatTooltip(values[0]) : values[0]} - ${formatTooltip ? formatTooltip(values[1]) : values[1]}`
    : `${formatTooltip ? formatTooltip(values[0]) : values[0]}`;

  return (
    <div className={cn("w-full flex flex-col gap-2 select-none", className)}>
      {/* Optional Top Header Label & Live Value */}
      {(label || (showValue && !rightValue && !leftLabel)) && (
        <div className="flex items-center justify-between text-xs font-semibold">
          {label && (
            <span className="text-neutral-800 dark:text-neutral-200 tracking-tight">
              {label}
            </span>
          )}
          {showValue && (
            <span className="font-mono text-[11px] font-bold px-2 py-0.5 rounded-md bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border border-neutral-200 dark:border-neutral-700">
              {displayValText}
            </span>
          )}
        </div>
      )}

      {/* Main Track Block Container with Seamless 120 FPS Dragging */}
      <div
        ref={trackRef}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerCancel={handlePointerUp}
        className={cn(
          "relative w-full flex items-center overflow-hidden touch-none select-none transition-colors duration-150 px-1",
          sStyles.trackHeight,
          sStyles.borderRadius,
          vStyles.trackBg,
          disabled ? "opacity-50 cursor-not-allowed" : "cursor-grab active:cursor-grabbing",
          trackClassName
        )}
      >
        {/* Active Range Segment Fill */}
        <motion.div
          style={{ left: fillLeft, width: fillWidth }}
          className={cn(
            "absolute inset-y-0 transition-colors duration-150 pointer-events-none",
            vStyles.range,
            rangeClassName
          )}
        />

        {/* Inline Left Label (Matching image 2 style) */}
        {leftLabel && (
          <div className="relative z-10 pointer-events-none select-none pl-3 text-xs sm:text-sm font-semibold tracking-tight text-neutral-700 dark:text-neutral-200 whitespace-nowrap">
            {leftLabel}
          </div>
        )}

        {/* Embedded Step Marks / Lines / Dots (Centered Across Track) */}
        {ticks.length > 0 && (
          <div className="pointer-events-none absolute inset-x-3 inset-y-0 flex items-center justify-between">
            {ticks.map((t) => {
              const tickPct = ((t - min) / (max - min)) * 100;
              const isInside = t >= minVal && t <= maxVal;

              return (
                <span
                  key={t}
                  className={cn(
                    "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors duration-150 pointer-events-none",
                    tickType === "line"
                      ? cn("w-[1.5px]", sStyles.tickLineHeight)
                      : sStyles.tickSize,
                    isInside ? vStyles.tickActive : vStyles.tickInactive
                  )}
                  style={{ left: `${tickPct}%` }}
                />
              );
            })}
          </div>
        )}

        {/* Inline Right Value (Matching image 2 style) */}
        {(rightValue || (showValue && leftLabel)) && (
          <div className="relative z-10 pointer-events-none select-none ml-auto pr-3 text-xs sm:text-sm font-mono font-bold text-neutral-900 dark:text-white whitespace-nowrap">
            {rightValue || displayValText}
          </div>
        )}

        {/* Vertical Capsule Bar Thumbs with High-FPS Spring Glide */}
        {values.map((val, idx) => (
          <SliderThumb
            key={idx}
            index={idx}
            val={val}
            min={min}
            max={max}
            disabled={disabled}
            isDragging={draggingIndex === idx}
            showTooltip={showTooltip}
            formatTooltip={formatTooltip}
            variant={variant}
            size={size}
            thumbClassName={thumbClassName}
            motionPct={idx === 0 ? motionPct0 : motionPct1}
            onKeyDown={handleKeyDown}
          />
        ))}
      </div>

      {/* Min & Max Labels Below Track */}
      {showLabels && (
        <div className="flex justify-between text-xs font-bold font-sans tracking-wide uppercase text-neutral-900 dark:text-neutral-100 px-0.5 pt-0.5">
          <span>{formatTooltip ? formatTooltip(min) : min}</span>
          <span>{formatTooltip ? formatTooltip(max) : max}</span>
        </div>
      )}
    </div>
  );
}

export default RangeSlider;

```
--------------------------------------------------

### COMPONENT: switch
Category: Form Controls
Description: A control that allows users to toggle between checked and not checked.
URL: https://lightswind.com/components/switch
Import: import { Switch } from "@/components/lightswind/switch"
Registry URL: https://lightswind.com/r/switch.json
Install Command: npx lightswind@latest add switch

Usage:
```tsx
<Switch />
```

Source Code:
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils"; // Assuming 'cn' utility is correctly set up

export interface SwitchProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    "onChange" | "size"
  > {
  onCheckedChange?: (checked: boolean) => void;
  size?: "sm" | "md" | "lg";
  thumbColor?: string;
  trackColor?: string;
  animation?: "smooth" | "bounce" | "slide";
}

const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
  (
    {
      className,
      onCheckedChange,
      checked,
      defaultChecked,
      size = "md",
      thumbColor,
      trackColor,
      animation = "smooth",
      ...props
    },
    ref
  ) => {
    // Manages the internal checked state of the switch
    const [isChecked, setIsChecked] = React.useState(
      checked !== undefined ? checked : defaultChecked || false
    );

    // Synchronizes internal state with external 'checked' prop for controlled components
    React.useEffect(() => {
      if (checked !== undefined) {
        setIsChecked(checked);
      }
    }, [checked]);

    // Defines Tailwind CSS classes for different switch sizes
    const sizeClasses = {
      sm: {
        track: "h-4 w-8",
        thumb: "h-3 w-3",
        translate: "translate-x-4", // Tailwind class for thumb movement
      },
      md: {
        track: "h-6 w-11",
        thumb: "h-5 w-5",
        translate: "translate-x-5", // Tailwind class for thumb movement
      },
      lg: {
        track: "h-8 w-14",
        thumb: "h-7 w-7",
        translate: "translate-x-6", // Tailwind class for thumb movement
      },
    };

    // Defines Tailwind CSS classes for different animation types
    const animationClasses = {
      smooth: { transition: "transition-transform duration-200 ease-in-out" },
      // Note: "ease-spring" is not a standard CSS easing function.
      // For a true spring animation, you'd typically need a CSS keyframe animation
      // or a JavaScript animation library. Using ease-in-out for demonstration.
      bounce: { transition: "transition-transform duration-300 ease-in-out" },
      slide: { transition: "transition-all duration-300 ease-out" },
    };

    // Handles changes from the hidden native checkbox input
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const newChecked = event.target.checked;
      // Only update internal state if the component is uncontrolled
      if (checked === undefined) {
        setIsChecked(newChecked);
      }
      // Call the external onCheckedChange handler
      onCheckedChange?.(newChecked);
    };

    // Handles clicks on the main div, simulating checkbox behavior
    const handleClick = () => {
      if (!props.disabled) {
        const newChecked = !isChecked;
        // Only update internal state if the component is uncontrolled
        if (checked === undefined) {
          setIsChecked(newChecked);
        }
        // Call the external onCheckedChange handler
        onCheckedChange?.(newChecked);
      }
    };

    // Apply custom track color dynamically based on isChecked state
    // The default Tailwind 'bg-primary' or 'bg-input' will be overridden if trackColor is provided.
    const customTrackStyle = trackColor
      ? { backgroundColor: isChecked ? trackColor : undefined } // Only applies custom color when checked
      : {};

    // Apply custom thumb color if provided
    const customThumbStyle = thumbColor ? { backgroundColor: thumbColor } : {};

    return (
      <div
        className={cn(
          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
          // Default background colors for the track based on checked state
          isChecked ? "bg-primary" : "bg-input",
          "[.lw-3d_&]:border-black/10 [.dark.lw-3d_&]:border-white/10",
          isChecked
            ? "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-primary [.lw-3d_&]:to-primary/90 [.lw-3d_&]:shadow-[inset_0_1.5px_2px_rgba(0,0,0,0.2)]"
            : "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-zinc-100 [.lw-3d_&]:to-zinc-200/90 [.dark.lw-3d_&]:from-zinc-800 [.dark.lw-3d_&]:to-zinc-900/90 [.lw-3d_&]:shadow-[inset_0_1.5px_3px_rgba(0,0,0,0.15),0_0.5px_1px_rgba(255,255,255,0.05)] [.dark.lw-3d_&]:shadow-[inset_0_1.5px_3px_rgba(0,0,0,0.3)]",
          // Apply size-specific track dimensions
          sizeClasses[size].track,
          className
        )}
        style={customTrackStyle} // Apply custom track background color
        onClick={handleClick} // Handle clicks on the track
        role="switch" // ARIA role for accessibility
        aria-checked={isChecked} // ARIA state for accessibility
      >
        {/* Hidden native checkbox to handle form submissions and accessibility */}
        <input
          type="checkbox"
          className="absolute h-0 w-0 opacity-0" // Visually hide the checkbox
          ref={ref} // Forward ref to the native input
          checked={isChecked} // Control the checked state of the native input
          onChange={handleChange} // Handle changes from the native input
          aria-hidden="true" // Hide from accessibility tree as visual role="switch" is used
          {...props} // Pass any other standard input props
        />
        {/* The thumb element that visually moves */}
        <span
          className={cn(
            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-all",
            // Apply translation based on checked state using Tailwind classes
            isChecked ? sizeClasses[size].translate : "translate-x-0",
            // Apply size-specific thumb dimensions
            sizeClasses[size].thumb,
            // Apply animation class based on chosen animation type
            animationClasses[animation].transition,
            "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-50/95 [.dark.lw-3d_&]:from-zinc-100 [.dark.lw-3d_&]:to-zinc-200",
            "[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_2px_4px_0_rgba(0,0,0,0.15)]",
            "[.dark.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.4),0_2px_4px_0_rgba(0,0,0,0.4)]"
          )}
          style={customThumbStyle} // Apply custom thumb background color
        />
      </div>
    );
  }
);

Switch.displayName = "Switch";

export { Switch };
```
--------------------------------------------------

### COMPONENT: textarea
Category: Form Controls
Description: A multi-line text input field that allows users to enter longer form content.
URL: https://lightswind.com/components/textarea
Import: import { Textarea } from '@/components/lightswind/textarea';
Registry URL: https://lightswind.com/r/textarea.json
Install Command: npx lightswind@latest add textarea

Usage:
```tsx
import { Textarea } from '@/components/lightswind/textarea';
import { Label } from '@/components/lightswind/label';

export function TextareaDemo() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, onFocus, onBlur, ...props }, ref) => {
    const [isFocused, setIsFocused] = React.useState(false);

    return (
      <textarea
        className={cn(
          `flex min-h-[80px] w-full rounded-xl primarylw bg-background
           px-3 py-2 text-sm ring-offset-background border border-input
           placeholder:text-muted-foreground/70 focus-visible:outline-none 
           focus-visible:ring-2 focus-visible:ring-ring 
           focus-visible:ring-offset-1 disabled:cursor-not-allowed 
           disabled:opacity-50 transition-all duration-300`,
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-background [.lw-3d_&]:to-muted/20",
          "[.lw-3d_&]:focus-visible:ring-0 [.lw-3d_&]:focus-visible:ring-offset-0",
          isFocused 
            ? "border-zinc-950 dark:border-white ring-1 ring-zinc-950 dark:ring-white shadow-[0_2px_8px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_8px_rgba(255,255,255,0.1)] [.lw-3d_&]:ring-0 [.lw-3d_&]:border-zinc-950 dark:[.lw-3d_&]:border-white [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.6),0_0_0_2px_rgba(0,0,0,0.85),0_4px_12px_rgba(0,0,0,0.1)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.25),0_0_0_2px_rgba(255,255,255,0.85),0_4px_12px_rgba(255,255,255,0.15)]" 
            : "[.lw-3d_&]:border-black/15 dark:[.lw-3d_&]:border-white/15 [.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.5),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
          className
        )}
        onFocus={(e) => {
          setIsFocused(true);
          onFocus?.(e);
        }}
        onBlur={(e) => {
          setIsFocused(false);
          onBlur?.(e);
        }}
        data-lenis-prevent
        ref={ref}
        {...props}
      />
    );
  }
);
Textarea.displayName = "Textarea";

export { Textarea };

```
--------------------------------------------------

### COMPONENT: toggle
Category: Form Controls
Description: A two-state button that can be toggled on or off.
URL: https://lightswind.com/components/toggle
Import: import { Toggle } from "@/components/lightswind/toggle"
Registry URL: https://lightswind.com/r/toggle.json
Install Command: npx lightswind@latest add toggle

Usage:
```tsx
<Toggle>Click me</Toggle>
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

// Define button style variants
const toggleVariants = {
  variant: {
    default: "bg-transparent",
    outline: "border   bg-transparent hover:bg-accent hover:text-accent-foreground",
  },
  size: {
    default: "h-10 px-3",
    sm: "h-9 px-2.5",
    lg: "h-11 px-5",
  },
};

export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: keyof typeof toggleVariants.variant;
  size?: keyof typeof toggleVariants.size;
  pressed?: boolean;
  defaultPressed?: boolean; // Add defaultPressed prop
  onPressedChange?: (pressed: boolean) => void;
}

const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
  ({ 
    className, 
    variant = "default", 
    size = "default", 
    children, 
    pressed, 
    defaultPressed = false, // Add default value
    onPressedChange,
    ...props 
  }, ref) => {
    // Use internal state if uncontrolled
    const [isPressed, setIsPressed] = React.useState(defaultPressed);
    
    // Determine if we're in controlled or uncontrolled mode
    const isControlled = pressed !== undefined;
    const dataState = isControlled ? pressed : isPressed;
    
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      // Don't update internal state if controlled
      if (!isControlled) {
        setIsPressed(!isPressed);
      }
      
      // Call the change handler if provided
      onPressedChange?.(!dataState);
      
      // Call the original onClick handler if it exists
      props.onClick?.(event);
    };
    
    return (
      <button
        ref={ref}
        type="button"
        aria-pressed={dataState}
        data-state={dataState ? "on" : "off"}
        className={cn(
          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-all duration-300 hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
          "[.lw-3d_&]:border [.lw-3d_&]:border-black/10 [.dark.lw-3d_&]:border-white/10",
          "data-[state=off]:[.lw-3d_&]:bg-gradient-to-b data-[state=off]:[.lw-3d_&]:from-white data-[state=off]:[.lw-3d_&]:to-zinc-50/95 data-[state=off]:[.dark.lw-3d_&]:from-zinc-900 data-[state=off]:[.dark.lw-3d_&]:to-zinc-950",
          "data-[state=off]:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)]",
          "data-[state=off]:[.dark.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
          "data-[state=on]:[.lw-3d_&]:bg-accent/80",
          "data-[state=on]:[.lw-3d_&]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.15)]",
          "data-[state=on]:[.dark.lw-3d_&]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]",
          toggleVariants.variant[variant],
          toggleVariants.size[size],
          className
        )}
        onClick={handleClick}
        {...props}
      >
        {children}
      </button>
    );
  }
);
Toggle.displayName = "Toggle";

export { Toggle, toggleVariants };

```
--------------------------------------------------

### COMPONENT: toggle-group
Category: Form Controls
Description: A set of two-state buttons that can be toggled on or off.
URL: https://lightswind.com/components/toggle-group
Import: import { ToggleGroup, ToggleGroupItem } from "@/components/lightswind/toggle-group"
Registry URL: https://lightswind.com/r/toggle-group.json
Install Command: npx lightswind@latest add toggle-group

Usage:
```tsx
<ToggleGroup type="single">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface ToggleGroupContextValue {
  type: "single" | "multiple";
  value: string | string[];
  onChange: (value: string) => void;
  size?: "default" | "sm" | "lg";
  variant?: "default" | "outline";
  disabled?: boolean;
}

const ToggleGroupContext = React.createContext<ToggleGroupContextValue | undefined>(undefined);

function useToggleGroupContext() {
  const context = React.useContext(ToggleGroupContext);
  if (!context) {
    throw new Error("useToggleGroupContext must be used within a ToggleGroup");
  }
  return context;
}

interface ToggleGroupProps {
  type: "single" | "multiple";
  value?: string | string[];
  defaultValue?: string | string[];
  onValueChange?: (value: string | string[]) => void;
  disabled?: boolean;
  variant?: "default" | "outline";
  size?: "default" | "sm" | "lg";
  className?: string;
  children?: React.ReactNode;
}

const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ToggleGroupProps>>(
  ({ 
    className, 
    type, 
    value, 
    defaultValue, 
    onValueChange, 
    variant = "default", 
    size = "default", 
    disabled = false,
    children, 
    ...props 
  }, ref) => {
    // Ensure value is always of the right type (string for single, string[] for multiple)
    const ensureCorrectValueType = (val: string | string[] | undefined): string | string[] => {
      if (val === undefined) return type === "single" ? "" : [];
      if (type === "single") {
        return Array.isArray(val) ? val[0] || "" : val;
      } else {
        return Array.isArray(val) ? val : val ? [val] : [];
      }
    };
    
    const [stateValue, setStateValue] = React.useState<string | string[]>(
      ensureCorrectValueType(defaultValue)
    );
    
    // Determine if the component is controlled or uncontrolled
    const isControlled = value !== undefined;
    const currentValue = isControlled ? ensureCorrectValueType(value) : stateValue;
    
    const handleValueChange = React.useCallback((itemValue: string) => {
      if (disabled) return;
      
      const newValue = (() => {
        if (type === "single") {
          return itemValue;
        }
        
        // For multiple selection
        // Ensure currentValue is always treated as an array for "multiple" type
        const values = Array.isArray(currentValue) ? currentValue : [currentValue].filter(Boolean);
        return values.includes(itemValue)
          ? values.filter((v) => v !== itemValue)
          : [...values, itemValue];
      })();
      
      if (!isControlled) {
        setStateValue(newValue);
      }
      
      onValueChange?.(newValue);
    }, [type, currentValue, disabled, isControlled, onValueChange]);
    
    return (
      <ToggleGroupContext.Provider
        value={{
          type,
          value: currentValue,
          onChange: handleValueChange,
          size,
          variant,
          disabled,
        }}
      >
        <div
          ref={ref}
          className={cn("flex items-center justify-center gap-1", className)}
          role={type === "single" ? "radiogroup" : "group"}
          {...props}
        >
          {children}
        </div>
      </ToggleGroupContext.Provider>
    );
  }
);
ToggleGroup.displayName = "ToggleGroup";

interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  value: string;
  disabled?: boolean;
  variant?: "default" | "outline";
  size?: "default" | "sm" | "lg";
  defaultPressed?: boolean;
}

const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
  ({ className, children, value, variant, size, disabled: itemDisabled, defaultPressed, ...props }, ref) => {
    const { type, value: groupValue, onChange, size: groupSize, variant: groupVariant, disabled: groupDisabled } = useToggleGroupContext();
    
    const isActive = type === "single" 
      ? groupValue === value 
      : Array.isArray(groupValue) 
        ? groupValue.includes(value) 
        : groupValue === value;
    
    const isDisabled = groupDisabled || itemDisabled;
    
    React.useEffect(() => {
      // Handle defaultPressed if provided and the toggle is not already active
      if (defaultPressed && !isActive && !isDisabled) {
        onChange(value);
      }
    }, []);
    
    const handleClick = () => {
      onChange(value);
    };
    
    return (
      <button
        ref={ref}
        type="button"
        role={type === "single" ? "radio" : "checkbox"}
        aria-checked={isActive}
        aria-disabled={isDisabled}
        disabled={isDisabled}
        data-state={isActive ? "on" : "off"}
        className={cn(
          "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
          "[.lw-3d_&]:border [.lw-3d_&]:border-black/10 [.dark.lw-3d_&]:border-white/10",
          "data-[state=off]:[.lw-3d_&]:bg-gradient-to-b data-[state=off]:[.lw-3d_&]:from-white data-[state=off]:[.lw-3d_&]:to-zinc-50/95 data-[state=off]:[.dark.lw-3d_&]:from-zinc-900 data-[state=off]:[.dark.lw-3d_&]:to-zinc-950",
          "data-[state=off]:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.45),0_1.5px_2px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.04)]",
          "data-[state=off]:[.dark.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.15),0_1.5px_2px_0_rgba(0,0,0,0.3)]",
          "data-[state=on]:[.lw-3d_&]:bg-accent/80",
          "data-[state=on]:[.lw-3d_&]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.15)]",
          "data-[state=on]:[.dark.lw-3d_&]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]",
          (variant || groupVariant || "default") === "default" ? "bg-transparent" : "border bg-transparent hover:bg-accent hover:text-accent-foreground",
          (size || groupSize || "default") === "default" ? "h-10 px-3" : (size || groupSize || "default") === "sm" ? "h-9 px-2.5" : "h-11 px-5",
          className
        )}
        onClick={handleClick}
        {...props}
      >
        {children}
      </button>
    );
  }
);
ToggleGroupItem.displayName = "ToggleGroupItem";

export { ToggleGroup, ToggleGroupItem };

```
--------------------------------------------------

## CATEGORY (FREE): Layout (6)

### COMPONENT: accordion
Category: Layout
Description: A vertically stacked set of interactive headings that each reveal a section of content.
URL: https://lightswind.com/components/accordion
Import: import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/lightswind/accordion';
Registry URL: https://lightswind.com/r/accordion.json
Install Command: npx lightswind@latest add accordion

Usage:
```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/lightswind/accordion';

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other components' aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

Source Code:
```tsx
import * as React from "react";
import { Plus, Minus } from "lucide-react";
import { cn } from "@/components/lib/utils";

// --- Contexts ---

interface AccordionContextType {
  value: string[];
  // onValueChange now accepts the item's value (string), letting Accordion handle the full state change logic
  onValueChange: (value: string) => void;
  type: "single" | "multiple";
  collapsible: boolean;
}

const AccordionContext = React.createContext<AccordionContextType | undefined>(undefined);

interface AccordionItemContextType {
  value: string;
}

const AccordionItemContext = React.createContext<AccordionItemContextType | undefined>(undefined);

// --- Accordion Component ---

interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  type?: "single" | "multiple";
  value?: string | string[];
  defaultValue?: string | string[];
  onValueChange?: (value: string[]) => void;
  collapsible?: boolean;
}

const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
  // **MODIFICATION: Changed default `type` to "single" and included `collapsible`**
  ({ className, type = "single", value, defaultValue = [], onValueChange, collapsible = true, children, ...props }, ref) => {

    // Helper function to ensure value is an array of strings
    const normalizeValue = (val: string | string[] | undefined): string[] => {
      if (Array.isArray(val)) {
        return val;
      }
      return val ? [val] : [];
    };

    // Initial state setup
    const initialValues = normalizeValue(
      value !== undefined ? value : defaultValue
    );

    // In "single" mode, ensure initial state only has one open item
    const [values, setValues] = React.useState<string[]>(
      type === "single" && initialValues.length > 1
        ? [initialValues[0]]
        : initialValues
    );

    // Controlled component logic: sync state with prop `value`
    React.useEffect(() => {
      if (value !== undefined) {
        const newValues = normalizeValue(value);
        setValues(
          type === "single" && newValues.length > 1
            ? [newValues[0]]
            : newValues
        );
      }
    }, [value, type]);

    const handleValueChange = React.useCallback(
      (itemValue: string) => {
        const isCurrentlyOpen = values.includes(itemValue);
        let newValues: string[] = [];

        if (type === "single") {
          if (isCurrentlyOpen) {
            // 1. Item is open. If collapsible is TRUE, close it (empty array).
            // If collapsible is FALSE, it stays open (itemValue).
            newValues = collapsible ? [] : [itemValue];
          } else {
            // 2. Item is closed. Open it (new value), closing any old value.
            newValues = [itemValue];
          }
        } else {
          // "multiple" type logic
          newValues = isCurrentlyOpen
            ? values.filter((v) => v !== itemValue)
            : [...values, itemValue];
        }

        // Update internal state if uncontrolled
        if (value === undefined) {
          setValues(newValues);
        }

        // Call external handler
        onValueChange?.(newValues);
      },
      [values, onValueChange, value, type, collapsible]
    );

    // Passed `type` and `collapsible` to the context
    return (
      <AccordionContext.Provider value={{ value: values, onValueChange: handleValueChange, type, collapsible }}>
        <div ref={ref} className={cn(className)} {...props}>
          {children}
        </div>
      </AccordionContext.Provider>
    );
  }
);
Accordion.displayName = "Accordion";

// --- AccordionItem Component (No Change) ---

interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string;
  disabled?: boolean;
}

const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
  ({ className, value, disabled = false, children, ...props }, ref) => {
    return (
      <AccordionItemContext.Provider value={{ value }}>
        <div
          ref={ref}
          className={cn("border-b border-muted-foreground/20 text-black dark:text-white", className)}
          data-state={disabled ? "disabled" : undefined}
          data-value={value}
          {...props}
        >
          {children}
        </div>
      </AccordionItemContext.Provider>
    );
  }
);
AccordionItem.displayName = "AccordionItem";

// --- AccordionTrigger Component (Morphing Icon Logic) ---

interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }

const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
  ({ className, children, ...props }, ref) => {
    const context = React.useContext(AccordionContext);
    if (!context) throw new Error("AccordionTrigger must be used within an Accordion");

    const itemContext = React.useContext(AccordionItemContext);
    if (!itemContext) throw new Error("AccordionTrigger must be used within an AccordionItem");

    const { value: values, onValueChange } = context;
    const { value: itemValue } = itemContext;

    const isOpen = values.includes(itemValue);

    // Simplified handler: calls context function with its item value
    const handleToggle = () => {
      onValueChange(itemValue);
    };

    return (
      <button
        ref={ref}
        type="button"
        className={cn(
          `flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline`,
          className
        )}
        onClick={handleToggle}
        data-state={isOpen ? "open" : "closed"}
        {...props}
      >
        {children}
        {/* MORPHING ICON IMPLEMENTATION */}
        <div className="relative  h-4 w-4 lg:h-6 lg:w-6 ml-2 shrink-0">
          {/* Plus (Closed State) */}
          <Plus
            className={cn(
              ` h-4 w-4 lg:h-6 lg:w-6 absolute transition-all duration-300 
              ease-in-out `,
              // Rotates + Fades out when open
              isOpen ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
            )}
          />
          {/* Minus (Open State) */}
          <Minus
            className={cn(
              " h-4 w-4 lg:h-6 lg:w-6 absolute transition-all duration-300 ease-in-out",
              // Fades in when open, starts rotated when closed
              isOpen ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
            )}
          />
        </div>
      </button>
    );
  }
);
AccordionTrigger.displayName = "AccordionTrigger";

// --- AccordionContent Component (Height Animation Logic) ---

interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> { }

const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
  ({ className, children, ...props }, ref) => {
    const context = React.useContext(AccordionContext);
    if (!context) throw new Error("AccordionContent must be used within an Accordion");

    const itemContext = React.useContext(AccordionItemContext);
    if (!itemContext) throw new Error("AccordionContent must be used within an AccordionItem");

    const { value: values } = context;
    const { value: itemValue } = itemContext;

    const isOpen = values.includes(itemValue);

    const contentRef = React.useRef<HTMLDivElement>(null);
    const [contentHeight, setContentHeight] = React.useState(0);

    // Calculates the height of the content element for smooth opening/closing
    React.useLayoutEffect(() => {
      if (isOpen && contentRef.current) {
        setContentHeight(contentRef.current.scrollHeight);
      } else {
        setContentHeight(0);
      }
    }, [isOpen, children]); // Recalculate if open state changes or children change

    return (
      <div
        ref={ref}
        style={{
          height: isOpen ? `${contentHeight}px` : "0px",
          transition: "height 300ms cubic-bezier(0.4, 0, 0.2, 1)", // Smooth transition
        }}
        className="overflow-hidden"
        data-state={isOpen ? "open" : "closed"}
        {...props}
      >
        <div ref={contentRef} className={cn("pb-4 pt-0 text-sm", className)}>
          {children}
        </div>
      </div>
    );
  }
);
AccordionContent.displayName = "AccordionContent";

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
```
--------------------------------------------------

### COMPONENT: aspect-ratio
Category: Layout
Description: A container that maintains a specific aspect ratio for its content, useful for images, videos, and other media.
URL: https://lightswind.com/components/aspect-ratio
Import: import { AspectRatio } from '@/components/lightswind/aspect-ratio';
Registry URL: https://lightswind.com/r/aspect-ratio.json
Install Command: npx lightswind@latest add aspect-ratio

Usage:
```tsx
import { AspectRatio } from '@/components/lightswind/aspect-ratio';
import Image from 'next/image';

export function AspectRatioDemo() {
  return (
    <div className="w-[300px]">
      <AspectRatio ratio={16 / 9}>
        <img
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Image"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </div>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The aspect ratio to maintain (width/height) */
  ratio?: number;
  /** Predefined aspect ratios for common use cases */
  preset?: "square" | "video" | "portrait" | "widescreen" | "ultrawide" | "golden";
  /** Whether to apply rounded corners */
  rounded?: boolean;
  /** Whether to show a border */
  bordered?: boolean;
  /** Optional object-fit style for child elements */
  objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
}

const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
  ({ 
    className, 
    ratio: propRatio, 
    preset,
    rounded = false,
    bordered = false,
    objectFit,
    style, 
    ...props 
  }, ref) => {
    // Predefined aspect ratios
    const presetRatios = {
      square: 1,             // 1:1
      video: 16/9,           // 16:9
      portrait: 3/4,         // 3:4
      widescreen: 16/9,      // 16:9
      ultrawide: 21/9,       // 21:9
      golden: 1.618          // Golden ratio
    };

    // Determine the final ratio to use
    const ratio = propRatio || (preset ? presetRatios[preset] : 1);

    return (
      <div
        ref={ref}
        style={{
          position: "relative",
          width: "100%",
          paddingBottom: `${(1 / ratio) * 100}%`,
          ...style,
        }}
        className={cn(
          "overflow-hidden",
          rounded && "rounded-md",
          bordered && "border  ",
          className
        )}
        {...props}
      >
        {props.children && (
          <div 
            className={cn(
              "absolute inset-0 h-full w-full",
              objectFit && `[&>img]:object-${objectFit} [&>video]:object-${objectFit}`
            )}
          >
            {props.children}
          </div>
        )}
      </div>
    );
  }
);
AspectRatio.displayName = "AspectRatio";

export { AspectRatio };

```
--------------------------------------------------

### COMPONENT: resizable
Category: Layout
Description: A component that allows users to resize elements by dragging handles.
URL: https://lightswind.com/components/resizable
Import: import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';
Registry URL: https://lightswind.com/r/resizable.json
Install Command: npx lightswind@latest add resizable

Usage:
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
```

Source Code:
```tsx
import * as React from "react"
import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/components/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col transition-all duration-200",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

interface ResizableHandleProps
  extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
  withHandle?: boolean
  variant?: "default" | "pill" | "glow" | "ghost"
}

const ResizableHandle = ({
  withHandle = false,
  variant = "default",
  className,
  ...props
}: ResizableHandleProps) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-zinc-200 dark:bg-zinc-800 transition-colors duration-200",
      "hover:bg-indigo-500/80 data-[resize-handle-state=drag]:bg-indigo-600",
      "after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2",
      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
      "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
      "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-2",
      "data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2",
      "data-[panel-group-direction=vertical]:after:translate-x-0",
      "[&[data-panel-group-direction=vertical]>div]:rotate-90",
      variant === "glow" && "hover:shadow-[0_0_8px_rgba(99,102,241,0.6)]",
      variant === "ghost" && "bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-700",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div
        className={cn(
          "z-10 flex h-6 w-4 items-center justify-center rounded-md border border-zinc-200 dark:border-zinc-700 bg-background shadow-xs transition-all duration-200 hover:scale-110",
          "data-[resize-handle-state=drag]:border-indigo-500 data-[resize-handle-state=drag]:scale-110 data-[resize-handle-state=drag]:shadow-md",
          "[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-white [.lw-3d_&]:to-zinc-100 dark:[.lw-3d_&]:from-zinc-800 dark:[.lw-3d_&]:to-zinc-900",
          "[.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.1)]",
          variant === "pill" && "h-8 w-3 rounded-full"
        )}
      >
        <GripVertical className="h-3 w-3 text-muted-foreground" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

```
--------------------------------------------------

### COMPONENT: scroll-area
Category: Layout
Description: A scrollable container with custom styled scrollbars, providing a consistent cross-browser experience.
URL: https://lightswind.com/components/scroll-area
Import: import { ScrollArea, ScrollBar } from '@/components/lightswind/scroll-area';
Registry URL: https://lightswind.com/r/scroll-area.json
Install Command: npx lightswind@latest add scroll-area

Usage:
```tsx
import { ScrollArea } from '@/components/lightswind/scroll-area';

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-4">
        <h4 className="text-sm font-medium leading-none">Scrollable Content</h4>
        <p className="text-sm">
          This is a scrollable area with custom scrollbars. The content will scroll when it exceeds the height.
        </p>
        {/* Add more content here to make it scroll */}
        {Array.from({ length: 15 }).map((_, i) => (
          <div key={i} className="py-1">
            Row {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Reference to the viewport element */
  viewportRef?: React.RefObject<HTMLDivElement>;
  /** Maximum height of the scroll area */
  maxHeight?: string | number;
  /** Whether to show scrollbars */
  showScrollbars?: boolean;
  /** Whether to allow scrolling */
  scrollable?: boolean;
  /** The orientation of the scroll area */
  orientation?: "vertical" | "horizontal" | "both";
  /** Whether to smooth scroll */
  smooth?: boolean;
  /** Theme for the scrollbar */
  theme?: "default" | "minimal" | "none";
}

const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
  ({
    className,
    children,
    viewportRef,
    maxHeight,
    showScrollbars = true,
    scrollable = true,
    orientation = "vertical",
    smooth = false,
    theme = "default",
    ...props
  }, ref) => {
    const internalRef = React.useRef<HTMLDivElement>(null);
    const resolvedRef = viewportRef || internalRef;

    const style: React.CSSProperties = {
      maxHeight: maxHeight !== undefined ? (typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight) : undefined,
      ...props.style
    };

    // Orientation scroll classes
    const orientationClasses = {
      vertical: "overflow-y-auto overflow-x-hidden",
      horizontal: "overflow-x-auto overflow-y-hidden",
      both: "overflow-auto"
    };

    // Theme classes
    const themeClasses = {
      default: "themed-scrollbar",
      minimal: "minimal-scrollbar",
      none: "scrollbar-none"
    };

    return (
      <div
        ref={ref}
        className={cn("relative overflow-hidden", className)}
        style={style}
        {...props}
      >
        <div
          ref={resolvedRef}
          className={cn(
            "h-full w-full rounded-[inherit]",
            scrollable ? orientationClasses[orientation] : "overflow-hidden",
            smooth && "scroll-smooth",
            showScrollbars ? themeClasses[theme] : "scrollbar-none"
          )}
          data-lenis-prevent
        >
          {children}
        </div>
      </div>
    );
  }
);
ScrollArea.displayName = "ScrollArea";

interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The orientation of the scrollbar */
  orientation?: "vertical" | "horizontal";
  /** Size of the scrollbar */
  size?: "thin" | "default" | "thick";
  /** Whether the scrollbar is visible */
  visible?: boolean;
}

const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(
  ({
    className,
    orientation = "vertical",
    size = "default",
    visible = false,
    ...props
  }, ref) => {
    // Size classes
    const sizeClasses = {
      thin: orientation === "vertical" ? "w-1" : "h-1",
      default: orientation === "vertical" ? "w-1.5" : "h-1.5",
      thick: orientation === "vertical" ? "w-2" : "h-2"
    };

    return (
      <div
        ref={ref}
        className={cn(
          "flex touch-none select-none transition-all",
          orientation === "vertical"
            ? `h-full ${sizeClasses[size]} border-l border-l-transparent p-[1px]`
            : `${sizeClasses[size]} flex-col border-t border-t-transparent p-[1px]`,
          visible ? "opacity-100" : "opacity-0 hover:opacity-100",
          className
        )}
        {...props}
      >
        <div className="relative flex-1 rounded-full bg-primary/50 hover:bg-primary transition-all duration-150" />
      </div>
    );
  }
);
ScrollBar.displayName = "ScrollBar";

export { ScrollArea, ScrollBar };

```
--------------------------------------------------

### COMPONENT: separator
Category: Layout
Description: A horizontal or vertical line that visually separates content, useful for creating visual hierarchy and grouping related items.
URL: https://lightswind.com/components/separator
Import: import { Separator } from '@/components/lightswind/separator';
Registry URL: https://lightswind.com/r/separator.json
Install Command: npx lightswind@latest add separator

Usage:
```tsx
import { Separator } from '@/components/lightswind/separator';

export function SeparatorDemo() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  );
}
```

Source Code:
```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The orientation of the separator */
  orientation?: "horizontal" | "vertical";
  /** Whether the separator is decorative or functional */
  decorative?: boolean;
  /** The thickness of the separator */
  thickness?: "thin" | "default" | "thick";
  /** The style of the separator */
  lineStyle?: "solid" | "dashed" | "dotted";
  /** The color variant of the separator */
  variant?: "default" | "muted" | "accent" | "primary";
}

const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
  ({ 
    className, 
    orientation = "horizontal", 
    decorative = true, 
    thickness = "default",
    lineStyle = "solid",
    variant = "default",
    ...props 
  }, ref) => {
    // Thickness classes
    const thicknessClasses = {
      thin: orientation === "horizontal" ? "h-px" : "w-px",
      default: orientation === "horizontal" ? "h-[1px]" : "w-[1px]",
      thick: orientation === "horizontal" ? "h-0.5" : "w-0.5"
    };

    // Style classes
    const styleClasses = {
      solid: "border-0",
      dashed: lineStyle === "dashed" ? (orientation === "horizontal" ? "border-t-0 border-l-0 border-r-0 border-b border-dashed" : "border-t-0 border-b-0 border-r-0 border-l border-dashed") : "",
      dotted: lineStyle === "dotted" ? (orientation === "horizontal" ? "border-t-0 border-l-0 border-r-0 border-b border-dotted" : "border-t-0 border-b-0 border-r-0 border-l border-dotted") : ""
    };

    // Variant classes
    const variantClasses = {
      default: "bg-primary/20",
      muted: "bg-muted",
      accent: "bg-accent",
      primary: "bg-primary/20"
    };

    return (
      <div
        ref={ref}
        role={decorative ? "none" : "separator"}
        aria-orientation={decorative ? undefined : orientation}
        className={cn(
          "shrink-0",
          thicknessClasses[thickness],
          orientation === "horizontal" ? "w-full" : "h-full",
          variantClasses[variant],
          styleClasses[lineStyle],
          className
        )}
        {...props}
      />
    );
  }
);
Separator.displayName = "Separator";

export { Separator };

```
--------------------------------------------------

### COMPONENT: tabs
Category: Layout
Description: A set of layered sections of content that display one panel at a time.
URL: https://lightswind.com/components/tabs
Import: import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/lightswind/tabs"
Registry URL: https://lightswind.com/r/tabs.json
Install Command: npx lightswind@latest add tabs

Usage:
```tsx
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings.</TabsContent>
  <TabsContent value="password">Password settings.</TabsContent>
</Tabs>
```

Source Code:
```tsx
"use client";

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence } from "framer-motion";

export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
  defaultValue?: string;
  value?: string;
  onValueChange?: (value: string) => void;
}

interface TabsContextValue {
  value: string;
  onValueChange: (value: string) => void;
  updateIndicator: () => void;
  scheduleUpdateIndicator: () => void;
  indicatorStyle: React.CSSProperties;
  mounted: boolean;
  registerTabTrigger: (value: string, element: HTMLButtonElement | null) => void;
  registerTabsList: (element: HTMLDivElement | null) => void;
}

const TabsContext = React.createContext<TabsContextValue>({
  value: "",
  onValueChange: () => { },
  updateIndicator: () => { },
  scheduleUpdateIndicator: () => { },
  indicatorStyle: {},
  mounted: false,
  registerTabTrigger: () => { },
  registerTabsList: () => { },
});

const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
  ({ className, defaultValue, value, onValueChange, children, ...props }, ref) => {
    const [internalValue, setInternalValue] = React.useState(defaultValue || "");
    const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({});
    const [mounted, setMounted] = React.useState(false);
    const tabsListRef = React.useRef<HTMLDivElement | null>(null);
    const tabTriggerRefs = React.useRef(new Map<string, HTMLButtonElement | null>());

    const controlled = value !== undefined;
    const currentValue = controlled ? value : internalValue;

    const registerTabsList = React.useCallback((element: HTMLDivElement | null) => {
      tabsListRef.current = element;
    }, []);

    const registerTabTrigger = React.useCallback((value: string, element: HTMLButtonElement | null) => {
      if (element) {
        tabTriggerRefs.current.set(value, element);
      } else {
        tabTriggerRefs.current.delete(value);
      }
    }, []);

    const updateIndicator = React.useCallback(() => {
      if (tabsListRef.current && currentValue) {
        const activeTab = tabTriggerRefs.current.get(currentValue);
        if (activeTab) {
          const tabRect = activeTab.getBoundingClientRect();
          const listRect = tabsListRef.current.getBoundingClientRect();
          // Only update if both rects have valid dimensions (element is visible)
          if (tabRect.width > 0 && listRect.width > 0) {
            setIndicatorStyle({
              left: `${tabRect.left - listRect.left}px`,
              width: `${tabRect.width}px`,
            });
          }
        }
      }
    }, [currentValue]);

    const scheduleUpdateIndicator = React.useCallback(() => {
      // Use rAF to defer until after browser has painted layout
      requestAnimationFrame(() => {
        updateIndicator();
      });
    }, [updateIndicator]);

    React.useEffect(() => {
      setMounted(true);
      // Schedule update after paint so dimensions are correct even inside popovers/dialogs
      scheduleUpdateIndicator();
      window.addEventListener("resize", scheduleUpdateIndicator);
      return () => window.removeEventListener("resize", scheduleUpdateIndicator);
    }, [scheduleUpdateIndicator]);

    // Watch for when the tabs list becomes visible in the DOM
    // (e.g., when a Popover or Dialog opens), then re-compute the indicator
    React.useEffect(() => {
      const listEl = tabsListRef.current;
      if (!listEl) return;

      const observer = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting) {
            scheduleUpdateIndicator();
          }
        },
        { threshold: 0.1 }
      );
      observer.observe(listEl);
      return () => observer.disconnect();
    }, [scheduleUpdateIndicator]);

    const handleValueChange = React.useCallback(
      (newValue: string) => {
        if (!controlled) setInternalValue(newValue);
        onValueChange?.(newValue);
      },
      [controlled, onValueChange]
    );

    return (
      <TabsContext.Provider
        value={{
          value: currentValue,
          onValueChange: handleValueChange,
          updateIndicator,
          scheduleUpdateIndicator,
          indicatorStyle,
          mounted,
          registerTabTrigger,
          registerTabsList,
        }}
      >
        <div ref={ref} className={cn("w-full", className)} {...props}>
          {children}
        </div>
      </TabsContext.Provider>
    );
  }
);
Tabs.displayName = "Tabs";

const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const { indicatorStyle, registerTabsList, mounted } = React.useContext(TabsContext);

    return (
      <div
        ref={(el) => {
          if (typeof ref === "function") ref(el);
          else if (ref) ref.current = el;
          registerTabsList(el);
        }}
        className={cn(
          `relative inline-flex h-8 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-800 p-0.5 text-neutral-900 dark:text-neutral-100`,
          `[.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-zinc-200 [.lw-3d_&]:to-zinc-100 dark:[.lw-3d_&]:from-zinc-900 dark:[.lw-3d_&]:to-zinc-950`,
          `[.lw-3d_&]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.12),0_1px_0_rgba(255,255,255,0.6)] dark:[.lw-3d_&]:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5)]`,
          `[.lw-3d_&]:border-black/15 dark:[.lw-3d_&]:border-white/15`,
          className
        )}
        {...props}
      >
        {mounted && (
          <motion.div
            layout
            className="tabs-bg-indicator absolute top-0.5 bottom-0.5 rounded-full bg-neutral-900 dark:bg-white [.lw-3d_&]:bg-gradient-to-b [.lw-3d_&]:from-zinc-800 [.lw-3d_&]:to-zinc-950 dark:[.lw-3d_&]:from-white dark:[.lw-3d_&]:to-zinc-200 [.lw-3d_&]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.3),0_3px_6px_-1px_rgba(0,0,0,0.3)] dark:[.lw-3d_&]:shadow-[inset_0_1.5px_0_0_rgba(255,255,255,0.8),0_3px_6px_-1px_rgba(0,0,0,0.4)]"
            style={{
              ...indicatorStyle,
              position: "absolute",
              borderRadius: "9999px",
              zIndex: 0,
            }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
          />
        )}
        {props.children}
      </div>
    );
  }
);
TabsList.displayName = "TabsList";

const TabsTrigger = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }
>(({ className, value, ...props }, ref) => {
  const { value: selectedValue, onValueChange, registerTabTrigger, updateIndicator, scheduleUpdateIndicator } =
    React.useContext(TabsContext);
  const isActive = selectedValue === value;
  const triggerRef = React.useRef<HTMLButtonElement | null>(null);

  React.useEffect(() => {
    registerTabTrigger(value, triggerRef.current);
    return () => registerTabTrigger(value, null);
  }, [value, registerTabTrigger]);

  React.useEffect(() => {
    // Use scheduleUpdateIndicator for deferred measurement (fixes popover/dialog initial state)
    if (isActive) scheduleUpdateIndicator();
  }, [isActive, scheduleUpdateIndicator]);

  return (
    <button
      ref={(el) => {
        if (typeof ref === "function") ref(el);
        else if (ref) ref.current = el;
        triggerRef.current = el;
      }}
      type="button"
      role="tab"
      aria-selected={isActive}
      data-state={isActive ? "active" : "inactive"}
      data-value={value}
      className={cn(
        `relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-full
         px-3 py-0.5 md:py-1 text-xs lg:text-xs font-semibold transition-all 
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
         focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
        isActive
          ? "text-white dark:text-neutral-950 font-bold"
          : "text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white font-semibold",
        className
      )}
      onClick={(e) => {
        onValueChange(value);
        props.onClick?.(e);
      }}
      {...props}
    />
  );
});
TabsTrigger.displayName = "TabsTrigger";

const TabsContent = React.forwardRef<
  HTMLDivElement,
  { value: string } & React.ComponentPropsWithoutRef<"div">
>(({ className, value, ...props }, ref) => {
  const { value: selectedValue, updateIndicator } = React.useContext(TabsContext);
  const isActive = selectedValue === value;
  const contentRef = React.useRef<HTMLDivElement | null>(null);

  // Trigger updateIndicator when content resizes
  React.useEffect(() => {
    if (!isActive || !contentRef.current) return;

    const observer = new ResizeObserver(() => {
      updateIndicator();
    });

    observer.observe(contentRef.current);

    return () => observer.disconnect();
  }, [isActive, updateIndicator]);

  return (
    <AnimatePresence>
      {isActive && (
        <div
          key={value}
          ref={(el) => {
            contentRef.current = el;
            if (typeof ref === "function") ref(el);
            else if (ref) ref.current = el;
          }}
          role="tabpanel"
          data-state="active"
          data-value={value}
          className={cn(
            `mt-2 ring-offset-background focus-visible:outline-none  
             focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 
             mx-auto w-full`,
            className
          )}
          style={{
            scrollbarWidth: "none",
            msOverflowStyle: "none",
          }}
          {...props}
        />
      )}
    </AnimatePresence>
  );
});
TabsContent.displayName = "TabsContent";

export { Tabs, TabsList, TabsTrigger, TabsContent };

```
--------------------------------------------------

## CATEGORY (FREE): Navigation (4)

### COMPONENT: breadcrumb
Category: Navigation
Description: A flexible, accessible breadcrumb navigation component built with React and TypeScript. It supports links, pages, separators, ellipsis, and custom child elements, allowing users to easily indicate their current location in a hierarchy.
URL: https://lightswind.com/components/breadcrumb
Import: import { 
    Breadcrumb, 
    BreadcrumbList, 
    BreadcrumbItem, 
    BreadcrumbLink, 
    BreadcrumbPage, 
    BreadcrumbSeparator, 
    BreadcrumbEllipsis 
  } from '@/components/lightswind/breadcrumb';
Registry URL: https://lightswind.com/r/breadcrumb.json
Install Command: npx lightswind@latest add breadcrumb

Usage:
```tsx
import { 
    Breadcrumb, 
    BreadcrumbList, 
    BreadcrumbItem, 
    BreadcrumbLink, 
    BreadcrumbPage, 
    BreadcrumbSeparator, 
    BreadcrumbEllipsis 
  } from '@/components/lightswind/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

Source Code:
```tsx
import * as React from "react";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "@/components/lib/utils";

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
Breadcrumb.displayName = "Breadcrumb";

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
));
BreadcrumbList.displayName = "BreadcrumbList";

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
));
BreadcrumbItem.displayName = "BreadcrumbItem";

interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
  asChild?: boolean;
}

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  BreadcrumbLinkProps
>(({ asChild, className, children, ...props }, ref) => {
  if (asChild) {
    if (React.isValidElement(children)) {
      // **KEY CHANGE HERE: Assert the type of children for cloneElement**
      return React.cloneElement(children as React.ReactElement<any>, {
        ref, // The ref from forwardRef
        className: cn(
          "transition-colors hover:text-foreground",
          className,
          (children.props as any).className // Access existing className safely
        ),
        ...props, // Spread any other props to the child
      });
    }
    console.warn("BreadcrumbLink: When `asChild` is true, a single React element child is expected.");
    return null;
  }

  return (
    <a
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    >
      {children}
    </a>
  );
});
BreadcrumbLink.displayName = "BreadcrumbLink";

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
));
BreadcrumbPage.displayName = "BreadcrumbPage";

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:size-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
);
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
};
```
--------------------------------------------------

### COMPONENT: navigation-menu
Category: Navigation
Description: A responsive navigation component with flyout menus for site navigation.
URL: https://lightswind.com/components/navigation-menu
Import: import { 
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink
} from "@/components/lightswind/navigation-menu"
Registry URL: https://lightswind.com/r/navigation-menu.json
Install Command: npx lightswind@latest add navigation-menu

Usage:
```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px]">
          <li className="row-span-3">
            <NavigationMenuLink asChild>
              <a href="/docs">Documentation</a>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink asChild>
              <a href="/docs/installation">Installation</a>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/components">Components</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

Source Code:
```tsx
import * as React from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/components/lib/utils";

// Context to manage the navigation menu state
interface NavigationMenuContextType {
  open: Record<string, boolean>;
  activeItem: string | null;
  toggleMenu: (id: string) => void;
  setActiveItem: (id: string | null) => void;
}

const NavigationMenuContext = React.createContext<
  NavigationMenuContextType | undefined
>(undefined);

// Root component
interface NavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> { }

const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuProps>(
  ({ className, children, ...props }, ref) => {
    const [open, setOpen] = React.useState<Record<string, boolean>>({});
    const [activeItem, setActiveItem] = React.useState<string | null>(null);

    const toggleMenu = React.useCallback((id: string) => {
      setOpen((prev) => ({
        ...prev,
        [id]: !prev[id],
      }));
    }, []);

    return (
      <NavigationMenuContext.Provider
        value={{ open, activeItem, toggleMenu, setActiveItem }}
      >
        <div
          ref={ref}
          className={cn(
            "relative z-10 flex max-w-max flex-1 items-center justify-center",
            className
          )}
          {...props}
        >
          {children}
          <NavigationMenuViewport />
        </div>
      </NavigationMenuContext.Provider>
    );
  }
);
NavigationMenu.displayName = "NavigationMenu";

// List component
interface NavigationMenuListProps
  extends React.HTMLAttributes<HTMLUListElement> { }

const NavigationMenuList = React.forwardRef<
  HTMLUListElement,
  NavigationMenuListProps
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
));
NavigationMenuList.displayName = "NavigationMenuList";

// MenuItem component
interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
  value?: string;
}

const NavigationMenuItem = React.forwardRef<
  HTMLLIElement,
  NavigationMenuItemProps
>(({ className, value, ...props }, ref) => {
  return (
    <li
      ref={ref}
      className={cn("relative", className)}
      data-value={value}
      {...props}
    />
  );
});
NavigationMenuItem.displayName = "NavigationMenuItem";

// Trigger style
const navigationMenuTriggerStyle = () => {
  return "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50";
};

// Trigger component
interface NavigationMenuTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  id?: string;
}

const NavigationMenuTrigger = React.forwardRef<
  HTMLButtonElement,
  NavigationMenuTriggerProps
>(({ className, children, id, ...props }, ref) => {
  // --- FIX START ---
  // 1. Call useId unconditionally to get a fallback ID.
  const generatedId = React.useId();
  // 2. Use the provided id prop, or fall back to the generated one.
  const menuId = id || generatedId;
  // --- FIX END ---

  const ctx = React.useContext(NavigationMenuContext);

  if (!ctx) {
    throw new Error("NavigationMenuTrigger must be used within NavigationMenu");
  }

  const { open, toggleMenu } = ctx;
  const isOpen = open[menuId] || false;

  return (
    <button
      ref={ref}
      type="button"
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      onClick={() => toggleMenu(menuId)}
      aria-expanded={isOpen}
      aria-controls={`nav-menu-${menuId}`}
      data-state={isOpen ? "open" : "closed"}
      {...props}
    >
      {children}{" "}
      <ChevronDown
        className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </button>
  );
});
NavigationMenuTrigger.displayName = "NavigationMenuTrigger";

// Content component
interface NavigationMenuContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
  id?: string;
  forceMount?: boolean;
}

const NavigationMenuContent = React.forwardRef<
  HTMLDivElement,
  NavigationMenuContentProps
>(({ className, children, id, forceMount = false, ...props }, ref) => {
  // --- FIX START ---
  // 1. Call useId unconditionally to get a fallback ID.
  const generatedId = React.useId();
  // 2. Use the provided id prop, or fall back to the generated one.
  const menuId = id || generatedId;
  // --- FIX END ---

  const ctx = React.useContext(NavigationMenuContext);

  if (!ctx) {
    throw new Error("NavigationMenuContent must be used within NavigationMenu");
  }

  const { open } = ctx;
  const isOpen = open[menuId] || false;

  if (!isOpen && !forceMount) return null;

  return (
    <div
      ref={ref}
      className={cn(
        "absolute left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
        className
      )}
      id={`nav-menu-${menuId}`}
      data-state={isOpen ? "open" : "closed"}
      {...props}
    >
      {children}
    </div>
  );
});
NavigationMenuContent.displayName = "NavigationMenuContent";

// Link component
interface NavigationMenuLinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> { }

const NavigationMenuLink = React.forwardRef<
  HTMLAnchorElement,
  NavigationMenuLinkProps
>(({ className, children, ...props }, ref) => {
  return (
    <a
      ref={ref}
      className={cn(navigationMenuTriggerStyle(), className)}
      {...props}
    >
      {children}
    </a>
  );
});
NavigationMenuLink.displayName = "NavigationMenuLink";

// Viewport component
interface NavigationMenuViewportProps
  extends React.HTMLAttributes<HTMLDivElement> { }

const NavigationMenuViewport = React.forwardRef<
  HTMLDivElement,
  NavigationMenuViewportProps
>(({ className, ...props }, ref) => {
  const viewportRef = React.useRef<HTMLDivElement>(null);
  const ctx = React.useContext(NavigationMenuContext);

  if (!ctx) {
    return null;
  }

  const hasOpenMenu = Object.values(ctx.open).some(Boolean);

  return (
    <div className={cn("absolute left-0 top-full flex justify-center")}>
      <div
        ref={viewportRef}
        className={cn(
          "origin-top-center relative mt-1.5 h-[var(--lw-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg md:w-[var(--lw-navigation-menu-viewport-width)]",
          !hasOpenMenu && "hidden",
          className
        )}
        {...props}
      />
    </div>
  );
});
NavigationMenuViewport.displayName = "NavigationMenuViewport";

// Indicator component
interface NavigationMenuIndicatorProps
  extends React.HTMLAttributes<HTMLDivElement> { }

const NavigationMenuIndicator = React.forwardRef<
  HTMLDivElement,
  NavigationMenuIndicatorProps
>(({ className, ...props }, ref) => {
  const ctx = React.useContext(NavigationMenuContext);

  if (!ctx) {
    return null;
  }

  const hasActiveItem = !!ctx.activeItem;

  if (!hasActiveItem) return null;

  return (
    <div
      ref={ref}
      className={cn(
        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
        className
      )}
      data-state={hasActiveItem ? "visible" : "hidden"}
      {...props}
    >
      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-background shadow-md" />
    </div>
  );
});
NavigationMenuIndicator.displayName = "NavigationMenuIndicator";

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
};
```
--------------------------------------------------

### COMPONENT: pagination
Category: Navigation
Description: A fully accessible pagination component built with React and TypeScript. It provides navigation controls for multi-page content, including page numbers, previous/next buttons, and ellipsis for collapsed pages.
URL: https://lightswind.com/components/pagination
Import: import { 
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationPrevious,
    PaginationNext,
    PaginationEllipsis
  } from '@/components/lightswind/pagination';
Registry URL: https://lightswind.com/r/pagination.json
Install Command: npx lightswind@latest add pagination

Usage:
```tsx
import { 
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationPrevious,
    PaginationNext,
    PaginationEllipsis
  } from '@/components/lightswind/pagination';

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">5</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

Source Code:
```tsx

import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/components/lib/utils"
import { buttonVariants } from "./button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
  sizeValue?: "default" | "sm" | "lg" | "icon"
} & React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  sizeValue = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size: sizeValue,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    sizeValue="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    sizeValue="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}

```
--------------------------------------------------

### COMPONENT: sidebar
Category: Navigation
Description: A fully featured, animated, and accessible sidebar component system built with React, TypeScript, and Framer Motion. It supports collapsible behavior, active menu indicators, grouping, headers, footers, and smooth animations.
URL: https://lightswind.com/components/sidebar
Import: import { 
    SidebarProvider,
    useSidebar,
    SidebarRoot as Sidebar,
    SidebarTrigger,
    SidebarHeader,
    SidebarContent,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarGroupContent,
    SidebarFooter,
    SidebarMenu,
    SidebarMenuItem,
    SidebarMenuButton
  } from "@/components/lightswind/sidebar";
Registry URL: https://lightswind.com/r/sidebar.json
Install Command: npx lightswind@latest add sidebar

Usage:
```tsx
import {
  SidebarProvider,
  Sidebar,
  SidebarTrigger,
  SidebarHeader,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from "@/components/lightswind/sidebar";

<SidebarProvider defaultExpanded>
  <Sidebar>
    <SidebarHeader>
      <span className="font-bold">My App</span>
      <SidebarTrigger />
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Main</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem value="dashboard">
              <SidebarMenuButton>Dashboard</SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem value="settings">
              <SidebarMenuButton>Settings</SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <span>Footer content</span>
    </SidebarFooter>
  </Sidebar>
</SidebarProvider>
```

Source Code:
```tsx
"use client";

import * as React from "react";
import { ChevronRight, ChevronLeft } from "lucide-react";
import { motion, AnimatePresence, LayoutGroup } from "framer-motion";
import { twMerge } from "tailwind-merge";
import { clsx } from "clsx";

// Re-implementing the 'cn' utility function directly for self-containment
function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

// --- Context and Provider ---

interface SidebarContextType {
  expanded: boolean;
  setExpanded: (expanded: boolean) => void;
  onChange: (expanded: boolean) => void;
  activeMenuItem: string | null;
  setActiveMenuItem: (id: string | null) => void;
  updateIndicatorPosition: (id: string | null) => void;
}

const SidebarContext = React.createContext<SidebarContextType | undefined>(
  undefined
);

interface SidebarProviderProps {
  defaultExpanded?: boolean;
  expanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
  children: React.ReactNode;
}

export function SidebarProvider({
  defaultExpanded = true,
  expanded: controlledExpanded,
  onExpandedChange,
  children,
}: SidebarProviderProps) {
  const [expanded, setExpandedState] = React.useState(defaultExpanded);
  const [activeMenuItem, setActiveMenuItem] = React.useState<string | null>(null);

  const isControlled = controlledExpanded !== undefined;
  const actualExpanded = isControlled ? controlledExpanded : expanded;

  const setExpanded = React.useCallback(
    (value: boolean) => {
      if (!isControlled) {
        setExpandedState(value);
      }
      onExpandedChange?.(value);
    },
    [isControlled, onExpandedChange]
  );

  // Collapse by default on mobile viewports (< 1024px) after client-side mount
  React.useEffect(() => {
    if (typeof window !== "undefined" && window.innerWidth < 1024) {
      setExpandedState(false);
    }
  }, []);

  // Sync active menu item from URL on mount
  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const url = new URL(window.location.href);
    const searchParams = url.searchParams;
    const path = url.pathname;

    let potentialMenuItemValue: string | null = null;
    if (searchParams.has("component")) {
      potentialMenuItemValue = searchParams.get("component");
    } else {
      const pathSegments = path.split("/").filter((segment) => segment);
      if (pathSegments.length > 0) {
        potentialMenuItemValue = pathSegments[pathSegments.length - 1];
      }
    }
    setActiveMenuItem(potentialMenuItemValue);
  }, []);

  return (
    <SidebarContext.Provider
      value={{
        expanded: actualExpanded,
        setExpanded,
        onChange: setExpanded,
        activeMenuItem,
        setActiveMenuItem,
        updateIndicatorPosition: () => {},
      }}
    >
      <LayoutGroup id="sidebar-indicator">
        {children}
      </LayoutGroup>
    </SidebarContext.Provider>
  );
}

export function useSidebar() {
  const context = React.useContext(SidebarContext);
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider");
  }
  return context;
}

// --- Main Sidebar Components ---

interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> { }

export function Sidebar({ className, children, ...props }: SidebarProps) {
  const { expanded } = useSidebar();

  return (
    <div
      className={cn(
        "h-full min-h-screen z-40 lg:z-10 w-72 shrink-0 relative",
        "bg-background border-r border-border/40 shadow-sm",
        "fixed lg:sticky top-0",
        expanded ? "left-0" : "md:left-0 -left-full",
        className
      )}
      role="complementary"
      data-collapsed={!expanded}
      {...props}
    >
      {children}
    </div>
  );
}

interface SidebarTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> { }

export function SidebarTrigger({ className, ...props }: SidebarTriggerProps) {
  const { expanded, setExpanded } = useSidebar();

  return (
    <button
      type="button"
      className={cn(
        "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground",
        "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        "fixed md:static z-50 left-4 top-20 bg-background/80 backdrop-blur-sm border border-border shadow-sm",
        className
      )}
      onClick={() => setExpanded(!expanded)}
      aria-label={expanded ? "Close sidebar" : "Open sidebar"}
      {...props}
    >
      {expanded ? (
        <ChevronLeft className="h-4 w-4" />
      ) : (
        <ChevronRight className="h-4 w-4" />
      )}
    </button>
  );
}

interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> { }

export function SidebarHeader({
  className,
  children,
  ...props
}: SidebarHeaderProps) {
  const { expanded } = useSidebar();

  return (
    <div
      className={cn(
        "flex h-16 items-center border-b border-border/40 px-6",
        expanded ? "justify-between" : "justify-center",
        className
      )}
      {...props}
    >
      <AnimatePresence>
        {expanded && (
          <motion.div
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -10 }}
            transition={{ duration: 0.2 }}
            className="flex-1"
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> { }

const SCROLL_STORAGE_KEY = "sidebarScrollTop";

export function SidebarContent({
  className,
  children,
  ...props
}: SidebarContentProps) {
  const scrollRef = React.useRef<HTMLDivElement>(null);

  // Load/Save scroll position remains similar but cleaner
  React.useEffect(() => {
    const scrollElement = scrollRef.current;
    if (scrollElement) {
      const savedScrollTop = localStorage.getItem(SCROLL_STORAGE_KEY);
      if (savedScrollTop) scrollElement.scrollTop = parseInt(savedScrollTop, 10);

      const handleScroll = () => {
        localStorage.setItem(SCROLL_STORAGE_KEY, scrollElement.scrollTop.toString());
      };

      scrollElement.addEventListener("scroll", handleScroll, { passive: true });
      return () => scrollElement.removeEventListener("scroll", handleScroll);
    }
  }, []);

  return (
    <div
      className={cn(
        "flex-1 overflow-hidden h-full flex flex-col",
        className
      )}
      {...props}
    >
      <div
        ref={scrollRef}
        className="flex-1 overflow-y-auto overflow-x-hidden [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden py-4 px-3"
      >
        {children}
      </div>
    </div>
  );
}

// --- Grouping Components ---

export function SidebarGroup({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("mb-6 last:mb-0", className)} {...props}>
      {children}
    </div>
  );
}

export function SidebarGroupLabel({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "mb-2 px-3 text-[11px] font-bold uppercase tracking-widest text-foreground",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export function SidebarGroupContent({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("space-y-0.5", className)} {...props}>
      {children}
    </div>
  );
}

// --- Menu Item Components (using LayoutID for Indicator) ---

export function SidebarMenu({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("relative flex flex-col", className)} {...props}>
      {children}
    </div>
  );
}

export function SidebarMenuItem({
  className,
  children,
  value,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { value?: string }) {
  return (
    <div
      className={cn("group relative w-full", className)}
      data-value={value}
      {...props}
    >
      {children}
    </div>
  );
}

interface SidebarMenuButtonProps extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean;
  value?: string;
  isActive?: boolean;
}

export const SidebarMenuButton = React.forwardRef<HTMLDivElement, SidebarMenuButtonProps>(
  (
    {
      className,
      children,
      asChild = false,
      value,
      isActive: propIsActive,
      ...props
    },
    ref
  ) => {
    const { expanded, activeMenuItem, setActiveMenuItem } = useSidebar();
    const isActive = propIsActive ?? (activeMenuItem === value);

    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
      if (value) setActiveMenuItem(value);
      if (props.onClick) props.onClick(e);
    };

    const content = (
      <div
        ref={ref}
        className={cn(
          "relative flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm outline-none cursor-pointer",
          "hover:bg-secondary/50 active:scale-[0.98]",
          isActive
            ? "text-primarylw font-bold"
            : "text-muted-foreground hover:text-foreground",
          !expanded && "justify-center px-0 py-3",
          className
        )}
        onClick={handleClick}
        {...props}
      >
        {/* Premium Sliding Indicator using Framer Motion */}
        {isActive && (
          <motion.div
            layoutId="active-indicator"
            className="absolute inset-0 rounded-lg bg-[color-mix(in_srgb,var(--primarylw)_8%,transparent)] dark:bg-[color-mix(in_srgb,var(--primarylw)_12%,transparent)] border border-[color-mix(in_srgb,var(--primarylw)_25%,transparent)] z-0"
            initial={false}
            transition={{
              type: "spring",
              stiffness: 400,
              damping: 35
            }}
          />
        )}

        <span className={cn("relative z-10 flex items-center", expanded ? "w-full gap-3" : "justify-center")}>
          {children}
        </span>
      </div>
    );

    if (asChild) {
      const child = React.Children.only(children) as React.ReactElement;
      const childProps = child.props as any;
      return React.cloneElement(child, {
        ref,
        ...props,
        className: cn(
          "relative flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm outline-none group cursor-pointer",
          "hover:bg-secondary/50 active:scale-[0.98]",
          isActive
            ? "text-primarylw font-bold"
            : "text-muted-foreground hover:text-foreground",
          !expanded && "justify-center px-0 py-3",
          className,
          childProps.className
        ),
        onClick: (e: React.MouseEvent<any>) => {
          if (value) setActiveMenuItem(value);
          if (childProps.onClick) childProps.onClick(e);
          if (props.onClick) props.onClick(e);
        },
        children: (
          <>
            {isActive && (
              <motion.div
                layoutId="active-indicator"
                className="absolute inset-0 rounded-lg bg-[color-mix(in_srgb,var(--primarylw)_8%,transparent)] dark:bg-[color-mix(in_srgb,var(--primarylw)_12%,transparent)] border border-[color-mix(in_srgb,var(--primarylw)_25%,transparent)] z-0"
                initial={false}
                transition={{
                  type: "spring",
                  stiffness: 400,
                  damping: 35
                }}
              />
            )}
            <span className={cn("relative z-10 flex items-center", expanded ? "w-full gap-3" : "justify-center")}>
              {childProps.children}
            </span>
          </>
        )
      } as any);
    }

    return content;
  }
);
SidebarMenuButton.displayName = "SidebarMenuButton";

export function SidebarFooter({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  const { expanded } = useSidebar();

  return (
    <div
      className={cn(
        "mt-auto border-t border-border/40 p-4",
        expanded ? "flex-row items-center justify-between" : "flex-col justify-center",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export { Sidebar as SidebarRoot };
```
--------------------------------------------------

## CATEGORY (FREE): Miscellaneous & Utilities

### COMPONENT: ai-code-block
Description: An agent-written AI code block streaming line-by-line with syntax highlighting, tokenization, copy feedback, replay controls, and multiple theme variants.
URL: https://lightswind.com/components/ai-code-block
Import: import { AiCodeBlock } from "@/components/lightswind/ai-code-block";
Registry URL: https://lightswind.com/r/ai-code-block.json
Install Command: npx lightswind@latest add ai-code-block

Usage:
```tsx
<AiCodeBlock
  filename="churn.ts"
  language="TypeScript"
  code={`export async function churnBatch() {
  const flavor = await getFlavor("pistachio");
  return base.gallons;
}`}
  isStreaming={true}
/>
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { motion, type HTMLMotionProps } from "framer-motion";
import { Check, Copy, RotateCcw, FileCode, Terminal } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { Button } from "@/components/lightswind/button";
import { Badge } from "@/components/lightswind/badge";
import { getOneDarkTokenStyle, TokenThemeColors } from "@/components/utils/oneDarkTheme";

export interface CodeToken {
  text: string;
  type?: keyof TokenThemeColors;
}

export type TypingAnimationMode =
  | "lineByLine"
  | "charByChar"
  | "typewriter"
  | "fade"
  | "slideIn";

export interface AiCodeBlockProps {
  /** Code string to display and stream */
  code?: string;
  /** Custom pre-tokenized lines if raw parsing is bypassed */
  tokenizedLines?: CodeToken[][];
  /** Filename shown in header */
  filename?: string;
  /** Programming language badge */
  language?: string;
  /** AI agent name badge */
  aiAgentName?: string;
  /** Icon for AI status badge */
  aiIcon?: React.ReactNode;
  /** Typing / streaming animation mode */
  typingAnimation?: TypingAnimationMode;
  /** Whether to stream the code line-by-line automatically */
  isStreaming?: boolean;
  /** Auto start streaming on mount */
  autoPlay?: boolean;
  /** Speed of line/character streaming in ms */
  streamSpeedMs?: number;
  /** Show line numbers column */
  showLineNumbers?: boolean;
  /** Show copy button in header */
  showCopyButton?: boolean;
  /** Show replay animation button in header */
  showReplayButton?: boolean;
  /** Show language badge */
  showLanguageBadge?: boolean;
  /** Show AI status indicator badge */
  showAiStatus?: boolean;
  /** Visual variant */
  variant?: "default" | "glass" | "minimal" | "dark";
  /** Array of line numbers (1-indexed) to highlight */
  highlightLines?: number[];
  /** Max height before scrollable/collapsible (e.g. 400 or 'none') */
  maxHeight?: number | "none";
  /** Additional CSS class names for container */
  className?: string;
  /** Callback when copy button is clicked */
  onCopy?: () => void;
  /** Callback when streaming animation completes */
  onComplete?: () => void;
}

// ── Built-in OneDark Tokenizer Engine ───────────────────────────────────────
const parseCodeToTokens = (codeStr: string): CodeToken[][] => {
  const lines = codeStr.split("\n");
  const keywords = new Set([
    "export", "async", "function", "const", "let", "var", "await", "return",
    "import", "from", "default", "if", "else", "for", "while", "try", "catch",
    "class", "extends", "interface", "type", "public", "private", "protected",
    "def", "self", "None", "True", "False", "in", "is", "not", "and", "or",
    "select", "where", "group", "by", "order", "having", "as", "join", "left",
    "fn", "pub", "struct", "enum", "impl", "mut", "use", "mod", "match"
  ]);

  return lines.map((line) => {
    if (!line.trim()) {
      return [{ text: "", type: "dim" }];
    }

    const tokens: CodeToken[] = [];
    const regex = /(".*?"|'.*?'|`.*?`|\/\/. *?$|#.*?$|\b\d+\b|\b[a-zA-Z_]\w*(?=\()|\b[a-zA-Z_]\w*\b|[{}()\[\];,.:]|[^a-zA-Z0-9\s{}()\[\];,.:]+|\s+)/g;

    let match: RegExpExecArray | null;
    while ((match = regex.exec(line)) !== null) {
      const text = match[0];
      if (!text) continue;

      if (text.startsWith("//") || text.startsWith("#")) {
        tokens.push({ text, type: "comment" });
      } else if (text.startsWith('"') || text.startsWith("'") || text.startsWith("`")) {
        tokens.push({ text, type: "str" });
      } else if (/^\d+$/.test(text)) {
        tokens.push({ text, type: "num" });
      } else if (keywords.has(text.toLowerCase())) {
        tokens.push({ text, type: "kw" });
      } else if (/^[A-Z][a-zA-Z0-9_]*$/.test(text)) {
        tokens.push({ text, type: "type" });
      } else if (line.substring(match.index + text.length).trim().startsWith("(")) {
        tokens.push({ text, type: "fn" });
      } else if (/[{}()\[\];,.:]/.test(text)) {
        tokens.push({ text, type: "dim" });
      } else {
        tokens.push({ text, type: "var" });
      }
    }

    return tokens.length > 0 ? tokens : [{ text: line, type: "var" }];
  });
};

const DEFAULT_SAMPLE_CODE = `import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function generateUiComponent(prompt: string) {
  const { textStream } = await streamText({
    model: openai("gpt-4o"),
    system: "You are an expert React UI engineer building Lightswind components.",
    prompt,
  });
  return textStream;
}`;

export const AiCodeBlock: React.FC<AiCodeBlockProps> = ({
  code = DEFAULT_SAMPLE_CODE,
  tokenizedLines,
  filename = "generateComponent.ts",
  language = "TypeScript",
  aiAgentName = "Lightswind AI",
  aiIcon = <Terminal className="h-3 w-3 text-primarylw" />,
  typingAnimation = "lineByLine",
  isStreaming = true,
  autoPlay = true,
  streamSpeedMs = 200,
  showLineNumbers = true,
  showCopyButton = true,
  showReplayButton = true,
  showLanguageBadge = true,
  showAiStatus = true,
  variant = "default",
  highlightLines = [],
  maxHeight = "none",
  className,
  onCopy,
  onComplete,
}) => {
  // Parsed tokenized lines
  const parsedLines = useMemo(() => {
    if (tokenizedLines && tokenizedLines.length > 0) {
      return tokenizedLines;
    }
    return parseCodeToTokens(code);
  }, [code, tokenizedLines]);

  // Total character count across all lines
  const totalCharCount = useMemo(() => {
    return parsedLines.reduce(
      (acc, line) => acc + line.reduce((lAcc, tok) => lAcc + tok.text.length, 0) + 1,
      0
    );
  }, [parsedLines]);

  const isCharMode = typingAnimation === "charByChar" || typingAnimation === "typewriter";

  // Line-based visible state
  const [visibleCount, setVisibleCount] = useState<number>(
    isStreaming && autoPlay ? 0 : parsedLines.length
  );

  // Character-based visible state
  const [visibleCharCount, setVisibleCharCount] = useState<number>(
    isStreaming && autoPlay ? 0 : totalCharCount
  );

  const [copied, setCopied] = useState<boolean>(false);
  const [isExpanded, setIsExpanded] = useState<boolean>(true);

  const isDone = isCharMode
    ? visibleCharCount >= totalCharCount
    : visibleCount >= parsedLines.length;

  // Timer for line-by-line or char-by-char streaming
  useEffect(() => {
    if (!isStreaming || !autoPlay) {
      setVisibleCount(parsedLines.length);
      setVisibleCharCount(totalCharCount);
      return;
    }

    if (isCharMode) {
      if (visibleCharCount >= totalCharCount) {
        if (onComplete) onComplete();
        return;
      }

      const charSpeed = Math.max(12, Math.floor(streamSpeedMs / 14));
      const timer = setTimeout(() => {
        setVisibleCharCount((prev) => prev + 1);
      }, charSpeed);

      return () => clearTimeout(timer);
    } else {
      if (visibleCount >= parsedLines.length) {
        if (onComplete) onComplete();
        return;
      }

      const timer = setTimeout(() => {
        setVisibleCount((prev) => prev + 1);
      }, streamSpeedMs);

      return () => clearTimeout(timer);
    }
  }, [
    isStreaming,
    autoPlay,
    isCharMode,
    visibleCount,
    visibleCharCount,
    parsedLines.length,
    totalCharCount,
    streamSpeedMs,
    onComplete,
  ]);

  // Replay handler
  const handleReplay = useCallback(() => {
    setVisibleCount(0);
    setVisibleCharCount(0);
  }, []);

  // Copy handler
  const handleCopy = useCallback(() => {
    const rawText = tokenizedLines
      ? tokenizedLines.map((line) => line.map((t) => t.text).join("")).join("\n")
      : code;

    navigator.clipboard.writeText(rawText).then(() => {
      setCopied(true);
      if (onCopy) onCopy();
      setTimeout(() => setCopied(false), 2000);
    });
  }, [code, tokenizedLines, onCopy]);

  // Derived displayed lines for rendering
  const displayedLines = useMemo(() => {
    if (!isStreaming || !autoPlay) {
      return parsedLines;
    }

    if (isCharMode) {
      let budget = visibleCharCount;
      const result: CodeToken[][] = [];

      for (let i = 0; i < parsedLines.length; i++) {
        if (budget <= 0) break;
        const line = parsedLines[i];
        const slicedLine: CodeToken[] = [];

        for (const tok of line) {
          if (budget <= 0) break;

          if (tok.text.length <= budget) {
            slicedLine.push(tok);
            budget -= tok.text.length;
          } else {
            slicedLine.push({ text: tok.text.slice(0, budget), type: tok.type });
            budget = 0;
            break;
          }
        }
        budget -= 1; // count line break
        result.push(slicedLine);
      }
      return result;
    }

    return parsedLines.slice(0, visibleCount);
  }, [parsedLines, isStreaming, autoPlay, isCharMode, visibleCharCount, visibleCount]);

  // Variant container styles
  const containerVariants = {
    default:
      "bg-zinc-50/90 dark:bg-zinc-950/90 border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm",
    glass:
      "bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl border-zinc-200/50 dark:border-zinc-800/50 text-zinc-900 dark:text-zinc-100 shadow-lg shadow-black/5 dark:shadow-black/20",
    minimal:
      "bg-transparent border-zinc-200/60 dark:border-zinc-800/60 text-zinc-900 dark:text-zinc-100",
    dark:
      "bg-zinc-950 border-zinc-800/90 text-zinc-100 shadow-md",
  };

  const headerVariants = {
    default: "border-b border-zinc-200/80 dark:border-zinc-800/80 bg-zinc-100/60 dark:bg-zinc-900/60",
    glass: "border-b border-zinc-200/40 dark:border-zinc-800/40 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-md",
    minimal: "border-b border-zinc-200/60 dark:border-zinc-800/60 bg-transparent",
    dark: "border-b border-zinc-800/80 bg-zinc-900/70",
  };

  // Motion config for typingAnimation modes
  const getMotionProps = (mode: TypingAnimationMode): HTMLMotionProps<"div"> => {
    switch (mode) {
      case "charByChar":
        return {
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          transition: { duration: 0.05 },
        };
      case "typewriter":
        return {
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          transition: { duration: 0.03 },
        };
      case "fade":
        return {
          initial: { opacity: 0, filter: "blur(4px)" },
          animate: { opacity: 1, filter: "blur(0px)" },
          transition: { duration: 0.35, ease: [0.16, 1, 0.3, 1] as const },
        };
      case "slideIn":
        return {
          initial: { opacity: 0, x: -16 },
          animate: { opacity: 1, x: 0 },
          transition: { duration: 0.22, ease: [0.16, 1, 0.3, 1] as const },
        };
      case "lineByLine":
      default:
        return {
          initial: { opacity: 0, y: 4 },
          animate: { opacity: 1, y: 0 },
          transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] as const },
        };
    }
  };

  // Cursor style based on typingAnimation mode
  const renderCursor = (mode: TypingAnimationMode) => {
    switch (mode) {
      case "typewriter":
        return <span className="ml-0.5 inline-block h-4 w-2.5 bg-primarylw animate-pulse select-none font-bold">█</span>;
      case "charByChar":
        return (
          <span className="ml-0.5 inline-block h-3.5 w-1.5 rounded-full bg-primarylw animate-pulse shadow-[0_0_10px_rgba(59,130,246,0.9)]" />
        );
      case "fade":
        return <span className="ml-1 inline-block h-3.5 w-2 rounded bg-primarylw/80 animate-pulse" />;
      case "slideIn":
        return <span className="ml-1 inline-block h-3.5 w-0.5 bg-primarylw animate-pulse" />;
      case "lineByLine":
      default:
        return <span className="ml-1 inline-block h-3.5 w-[3px] translate-y-0.5 rounded-full bg-primarylw animate-pulse" />;
    }
  };

  return (
    <div
      className={cn(
        "relative w-full rounded-2xl border overflow-hidden transition-all duration-300 font-sans",
        containerVariants[variant],
        className
      )}
    >
      {/* Header Bar */}
      <div
        className={cn(
          "flex items-center justify-between px-4 py-3 select-none",
          headerVariants[variant]
        )}
      >
        {/* Left: Filename & Lightswind Badge */}
        <div className="flex items-center gap-2.5 min-w-0">
          <FileCode className="h-4 w-4 shrink-0 text-muted-foreground" />
          <span className="font-mono text-xs font-semibold tracking-tight text-foreground truncate">
            {filename}
          </span>
          {showLanguageBadge && (
            <Badge
              variant="secondary"
              shape="rounded"
              size="sm"
              className="font-mono font-medium text-[11px] bg-zinc-200/60 dark:bg-zinc-800/60 text-muted-foreground border-zinc-300/40 dark:border-zinc-700/40"
            >
              {language}
            </Badge>
          )}
        </div>

        {/* Right: Lightswind AI Status Badge & Control Buttons */}
        <div className="flex items-center gap-2 shrink-0">
          {showAiStatus && (
            <Badge
              variant="outline"
              shape="rounded"
              size="sm"
              className="gap-1.5 py-1 px-2.5 font-medium bg-zinc-200/50 dark:bg-zinc-800/50 text-foreground border-zinc-300/30 dark:border-zinc-700/30"
            >
              {aiIcon}
              <span className="hidden xs:inline text-[11px] text-muted-foreground font-mono">
                {!isDone ? "Writing code..." : aiAgentName}
              </span>
            </Badge>
          )}

          {showReplayButton && (
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 rounded-lg text-muted-foreground hover:text-foreground hover:bg-zinc-200/60 dark:hover:bg-zinc-800/60 transition-colors"
              onClick={handleReplay}
              title="Replay streaming animation"
            >
              <RotateCcw className="h-3.5 w-3.5" />
            </Button>
          )}

          {showCopyButton && (
            <Button
              variant={copied ? "secondary" : "ghost"}
              size="sm"
              className={cn(
                "h-7 px-2.5 rounded-lg text-xs font-medium gap-1.5 transition-all duration-200",
                copied
                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20"
                  : "text-muted-foreground hover:text-foreground hover:bg-zinc-200/60 dark:hover:bg-zinc-800/60"
              )}
              onClick={handleCopy}
            >
              {copied ? (
                <>
                  <Check className="h-3.5 w-3.5 text-emerald-500" />
                  <span className="text-[11px] font-semibold">Copied</span>
                </>
              ) : (
                <>
                  <Copy className="h-3.5 w-3.5" />
                  <span className="text-[11px] font-medium">Copy</span>
                </>
              )}
            </Button>
          )}
        </div>
      </div>

      {/* Code Body Container using OneDark Utility Tokens */}
      <div
        className={cn(
          "relative overflow-x-auto transition-all duration-300 font-mono text-xs sm:text-sm leading-relaxed p-4",
          maxHeight !== "none" && !isExpanded && "max-h-48 overflow-hidden"
        )}
        style={
          maxHeight !== "none" && isExpanded
            ? { maxHeight: `${maxHeight}px`, overflowY: "auto" }
            : {}
        }
      >
        {displayedLines.map((lineTokens, i) => {
          const lineNumber = i + 1;
          const isHighlighted = highlightLines.includes(lineNumber);
          const isCurrentLine = i === displayedLines.length - 1 && !isDone;
          const motionConfig = getMotionProps(typingAnimation);

          return (
            <motion.div
              key={i}
              {...motionConfig}
              className={cn(
                "group flex items-baseline rounded-md px-1.5 py-0.5 transition-colors",
                isHighlighted && "bg-amber-500/10 dark:bg-amber-500/15 border-l-2 border-amber-500 font-medium",
                "hover:bg-zinc-200/40 dark:hover:bg-zinc-800/40"
              )}
            >
              {/* Line Number */}
              {showLineNumbers && (
                <span className="w-7 shrink-0 text-right text-[11px] text-zinc-400 dark:text-zinc-600 select-none pr-3 font-mono">
                  {lineNumber}
                </span>
              )}

              {/* Code Tokens styled with OneDark utility */}
              <span className="pl-1 whitespace-pre flex-1 tracking-normal">
                {lineTokens.map((tok, j) => (
                  <span key={j} style={getOneDarkTokenStyle(tok.type)}>
                    {tok.text}
                  </span>
                ))}

                {/* Animated Typing Cursor */}
                {isCurrentLine && renderCursor(typingAnimation)}
              </span>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
};

export default AiCodeBlock;

```
--------------------------------------------------

### COMPONENT: ai-loading-state
Description: An AI loading state indicator featuring pixel-grid pattern wavefronts, shimmering status labels, mono tabular live timers, and multi-step progress tracking.
URL: https://lightswind.com/components/ai-loading-state
Import: import { AiLoadingState } from "@/components/lightswind/ai-loading-state";
Registry URL: https://lightswind.com/r/ai-loading-state.json
Install Command: npx lightswind@latest add ai-loading-state

Usage:
```tsx
<AiLoadingState
  label="Churning batch"
  variant="Drive"
  showTimer={true}
  showBadge={true}
/>
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Loader2, Cpu, Atom } from "lucide-react";
import { cn } from "@/components/lib/utils";

export type AiLoadingVariant =
  | "PulseBeam"
  | "GooeyPulse"
  | "QuantumWave"
  | "CyberCore"
  | "GlowingRings"
  | "DotPulse"
  | "MatrixSpinner";

export interface AiLoadingStateProps {
  /** Primary status label text */
  label?: string;
  /** Active loader animation pattern variant */
  variant?: AiLoadingVariant;
  /** Size variant */
  size?: "sm" | "md" | "lg";
  /** Visual theme variant */
  theme?: "default" | "glass" | "minimal" | "dark";
  /** Show live elapsed timer in mono figures */
  showTimer?: boolean;
  /** Custom container class names */
  className?: string;
}

// Custom hook for live tabular elapsed timer
function useElapsed(enabled: boolean = true) {
  const [ds, setDs] = useState(0);

  useEffect(() => {
    if (!enabled) return;
    const t = setInterval(() => setDs((d) => d + 1), 100);
    return () => clearInterval(t);
  }, [enabled]);

  const total = ds / 10;
  if (total < 60) return `${total.toFixed(1)}s`;
  return `${Math.floor(total / 60)}m ${(total % 60).toFixed(1)}s`;
}

export const AiLoadingState: React.FC<AiLoadingStateProps> = ({
  label = "Thinking...",
  variant = "PulseBeam",
  size = "md",
  theme = "default",
  showTimer = true,
  className,
}) => {
  const elapsed = useElapsed(showTimer);

  // Size styles
  const sizeClasses = {
    sm: "px-3 py-1.5 text-xs gap-2.5 rounded-xl",
    md: "px-4 py-2.5 text-xs sm:text-sm gap-3 rounded-2xl",
    lg: "px-5 py-3.5 text-sm sm:text-base gap-4 rounded-3xl",
  };

  // Theme container styles ensuring perfect contrast in all light/dark contexts
  const themeClasses = {
    default:
      "bg-zinc-100/90 dark:bg-zinc-900/90 border border-zinc-200/80 dark:border-zinc-800/80 text-zinc-900 dark:text-zinc-100 shadow-xs",
    glass:
      "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border border-zinc-200/60 dark:border-zinc-800/60 text-zinc-900 dark:text-zinc-100 shadow-md",
    minimal:
      "bg-transparent border border-zinc-200/60 dark:border-zinc-800/60 text-zinc-900 dark:text-zinc-100",
    dark: "bg-zinc-950 border border-zinc-800 text-zinc-100 shadow-md",
  };

  // ── Render Monochromatic Modern AI Loader Variants ──────────────────────
  const renderLoaderPattern = () => {
    switch (variant) {
      case "PulseBeam":
        return (
          <div className="relative flex items-center justify-center shrink-0 h-5 w-5">
            <motion.div
              className="absolute inset-0 rounded-full border border-current opacity-30 border-t-current opacity-100"
              animate={{ rotate: 360 }}
              transition={{ duration: 0.9, repeat: Infinity, ease: "linear" }}
            />
            <motion.span
              className="w-1.5 h-1.5 rounded-full bg-current"
              animate={{ scale: [0.8, 1.3, 0.8], opacity: [0.4, 1, 0.4] }}
              transition={{ duration: 0.8, repeat: Infinity, ease: "easeInOut" }}
            />
          </div>
        );

      case "GooeyPulse":
        return (
          <div className="flex items-center gap-1.5 shrink-0">
            {[0, 0.2, 0.4].map((delay, idx) => (
              <motion.span
                key={idx}
                className="h-2 w-2 rounded-full bg-current"
                animate={{ scale: [0.75, 1.25, 0.75], opacity: [0.35, 1, 0.35] }}
                transition={{ duration: 0.8, repeat: Infinity, delay }}
              />
            ))}
          </div>
        );

      case "QuantumWave":
        return (
          <div className="flex items-center gap-1 h-4 shrink-0">
            {[0.1, 0.3, 0.5, 0.2, 0.4].map((delay, idx) => (
              <motion.span
                key={idx}
                className="w-1 rounded-full bg-current"
                animate={{ height: ["4px", "16px", "4px"] }}
                transition={{ duration: 0.6, repeat: Infinity, delay }}
              />
            ))}
          </div>
        );

      case "CyberCore":
        return (
          <div className="relative flex items-center justify-center shrink-0 h-5 w-5">
            <motion.div
              className="absolute inset-0 rounded-md border border-current opacity-40"
              animate={{ rotate: 180, scale: [1, 1.1, 1] }}
              transition={{ duration: 1.4, repeat: Infinity, ease: "easeInOut" }}
            />
            <Cpu className="h-3 w-3 text-current" />
          </div>
        );

      case "GlowingRings":
        return (
          <div className="relative flex items-center justify-center shrink-0 h-5 w-5">
            <motion.div
              className="absolute inset-0 rounded-full border-2 border-transparent border-t-current border-b-current opacity-40"
              animate={{ rotate: 360 }}
              transition={{ duration: 0.85, repeat: Infinity, ease: "linear" }}
            />
            <Atom className="h-3 w-3 text-current" />
          </div>
        );

      case "DotPulse":
        return (
          <div className="flex items-center gap-1 shrink-0">
            {[0, 0.15, 0.3].map((delay, idx) => (
              <motion.span
                key={idx}
                className="h-2 w-2 rounded-full bg-current"
                animate={{ y: ["0px", "-5px", "0px"] }}
                transition={{ duration: 0.6, repeat: Infinity, delay }}
              />
            ))}
          </div>
        );

      case "MatrixSpinner":
      default:
        return (
          <div className="relative flex items-center justify-center shrink-0 h-5 w-5">
            <Loader2 className="h-4 w-4 shrink-0 animate-spin text-current" />
          </div>
        );
    }
  };

  return (
    <div
      className={cn(
        "inline-flex items-center select-none transition-all duration-300 font-sans w-fit",
        sizeClasses[size],
        themeClasses[theme],
        className
      )}
    >
      {/* Loader Pattern */}
      {renderLoaderPattern()}

      {/* Status Text Label */}
      {label && (
        <span className="font-semibold text-current tracking-tight leading-none">
          {label}
        </span>
      )}

      {/* Live Mono Tabular Timer */}
      {showTimer && (
        <span className="font-mono text-[11px] text-muted-foreground tabular-nums ml-1 font-medium">
          {elapsed}
        </span>
      )}
    </div>
  );
};

export default AiLoadingState;

```
--------------------------------------------------

### COMPONENT: ai-prompt
Description: A utility component.
URL: https://lightswind.com/components/ai-prompt
Registry URL: https://lightswind.com/r/ai-prompt.json
Install Command: npx lightswind@latest add ai-prompt

Source Code:
```tsx
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Globe, Paperclip, Plus, Send } from "lucide-react";

import { cn } from "@/components/lib/utils";
import { Textarea } from "./textarea";

interface UseAutoResizeTextareaProps {
  minHeight: number;
  maxHeight?: number;
}

function useAutoResizeTextarea({
  minHeight,
  maxHeight,
}: UseAutoResizeTextareaProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const adjustHeight = useCallback(
    (reset?: boolean) => {
      const textarea = textareaRef.current;
      if (!textarea) return;

      if (reset) {
        textarea.style.height = `${minHeight}px`;
        return;
      }

      textarea.style.height = `${minHeight}px`;
      const newHeight = Math.max(
        minHeight,
        Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
      );

      textarea.style.height = `${newHeight}px`;
    },
    [minHeight, maxHeight]
  );

  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = `${minHeight}px`;
    }
  }, [minHeight]);

  useEffect(() => {
    const handleResize = () => adjustHeight();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [adjustHeight]);

  return { textareaRef, adjustHeight };
}

const MIN_HEIGHT = 48;
const MAX_HEIGHT = 164;

const AnimatedPlaceholder = ({ showSearch }: { showSearch: boolean }) => (
  <AnimatePresence>
    <motion.p
      key={showSearch ? "search" : "ask"}
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -5 }}
      transition={{ duration: 0.1 }}
      className="pointer-events-none w-[1500px] text-sm absolute 
      text-black/70 dark:text-white/70"
    >
      {showSearch ? "Search the web..." : "Ask Skiper Ai..."}
    </motion.p>
  </AnimatePresence>
);

export function AiInput() {
  const [value, setValue] = useState("");
  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
    minHeight: MIN_HEIGHT,
    maxHeight: MAX_HEIGHT,
  });
  const [showSearch, setShowSearch] = useState(true);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handelClose = (e: any) => {
    e.preventDefault();
    e.stopPropagation();
    if (fileInputRef.current) {
      fileInputRef.current.value = ""; // Reset file input
    }
    setImagePreview(null); // Use null instead of empty string
  };

  const handelChange = (e: any) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      setImagePreview(URL.createObjectURL(file));
    }
  };

  const handleSubmit = () => {
    setValue("");
    adjustHeight(true);
  };

  useEffect(() => {
    return () => {
      if (imagePreview) {
        URL.revokeObjectURL(imagePreview);
      }
    };
  }, [imagePreview]);
  return (
    <div className="mx-auto lg:min-w-[400px] w-full py-4">
      <div className="relative max-w-xl border rounded-[22px] border-black/5 p-1 w-full mx-auto">
        <div className="relative rounded-2xl border border-black/5 bg-neutral-800/5 flex flex-col">
          <div style={{ maxHeight: `${MAX_HEIGHT}px` }}>
            <div className="relative">
              <Textarea
                id="ai-input-04"
                value={value}
                placeholder=""
                className="w-full rounded-2xl rounded-b-none px-4 py-3 bg-black/5 dark:bg-white/5 border-none dark:text-white resize-none focus-visible:ring-0 leading-[1.2]"
                ref={textareaRef}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    handleSubmit();
                  }
                }}
                onChange={(e) => {
                  setValue(e.target.value);
                  adjustHeight();
                }}
              />
              {!value && (
                <div className="absolute left-4 top-3">
                  <AnimatedPlaceholder showSearch={showSearch} />
                </div>
              )}
            </div>
          </div>

          <div className="h-12 bg-black/5 dark:bg-white/5 rounded-b-xl">
            <div className="absolute left-3 bottom-3 flex items-center gap-2">
              <label
                className={cn(
                  "cursor-pointer relative rounded-full p-2 bg-black/5 dark:bg-white/5",
                  imagePreview
                    ? "bg-[#ff3f17]/15 border border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handelChange}
                  className="hidden"
                />
                <Paperclip
                  className={cn(
                    "w-4 h-4 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white transition-colors",
                    imagePreview && "text-[#ff3f17]"
                  )}
                />
                {imagePreview && (
                  <div className="absolute w-[100px] h-[100px] top-14 -left-4">
                    <img
                      className="object-cover rounded-2xl"
                      src={imagePreview || "/picture1.jpeg"}
                      height={500}
                      width={500}
                      alt="additional image"
                    />
                    <button
                      onClick={handelClose}
                      className="bg-[#e8e8e8] text-[#464646] absolute -top-1 -left-1 shadow-3xl rounded-full rotate-45"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </label>
              <button
                type="button"
                onClick={() => {
                  setShowSearch(!showSearch);
                }}
                className={cn(
                  "rounded-full transition-all flex items-center gap-2 px-1.5 py-1 border h-8",
                  showSearch
                    ? "bg-[#ff3f17]/15 border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 border-transparent text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <div className="w-4 h-4 flex items-center justify-center flex-shrink-0">
                  <motion.div
                    animate={{
                      rotate: showSearch ? 180 : 0,
                      scale: showSearch ? 1.1 : 1,
                    }}
                    whileHover={{
                      rotate: showSearch ? 180 : 15,
                      scale: 1.1,
                      transition: {
                        type: "spring",
                        stiffness: 300,
                        damping: 10,
                      },
                    }}
                    transition={{
                      type: "spring",
                      stiffness: 260,
                      damping: 25,
                    }}
                  >
                    <Globe
                      className={cn(
                        "w-4 h-4",
                        showSearch ? "text-[#ff3f17]" : "text-inherit"
                      )}
                    />
                  </motion.div>
                </div>
                <AnimatePresence>
                  {showSearch && (
                    <motion.span
                      initial={{ width: 0, opacity: 0 }}
                      animate={{
                        width: "auto",
                        opacity: 1,
                      }}
                      exit={{ width: 0, opacity: 0 }}
                      transition={{ duration: 0.2 }}
                      className="text-sm overflow-hidden whitespace-nowrap text-[#ff3f17] flex-shrink-0"
                    >
                      Search
                    </motion.span>
                  )}
                </AnimatePresence>
              </button>
            </div>
            <div className="absolute right-3 bottom-3">
              <button
                type="button"
                onClick={handleSubmit}
                className={cn(
                  "rounded-full p-2 transition-colors",
                  value
                    ? "bg-[#ff3f17]/15 text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <Send className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

```
--------------------------------------------------

### COMPONENT: ai-prompt-bar
Description: An advanced, interactive AI composer bar with model selector, @ sources menu, / slash commands, file attachment chips, mic dictation toggle, and rainbow sweep animations. Built for modern LLM chat applications and AI agent workflows.
URL: https://lightswind.com/components/ai-prompt-bar
Import: import { AiPromptBar } from "@/components/lightswind/ai-prompt-bar"
Registry URL: https://lightswind.com/r/ai-prompt-bar.json
Install Command: npx lightswind@latest add ai-prompt-bar

Usage:
```tsx
import { AiPromptBar } from "@/components/lightswind/ai-prompt-bar";

export function Demo() {
  const handleSend = (payload: { text: string; model: any; attachments: string[] }) => {
    console.log("Sending AI prompt:", payload);
  };

  return (
    <div className="p-6">
      <AiPromptBar onSend={handleSend} />
    </div>
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Paperclip, AudioLines, ArrowUp, ChevronDown, Globe, Database, X, FileText, Command as CommandIcon, Code, Mail, FileSpreadsheet, Sparkles, Zap, Cpu, Brain } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { Button } from "@/components/lightswind/button";

export interface AiModel {
  id: string;
  name: string;
  tag?: string;
  icon?: React.ReactNode;
}

export interface AiSource {
  id: string;
  name: string;
  desc: string;
  icon: React.ReactNode;
  brand?: "figma" | "slack" | "gmail" | "github" | "notion" | "drive";
  connected?: boolean;
  attach?: boolean;
}

export interface AiCommand {
  id: string;
  name: string;
  desc: string;
  icon?: React.ReactNode;
}

export interface AiPromptBarProps {
  placeholder?: string;
  variant?: "rounded" | "pill" | "glass" | "minimal";
  models?: AiModel[];
  defaultModelId?: string;
  sources?: AiSource[];
  commands?: AiCommand[];
  onSend?: (payload: { text: string; model: AiModel; attachments: string[] }) => void;
  className?: string;
  disabled?: boolean;
}

/* Crisp Brand SVG Icons */
const BRAND_ICONS = {
  figma: (
    <svg width="14" height="14" viewBox="0 0 38 57" fill="none" aria-hidden="true">
      <path d="M9.5 57A9.5 9.5 0 0 0 19 47.5V38H9.5a9.5 9.5 0 0 0 0 19z" fill="#0ACF83" />
      <path d="M0 28.5A9.5 9.5 0 0 1 9.5 19H19v19H9.5A9.5 9.5 0 0 1 0 28.5z" fill="#A259FF" />
      <path d="M0 9.5A9.5 9.5 0 0 1 9.5 0H19v19H9.5A9.5 9.5 0 0 1 0 9.5z" fill="#F24E1E" />
      <path d="M19 0h9.5a9.5 9.5 0 1 1 0 19H19V0z" fill="#FF7262" />
      <path d="M38 28.5a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0z" fill="#1ABCFE" />
    </svg>
  ),
  slack: (
    <svg width="15" height="15" viewBox="0 0 127 127" fill="none" aria-hidden="true">
      <path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" fill="#E01E5A" />
      <path d="M47 27.2c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.7 39.7.8 47 .8c7.3 0 13.2 5.9 13.2 13.2v13.2H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.3.7 54.4.7 47.1c0-7.3 5.9-13.2 13.2-13.2H47z" fill="#36C5F0" />
      <path d="M99.9 47.1c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V47.1zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.9C66.9 6.6 72.8.7 80.1.7c7.3 0 13.2 5.9 13.2 13.2v33.2z" fill="#2EB67D" />
      <path d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z" fill="#ECB22E" />
    </svg>
  ),
  github: (
    <svg width="15" height="15" viewBox="0 0 98 96" fill="currentColor" aria-hidden="true">
      <path fillRule="evenodd" clipRule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.938-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.869 0 48.854 0z" />
    </svg>
  ),
  notion: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.047-.326L17.86 1.777c-.467-.373-1.213-.653-2.006-.56L2.92 2.244c-.373.047-.467.233-.327.467l1.866 1.497zm1.587 4.155v13.626c0 .84.42 1.307 1.493 1.213l13.727-.793c.84-.047 1.167-.56 1.167-1.353V6.822c0-.793-.373-1.167-1.073-1.12L7.333 6.449c-.84.047-1.287.513-1.287 1.914zm12.934 1.493l.093 11.197c.047.513-.187.793-.653.84l-2.006.14-5.226-7.886v7.373l1.866.14c.42.047.513.327.513.746l-4.573.28c-.373.047-.56-.233-.56-.653V10.749c0-.467.233-.7.746-.746l2.1-.14 5.087 7.746V10.75l-1.633-.14c-.42-.047-.513-.327-.513-.746l4.573-.28c.373-.047.467.28.467.606z" />
    </svg>
  ),
  drive: (
    <svg width="15" height="13" viewBox="0 0 87.3 78" fill="none" aria-hidden="true">
      <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8H0c0 1.55.4 3.1 1.2 4.5l5.4 9.35z" fill="#0066DA" />
      <path d="M43.65 25 29.9 1.2c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44c-.8 1.4-1.2 2.95-1.2 4.5h27.5L43.65 25z" fill="#00AC47" />
      <path d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l5.4-9.35c.8-1.4 1.2-2.95 1.2-4.5H55.95l6.85 11.85 10.75 5.3z" fill="#EA4335" />
      <path d="M43.65 25 57.4 1.2C56.05.4 54.5 0 52.95 0H34.35c-1.55 0-3.1.4-4.45 1.2L43.65 25z" fill="#00832D" />
      <path d="M55.95 53 42.2 29.2l-13.75 23.8h27.5z" fill="#2684FC" />
      <path d="M73.55 76.8 59.8 53H32.3l13.75 23.8h27.5c1.55 0 3.1-.4 4.45-1.25z" fill="#FFBA00" />
    </svg>
  ),
  gmail: (
    <svg width="15" height="12" viewBox="0 0 256 193" fill="none" aria-hidden="true">
      <path d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455h40.727Z" fill="#4285F4" />
      <path d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798v98.91Z" fill="#34A853" />
      <path d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.669 34.992-4.669 40.644L128 145.504 58.182 93.14Z" fill="#EA4335" />
      <path d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945l-16.292 12.218Z" fill="#FBBC04" />
      <path d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23v23.273Z" fill="#C5221F" />
    </svg>
  ),
};

const DEFAULT_MODELS: AiModel[] = [
  { id: "claude-3-7-sonnet", name: "Claude 3.7 Sonnet", tag: "Thinking", icon: <Brain className="w-3.5 h-3.5" /> },
  { id: "gpt-4o", name: "GPT-4o", tag: "Omni", icon: <Sparkles className="w-3.5 h-3.5" /> },
  { id: "claude-3-5-sonnet", name: "Claude 3.5 Sonnet", tag: "Artifacts", icon: <Zap className="w-3.5 h-3.5" /> },
  { id: "gemini-1-5-pro", name: "Gemini 1.5 Pro", tag: "Multimodal", icon: <Sparkles className="w-3.5 h-3.5" /> },
  { id: "deepseek-r1", name: "DeepSeek R1", tag: "Reasoning", icon: <Cpu className="w-3.5 h-3.5" /> },
  { id: "llama-3-3", name: "Llama 3.3 70B", tag: "Open Source", icon: <Cpu className="w-3.5 h-3.5" /> },
];

const DEFAULT_SOURCES: AiSource[] = [
  { id: "attach", name: "Add photos & files", desc: "Upload from your computer", icon: <Paperclip className="w-4 h-4" />, attach: true },
  { id: "web", name: "Web search", desc: "Real-time Google search & news", icon: <Globe className="w-4 h-4" /> },
  { id: "github", name: "GitHub Repos", desc: "Search code, issues & PRs", brand: "github", icon: null },
  { id: "figma", name: "Figma Components", desc: "Design-to-code & UI tokens", brand: "figma", icon: null },
  { id: "slack", name: "Slack Channels", desc: "Thread context & team chats", brand: "slack", connected: true, icon: null },
  { id: "notion", name: "Notion Pages", desc: "Docs, wikis & workspace notes", brand: "notion", icon: null },
  { id: "drive", name: "Google Drive", desc: "Read files & Google Sheets", brand: "drive", icon: null },
  { id: "db", name: "Database Context", desc: "PostgreSQL & Supabase schemas", icon: <Database className="w-4 h-4" /> },
];

const DEFAULT_COMMANDS: AiCommand[] = [
  { id: "summarize", name: "/summarize", desc: "Digest current context or thread", icon: <FileText className="w-4 h-4" /> },
  { id: "code-review", name: "/code-review", desc: "Audit code quality, bugs & performance", icon: <Code className="w-4 h-4" /> },
  { id: "draft-email", name: "/draft-email", desc: "Draft formal response or status update", icon: <Mail className="w-4 h-4" /> },
  { id: "generate-spec", name: "/generate-spec", desc: "Create technical PRD & API specs", icon: <FileSpreadsheet className="w-4 h-4" /> },
];

const MOCK_FILES = ["architecture-spec.pdf", "user-churn-q3.csv", "ui-kit-v2.fig"];

const VARIANT_MAP = {
  rounded: "rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800",
  pill: "rounded-full px-3 py-1 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border border-zinc-200/80 dark:border-zinc-800/80 shadow-md",
  glass: "rounded-2xl bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border border-zinc-200/80 dark:border-zinc-800/80 shadow-md",
  minimal: "rounded-xl bg-zinc-50 dark:bg-zinc-900/60 border border-transparent hover:border-zinc-200 dark:hover:border-zinc-800",
};

export const AiPromptBar: React.FC<AiPromptBarProps> = ({
  placeholder = "Ask AI, type @ or /…",
  variant = "rounded",
  models = DEFAULT_MODELS,
  defaultModelId = "claude-3-7-sonnet",
  sources = DEFAULT_SOURCES,
  commands = DEFAULT_COMMANDS,
  onSend,
  className,
  disabled = false,
}) => {
  const [draft, setDraft] = useState("");
  const [selectedModel, setSelectedModel] = useState<AiModel>(
    models.find((m) => m.id === defaultModelId) || models[0]
  );
  const [attachments, setAttachments] = useState<string[]>([]);
  const [plusOpen, setPlusOpen] = useState(false);
  const [modelOpen, setModelOpen] = useState(false);
  const [listening, setListening] = useState(false);
  const [menuActiveIndex, setMenuActiveIndex] = useState(0);

  const inputRef = useRef<HTMLTextAreaElement>(null);
  const controlsRef = useRef<HTMLDivElement>(null);

  // Extract token query for @ or /
  const tokenMatch = /(^|\s)([@/])([\w-]*)$/.exec(draft);
  const lastWord = draft.split(/\s+/).pop() || "";

  const tokenKind = plusOpen ? "at" : tokenMatch ? (tokenMatch[2] === "@" ? "at" : "slash") : null;
  
  // Real-time search query calculation
  const tokenQuery = plusOpen
    ? (tokenMatch ? tokenMatch[3].toLowerCase() : lastWord.startsWith("@") ? lastWord.slice(1).toLowerCase() : lastWord.toLowerCase())
    : (tokenMatch ? tokenMatch[3].toLowerCase() : "");

  const menuRows = tokenKind === "at"
    ? sources.filter((s) => s.name.toLowerCase().includes(tokenQuery) || s.desc.toLowerCase().includes(tokenQuery))
    : tokenKind === "slash"
      ? commands.filter((c) => c.name.toLowerCase().includes(tokenQuery) || c.desc.toLowerCase().includes(tokenQuery))
      : [];

  useEffect(() => {
    setMenuActiveIndex(0);
  }, [tokenKind, tokenQuery]);

  // Auto grow input
  useLayoutEffect(() => {
    const input = inputRef.current;
    if (!input) return;

    if (!draft) {
      input.style.height = "24px";
    } else {
      input.style.height = "0px";
      const scrollH = input.scrollHeight;
      input.style.height = `${Math.min(Math.max(scrollH, 24), 120)}px`;
    }
  }, [draft]);

  // Dictation mock
  useEffect(() => {
    if (!listening) return;
    const timer = setTimeout(() => {
      setDraft((prev) => (prev ? `${prev.trim()} Audit user retention trends for Q3` : "Audit user retention trends for Q3"));
      setListening(false);
      inputRef.current?.focus();
    }, 2200);
    return () => clearTimeout(timer);
  }, [listening]);

  const handleSelectModel = (m: AiModel) => {
    setSelectedModel(m);
    setModelOpen(false);
  };

  const handlePickRow = (item: AiSource | AiCommand) => {
    if ("attach" in item && item.attach) {
      const nextFile = MOCK_FILES[attachments.length % MOCK_FILES.length];
      setAttachments((prev) => [...prev, nextFile]);
      if (tokenMatch) {
        setDraft(draft.slice(0, tokenMatch.index + tokenMatch[1].length));
      }
    } else {
      const isAt = tokenKind === "at";
      const prefix = isAt ? "@" : "";
      
      if (tokenMatch) {
        const base = draft.slice(0, tokenMatch.index + tokenMatch[1].length);
        setDraft(`${base}${prefix}${item.name} `);
      } else {
        // Strip trailing search word if user typed query after clicking plus
        const words = draft.trimEnd().split(/\s+/);
        if (words.length > 0 && !draft.endsWith(" ")) {
          words.pop();
        }
        const base = words.length > 0 ? words.join(" ") + " " : "";
        setDraft(`${base}${prefix}${item.name} `);
      }
    }
    setPlusOpen(false);
    setTimeout(() => inputRef.current?.focus(), 10);
  };

  const handleSend = () => {
    if ((!draft.trim() && attachments.length === 0) || disabled) return;
    if (onSend) {
      onSend({ text: draft.trim(), model: selectedModel, attachments });
    }
    setDraft("");
    setAttachments([]);
    setPlusOpen(false);
    setModelOpen(false);
  };

  const isPill = variant === "pill";
  const roundedClass = isPill ? "rounded-full" : variant === "minimal" ? "rounded-xl" : "rounded-2xl";

  return (
    <div className={cn("relative w-full max-w-xl mx-auto font-sans text-zinc-900 dark:text-zinc-100", roundedClass, className)}>
      {/* ── Dropdown Menus ── */}
      <AnimatePresence>
        {/* @ or / Menu */}
        {tokenKind && (
          <motion.div
            initial={{ opacity: 0, y: 6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.98 }}
            transition={{ duration: 0.15, ease: "easeOut" }}
            className="absolute bottom-full left-0 right-0 z-50 mb-2 rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 shadow-xl overflow-hidden"
          >
            <div className="max-h-56 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden p-1 space-y-0.5">
              {menuRows.map((row, i) => {
                const isActive = i === menuActiveIndex;
                const source = tokenKind === "at" ? (row as AiSource) : undefined;
                return (
                  <button
                    key={row.id}
                    type="button"
                    onMouseEnter={() => setMenuActiveIndex(i)}
                    onMouseDown={(e) => {
                      e.preventDefault();
                      handlePickRow(row);
                    }}
                    className={cn(
                      "w-full flex items-center justify-between gap-3 px-3 py-2 rounded-xl text-left text-xs transition-all duration-150 cursor-pointer",
                      isActive
                        ? "bg-zinc-100 dark:bg-zinc-850 font-semibold"
                        : "hover:bg-zinc-50 dark:hover:bg-zinc-900/60"
                    )}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <div className="shrink-0 w-5 h-5 flex items-center justify-center text-zinc-600 dark:text-zinc-400">
                        {source?.brand ? BRAND_ICONS[source.brand] : (row.icon || <Paperclip className="w-4 h-4" />)}
                      </div>
                      <span className="font-bold text-zinc-900 dark:text-white shrink-0">{row.name}</span>
                      <span className="text-[12px] text-zinc-400 dark:text-zinc-500 truncate">{row.desc}</span>
                    </div>

                    {source?.connected ? (
                      <span className="text-[12px] font-medium text-emerald-600 dark:text-emerald-400 shrink-0">
                        Connected
                      </span>
                    ) : isActive ? (
                      <CommandIcon className="w-3.5 h-3.5 shrink-0 text-zinc-400" />
                    ) : null}
                  </button>
                );
              })}
              {menuRows.length === 0 && (
                <div className="px-3 py-3 text-center text-xs text-zinc-400 dark:text-zinc-500">
                  No matches for &quot;{tokenQuery}&quot;
                </div>
              )}
            </div>
            <div className="px-3 py-2 border-t border-zinc-100 dark:border-zinc-900 text-[11px] text-zinc-400 dark:text-zinc-500">
              {tokenKind === "at" ? "Type to search sources & files" : "Type to search commands"}
            </div>
          </motion.div>
        )}

        {/* Model Menu */}
        {modelOpen && (
          <motion.div
            initial={{ opacity: 0, y: 6, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.96 }}
            transition={{ duration: 0.15, ease: "easeOut" }}
            className="absolute bottom-full right-0 z-50 mb-2 w-52 p-1.5 rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 shadow-xl overflow-hidden"
          >
            <div className="px-2.5 py-1 text-[10px] font-mono tracking-wider uppercase text-zinc-400 dark:text-zinc-500 border-b border-zinc-100 dark:border-zinc-900 mb-1">
              Trending AI Models
            </div>
            <div className="py-0.5 space-y-0.5 max-h-56 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
              {models.map((m) => {
                const isSelected = m.id === selectedModel.id;
                return (
                  <button
                    key={m.id}
                    type="button"
                    onMouseDown={(e) => {
                      e.preventDefault();
                      handleSelectModel(m);
                    }}
                    className={cn(
                      "w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs text-left transition-colors duration-150 cursor-pointer",
                      isSelected
                        ? "bg-zinc-100 dark:bg-zinc-800 font-semibold text-zinc-900 dark:text-white"
                        : "hover:bg-zinc-50 dark:hover:bg-zinc-900 text-zinc-700 dark:text-zinc-300"
                    )}
                  >
                    <div className="flex items-center gap-2">
                      {m.icon}
                      <span>{m.name}</span>
                    </div>
                    {m.tag && (
                      <span className="text-[10px] text-zinc-400 dark:text-zinc-500 font-normal">
                        {m.tag}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ── Main Composer Container ── */}
      <div
        className={cn(
          "relative flex flex-col gap-1.5 p-1.5 transition-all duration-200",
          VARIANT_MAP[variant] || VARIANT_MAP.rounded
        )}
      >
        {/* Attachments */}
        <AnimatePresence>
          {attachments.length > 0 && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="flex flex-wrap gap-1.5 px-2 pt-1"
            >
              {attachments.map((file, idx) => (
                <motion.span
                  key={`${file}-${idx}`}
                  initial={{ scale: 0.9, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.9, opacity: 0 }}
                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs bg-zinc-100 dark:bg-zinc-900 text-zinc-800 dark:text-zinc-200 border border-zinc-200/60 dark:border-zinc-800/60"
                >
                  <Paperclip className="w-3 h-3 text-zinc-400" />
                  <span className="max-w-[140px] truncate">{file}</span>
                  <button
                    type="button"
                    onClick={() => setAttachments((prev) => prev.filter((_, i) => i !== idx))}
                    className="p-0.5 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-100 transition-colors"
                  >
                    <X className="w-3 h-3" />
                  </button>
                </motion.span>
              ))}
            </motion.div>
          )}
        </AnimatePresence>

        {/* Controls Row */}
        <div ref={controlsRef} className="flex items-center gap-2 w-full px-1">
          {/* Plus icon Button */}
          <Button
            type="button"
            variant={plusOpen ? "default" : "ghost"}
            size="icon"
            aria-label="Add attachment"
            onClick={() => {
              setModelOpen(false);
              setPlusOpen((prev) => !prev);
              inputRef.current?.focus();
            }}
            className={cn("w-8 h-8 shrink-0 p-0", isPill ? "rounded-full" : "rounded-xl")}
          >
            <Plus className="w-4 h-4" />
          </Button>

          {/* Textarea */}
          <textarea
            ref={inputRef}
            rows={1}
            value={draft}
            disabled={disabled}
            onChange={(e) => {
              setDraft(e.target.value);
            }}
            onKeyDown={(e) => {
              if (tokenKind && menuRows.length > 0) {
                if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                  e.preventDefault();
                  setMenuActiveIndex((prev) => (prev + (e.key === "ArrowDown" ? 1 : menuRows.length - 1)) % menuRows.length);
                  return;
                }
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  handlePickRow(menuRows[menuActiveIndex]);
                  return;
                }
              }
              if (e.key === "Escape") {
                setPlusOpen(false);
                setModelOpen(false);
                return;
              }
              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
                e.preventDefault();
                handleSend();
              }
            }}
            placeholder={listening ? "Listening…" : placeholder}
            className="flex-1 min-h-[28px] max-h-[120px] py-1 px-1 bg-transparent border-none outline-none ring-0 ring-offset-0 shadow-none focus:border-none focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus-visible:border-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none text-sm leading-relaxed text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 resize-none overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
          />

          {/* Model Selector Button */}
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => {
              setPlusOpen(false);
              setModelOpen((prev) => !prev);
            }}
            className="flex items-center gap-1 px-2.5 py-1 h-8 rounded-lg text-xs font-medium text-zinc-600 dark:text-zinc-300 shrink-0"
          >
            <span>{selectedModel.name}</span>
            <ChevronDown className="w-3.5 h-3.5 text-zinc-400" />
          </Button>

          {/* Dictation Button */}
          <Button
            type="button"
            variant={listening ? "default" : "ghost"}
            size="icon"
            aria-label={listening ? "Stop dictation" : "Start dictation"}
            onClick={() => setListening((prev) => !prev)}
            className={cn("w-8 h-8 shrink-0 p-0", isPill ? "rounded-full" : "rounded-xl")}
          >
            <AudioLines className="w-4 h-4" />
          </Button>

          {/* Send Button */}
          <Button
            type="button"
            variant={draft.trim() || attachments.length > 0 ? "default" : "secondary"}
            size="icon"
            disabled={(!draft.trim() && attachments.length === 0) || disabled}
            onClick={handleSend}
            className={cn("w-8 h-8 shrink-0 p-0", isPill ? "rounded-full" : "rounded-xl")}
          >
            <ArrowUp className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </div>
  );
};

export default AiPromptBar;

```
--------------------------------------------------

### COMPONENT: ai-sidebar
Description: A feature-packed, professional AI navigation sidebar with brand header, live chat history categories, search filter, new chat shortcut, hover actions (pin, rename, delete), collapsed rail view, and user profile footer. Fully prop-driven.
URL: https://lightswind.com/components/ai-sidebar
Import: import { AiSidebar } from "@/components/lightswind/ai-sidebar"
Registry URL: https://lightswind.com/r/ai-sidebar.json
Install Command: npx lightswind@latest add ai-sidebar

Usage:
```tsx
import { AiSidebar } from "@/components/lightswind/ai-sidebar";

export function Demo() {
  return (
    <AiSidebar
      brandName="ChatGPT"
      user={{ name: "J Muhilvanan", plan: "Free" }}
      onNewChat={() => console.log("New chat")}
      onSelectChat={(id) => console.log("Selected:", id)}
    />
  );
}
```

Source Code:
```tsx
"use client";

import React, { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  SquarePen,
  Search,
  PanelLeft,
  PanelLeftClose,
  Images,
  Library,
  Puzzle,
  FolderKanban,
  Terminal,
  MoreHorizontal,
  Pin,
  Pencil,
  Trash2,
  Share2,
  Archive,
  Download,
  Sparkles,
  Settings,
  LogOut,
  Check,
  X,
  Bot,
  Command as CmdIcon,
} from "lucide-react";
import { cn } from "@/components/lib/utils";
import { Button } from "@/components/lightswind/button";
import { Input } from "@/components/lightswind/input";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/lightswind/avatar";

export interface SidebarNavItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  badge?: string;
  onClick?: () => void;
}

export interface ChatHistoryItem {
  id: string;
  title: string;
  timestamp?: string;
  pinned?: boolean;
  archived?: boolean;
}

export interface ChatHistoryGroup {
  category: string;
  items: ChatHistoryItem[];
}

export interface SidebarUser {
  name: string;
  email?: string;
  avatarUrl?: string;
  plan?: string;
}

export interface CustomChatItemAction {
  id: string;
  label: string;
  icon?: React.ReactNode;
  danger?: boolean;
  onClick?: (chat: ChatHistoryItem) => void;
}

export interface AiSidebarProps {
  brandName?: string;
  brandLogo?: React.ReactNode;
  navItems?: SidebarNavItem[];
  moreNavItems?: SidebarNavItem[];
  chatHistoryGroups?: ChatHistoryGroup[];
  activeChatId?: string;
  user?: SidebarUser;
  collapsed?: boolean;
  searchQuery?: string;
  customChatActions?: CustomChatItemAction[];
  onSearchChange?: (query: string) => void;
  onToggleCollapse?: () => void;
  onNewChat?: () => void;
  onSelectChat?: (chatId: string) => void;
  onDeleteChat?: (chatId: string) => void;
  onPinChat?: (chatId: string) => void;
  onRenameChat?: (chatId: string, newTitle: string) => void;
  onShareChat?: (chatId: string) => void;
  onArchiveChat?: (chatId: string) => void;
  onExportChat?: (chatId: string) => void;
  onUpgradeClick?: () => void;
  className?: string;
}

const DEFAULT_NAV_ITEMS: SidebarNavItem[] = [
  { id: "images", label: "Images", icon: <Images className="w-4 h-4" /> },
  { id: "library", label: "Library", icon: <Library className="w-4 h-4" /> },
  { id: "plugins", label: "Plugins", icon: <Puzzle className="w-4 h-4" /> },
  { id: "projects", label: "Projects", icon: <FolderKanban className="w-4 h-4" /> },
  { id: "codex", label: "Codex", icon: <Terminal className="w-4 h-4" /> },
];

const DEFAULT_MORE_NAV_ITEMS: SidebarNavItem[] = [
  { id: "gpts", label: "Custom GPTs", icon: <Sparkles className="w-4 h-4" /> },
  { id: "archived", label: "Archived Chats", icon: <Archive className="w-4 h-4" /> },
  { id: "shortcuts", label: "Shortcuts", icon: <CmdIcon className="w-4 h-4" /> },
];

const DEFAULT_CHAT_GROUPS: ChatHistoryGroup[] = [
  {
    category: "Recents",
    items: [
      { id: "chat-1", title: "CSS Position Concept Reel", pinned: true },
      { id: "chat-2", title: "Cross-posting Monetization Clarity" },
      { id: "chat-3", title: "Induction Stove for Cooking" },
      { id: "chat-4", title: "Flexbox Grid Learning Tool" },
      { id: "chat-5", title: "Professional Video Creation" },
      { id: "chat-6", title: "Lightswind AI Fluid Blob" },
      { id: "chat-7", title: "Lightswind UI Carousel Help" },
      { id: "chat-8", title: "Correct Product Hunt Process" },
      { id: "chat-9", title: "Deadpool vs Wolverine OTT" },
      { id: "chat-10", title: "Anxiety vs Imagination" },
      { id: "chat-11", title: "Thyroid Tablet and Soy" },
      { id: "chat-12", title: "Redish Background Design" },
      { id: "chat-13", title: "YouTube Shorts Revenue Estimate" },
      { id: "chat-14", title: "Cover Image Request" },
      { id: "chat-15", title: "Shader Compilation Error Fix" },
      { id: "chat-16", title: "Interactive 3D Shader" },
      { id: "chat-17", title: "Hyper-realistic Headshot Description" },
      { id: "chat-18", title: "Lightswind UI Installation Guide" },
    ],
  },
];

const DEFAULT_USER: SidebarUser = {
  name: "J Muhilvanan",
  email: "muhil@lightswind.ui",
  plan: "Free",
};

export const AiSidebar: React.FC<AiSidebarProps> = ({
  brandName = "ChatGPT",
  brandLogo = <Bot className="w-5 h-5 text-zinc-900 dark:text-zinc-100" />,
  navItems = DEFAULT_NAV_ITEMS,
  moreNavItems = DEFAULT_MORE_NAV_ITEMS,
  chatHistoryGroups = DEFAULT_CHAT_GROUPS,
  activeChatId = "chat-1",
  user = DEFAULT_USER,
  collapsed = false,
  searchQuery,
  customChatActions,
  onSearchChange,
  onToggleCollapse,
  onNewChat,
  onSelectChat,
  onDeleteChat,
  onPinChat,
  onRenameChat,
  onShareChat,
  onArchiveChat,
  onExportChat,
  onUpgradeClick,
  className,
}) => {
  const [internalQuery, setInternalQuery] = useState("");
  const [isSearching, setIsSearching] = useState(false);
  const [activeChat, setActiveChat] = useState(activeChatId);
  const [editingChatId, setEditingChatId] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
  const [showMoreNav, setShowMoreNav] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);

  const query = searchQuery !== undefined ? searchQuery : internalQuery;
  const setQuery = onSearchChange || setInternalQuery;

  const searchInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (isSearching) {
      searchInputRef.current?.focus();
    }
  }, [isSearching]);

  const handleStartRename = (id: string, currentTitle: string) => {
    setEditingChatId(id);
    setEditingTitle(currentTitle);
    setOpenMenuId(null);
  };

  const handleSaveRename = (id: string) => {
    if (editingTitle.trim() && onRenameChat) {
      onRenameChat(id, editingTitle.trim());
    }
    setEditingChatId(null);
  };

  const handleSelect = (id: string) => {
    setActiveChat(id);
    if (onSelectChat) onSelectChat(id);
  };

  // Filter chats by search query
  const filteredGroups = chatHistoryGroups.map((group) => ({
    ...group,
    items: group.items.filter((item) =>
      item.title.toLowerCase().includes(query.toLowerCase())
    ),
  })).filter((group) => group.items.length > 0);

  /* ── COLLAPSED SIDEBAR VIEW ── */
  if (collapsed) {
    return (
      <aside
        className={cn(
          "w-16 h-full min-h-[580px] bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-zinc-800 flex flex-col items-center justify-between py-3 px-2 font-sans select-none transition-all duration-200",
          className
        )}
      >
        {/* Top Header Icons */}
        <div className="flex flex-col items-center gap-3 w-full">
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={onToggleCollapse}
            className="w-10 h-10 rounded-xl text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white"
            title="Expand Sidebar"
          >
            <PanelLeft className="w-5 h-5" />
          </Button>

          <Button
            type="button"
            variant="default"
            size="icon"
            onClick={onNewChat}
            className="w-10 h-10 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 shadow-xs"
            title="New Chat"
          >
            <SquarePen className="w-5 h-5" />
          </Button>

          <div className="w-8 h-px bg-zinc-200 dark:bg-zinc-800 my-1" />

          {/* Quick Nav Icons */}
          {navItems.map((item) => (
            <Button
              key={item.id}
              type="button"
              variant="ghost"
              size="icon"
              onClick={item.onClick}
              className="w-10 h-10 rounded-xl text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900"
              title={item.label}
            >
              {item.icon}
            </Button>
          ))}
        </div>

        {/* User Footer Icon */}
        <div className="w-full flex justify-center pt-3 border-t border-zinc-200 dark:border-zinc-800">
          <Avatar className="w-9 h-9 cursor-pointer ring-2 ring-transparent hover:ring-zinc-300 dark:hover:ring-zinc-700 transition-all">
            {user.avatarUrl ? (
              <AvatarImage src={user.avatarUrl} alt={user.name} />
            ) : null}
            <AvatarFallback className="bg-zinc-900 text-white text-xs font-semibold">
              {user.name.slice(0, 2).toUpperCase()}
            </AvatarFallback>
          </Avatar>
        </div>
      </aside>
    );
  }

  /* ── FULL EXPANDED SIDEBAR VIEW ── */
  return (
    <aside
      className={cn(
        "w-64 h-full min-h-[580px] bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-zinc-800 flex flex-col justify-between py-3 px-3 font-sans select-none transition-all duration-200 text-zinc-900 dark:text-zinc-100",
        className
      )}
    >
      {/* ── TOP SECTION: Brand Header & Nav ── */}
      <div className="flex flex-col gap-2 min-h-0 flex-1">
        {/* Brand Bar */}
        <div className="flex items-center justify-between px-2 py-1">
          <div className="flex items-center gap-2 font-bold text-base tracking-tight text-zinc-900 dark:text-white">
            {brandLogo}
            <span>{brandName}</span>
          </div>

          <div className="flex items-center gap-0.5">
            <Button
              type="button"
              variant="ghost"
              size="icon"
              onClick={() => setIsSearching(!isSearching)}
              className="w-8 h-8 rounded-lg text-zinc-500 hover:text-zinc-900 dark:hover:text-white"
              title="Search Conversations"
            >
              <Search className="w-4 h-4" />
            </Button>

            {onToggleCollapse && (
              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={onToggleCollapse}
                className="w-8 h-8 rounded-lg text-zinc-500 hover:text-zinc-900 dark:hover:text-white"
                title="Collapse Sidebar"
              >
                <PanelLeftClose className="w-4 h-4" />
              </Button>
            )}
          </div>
        </div>

        {/* Search Bar Toggle */}
        <AnimatePresence>
          {isSearching && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="px-1 overflow-hidden"
            >
              <div className="relative flex items-center">
                <Search className="w-3.5 h-3.5 absolute left-2.5 text-zinc-400" />
                <Input
                  ref={searchInputRef}
                  type="text"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Search chats…"
                  className="pl-8 pr-7 py-1.5 h-8 text-xs bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 rounded-lg"
                />
                {query && (
                  <button
                    type="button"
                    onClick={() => setQuery("")}
                    className="absolute right-2 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
                  >
                    <X className="w-3.5 h-3.5" />
                  </button>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* New Chat Primary Button */}
        <Button
          type="button"
          variant="secondary"
          onClick={onNewChat}
          className="w-full flex items-center justify-between px-3 py-2 h-10 rounded-xl bg-zinc-100 dark:bg-zinc-900 hover:bg-zinc-200 dark:hover:bg-zinc-850 text-zinc-900 dark:text-zinc-100 font-medium text-xs border border-zinc-200/50 dark:border-zinc-800/50 shadow-2xs transition-all"
        >
          <div className="flex items-center gap-2.5">
            <SquarePen className="w-4 h-4 text-zinc-700 dark:text-zinc-300" />
            <span>New chat</span>
          </div>
          <span className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 bg-zinc-200/60 dark:bg-zinc-800 px-1.5 py-0.5 rounded">
            ⌘N
          </span>
        </Button>

        {/* Quick Nav Links & More Popover */}
        <div className="space-y-0.5 px-1 py-1 relative">
          {navItems.map((item) => (
            <button
              key={item.id}
              type="button"
              onClick={item.onClick}
              className="w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
            >
              <div className="flex items-center gap-2.5">
                <span className="text-zinc-500 dark:text-zinc-400">{item.icon}</span>
                <span>{item.label}</span>
              </div>
              {item.badge && (
                <span className="text-[10px] bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 px-1.5 py-0.5 rounded-full font-mono">
                  {item.badge}
                </span>
              )}
            </button>
          ))}

          {/* More Items Button */}
          <button
            type="button"
            onClick={() => setShowMoreNav(!showMoreNav)}
            className="w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs font-medium text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors cursor-pointer"
          >
            <div className="flex items-center gap-2.5">
              <MoreHorizontal className="w-4 h-4 text-zinc-400" />
              <span>More</span>
            </div>
          </button>

          {/* More Nav Popover Menu */}
          {showMoreNav && (
            <div
              className="absolute left-1 right-1 top-full z-50 mt-1 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl p-1 space-y-0.5"
              onMouseLeave={() => setShowMoreNav(false)}
            >
              {moreNavItems.map((mItem) => (
                <button
                  key={mItem.id}
                  type="button"
                  onClick={() => {
                    if (mItem.onClick) mItem.onClick();
                    setShowMoreNav(false);
                  }}
                  className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors text-left"
                >
                  <span className="text-zinc-400">{mItem.icon}</span>
                  <span>{mItem.label}</span>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* ── MIDDLE SECTION: Scrollable Chat History ── */}
        <div className="flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pt-2 space-y-4">
          {filteredGroups.map((group) => (
            <div key={group.category} className="space-y-1">
              <div className="px-2 text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 tracking-wider">
                {group.category}
              </div>
              <div className="space-y-0.5">
                {group.items.map((item) => {
                  const isActive = activeChat === item.id;
                  const isEditing = editingChatId === item.id;
                  const isMenuOpen = openMenuId === item.id;

                  if (isEditing) {
                    return (
                      <div key={item.id} className="flex items-center gap-1 px-1 py-1">
                        <Input
                          type="text"
                          value={editingTitle}
                          onChange={(e) => setEditingTitle(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") handleSaveRename(item.id);
                            if (e.key === "Escape") setEditingChatId(null);
                          }}
                          className="h-7 text-xs px-2 py-0"
                          autoFocus
                        />
                        <button
                          type="button"
                          onClick={() => handleSaveRename(item.id)}
                          className="p-1 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950/40 rounded"
                        >
                          <Check className="w-3.5 h-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() => setEditingChatId(null)}
                          className="p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
                        >
                          <X className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    );
                  }

                  return (
                    <div key={item.id} className="relative group">
                      <button
                        type="button"
                        onClick={() => handleSelect(item.id)}
                        className={cn(
                          "w-full flex items-center justify-between px-2.5 py-1.5 rounded-xl text-xs text-left transition-colors cursor-pointer group-hover:pr-8",
                          isActive
                            ? "bg-zinc-100 dark:bg-zinc-850 font-semibold text-zinc-900 dark:text-white"
                            : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900/70"
                        )}
                      >
                        <span className="truncate pr-1">{item.title}</span>
                        {item.pinned && (
                          <Pin className="w-3 h-3 text-zinc-400 shrink-0 transform rotate-45" />
                        )}
                      </button>

                      {/* Options Trigger Menu Button */}
                      <div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenuId(isMenuOpen ? null : item.id);
                          }}
                          className="p-1 rounded-md text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-200 dark:hover:bg-zinc-800"
                        >
                          <MoreHorizontal className="w-3.5 h-3.5" />
                        </button>
                      </div>

                      {/* Extended Chat Action Popover Menu */}
                      {isMenuOpen && (
                        <div
                          className="absolute right-2 top-8 z-50 w-40 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl py-1 text-xs space-y-0.5"
                          onMouseLeave={() => setOpenMenuId(null)}
                        >
                          <button
                            type="button"
                            onClick={() => {
                              if (onShareChat) onShareChat(item.id);
                              setOpenMenuId(null);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                          >
                            <Share2 className="w-3.5 h-3.5 text-zinc-400" />
                            <span>Share</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              if (onPinChat) onPinChat(item.id);
                              setOpenMenuId(null);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                          >
                            <Pin className="w-3.5 h-3.5 text-zinc-400" />
                            <span>{item.pinned ? "Unpin" : "Pin chat"}</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => handleStartRename(item.id, item.title)}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                          >
                            <Pencil className="w-3.5 h-3.5 text-zinc-400" />
                            <span>Rename</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              if (onArchiveChat) onArchiveChat(item.id);
                              setOpenMenuId(null);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                          >
                            <Archive className="w-3.5 h-3.5 text-zinc-400" />
                            <span>Archive</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              if (onExportChat) onExportChat(item.id);
                              setOpenMenuId(null);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                          >
                            <Download className="w-3.5 h-3.5 text-zinc-400" />
                            <span>Export chat</span>
                          </button>

                          {customChatActions && customChatActions.map((cAction) => (
                            <button
                              key={cAction.id}
                              type="button"
                              onClick={() => {
                                if (cAction.onClick) cAction.onClick(item);
                                setOpenMenuId(null);
                              }}
                              className={cn(
                                "w-full flex items-center gap-2 px-3 py-1.5 text-left",
                                cAction.danger
                                  ? "text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40"
                                  : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                              )}
                            >
                              {cAction.icon}
                              <span>{cAction.label}</span>
                            </button>
                          ))}

                          <div className="w-full h-px bg-zinc-100 dark:bg-zinc-800 my-0.5" />

                          <button
                            type="button"
                            onClick={() => {
                              if (onDeleteChat) onDeleteChat(item.id);
                              setOpenMenuId(null);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40 font-medium"
                          >
                            <Trash2 className="w-3.5 h-3.5 text-rose-500" />
                            <span>Delete</span>
                          </button>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}

          {filteredGroups.length === 0 && (
            <div className="px-3 py-6 text-center text-xs text-zinc-400 dark:text-zinc-500">
              No chats found for &quot;{query}&quot;
            </div>
          )}
        </div>
      </div>

      {/* ── BOTTOM SECTION: User Profile & Upgrade Footer ── */}
      <div className="pt-2 border-t border-zinc-100 dark:border-zinc-900 relative">
        <div className="flex items-center justify-between p-1.5 rounded-xl hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors">
          <button
            type="button"
            onClick={() => setShowUserMenu(!showUserMenu)}
            className="flex items-center gap-2.5 text-left flex-1 min-w-0"
          >
            <Avatar className="w-8 h-8 shrink-0">
              {user.avatarUrl ? <AvatarImage src={user.avatarUrl} alt={user.name} /> : null}
              <AvatarFallback className="bg-zinc-900 text-white text-xs font-semibold">
                {user.name.slice(0, 2).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div className="flex flex-col min-w-0 leading-tight">
              <span className="text-xs font-semibold text-zinc-900 dark:text-white truncate">
                {user.name}
              </span>
              <span className="text-[10px] text-zinc-400 dark:text-zinc-500 truncate">
                {user.plan || "Free"}
              </span>
            </div>
          </button>

          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={onUpgradeClick}
            className="h-7 px-2.5 rounded-full text-[11px] font-medium border-zinc-200 dark:border-zinc-800 text-zinc-800 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 shrink-0"
          >
            Upgrade
          </Button>
        </div>

        {/* User Settings Dropdown Menu */}
        {showUserMenu && (
          <div
            className="absolute bottom-full left-0 right-0 z-50 mb-2 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-xl p-1 space-y-0.5"
            onMouseLeave={() => setShowUserMenu(false)}
          >
            <div className="px-3 py-2 border-b border-zinc-100 dark:border-zinc-900">
              <p className="text-xs font-semibold text-zinc-900 dark:text-white">{user.name}</p>
              <p className="text-[10px] text-zinc-400 truncate">{user.email}</p>
            </div>
            <button
              type="button"
              className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-900"
            >
              <Settings className="w-3.5 h-3.5 text-zinc-400" />
              <span>Settings</span>
            </button>
            <button
              type="button"
              className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-900"
            >
              <Sparkles className="w-3.5 h-3.5 text-zinc-400" />
              <span>Custom instructions</span>
            </button>
            <button
              type="button"
              className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40"
            >
              <LogOut className="w-3.5 h-3.5 text-rose-500" />
              <span>Log out</span>
            </button>
          </div>
        )}
      </div>
    </aside>
  );
};

export default AiSidebar;

```
--------------------------------------------------

### COMPONENT: ai-usage-chart
Description: A professional AI Usage & Analytics Chart component for monitoring token consumption, LLM model costs, request throughput, and response latency.
URL: https://lightswind.com/components/ai-usage-chart
Import: import { AiUsageChart } from "@/components/lightswind/ai-usage-chart";
Registry URL: https://lightswind.com/r/ai-usage-chart.json
Install Command: npx lightswind@latest add ai-usage-chart

Usage:
```tsx
<AiUsageChart
  timeRange="7d"
  activeMetric="tokens"
  chartType="area"
  budgetLimit={100}
  currentSpend={37.2}
/>
```

Source Code:
```tsx
"use client";

import React, { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  TrendingUp,
  TrendingDown,
  Zap,
  DollarSign,
  Activity,
  BarChart3,
  LineChart as LineChartIcon,
  AreaChart as AreaChartIcon,
  AlertTriangle,
  Cpu,
  Clock,
} from "lucide-react";
import { cn } from "@/components/lib/utils";
import { Button } from "@/components/lightswind/button";
import { Badge } from "@/components/lightswind/badge";
import { Progress } from "@/components/lightswind/progress";

export interface AiUsageMetricPoint {
  date: string;
  tokens: number;
  cost: number;
  requests: number;
  latencyMs: number;
  gpt4oTokens?: number;
  claudeTokens?: number;
  geminiTokens?: number;
  deepseekTokens?: number;
}

export interface AiModelUsageShare {
  name: string;
  color: string;
  percentage: number;
  tokensFormatted: string;
  costFormatted: string;
}

export interface AiUsageChartProps {
  /** Header title */
  title?: string;
  /** Header description */
  subtitle?: string;
  /** Header badge text label */
  badgeText?: string;
  /** Currency symbol (default $) */
  currencySymbol?: string;
  /** Custom SVG line stroke color */
  lineColor?: string;
  /** Controlled or initial time range (24h, 7d, 30d, 90d) */
  timeRange?: "24h" | "7d" | "30d" | "90d";
  /** Controlled or initial active metric (tokens, cost, requests, latency) */
  activeMetric?: "tokens" | "cost" | "requests" | "latency";
  /** Controlled chart type (area, bar, line) */
  chartType?: "area" | "bar" | "line";
  /** Filter by AI model name ('all' or model name) */
  selectedModel?: string;
  /** Visual theme variant */
  variant?: "default" | "glass" | "minimal" | "dark";
  /** Custom data points */
  data?: AiUsageMetricPoint[];
  /** Custom model breakdown shares */
  models?: AiModelUsageShare[];
  /** Monthly budget limit for alert bar */
  budgetLimit?: number;
  /** Current spend toward budget */
  currentSpend?: number;
  /** Custom card labels */
  tokensCardLabel?: string;
  costCardLabel?: string;
  requestsCardLabel?: string;
  latencyCardLabel?: string;
  /** Custom growth/change indicator text */
  tokensGrowthText?: string;
  costGrowthText?: string;
  requestsGrowthText?: string;
  latencyGrowthText?: string;
  /** Show top stats cards */
  showMetricsCards?: boolean;
  /** Show model breakdown progress bars */
  showModelBreakdown?: boolean;
  /** Show time range selector pills */
  showTimeRangeSelector?: boolean;
  /** Show metric tabs (Tokens, Cost, Requests, Latency) */
  showMetricSelector?: boolean;
  /** Show budget limit alert banner */
  showBudgetAlert?: boolean;
  /** Container custom classes */
  className?: string;
  /** Callback on time range change */
  onTimeRangeChange?: (range: "24h" | "7d" | "30d" | "90d") => void;
  /** Callback on metric tab change */
  onMetricChange?: (metric: "tokens" | "cost" | "requests" | "latency") => void;
  /** Callback on model filter change */
  onModelChange?: (model: string) => void;
}

// ── Mock Datasets for 24h, 7d, 30d, 90d ───────────────────────────────────
const DEFAULT_DATA_24H: AiUsageMetricPoint[] = [
  { date: "00:00", tokens: 28000, cost: 0.42, requests: 520, latencyMs: 240 },
  { date: "04:00", tokens: 14000, cost: 0.21, requests: 290, latencyMs: 220 },
  { date: "08:00", tokens: 68000, cost: 1.05, requests: 1280, latencyMs: 210 },
  { date: "12:00", tokens: 145000, cost: 2.20, requests: 2850, latencyMs: 195 },
  { date: "16:00", tokens: 182000, cost: 2.80, requests: 3600, latencyMs: 185 },
  { date: "20:00", tokens: 120000, cost: 1.85, requests: 2400, latencyMs: 190 },
  { date: "23:59", tokens: 45000, cost: 0.70, requests: 950, latencyMs: 200 },
];

const DEFAULT_DATA_7D: AiUsageMetricPoint[] = [
  { date: "Mon", tokens: 184000, cost: 2.85, requests: 3400, latencyMs: 230 },
  { date: "Tue", tokens: 245000, cost: 3.90, requests: 4800, latencyMs: 210 },
  { date: "Wed", tokens: 312000, cost: 5.10, requests: 6200, latencyMs: 195 },
  { date: "Thu", tokens: 289000, cost: 4.60, requests: 5900, latencyMs: 205 },
  { date: "Fri", tokens: 420000, cost: 6.80, requests: 8400, latencyMs: 180 },
  { date: "Sat", tokens: 360000, cost: 5.75, requests: 7100, latencyMs: 190 },
  { date: "Sun", tokens: 495000, cost: 8.20, requests: 9800, latencyMs: 175 },
];

const DEFAULT_DATA_30D: AiUsageMetricPoint[] = [
  { date: "Week 1", tokens: 1250000, cost: 18.50, requests: 24000, latencyMs: 220 },
  { date: "Week 2", tokens: 1840000, cost: 27.80, requests: 36000, latencyMs: 205 },
  { date: "Week 3", tokens: 2100000, cost: 32.40, requests: 41000, latencyMs: 190 },
  { date: "Week 4", tokens: 2680000, cost: 41.20, requests: 52000, latencyMs: 180 },
];

const DEFAULT_DATA_90D: AiUsageMetricPoint[] = [
  { date: "Month 1", tokens: 5400000, cost: 82.00, requests: 104000, latencyMs: 215 },
  { date: "Month 2", tokens: 7800000, cost: 118.50, requests: 152000, latencyMs: 195 },
  { date: "Month 3", tokens: 9600000, cost: 145.20, requests: 188000, latencyMs: 182 },
];

const DEFAULT_MODELS: AiModelUsageShare[] = [
  { name: "GPT-4o", color: "#3b82f6", percentage: 48, tokensFormatted: "1.1M tokens", costFormatted: "$17.80" },
  { name: "Claude 3.5 Sonnet", color: "#8b5cf6", percentage: 32, tokensFormatted: "740K tokens", costFormatted: "$12.40" },
  { name: "Gemini 1.5 Pro", color: "#10b981", percentage: 14, tokensFormatted: "320K tokens", costFormatted: "$4.90" },
  { name: "DeepSeek V3", color: "#f59e0b", percentage: 6, tokensFormatted: "140K tokens", costFormatted: "$2.10" },
];

export const AiUsageChart: React.FC<AiUsageChartProps> = ({
  title = "AI Usage & API Token Analytics",
  subtitle = "Monitor real-time token consumption, LLM model costs, request throughput, and latency.",
  badgeText = "Live V2 API",
  currencySymbol = "$",
  lineColor = "#3b82f6",
  timeRange: propTimeRange = "7d",
  activeMetric: propActiveMetric = "tokens",
  chartType: propChartType = "area",
  selectedModel: propSelectedModel = "all",
  variant = "default",
  data,
  models = DEFAULT_MODELS,
  budgetLimit = 100,
  currentSpend = 37.2,
  tokensCardLabel = "Tokens Used",
  costCardLabel = "Est. API Cost",
  requestsCardLabel = "Total Requests",
  latencyCardLabel = "Avg Latency",
  tokensGrowthText = "+18.4% vs last week",
  costGrowthText = "Within Budget",
  requestsGrowthText = "99.98% Success",
  latencyGrowthText = "-12ms Faster",
  showMetricsCards = true,
  showModelBreakdown = true,
  showTimeRangeSelector = true,
  showMetricSelector = true,
  showBudgetAlert = true,
  className,
  onTimeRangeChange,
  onMetricChange,
  onModelChange,
}) => {
  const [internalTimeRange, setInternalTimeRange] = useState<"24h" | "7d" | "30d" | "90d">(propTimeRange);
  const [internalMetric, setInternalMetric] = useState<"tokens" | "cost" | "requests" | "latency">(propActiveMetric);
  const [internalChartType, setInternalChartType] = useState<"area" | "bar" | "line">(propChartType);
  const [hoveredPoint, setHoveredPoint] = useState<AiUsageMetricPoint | null>(null);

  // Sync prop changes
  useEffect(() => {
    if (propTimeRange) setInternalTimeRange(propTimeRange);
  }, [propTimeRange]);

  useEffect(() => {
    if (propActiveMetric) setInternalMetric(propActiveMetric);
  }, [propActiveMetric]);

  useEffect(() => {
    if (propChartType) setInternalChartType(propChartType);
  }, [propChartType]);

  const activeTimeRange = internalTimeRange;
  const activeMetric = internalMetric;
  const activeChartType = internalChartType;

  // Resolve dataset based on active time range if custom data is not explicitly provided
  const activeData = useMemo(() => {
    if (data) return data;
    switch (activeTimeRange) {
      case "24h":
        return DEFAULT_DATA_24H;
      case "30d":
        return DEFAULT_DATA_30D;
      case "90d":
        return DEFAULT_DATA_90D;
      case "7d":
      default:
        return DEFAULT_DATA_7D;
    }
  }, [data, activeTimeRange]);

  const handleTimeRangeClick = (range: "24h" | "7d" | "30d" | "90d") => {
    setInternalTimeRange(range);
    if (onTimeRangeChange) onTimeRangeChange(range);
  };

  const handleMetricClick = (metric: "tokens" | "cost" | "requests" | "latency") => {
    setInternalMetric(metric);
    if (onMetricChange) onMetricChange(metric);
  };

  // Calculations for total stats
  const totals = useMemo(() => {
    const totalTokens = activeData.reduce((acc, d) => acc + d.tokens, 0);
    const totalCost = activeData.reduce((acc, d) => acc + d.cost, 0);
    const totalRequests = activeData.reduce((acc, d) => acc + d.requests, 0);
    const avgLatency = Math.round(activeData.reduce((acc, d) => acc + d.latencyMs, 0) / (activeData.length || 1));

    return {
      tokens: totalTokens,
      tokensFormatted: (totalTokens / (totalTokens >= 1000000 ? 1000000 : 1000)).toFixed(1) + (totalTokens >= 1000000 ? "M" : "K"),
      cost: totalCost,
      costFormatted: `${currencySymbol}${totalCost.toFixed(2)}`,
      requests: totalRequests,
      requestsFormatted: (totalRequests / 1000).toFixed(1) + "K",
      latencyMs: avgLatency,
    };
  }, [activeData, currencySymbol]);

  // Max value calculation for scaling chart height
  const maxMetricValue = useMemo(() => {
    return Math.max(
      ...activeData.map((d) => {
        if (activeMetric === "tokens") return d.tokens;
        if (activeMetric === "cost") return d.cost;
        if (activeMetric === "requests") return d.requests;
        return d.latencyMs;
      }),
      1
    );
  }, [activeData, activeMetric]);

  // SVG Chart path calculation
  const svgWidth = 600;
  const svgHeight = 220;
  const paddingX = 30;
  const paddingY = 25;

  const points = useMemo(() => {
    const usableW = svgWidth - paddingX * 2;
    const usableH = svgHeight - paddingY * 2;

    return activeData.map((d, idx) => {
      const x = paddingX + (idx / (activeData.length - 1 || 1)) * usableW;
      const rawVal =
        activeMetric === "tokens"
          ? d.tokens
          : activeMetric === "cost"
          ? d.cost
          : activeMetric === "requests"
          ? d.requests
          : d.latencyMs;

      const y = svgHeight - paddingY - (rawVal / maxMetricValue) * usableH;
      return { x, y, rawVal, dataPoint: d };
    });
  }, [activeData, activeMetric, maxMetricValue]);

  // Curved path string generator
  const pathD = useMemo(() => {
    if (points.length < 2) return "";
    let d = `M ${points[0].x} ${points[0].y}`;
    for (let i = 0; i < points.length - 1; i++) {
      const p0 = points[i];
      const p1 = points[i + 1];
      const cx = (p0.x + p1.x) / 2;
      d += ` C ${cx} ${p0.y}, ${cx} ${p1.y}, ${p1.x} ${p1.y}`;
    }
    return d;
  }, [points]);

  // Area fill path string
  const areaD = useMemo(() => {
    if (!pathD || points.length < 2) return "";
    const lastX = points[points.length - 1].x;
    const firstX = points[0].x;
    const bottomY = svgHeight - paddingY;
    return `${pathD} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;
  }, [pathD, points]);

  // Theme variant container styles
  const variantStyles = {
    default:
      "bg-zinc-50/90 dark:bg-zinc-950/90 border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm",
    glass:
      "bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border-zinc-200/50 dark:border-zinc-800/50 text-zinc-900 dark:text-zinc-100 shadow-lg shadow-black/5 dark:shadow-black/20",
    minimal:
      "bg-transparent border-zinc-200/60 dark:border-zinc-800/60 text-zinc-900 dark:text-zinc-100",
    dark:
      "bg-zinc-950 border-zinc-800/90 text-zinc-100 shadow-md",
  };

  return (
    <div
      className={cn(
        "relative w-full rounded-3xl border p-6 md:p-8 font-sans transition-all duration-300 space-y-6",
        variantStyles[variant],
        className
      )}
    >
      {/* ── 1. Top Header & Title Row ─────────────────────────────────── */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-zinc-200/80 dark:border-zinc-800/80 pb-5">
        <div>
          <div className="flex items-center gap-2.5">
            <div className="h-8 w-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center border border-primary/20">
              <Cpu className="w-4 h-4" />
            </div>
            <h2 className="text-lg md:text-xl font-bold tracking-tight text-foreground">
              {title}
            </h2>
            {badgeText && (
              <Badge variant="outline" shape="rounded" size="sm" className="font-mono text-[10px]">
                {badgeText}
              </Badge>
            )}
          </div>
          {subtitle && (
            <p className="text-xs text-muted-foreground mt-1 max-w-xl">
              {subtitle}
            </p>
          )}
        </div>

        {/* Time Range Selector & Chart Type Selector */}
        <div className="flex flex-wrap items-center gap-2 shrink-0">
          {showTimeRangeSelector && (
            <div className="flex items-center bg-zinc-200/60 dark:bg-zinc-800/60 p-1 rounded-xl border border-zinc-300/40 dark:border-zinc-700/40">
              {(["24h", "7d", "30d", "90d"] as const).map((range) => (
                <Button
                  key={range}
                  variant={activeTimeRange === range ? "default" : "ghost"}
                  size="sm"
                  onClick={() => handleTimeRangeClick(range)}
                  className={cn(
                    "h-7 px-2.5 text-xs rounded-lg font-medium transition-all",
                    activeTimeRange === range
                      ? "shadow-sm font-semibold"
                      : "text-muted-foreground hover:text-foreground"
                  )}
                >
                  {range.toUpperCase()}
                </Button>
              ))}
            </div>
          )}

          {/* Chart Type Icon Buttons */}
          <div className="flex items-center bg-zinc-200/60 dark:bg-zinc-800/60 p-1 rounded-xl border border-zinc-300/40 dark:border-zinc-700/40">
            <Button
              variant={activeChartType === "area" ? "default" : "ghost"}
              size="icon"
              onClick={() => setInternalChartType("area")}
              className="h-7 w-7 rounded-lg"
              title="Area Chart"
            >
              <AreaChartIcon className="h-3.5 w-3.5" />
            </Button>
            <Button
              variant={activeChartType === "bar" ? "default" : "ghost"}
              size="icon"
              onClick={() => setInternalChartType("bar")}
              className="h-7 w-7 rounded-lg"
              title="Bar Chart"
            >
              <BarChart3 className="h-3.5 w-3.5" />
            </Button>
            <Button
              variant={activeChartType === "line" ? "default" : "ghost"}
              size="icon"
              onClick={() => setInternalChartType("line")}
              className="h-7 w-7 rounded-lg"
              title="Line Chart"
            >
              <LineChartIcon className="h-3.5 w-3.5" />
            </Button>
          </div>
        </div>
      </div>

      {/* ── 2. Budget Limit Alert Banner ───────────────────────────────── */}
      {showBudgetAlert && (
        <motion.div
          initial={{ opacity: 0, y: -5 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex items-center justify-between p-3.5 rounded-2xl bg-amber-500/10 border border-amber-500/25 text-amber-900 dark:text-amber-200 text-xs font-medium"
        >
          <div className="flex items-center gap-2.5">
            <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />
            <span>
              Monthly Budget Usage: <strong>{currencySymbol}{currentSpend.toFixed(2)}</strong> of {currencySymbol}{budgetLimit.toFixed(2)} limit ({Math.round((currentSpend / Math.max(1, budgetLimit)) * 100)}% consumed)
            </span>
          </div>
          <Badge variant="warning" size="sm" shape="rounded">
            Normal Status
          </Badge>
        </motion.div>
      )}

      {/* ── 3. Top Metrics Stat Cards ──────────────────────────────────── */}
      {showMetricsCards && (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          <div
            onClick={() => handleMetricClick("tokens")}
            className={cn(
              "cursor-pointer p-4 rounded-2xl border transition-all duration-200",
              activeMetric === "tokens"
                ? "bg-blue-500/10 border-blue-500/40 shadow-sm"
                : "bg-zinc-100/60 dark:bg-zinc-900/60 border-zinc-200/60 dark:border-zinc-800/60 hover:bg-zinc-200/40 dark:hover:bg-zinc-800/40"
            )}
          >
            <div className="flex items-center justify-between text-muted-foreground text-xs font-medium">
              <span>{tokensCardLabel}</span>
              <Zap className="h-3.5 w-3.5 text-blue-500" />
            </div>
            <div className="text-xl font-bold font-mono text-foreground mt-1.5">
              {totals.tokensFormatted}
            </div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-500 mt-1">
              <TrendingUp className="h-3 w-3" />
              <span>{tokensGrowthText}</span>
            </div>
          </div>

          <div
            onClick={() => handleMetricClick("cost")}
            className={cn(
              "cursor-pointer p-4 rounded-2xl border transition-all duration-200",
              activeMetric === "cost"
                ? "bg-emerald-500/10 border-emerald-500/40 shadow-sm"
                : "bg-zinc-100/60 dark:bg-zinc-900/60 border-zinc-200/60 dark:border-zinc-800/60 hover:bg-zinc-200/40 dark:hover:bg-zinc-800/40"
            )}
          >
            <div className="flex items-center justify-between text-muted-foreground text-xs font-medium">
              <span>{costCardLabel}</span>
              <DollarSign className="h-3.5 w-3.5 text-emerald-500" />
            </div>
            <div className="text-xl font-bold font-mono text-foreground mt-1.5">
              {totals.costFormatted}
            </div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-500 mt-1">
              <TrendingUp className="h-3 w-3" />
              <span>{costGrowthText}</span>
            </div>
          </div>

          <div
            onClick={() => handleMetricClick("requests")}
            className={cn(
              "cursor-pointer p-4 rounded-2xl border transition-all duration-200",
              activeMetric === "requests"
                ? "bg-purple-500/10 border-purple-500/40 shadow-sm"
                : "bg-zinc-100/60 dark:bg-zinc-900/60 border-zinc-200/60 dark:border-zinc-800/60 hover:bg-zinc-200/40 dark:hover:bg-zinc-800/40"
            )}
          >
            <div className="flex items-center justify-between text-muted-foreground text-xs font-medium">
              <span>{requestsCardLabel}</span>
              <Activity className="h-3.5 w-3.5 text-purple-500" />
            </div>
            <div className="text-xl font-bold font-mono text-foreground mt-1.5">
              {totals.requestsFormatted}
            </div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-500 mt-1">
              <TrendingUp className="h-3 w-3" />
              <span>{requestsGrowthText}</span>
            </div>
          </div>

          <div
            onClick={() => handleMetricClick("latency")}
            className={cn(
              "cursor-pointer p-4 rounded-2xl border transition-all duration-200",
              activeMetric === "latency"
                ? "bg-amber-500/10 border-amber-500/40 shadow-sm"
                : "bg-zinc-100/60 dark:bg-zinc-900/60 border-zinc-200/60 dark:border-zinc-800/60 hover:bg-zinc-200/40 dark:hover:bg-zinc-800/40"
            )}
          >
            <div className="flex items-center justify-between text-muted-foreground text-xs font-medium">
              <span>{latencyCardLabel}</span>
              <Clock className="h-3.5 w-3.5 text-amber-500" />
            </div>
            <div className="text-xl font-bold font-mono text-foreground mt-1.5">
              {totals.latencyMs} ms
            </div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-500 mt-1">
              <TrendingDown className="h-3 w-3" />
              <span>{latencyGrowthText}</span>
            </div>
          </div>
        </div>
      )}

      {/* ── 4. Main SVG Chart Canvas ───────────────────────────────────── */}
      <div className="relative w-full rounded-2xl border border-zinc-200/70 dark:border-zinc-800/70 bg-zinc-100/40 dark:bg-zinc-900/40 p-4">
        <div className="flex items-center justify-between px-2 pb-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          <span>
            {activeMetric.toUpperCase()} TREND ({activeTimeRange.toUpperCase()})
          </span>
          <span className="font-mono text-[11px]">
            Peak: {maxMetricValue.toLocaleString()} {activeMetric === "cost" ? currencySymbol : ""}
          </span>
        </div>

        <div className="relative w-full h-[220px]">
          <svg viewBox={`0 0 ${svgWidth} ${svgHeight}`} className="w-full h-full overflow-visible">
            <defs>
              <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={lineColor} stopOpacity="0.45" />
                <stop offset="100%" stopColor={lineColor} stopOpacity="0.0" />
              </linearGradient>
              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={lineColor} stopOpacity="0.9" />
                <stop offset="100%" stopColor={lineColor} stopOpacity="0.5" />
              </linearGradient>
            </defs>

            {/* Horizontal Grid lines */}
            {[0, 0.33, 0.66, 1].map((ratio, i) => {
              const y = paddingY + ratio * (svgHeight - paddingY * 2);
              return (
                <line
                  key={i}
                  x1={paddingX}
                  y1={y}
                  x2={svgWidth - paddingX}
                  y2={y}
                  stroke="currentColor"
                  strokeOpacity="0.08"
                  strokeDasharray="4 4"
                />
              );
            })}

            {/* Area Chart Mode */}
            {activeChartType === "area" && (
              <>
                <motion.path
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.5 }}
                  d={areaD}
                  fill="url(#areaGradient)"
                />
                <motion.path
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 0.8, ease: "easeInOut" }}
                  d={pathD}
                  fill="none"
                  stroke={lineColor}
                  strokeWidth="3"
                  strokeLinecap="round"
                />
              </>
            )}

            {/* Line Chart Mode */}
            {activeChartType === "line" && (
              <motion.path
                initial={{ pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 0.8, ease: "easeInOut" }}
                d={pathD}
                fill="none"
                stroke={lineColor}
                strokeWidth="3.5"
                strokeLinecap="round"
              />
            )}

            {/* Bar Chart Mode */}
            {activeChartType === "bar" &&
              points.map((pt, i) => {
                const barW = Math.max(16, Math.floor((svgWidth - paddingX * 2) / (activeData.length || 1) - 16));
                const bottomY = svgHeight - paddingY;
                const barH = Math.max(4, bottomY - pt.y);
                return (
                  <rect
                    key={i}
                    x={pt.x - barW / 2}
                    y={pt.y}
                    width={barW}
                    height={barH}
                    rx="6"
                    fill="url(#barGradient)"
                    className="hover:opacity-85 transition-all duration-300 cursor-pointer"
                    onMouseEnter={() => setHoveredPoint(pt.dataPoint)}
                    onMouseLeave={() => setHoveredPoint(null)}
                  />
                );
              })}

            {/* Interactive Data Points (for Area & Line) */}
            {activeChartType !== "bar" &&
              points.map((pt, i) => (
                <g key={i}>
                  <circle
                    cx={pt.x}
                    cy={pt.y}
                    r="5"
                    fill={lineColor}
                    stroke="#ffffff"
                    strokeWidth="2"
                    className="cursor-pointer hover:r-7 transition-all"
                    onMouseEnter={() => setHoveredPoint(pt.dataPoint)}
                    onMouseLeave={() => setHoveredPoint(null)}
                  />
                </g>
              ))}
          </svg>

          {/* X Axis Labels */}
          <div className="flex justify-between px-6 pt-2 font-mono text-[11px] text-muted-foreground select-none">
            {activeData.map((d, i) => (
              <span key={i}>{d.date}</span>
            ))}
          </div>
        </div>

        {/* Hover Tooltip Popup */}
        <AnimatePresence>
          {hoveredPoint && (
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="absolute top-4 right-6 p-3 rounded-2xl bg-zinc-900 text-white shadow-xl border border-zinc-700/80 text-xs space-y-1 font-mono z-20"
            >
              <div className="font-bold text-blue-400 border-b border-zinc-800 pb-1">
                {hoveredPoint.date} Summary
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-zinc-400">Tokens:</span>
                <span className="font-semibold">{hoveredPoint.tokens.toLocaleString()}</span>
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-zinc-400">Cost:</span>
                <span className="font-semibold text-emerald-400">
                  {currencySymbol}{hoveredPoint.cost.toFixed(2)}
                </span>
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-zinc-400">Requests:</span>
                <span className="font-semibold">{hoveredPoint.requests.toLocaleString()}</span>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* ── 5. AI Model Breakdown Shares ──────────────────────────────── */}
      {showModelBreakdown && (
        <div className="space-y-4 pt-2 border-t border-zinc-200/80 dark:border-zinc-800/80">
          <div className="flex items-center justify-between">
            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
              LLM Model Consumption Breakdown
            </h3>
            <span className="text-xs font-mono text-muted-foreground">
              {models.length} Active Models
            </span>
          </div>

          <div className="space-y-3">
            {models.map((m, i) => (
              <div key={i} className="space-y-1.5">
                <div className="flex items-center justify-between text-xs">
                  <div className="flex items-center gap-2">
                    <span
                      className="h-2.5 w-2.5 rounded-full inline-block"
                      style={{ backgroundColor: m.color }}
                    />
                    <span className="font-semibold text-foreground">{m.name}</span>
                  </div>
                  <div className="flex items-center gap-3 font-mono text-[11px] text-muted-foreground">
                    <span>{m.tokensFormatted}</span>
                    <span className="font-semibold text-foreground">{m.costFormatted}</span>
                    <span className="font-bold text-foreground w-8 text-right">{m.percentage}%</span>
                  </div>
                </div>

                <Progress
                  value={m.percentage}
                  size="sm"
                  indicatorClassName="transition-all duration-500"
                  style={
                    {
                      "--progress-color": m.color,
                    } as any
                  }
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default AiUsageChart;

```
--------------------------------------------------

### COMPONENT: aurora-background
Description: An animated aurora background effect with beautiful gradient animations that responds to light and dark themes.
URL: https://lightswind.com/components/aurora-background
Import: import { AuroraBackground } from "@/components/lightswind/aurora-background"
Registry URL: https://lightswind.com/r/aurora-background.json
Install Command: npx lightswind@latest add aurora-background

Usage:
```tsx
import { AuroraBackground } from '@/components/lightswind/aurora-background';

// Basic usage
<AuroraBackground>
  <h1>Your content here</h1>
</AuroraBackground>

// Without radial gradient
<AuroraBackground showRadialGradient={false}>
  <div>Full aurora effect</div>
</AuroraBackground>

// With custom styling
<AuroraBackground className="items-start pt-20">
  <section>Custom positioned content</section>
</AuroraBackground>
```

Source Code:
```tsx
"use client";
import { cn } from "@/components/lib/utils";
import React, { ReactNode } from "react";

interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  children: ReactNode;
  showRadialGradient?: boolean;
}

export const AuroraBackground = ({
  className,
  children,
  showRadialGradient = true,
  ...props
}: AuroraBackgroundProps) => {
  return (
    <main>
      <div
        // Using cn for concatenation of classes. The static part is a single string.
        className={cn(
          "transition-bg relative flex mx-auto h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
          className
        )}
        {...props}
      >
        <div
          className="absolute inset-0 overflow-hidden"
          style={
            {
              // String concatenation for CSS variable values
              "--aurora":
                "repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)",
              "--dark-gradient":
                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
              "--white-gradient":
                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",

              "--blue-300": "#7dd3fc", // Soft Sky Blue
              "--blue-400": "#38bdf8", // Mild Blue
              "--blue-500": "#0ea5e9", // Calm Professional Blue
              "--indigo-300": "#c4b5fd", // Soft Lavender Indigo
              "--violet-200": "#e9d5ff", // Gentle Violet
              "--green-300": "#6ee7b7", // Soft Mint Green
              "--pink-300": "#f9a8d4", // Mild Pink
              "--gray-300": "#d1d5db", // Soft Gray for Text
              "--black": "#000000", // Background
              "--white": "#ffffff", // Text or Highlights
              "--transparent": "transparent",
            } as React.CSSProperties
          }
        >
          <div
            className={cn(
              // The main complex string for className, now as a single literal
              "after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[\"\"] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]",
              // Conditional class applied using ternary for string or empty string
              showRadialGradient
                ? "[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]"
                : ""
            )}
          ></div>
        </div>
        {children}
      </div>
    </main>
  );
};
```
--------------------------------------------------

### COMPONENT: dot-pattern
Description: A utility component.
URL: https://lightswind.com/components/dot-pattern
Registry URL: https://lightswind.com/r/dot-pattern.json
Install Command: npx lightswind@latest add dot-pattern

Source Code:
```tsx
import { useId } from "react";
import { cn } from "@/components/lib/utils";

interface DotPatternProps {
  width?: number;
  height?: number;
  x?: number;
  y?: number;
  cx?: number;
  cy?: number;
  cr?: number;
  className?: string;
  [key: string]: any;
}

export function DotPattern({
  width = 16,
  height = 16,
  x = 0,
  y = 0,
  cx = 1,
  cy = 1,
  cr = 1,
  className,
  ...props
}: DotPatternProps) {
  const id = useId();

  return (
    <svg
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80 blur-[1px] animate-dotPatternMotion",
        className
      )}
      {...props}
    >
      <defs>
        <pattern
          id={id}
          width={width}
          height={height}
          patternUnits="userSpaceOnUse"
          patternTransform="translate(0,0)"
        >
          <circle cx={cx} cy={cy} r={cr} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
    </svg>
  );
}

export default DotPattern;

```
--------------------------------------------------

### COMPONENT: interactive-card-gallery
Description: A responsive gallery of interactive cards with hover effects and customizable layouts.
URL: https://lightswind.com/components/interactive-card-gallery
Import: import { InteractiveCardGallery } from "@/components/lightswind/interactive-card-gallery"
Registry URL: https://lightswind.com/r/interactive-card-gallery.json
Install Command: npx lightswind@latest add interactive-card-gallery

Usage:
```tsx
const galleryData = [
  {
    title: "Mountain View",
    description: "Check out these gorgeous mountain trips with beautiful views",
    imageSrc: "/images/mountains.jpg",
    buttonText: "View Trips",
    imageAlt: "Mountain landscape",
    accentColor: "yellow",
    onClick: () => console.log("Mountain card clicked")
  },
  {
    title: "Beach Getaway",
    description: "Plan your next beach trip with these fabulous destinations",
    imageSrc: "/images/beach.jpg",
    buttonText: "View Trips",
    imageAlt: "Beach landscape",
    accentColor: "blue",
    onClick: () => console.log("Beach card clicked")
  }
];

<InteractiveCardGallery 
  cards={galleryData} 
  cardHeight="h-64"
  columns={4}
  hoverScale={1.1}
  transitionDuration={700}
/>
```

Source Code:
```tsx
import React from "react";
import { cn } from "@/components/lib/utils";

export interface CardProps {
  title: string;
  description: string;
  imageSrc: string;
  buttonText: string;
  buttonLink?: string;
  imageAlt?: string;
  accentColor?: string;
  onClick?: () => void;
}

interface InteractiveCardGalleryProps {
  cards: CardProps[];
  className?: string;
  cardHeight?: string;
  columns?: 1 | 2 | 3 | 4;
  hoverScale?: number;
  transitionDuration?: number;
}

const CardItem = ({
  title,
  description,
  imageSrc,
  buttonText,
  buttonLink,
  imageAlt,
  accentColor = "yellow",
  onClick,
}: CardProps) => {
  const handleClick = (e: React.MouseEvent) => {
    if (buttonLink) {
      if (!onClick) return;
      e.preventDefault();
    }
    onClick?.();
  };

  return (
    <div className="relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-full">
      <div
        className="absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110"
        style={{
          backgroundImage: `url('${imageSrc}')`,
        }}
      />
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50" />
      <div className="relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
        <h2 className="text-lg font-bold">{title}</h2>
        <p className="mt-2 italic text-sm">{description}</p>
        <button
          className={`mt-4 px-4 py-2 bg-black text-white font-bold text-xs uppercase tracking-wide rounded-lg hover:bg-gray-800 focus:outline-none focus:ring focus:ring-${accentColor}-400`}
          onClick={handleClick}
        >
          {buttonText}
        </button>
      </div>
    </div>
  );
};

export function InteractiveCardGallery({
  cards,
  className,
  cardHeight = "h-64",
  columns = 4,
  hoverScale = 1.1,
  transitionDuration = 700,
}: InteractiveCardGalleryProps) {
  const getGridCols = () => {
    switch (columns) {
      case 1: return "grid-cols-1";
      case 2: return "sm:grid-cols-2";
      case 3: return "sm:grid-cols-2 lg:grid-cols-3";
      case 4: 
      default: return "sm:grid-cols-2 lg:grid-cols-4";
    }
  };

  return (
    <div 
      className={cn(
        `grid gap-4 p-4 max-w-screen-lg mx-auto ${getGridCols()}`,
        className
      )}
      style={{ 
        "--hover-scale": hoverScale, 
        "--transition-duration": `${transitionDuration}ms` 
      } as React.CSSProperties}
    >
      {cards.map((card, index) => (
        <div key={index} className={cn("group", cardHeight)}>
          <CardItem {...card} />
        </div>
      ))}
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT: liquid-fluid
Description: A utility component.
URL: https://lightswind.com/components/liquid-fluid
Registry URL: https://lightswind.com/r/liquid-fluid.json
Install Command: npx lightswind@latest add liquid-fluid

Source Code:
```tsx
'use client';
import React, { useEffect, useRef } from 'react';
import { Renderer, Camera, Geometry, Program, Mesh, RenderTarget, Vec2, Color, Texture } from 'ogl';
import { useAnimationFrame } from 'framer-motion';
import { gsap } from 'gsap';

export interface LiquidFluidProps {
    mouseForce?: number;
    cursorSize?: number;
    isViscous?: boolean;
    viscous?: number;
    iterationsViscous?: number;
    iterationsPoisson?: number;
    dt?: number;
    BFECC?: boolean;
    resolution?: number;
    isBounce?: boolean;
    colors?: string[];
    style?: React.CSSProperties;
    className?: string;
    autoDemo?: boolean;
    autoSpeed?: number;
    autoIntensity?: number;
    takeoverDuration?: number;
    autoResumeDelay?: number;
    autoRampDuration?: number;
}

const defaultColors = ['#00fffc', '#fff', '#00fffc'];

const baseVertex = /* glsl */ `
    precision highp float;
    attribute vec2 position;
    attribute vec2 uv;
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = vec4(position, 0, 1);
    }
`;

const splatFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tVelocity;
    uniform vec2 force;
    uniform vec2 center;
    uniform float radius;
    uniform float aspect;
    void main() {
        vec2 p = vUv - center;
        p.x *= aspect;
        float d = exp(-dot(p, p) / radius);
        vec3 base = texture2D(tVelocity, vUv).xyz;
        gl_FragColor = vec4(base + d * vec3(force, 0.0), 1.0);
    }
`;

const advectionFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tVelocity;
    uniform sampler2D tSource;
    uniform float dt;
    uniform float dissipation;
    uniform vec2 fboSize;
    void main() {
        vec2 ratio = max(fboSize.x, fboSize.y) / fboSize;
        vec2 coord = vUv - dt * texture2D(tVelocity, vUv).xy * ratio;
        gl_FragColor = dissipation * texture2D(tSource, coord);
    }
`;

const divergenceFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tVelocity;
    uniform vec2 px;
    void main() {
        float L = texture2D(tVelocity, vUv - vec2(px.x, 0.0)).x;
        float R = texture2D(tVelocity, vUv + vec2(px.x, 0.0)).x;
        float T = texture2D(tVelocity, vUv + vec2(0.0, px.y)).y;
        float B = texture2D(tVelocity, vUv - vec2(0.0, px.y)).y;
        float div = 0.5 * (R - L + T - B);
        gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
    }
`;

const poissonFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tPressure;
    uniform sampler2D tDivergence;
    uniform vec2 px;
    void main() {
        float L = texture2D(tPressure, vUv - vec2(px.x, 0.0)).x;
        float R = texture2D(tPressure, vUv + vec2(px.x, 0.0)).x;
        float T = texture2D(tPressure, vUv + vec2(0.0, px.y)).x;
        float B = texture2D(tPressure, vUv - vec2(0.0, px.y)).x;
        float div = texture2D(tDivergence, vUv).x;
        float p = (L + R + B + T - div) * 0.25;
        gl_FragColor = vec4(p, 0.0, 0.0, 1.0);
    }
`;

const pressureFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tPressure;
    uniform sampler2D tVelocity;
    uniform vec2 px;
    void main() {
        float L = texture2D(tPressure, vUv - vec2(px.x, 0.0)).x;
        float R = texture2D(tPressure, vUv + vec2(px.x, 0.0)).x;
        float T = texture2D(tPressure, vUv + vec2(0.0, px.y)).x;
        float B = texture2D(tPressure, vUv - vec2(0.0, px.y)).x;
        vec2 vel = texture2D(tVelocity, vUv).xy;
        vel -= 0.5 * vec2(R - L, T - B);
        gl_FragColor = vec4(vel, 0.0, 1.0);
    }
`;

const outputFrag = /* glsl */ `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D tVelocity;
    uniform sampler2D tPalette;
    void main() {
        vec2 vel = texture2D(tVelocity, vUv).xy;
        float len = length(vel);
        vec3 color = texture2D(tPalette, vec2(len, 0.5)).rgb;
        gl_FragColor = vec4(color, len);
    }
`;

export default function LiquidFluid({
    mouseForce = 35,
    cursorSize = 80,
    iterationsPoisson = 32,
    dt = 0.014,
    resolution = 0.5,
    colors = defaultColors,
    style = {},
    className = '',
    autoDemo = true,
    autoSpeed = 0.5,
    autoIntensity = 2.2,
    autoResumeDelay = 1000,
}: LiquidFluidProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const rendererRef = useRef<Renderer | null>(null);
    const glRef = useRef<any>(null);
    const programsRef = useRef<any>({});
    const targetsRef = useRef<any>({});
    const meshRef = useRef<Mesh | null>(null);

    // Physics markers
    const mouse = useRef(new Vec2(0.5, 0.5));
    const lastMouse = useRef(new Vec2(0.5, 0.5));
    const velocity = useRef(new Vec2(0, 0));
    const lastInputTime = useRef(0);
    const autoPos = useRef({ x: 0.5, y: 0.5 });

    useEffect(() => {
        if (!canvasRef.current || !containerRef.current) return;

        const renderer = new Renderer({ canvas: canvasRef.current, alpha: true, dpr: 2, premultipliedAlpha: false });
        const gl = renderer.gl;
        rendererRef.current = renderer;
        glRef.current = gl;

        const geometry = new Geometry(gl, {
            position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
            uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
        });

        // Extensions
        const isIOS = /(iPad|iPhone|iPod)/i.test(navigator.userAgent);
        const floatType = isIOS ? (gl as any).HALF_FLOAT || 0x8D61 : gl.FLOAT;
        gl.getExtension('OES_texture_float');
        gl.getExtension('OES_texture_float_linear');
        gl.getExtension('OES_texture_half_float');
        gl.getExtension('OES_texture_half_float_linear');

        const createTarget = (w: number, h: number) => new RenderTarget(gl, {
            width: w,
            height: h,
            type: floatType,
            format: gl.RGBA,
            internalFormat: isIOS ? (gl as any).RGBA16F : (gl as any).RGBA32F || gl.RGBA,
            minFilter: gl.LINEAR,
            magFilter: gl.LINEAR,
            depth: false,
        });

        // Programs
        const programs = {
            advection: new Program(gl, {
                vertex: baseVertex, fragment: advectionFrag,
                uniforms: { tVelocity: { value: null }, tSource: { value: null }, dt: { value: dt }, dissipation: { value: 0.98 }, fboSize: { value: new Vec2() } }
            }),
            splat: new Program(gl, {
                vertex: baseVertex, fragment: splatFrag,
                uniforms: { tVelocity: { value: null }, force: { value: new Vec2() }, center: { value: new Vec2() }, radius: { value: cursorSize / 1000 }, aspect: { value: 1.0 } }
            }),
            divergence: new Program(gl, {
                vertex: baseVertex, fragment: divergenceFrag,
                uniforms: { tVelocity: { value: null }, px: { value: new Vec2() } }
            }),
            poisson: new Program(gl, {
                vertex: baseVertex, fragment: poissonFrag,
                uniforms: { tPressure: { value: null }, tDivergence: { value: null }, px: { value: new Vec2() } }
            }),
            pressure: new Program(gl, {
                vertex: baseVertex, fragment: pressureFrag,
                uniforms: { tPressure: { value: null }, tVelocity: { value: null }, px: { value: new Vec2() } }
            }),
            output: new Program(gl, {
                vertex: baseVertex, fragment: outputFrag,
                uniforms: { tVelocity: { value: null }, tPalette: { value: null } },
                transparent: true
            })
        };
        programsRef.current = programs;

        const mainMesh = new Mesh(gl, { geometry, program: programs.output });
        meshRef.current = mainMesh;

        // Palette
        const updatePalette = (cols: string[]) => {
            const data = new Uint8Array(cols.length * 4);
            cols.forEach((hex, i) => {
                const c = new Color(hex);
                data[i * 4 + 0] = Math.round(c.r * 255);
                data[i * 4 + 1] = Math.round(c.g * 255);
                data[i * 4 + 2] = Math.round(c.b * 255);
                data[i * 4 + 3] = 255;
            });
            return new Texture(gl, {
                image: data, width: cols.length, height: 1, format: gl.RGBA, minFilter: gl.LINEAR, magFilter: gl.LINEAR,
            });
        };
        programs.output.uniforms.tPalette.value = updatePalette(colors);

        const handleResize = () => {
            const w = containerRef.current!.clientWidth;
            const h = containerRef.current!.clientHeight;
            renderer.setSize(w, h);
            const sw = Math.max(1, Math.floor(w * resolution));
            const sh = Math.max(1, Math.floor(h * resolution));
            targetsRef.current = {
                vel0: createTarget(sw, sh), vel1: createTarget(sw, sh),
                pressure0: createTarget(sw, sh), pressure1: createTarget(sw, sh),
                div: createTarget(sw, sh)
            };
        };
        handleResize();
        window.addEventListener('resize', handleResize);

        // GSAP Auto Demo wandering
        let autoAnim: gsap.core.Tween | null = null;
        if (autoDemo) {
            autoAnim = gsap.to(autoPos.current, {
                x: 'random(0.2, 0.8)',
                y: 'random(0.2, 0.8)',
                duration: 2 / autoSpeed,
                repeat: -1,
                repeatRefresh: true,
                ease: 'sine.inOut'
            });
        }

        return () => {
            window.removeEventListener('resize', handleResize);
            autoAnim?.kill();
        };
    }, [colors, resolution, autoDemo, autoSpeed]);

    useAnimationFrame((t) => {
        if (!glRef.current || !targetsRef.current.vel0) return;
        const renderer = rendererRef.current!;
        const gl = glRef.current;
        const targets = targetsRef.current;
        const progs = programsRef.current;
        const mesh = meshRef.current!;
        const camera = new Camera(gl);

        const sw = targets.vel0.width;
        const sh = targets.vel0.height;
        const px = new Vec2(1 / sw, 1 / sh);

        // Interaction
        const isAuto = autoDemo && Date.now() - lastInputTime.current > autoResumeDelay;
        const currentPos = isAuto ? new Vec2(autoPos.current.x, autoPos.current.y) : mouse.current;
        const diff = new Vec2().sub(currentPos, lastMouse.current);
        lastMouse.current.copy(currentPos);
        velocity.current.lerp(diff, 0.2);

        // Render passes
        // 1. Advection
        progs.advection.uniforms.tVelocity.value = targets.vel0.texture;
        progs.advection.uniforms.tSource.value = targets.vel0.texture;
        progs.advection.uniforms.fboSize.value.set(sw, sh);
        mesh.program = progs.advection;
        renderer.render({ scene: mesh, camera, target: targets.vel1 });

        // 2. Splat
        const force = isAuto ? autoIntensity * 0.01 : mouseForce;
        if (velocity.current.len() > 0.0001) {
            progs.splat.uniforms.tVelocity.value = targets.vel1.texture;
            progs.splat.uniforms.center.value.copy(currentPos);
            progs.splat.uniforms.force.value.set(velocity.current.x * force, velocity.current.y * force);
            progs.splat.uniforms.aspect.value = sw / sh;
            mesh.program = progs.splat;
            renderer.render({ scene: mesh, camera, target: targets.vel1, clear: false });
        }

        // 3. Divergence
        progs.divergence.uniforms.tVelocity.value = targets.vel1.texture;
        progs.divergence.uniforms.px.value.copy(px);
        mesh.program = progs.divergence;
        renderer.render({ scene: mesh, camera, target: targets.div });

        // 4. Pressure Solve
        for (let i = 0; i < iterationsPoisson; i++) {
            progs.poisson.uniforms.tPressure.value = (i === 0 ? targets.pressure0 : targets.pressure0).texture;
            progs.poisson.uniforms.tDivergence.value = targets.div.texture;
            progs.poisson.uniforms.px.value.copy(px);
            mesh.program = progs.poisson;
            renderer.render({ scene: mesh, camera, target: targets.pressure1 });
            [targets.pressure0, targets.pressure1] = [targets.pressure1, targets.pressure0];
        }

        // 5. Apply Pressure
        progs.pressure.uniforms.tPressure.value = targets.pressure0.texture;
        progs.pressure.uniforms.tVelocity.value = targets.vel1.texture;
        progs.pressure.uniforms.px.value.copy(px);
        mesh.program = progs.pressure;
        renderer.render({ scene: mesh, camera, target: targets.vel0 });

        // 6. Result
        progs.output.uniforms.tVelocity.value = targets.vel0.texture;
        mesh.program = progs.output;
        renderer.render({ scene: mesh, camera });
    });

    const handleInput = (e: any) => {
        const x = e.clientX || (e.touches && e.touches[0].clientX);
        const y = e.clientY || (e.touches && e.touches[0].clientY);
        if (x === undefined || y === undefined) return;

        lastInputTime.current = Date.now();
        const rect = containerRef.current?.getBoundingClientRect();
        if (!rect) return;
        mouse.current.set((x - rect.left) / rect.width, 1.0 - (y - rect.top) / rect.height);
    };

    return (
        <div
            ref={containerRef}
            className={`w-full h-full relative overflow-hidden bg-black touch-none cursor-crosshair ${className}`}
            style={style}
            onMouseMove={handleInput}
            onTouchMove={handleInput}
        >
            <canvas ref={canvasRef} className="w-full h-full block" />
        </div>
    );
}

```
--------------------------------------------------

### COMPONENT: menubar
Description: A horizontal navigation component with dropdown menus for organizing features.
URL: https://lightswind.com/components/menubar
Import: import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarShortcut } from "@/components/lightswind/menubar"
Registry URL: https://lightswind.com/r/menubar.json
Install Command: npx lightswind@latest add menubar

Usage:
```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

Source Code:
```tsx
"use client";

import * as React from "react";
import { cn } from "@/components/lib/utils";
import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";

interface MenubarContextValue {
  openMenu: string | null;
  setOpenMenu: React.Dispatch<React.SetStateAction<string | null>>;
}

const MenubarContext = React.createContext<MenubarContextValue | undefined>(undefined);

function useMenubarContext() {
  const context = React.useContext(MenubarContext);
  if (!context) {
    throw new Error("useMenubarContext must be used within a MenubarProvider");
  }
  return context;
}

interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {}

function Menubar({ className, children, ...props }: MenubarProps) {
  const [openMenu, setOpenMenu] = React.useState<string | null>(null);

  // close menu when clicking outside
  React.useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const insideMenubar = target.closest('[role="menubar"], [role="menu"]');
      if (openMenu && !insideMenubar) {
        setOpenMenu(null);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [openMenu]);

  return (
    <MenubarContext.Provider value={{ openMenu, setOpenMenu }}>
      <div
        className={cn(
          "flex h-12 items-center space-x-1 rounded-md border bg-background px-2 md:px-4 shadow-sm",
          className
        )}
        role="menubar"
        {...props}
      >
        {children}
      </div>
    </MenubarContext.Provider>
  );
}

interface MenubarMenuProps {
  value?: string;
  children: React.ReactNode;
}

function MenubarMenu({ value, children }: MenubarMenuProps) {
  const generatedId = React.useId();
  const menuId = value ?? generatedId;

  return (
    <div className="relative" data-value={menuId}>
      {children}
    </div>
  );
}

interface MenubarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

function MenubarTrigger({ className, children, ...props }: MenubarTriggerProps) {
  const { openMenu, setOpenMenu } = useMenubarContext();
  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const [menuId, setMenuId] = React.useState<string>("");

  React.useEffect(() => {
    if (triggerRef.current) {
      setMenuId(triggerRef.current.parentElement?.getAttribute("data-value") || "");
    }
  }, []);

  const isOpen = openMenu === menuId;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    setOpenMenu(isOpen ? null : menuId);
  };

  return (
    <button
      ref={triggerRef}
      type="button"
      role="menuitem"
      className={cn(
        "flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm font-medium transition-colors",
        "hover:bg-accent hover:text-accent-foreground",
        "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2",
        isOpen && "bg-accent text-accent-foreground",
        className
      )}
      aria-expanded={isOpen}
      data-state={isOpen ? "open" : "closed"}
      onClick={handleClick}
      {...props}
    >
      {children}
    </button>
  );
}

interface MenubarContentProps extends HTMLMotionProps<"div"> {}

function MenubarContent({ className, children, ...props }: MenubarContentProps) {
  const { openMenu } = useMenubarContext();
  const contentRef = React.useRef<HTMLDivElement>(null);
  const [menuId, setMenuId] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (contentRef.current) {
      const parentDataValue = contentRef.current.parentElement?.getAttribute("data-value");
      setMenuId(parentDataValue || null);
    }
  }, []);

  const isOpen = openMenu === menuId;

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          ref={contentRef}
          initial={{ opacity: 0, y: -5, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -5, scale: 0.95 }}
          transition={{ duration: 0.15, ease: "easeOut" }}
          className={cn(
            "absolute left-0 top-full z-50 mt-2 min-w-[10rem] flex flex-col rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
            "md:min-w-[12rem]", // larger menus on bigger screens
            className
          )}
          role="menu"
          {...props}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

interface MenubarItemProps extends React.HTMLAttributes<HTMLDivElement> {
  inset?: boolean;
}

function MenubarItem({ className, inset, children, ...props }: MenubarItemProps) {
  const { setOpenMenu } = useMenubarContext();

  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
    setOpenMenu(null);
    props.onClick?.(e);
  };

  return (
    <div
      role="menuitem"
      onClick={handleClick}
      className={cn(
        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
        "hover:bg-accent hover:text-accent-foreground",
        "focus:outline-none focus:bg-accent focus:text-accent-foreground",
        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
        inset && "pl-8",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem };

```
--------------------------------------------------

### COMPONENT: toaster
Description: A utility component.
URL: https://lightswind.com/components/toaster
Registry URL: https://lightswind.com/r/toaster.json
Install Command: npx lightswind@latest add toaster

Source Code:
```tsx
import * as React from "react";
import { useToast } from "@/components/hooks/use-toast";
import { Toast, ToastDescription, ToastProvider, ToastTitle, ToastViewport, ToastPosition } from "./toast";
import { AnimatePresence } from "framer-motion";
import { Toaster as SonnerToaster } from "sonner";

export interface ToasterProps {
  position?: ToastPosition;
}

export function Toaster({ position = "top-right" }: ToasterProps) {
  const { toasts, dismiss } = useToast();

  return (
    <>
      {/* Sonner Toaster - Handles all `toast.*` calls from 'sonner' across the whole project */}
      <SonnerToaster
        position={position as any}
        richColors
        closeButton
        duration={3000}
        toastOptions={{
          className: "!rounded-xl !font-sans !shadow-2xl !backdrop-blur-md",
        }}
      />

      {/* Lightswind Toast Provider - Handles custom hook toasts */}
      <ToastProvider>
        <ToastViewport position={position}>
          <AnimatePresence mode="popLayout">
            {toasts.map(({ id, title, description, action, type, variant, duration, icon, avatar, ...props }) => {
              const toastVariant = variant || (
                type === "success" ? "success" :
                  type === "warning" ? "warning" :
                    type === "info" ? "info" :
                      type === "destructive" ? "destructive" :
                        type === "loading" ? "loading" :
                          "default"
              );

              return (
                <Toast
                  key={id}
                  {...props}
                  variant={toastVariant}
                  duration={duration}
                  icon={icon}
                  avatar={avatar}
                  onOpenChange={(open) => {
                    if (!open) dismiss(id);
                  }}
                >
                  <div className="grid gap-1">
                    {title && <ToastTitle>{title}</ToastTitle>}
                    {description && <ToastDescription>{description}</ToastDescription>}
                  </div>
                  {action}
                </Toast>
              );
            })}
          </AnimatePresence>
        </ToastViewport>
      </ToastProvider>
    </>
  );
}
```
--------------------------------------------------


--- PRO COMPONENTS (METADATA ONLY) (86) ---

## CATEGORY (PRO): Pro Components (86)

### COMPONENT (PRO): ai-fluid-blob
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A stunning WebGL OGL multi-strand chromatic liquid wave energy flow component with a glass refraction lens sphere. Custom WebGL shaders render real-time fluid energy strands and glass sphere optical distortion for AI voice assistants.
URL: https://lightswind.com/components/ai-fluid-blob
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob"

Usage:
```tsx
import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob";

export function Demo() {
  return (
    <div className="flex items-center justify-center p-8">
      <AiFluidBlob
        size={320}
        variant="listening"
        colors={['#10B981', '#06B6D4', '#3B82F6', '#6366F1']}
        glass={true}
      />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): 3d-animated-pin
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: An interaction mapping a card natively onto a 3D horizontal plane tilting toward the user. Features smooth mouse-tracking tilt physics and a pulsing animated pin indicator.
URL: https://lightswind.com/components/3d-animated-pin
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AnimatedPin from "@/components/lightswind-pro/animated-pin"

Usage:
```tsx
import AnimatedPin from "@/components/lightswind-pro/animated-pin";

export function Demo() {
  return (
    <AnimatedPin title="Hover Me" href="#">
      <div className="p-4">Card Content</div>
    </AnimatedPin>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): focused-3d-marquee
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A high-fps marquee displaying physical 3D app icons scaling dynamically across a central lens. Hover slows marquee and focuses icons into a crisp central zoom.
URL: https://lightswind.com/components/focused-3d-marquee
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FocusedMarquee from "@/components/lightswind-pro/focused-3d-marquee"

Usage:
```tsx
import FocusedMarquee from "@/components/lightswind-pro/focused-3d-marquee";

export function Demo() {
  return <FocusedMarquee items={items} speed={30} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): scroll-rotate-gallery
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A GSAP scroll-driven 3D sphere gallery rotating cards in full 3D space. Cards fan around a sphere surface as the user scrolls.
URL: https://lightswind.com/components/scroll-rotate-gallery
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ScrollRotateGallery from "@/components/lightswind-pro/scroll-rotate-gallery"

Usage:
```tsx
import ScrollRotateGallery from "@/components/lightswind-pro/scroll-rotate-gallery";

export function Demo() {
  return <ScrollRotateGallery images={images} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): planet-system
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A 3D procedural planet system with interactive lighting and customizable types. Renders a realistic planet with atmosphere, specular highlights, and orbiting moons.
URL: https://lightswind.com/components/planet-system
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import PlanetSystem from "@/components/lightswind-pro/planet-system"

Usage:
```tsx
import PlanetSystem from "@/components/lightswind-pro/planet-system";

export function Demo() {
  return <PlanetSystem planetType="earth" showMoons rotationSpeed={0.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): signal-convergence
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A 3D reactive data stream visualization built in Three.js. Renders streaming signal lines converging to a central hub node with interactive mouse tracking.
URL: https://lightswind.com/components/signal-convergence
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import SignalConvergence from "@/components/lightswind-pro/signal-convergence"

Usage:
```tsx
import SignalConvergence from "@/components/lightswind-pro/signal-convergence";

export function Demo() {
  return <SignalConvergence lineCount={80} speed={1.0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): tech-stack-convergence
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 5-to-1 WebGL beam convergence animation connecting ecosystem icons to a hub node. Great for showcasing technology stacks in hero sections.
URL: https://lightswind.com/components/tech-stack-convergence
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TechStackConvergence from "@/components/lightswind-pro/tech-stack-convergence"

Usage:
```tsx
import TechStackConvergence from "@/components/lightswind-pro/tech-stack-convergence";

export function Demo() {
  return <TechStackConvergence icons={icons} centralIcon="/logo.svg" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): 3d-cards-carousel
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Scroll-driven 3D coverflow cards carousel with high-fidelity perspective transitions. Cards rotate and scale based on scroll position.
URL: https://lightswind.com/components/3d-cards-carousel
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ThreeDCardsCarousel from "@/components/lightswind-pro/3d-cards-carousel"

Usage:
```tsx
import ThreeDCardsCarousel from "@/components/lightswind-pro/3d-cards-carousel";

export function Demo() {
  return <ThreeDCardsCarousel cards={cards} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): 3d-showcase-carousel
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 3D rotating cylinder showcase carousel that pauses on hover and zooms into details. Displays items along a cylindrical path with smooth rotation.
URL: https://lightswind.com/components/3d-showcase-carousel
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ThreeDShowcaseCarousel from "@/components/lightswind-pro/3d-showcase-carousel"

Usage:
```tsx
import ThreeDShowcaseCarousel from "@/components/lightswind-pro/3d-showcase-carousel";

export function Demo() {
  return <ThreeDShowcaseCarousel items={items} autoRotate rotationSpeed={1} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): split-image-grid
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Clay-morphic split image display slicing a single image into a staggered 3D tile grid. On hover, tiles explode apart revealing the depth effect.
URL: https://lightswind.com/components/split-image-grid
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import SplitImageGrid from "@/components/lightswind-pro/split-image-grid"

Usage:
```tsx
import SplitImageGrid from "@/components/lightswind-pro/split-image-grid";

export function Demo() {
  return <SplitImageGrid src="/image.jpg" rows={3} cols={3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): 3d-arc-carousel
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 3D circular carousel fanning cards along a bottom-anchored arc pendulum path. Swipe or click to rotate through items.
URL: https://lightswind.com/components/3d-arc-carousel
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ThreeDArcCarousel from "@/components/lightswind-pro/3d-arc-carousel"

Usage:
```tsx
import ThreeDArcCarousel from "@/components/lightswind-pro/3d-arc-carousel";

export function Demo() {
  return <ThreeDArcCarousel items={items} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): 3d-holographic-deck
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 3D layer showcase featuring stacked DOM elements separating into an exploded view. Ideal for showcasing layered architecture or design systems.
URL: https://lightswind.com/components/3d-holographic-deck
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ThreeDHolographicDeck from "@/components/lightswind-pro/3d-holographic-deck"

Usage:
```tsx
import ThreeDHolographicDeck from "@/components/lightswind-pro/3d-holographic-deck";

export function Demo() {
  return <ThreeDHolographicDeck layers={layers} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): beam-flow
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A high-performance WebGL laser flow shader with dynamic fog turbulence, directional cursor tilt, and animated micro-wisp streaks.
URL: https://lightswind.com/components/beam-flow
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { BeamFlow } from "@/components/lightswind-pro/beam-flow"

Usage:
```tsx
import { BeamFlow } from "@/components/lightswind-pro/beam-flow";

export function Demo() {
  return (
    <div className="relative w-full h-[500px]">
      <BeamFlow color="#FF79C6" wispDensity={1.2} flowSpeed={0.4} fogIntensity={0.5} />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): meteors-flow
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A high-performance Native Canvas 2D meteor energy stream component with flowing glowing bezier wisps, bottom landing flare pool, and interactive mouse gravity tilt.
URL: https://lightswind.com/components/meteors-flow
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { MeteorsFlow } from "@/components/lightswind-pro/meteors-flow"

Usage:
```tsx
import { MeteorsFlow } from "@/components/lightswind-pro/meteors-flow";

export function Demo() {
  return (
    <div className="relative w-full h-[500px]">
      <MeteorsFlow color="#38BDF8" wispDensity={1.6} flowSpeed={0.45} />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): tubelight-navbar
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Navigation bar with dynamic tubelight glow effect following the active item. The glow smoothly transitions between nav items with a warm neon light aesthetic.
URL: https://lightswind.com/components/tubelight-navbar
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TubelightNavbar from "@/components/lightswind-pro/tubelight-navbar"

Usage:
```tsx
import TubelightNavbar from "@/components/lightswind-pro/tubelight-navbar";

const items = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Work", href: "/work" },
];

export function Demo() {
  return <TubelightNavbar items={items} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): dynamic-navigation
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Pill navigation utilizing DOM math to glide smooth highlights between items. The highlight pill smoothly slides and resizes to match the active item's dimensions.
URL: https://lightswind.com/components/dynamic-navigation
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import DynamicNavigation from "@/components/lightswind-pro/dynamic-navigation"

Usage:
```tsx
import DynamicNavigation from "@/components/lightswind-pro/dynamic-navigation";

export function Demo() {
  return <DynamicNavigation items={items} defaultActive={0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): animated-fire-glow
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A high-performance WebGL procedural fire and ember wave glow background component. Features multi-wave Bezier flow dynamics, glowing pulse physics, film grain, and automatic light and dark theme palette switching.
URL: https://lightswind.com/components/animated-fire-glow
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { AnimatedFireGlow } from "@/components/lightswind-pro/animated-fire-glow"

Usage:
```tsx
import { AnimatedFireGlow } from "@/components/lightswind-pro/animated-fire-glow";

export function Demo() {
  return (
    <div className="w-full h-[500px] relative overflow-hidden rounded-2xl">
      <AnimatedFireGlow mode="wave" speed={1.0} intensity={1.0} glowPulse={0.35}>
        <div className="flex items-center justify-center h-full text-white font-bold text-3xl">
          Animated Fire Glow
        </div>
      </AnimatedFireGlow>
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): animated-veil
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A high-performance WebGL procedural animated veil background overlay effect with light and dark theme switching.
URL: https://lightswind.com/components/animated-veil
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AnimatedVeil from "@/components/lightswind-pro/animated-veil"

Usage:
```tsx
import AnimatedVeil from "@/components/lightswind-pro/animated-veil";

export function Demo() {
  return (
    <div className="relative h-screen">
      <AnimatedVeil glowColor="#6366f1" speed={0.5} warpAmount={0.15} />
      <div className="relative z-10">Content</div>
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): cube-volume-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 3D procedural cube volume background with dynamic lighting. Renders an infinite field of illuminated cubes with depth and perspective.
URL: https://lightswind.com/components/cube-volume-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import CubeVolumeBackground from "@/components/lightswind-pro/cube-volume-background"

Usage:
```tsx
import CubeVolumeBackground from "@/components/lightswind-pro/cube-volume-background";

export function Demo() {
  return (
    <div className="relative h-screen">
      <CubeVolumeBackground />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): electro-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Dynamic electric lightning effects with procedural generation. Bolts fork and branch realistically with configurable intensity and color.
URL: https://lightswind.com/components/electro-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ElectroBackground from "@/components/lightswind-pro/electro-background"

Usage:
```tsx
import ElectroBackground from "@/components/lightswind-pro/electro-background";

export function Demo() {
  return <ElectroBackground color="#00ffff" boltCount={5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): fire-shader
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Realistic procedural fire shader with customizable intensity and color palette. Uses WebGL GLSL shaders for GPU-accelerated fire simulation.
URL: https://lightswind.com/components/fire-shader
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FireShader from "@/components/lightswind-pro/fire-shader"

Usage:
```tsx
import FireShader from "@/components/lightswind-pro/fire-shader";

export function Demo() {
  return <FireShader intensity={1.0} colorTop="#ff6600" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): noise-cloud-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Noise-based cloud background with interactive color mixing. Generates smooth organic cloud-like structures using layered Perlin noise.
URL: https://lightswind.com/components/noise-cloud-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import NoiseCloudBackground from "@/components/lightswind-pro/noise-cloud-background"

Usage:
```tsx
import NoiseCloudBackground from "@/components/lightswind-pro/noise-cloud-background";

export function Demo() {
  return <NoiseCloudBackground speed={0.5} colorA="#1a0533" colorB="#0d1b4b" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): orbit-trails-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Animated glowing trails orbiting mouse cursor position. Particles follow elliptical orbits around the cursor with configurable trail lengths.
URL: https://lightswind.com/components/orbit-trails-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import OrbitTrailsBackground from "@/components/lightswind-pro/orbit-trails-background"

Usage:
```tsx
import OrbitTrailsBackground from "@/components/lightswind-pro/orbit-trails-background";

export function Demo() {
  return <OrbitTrailsBackground trailCount={8} color="#a855f7" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): smoke-fire-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Hybrid smoke and fire background effect with fluid motion. Combines particle-based fire with volumetric smoke for a dramatic effect.
URL: https://lightswind.com/components/smoke-fire-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import SmokeFireBackground from "@/components/lightswind-pro/smoke-fire-background"

Usage:
```tsx
import SmokeFireBackground from "@/components/lightswind-pro/smoke-fire-background";

export function Demo() {
  return <SmokeFireBackground fireIntensity={0.8} smokeOpacity={0.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): star-glow-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Starfield background with glowing particles and smooth animations. Stars twinkle and pulse with configurable density and glow intensity.
URL: https://lightswind.com/components/star-glow-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import StarGlowBackground from "@/components/lightswind-pro/star-glow-background"

Usage:
```tsx
import StarGlowBackground from "@/components/lightswind-pro/star-glow-background";

export function Demo() {
  return <StarGlowBackground starCount={200} glowRadius={4} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): antigravity-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Ring-particle canvas background inspired by Google Antigravity. Particles form circular rings that react to mouse movement with physics-based dispersion.
URL: https://lightswind.com/components/antigravity-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AntigravityBackground from "@/components/lightswind-pro/antigravity-background"

Usage:
```tsx
import AntigravityBackground from "@/components/lightswind-pro/antigravity-background";

export function Demo() {
  return <AntigravityBackground particleCount={150} ringCount={3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): stellar-vortex-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Mesmerizing interactive particle swirl nebula effect. A spiral vortex of colored particles that react to cursor movement creating a galactic flow.
URL: https://lightswind.com/components/stellar-vortex-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import StellarVortexBackground from "@/components/lightswind-pro/stellar-vortex-background"

Usage:
```tsx
import StellarVortexBackground from "@/components/lightswind-pro/stellar-vortex-background";

export function Demo() {
  return <StellarVortexBackground particleCount={500} swirl={2.0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): volumetric-fractal
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Volumetric fractal background built with GLSL raymarching. Creates infinite depth optical illusions through recursive fractal geometry shaders.
URL: https://lightswind.com/components/volumetric-fractal
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import VolumetricFractal from "@/components/lightswind-pro/volumetric-fractal"

Usage:
```tsx
import VolumetricFractal from "@/components/lightswind-pro/volumetric-fractal";

export function Demo() {
  return <VolumetricFractal depth={64} speed={0.3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): kinetic-flow-field
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Particle flow field relying on Math.sin physics and mouse interaction. Thousands of particles follow dynamic vector field patterns.
URL: https://lightswind.com/components/kinetic-flow-field
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import KineticFlowField from "@/components/lightswind-pro/kinetic-flow-field"

Usage:
```tsx
import KineticFlowField from "@/components/lightswind-pro/kinetic-flow-field";

export function Demo() {
  return <KineticFlowField particleCount={1000} fieldScale={0.002} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): meteors
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Shooting star particle effect simulating infinite distance into darkness. Meteorites streak across the screen with glowing trails and random intervals.
URL: https://lightswind.com/components/meteors
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import Meteors from "@/components/lightswind-pro/meteors"

Usage:
```tsx
import Meteors from "@/components/lightswind-pro/meteors";

export function Demo() {
  return <Meteors number={20} speed={3} angle={-45} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): glowing-lines
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Hypnotic neon lines undulating in 3D flythrough WebGL2 animation. Creates an infinite tunnel effect of glowing lines converging to a vanishing point.
URL: https://lightswind.com/components/glowing-lines
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import GlowingLines from "@/components/lightswind-pro/glowing-lines"

Usage:
```tsx
import GlowingLines from "@/components/lightswind-pro/glowing-lines";

export function Demo() {
  return <GlowingLines lineCount={40} color="#00ffff" speed={1.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): scroll-star-effect
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Cinematic star warp effect stretching with scroll velocity. Stars stretch into warp-speed lines based on how fast the user scrolls.
URL: https://lightswind.com/components/scroll-star-effect
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ScrollStarEffect from "@/components/lightswind-pro/scroll-star-effect"

Usage:
```tsx
import ScrollStarEffect from "@/components/lightswind-pro/scroll-star-effect";

export function Demo() {
  return <ScrollStarEffect starCount={300} sensitivity={2.0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): top-snow-background
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Atmospheric snow header background with responsive wind sway. Snowflakes fall with realistic physics including wind direction and drift.
URL: https://lightswind.com/components/top-snow-background
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TopSnowBackground from "@/components/lightswind-pro/top-snow-background"

Usage:
```tsx
import TopSnowBackground from "@/components/lightswind-pro/top-snow-background";

export function Demo() {
  return <TopSnowBackground flakeCount={100} windStrength={0.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): stadium-light-beams
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: An elite stadium light beams background component. Features customizable rising fiery light columns on left/right flanks, real-time mouse spotlight tracking, proximity-based individual beam surges, ambient radial flare, and full light and dark mode theme support.
URL: https://lightswind.com/components/stadium-light-beams
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { StadiumLightBeams } from "@/components/lightswind-pro/stadium-light-beams"

Usage:
```tsx
import { StadiumLightBeams } from "@/components/lightswind-pro/stadium-light-beams";

export function Demo() {
  return (
    <StadiumLightBeams className="w-full min-h-[500px] p-8">
      <div className="text-center py-20">
        <h1 className="text-4xl font-bold">Building the Future</h1>
        <p className="mt-4 text-zinc-600 dark:text-zinc-400">Join the waitlist today.</p>
      </div>
    </StadiumLightBeams>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): particles-cursor
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: WebGL GPGPU transparent cursor particle system. Thousands of physics-simulated particles emerge and dissipate from cursor position.
URL: https://lightswind.com/components/particles-cursor
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ParticlesCursor from "@/components/lightswind-pro/particles-cursor"

Usage:
```tsx
import ParticlesCursor from "@/components/lightswind-pro/particles-cursor";

export function Demo() {
  return <ParticlesCursor particleCount={1000} color="#a855f7" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): slice-cursor
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Elastic procedural trailing 2D Canvas cursor with kinetic fluid physics. The cursor leaves a slicing fluid trail that follows with spring-like elasticity.
URL: https://lightswind.com/components/slice-cursor
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import SliceCursor from "@/components/lightswind-pro/slice-cursor"

Usage:
```tsx
import SliceCursor from "@/components/lightswind-pro/slice-cursor";

export function Demo() {
  return <SliceCursor trailLength={20} springStrength={0.1} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): magnetic-cursor
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: GSAP-powered magnetic cursor with inverse color blending. Elements near the cursor get attracted magnetically and the cursor blends colors inversely.
URL: https://lightswind.com/components/magnetic-cursor
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import MagneticCursor from "@/components/lightswind-pro/magnetic-cursor"

Usage:
```tsx
import MagneticCursor from "@/components/lightswind-pro/magnetic-cursor";

export function Demo() {
  return <MagneticCursor magnetStrength={0.5} blendMode="difference" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): gooey-cursor
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Liquid blob trailing cursor effect using raw SVG Filters. The cursor leaves a gooey liquid trail that merges and separates organically.
URL: https://lightswind.com/components/gooey-cursor
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import GooeyCursor from "@/components/lightswind-pro/gooey-cursor"

Usage:
```tsx
import GooeyCursor from "@/components/lightswind-pro/gooey-cursor";

export function Demo() {
  return <GooeyCursor color="#6366f1" trailCount={5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): text-trail-cursor
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Spring-bound string following cursor with kinetic physics. A trail of characters follows the cursor in a physics-simulated chain.
URL: https://lightswind.com/components/text-trail-cursor
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TextTrailCursor from "@/components/lightswind-pro/text-trail-cursor"

Usage:
```tsx
import TextTrailCursor from "@/components/lightswind-pro/text-trail-cursor";

export function Demo() {
  return <TextTrailCursor text="✦ ✦ ✦ ✦ ✦" springStrength={0.15} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): evervault-card
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Encryption background effect tracking mouse coordinates to scramble text matrices. On hover, encrypted characters reveal content with a Matrix-like decode animation.
URL: https://lightswind.com/components/evervault-card
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import EvervaultCard from "@/components/lightswind-pro/evervault-card"

Usage:
```tsx
import EvervaultCard from "@/components/lightswind-pro/evervault-card";

export function Demo() {
  return <EvervaultCard title="Hover to Decrypt" description="Hidden content" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): bento-grid
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: High-demand masonry grid engine with responsive columns. A modern bento-style grid layout that arranges cards in an aesthetically pleasing irregular grid.
URL: https://lightswind.com/components/bento-grid
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import BentoGrid from "@/components/lightswind-pro/bento-grid"

Usage:
```tsx
import BentoGrid from "@/components/lightswind-pro/bento-grid";

export function Demo() {
  return <BentoGrid items={bentoItems} columns={3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): card-stack
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Carousel of cards with dynamic scale offsets and structural depth ordering. Cards stack visually with parallax depth effect.
URL: https://lightswind.com/components/card-stack
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import CardStack from "@/components/lightswind-pro/card-stack"

Usage:
```tsx
import CardStack from "@/components/lightswind-pro/card-stack";

export function Demo() {
  return <CardStack items={cards} offset={10} scaleFactor={0.06} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): apple-dock
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Proximity-based icon navigation bar scaling elements natively based on depth. Icons magnify as the cursor approaches, mimicking macOS Dock behavior.
URL: https://lightswind.com/components/apple-dock
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AppleDock from "@/components/lightswind-pro/apple-dock"

Usage:
```tsx
import AppleDock from "@/components/lightswind-pro/apple-dock";

const items = [{ icon: <HomeIcon />, label: "Home", href: "/" }];

export function Demo() {
  return <AppleDock items={items} magnification={1.8} distance={140} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): expandable-search
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Search icon expanding fluidly into interactive input container via Framer Motion. Smooth spring expansion with focus management.
URL: https://lightswind.com/components/expandable-search
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ExpandableSearch from "@/components/lightswind-pro/expandable-search"

Usage:
```tsx
import ExpandableSearch from "@/components/lightswind-pro/expandable-search";

export function Demo() {
  return <ExpandableSearch onSearch={(q) => console.log(q)} placeholder="Search..." />;
}
```
--------------------------------------------------

### COMPONENT (PRO): typewriter-input
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Input featuring letter-reveal keyframes and shaking feedback animation. Characters animate in with typewriter timing and shake on validation errors.
URL: https://lightswind.com/components/typewriter-input
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TypewriterInput from "@/components/lightswind-pro/typewriter-input"

Usage:
```tsx
import TypewriterInput from "@/components/lightswind-pro/typewriter-input";

export function Demo() {
  return <TypewriterInput placeholder="Type here..." typingSpeed={80} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): password-strength
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Password field with strength meter mapping and security score feedback. Displays color-coded strength indicator and contextual requirements checklist.
URL: https://lightswind.com/components/password-strength
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import PasswordStrength from "@/components/lightswind-pro/password-strength"

Usage:
```tsx
import PasswordStrength from "@/components/lightswind-pro/password-strength";

export function Demo() {
  return <PasswordStrength onStrengthChange={(score) => console.log(score)} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): otp-input
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Multi-slot OTP input with automatic focus management and fake-caret animations. Each digit slot auto-advances focus on input.
URL: https://lightswind.com/components/otp-input
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import OTPInput from "@/components/lightswind-pro/otp-input"

Usage:
```tsx
import OTPInput from "@/components/lightswind-pro/otp-input";

export function Demo() {
  return <OTPInput length={6} onComplete={(code) => console.log(code)} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): tag-input
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Animated token management field supporting tagging via keyboard. Tags animate in/out and can be removed with backspace or click.
URL: https://lightswind.com/components/tag-input
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TagInput from "@/components/lightswind-pro/tag-input"

Usage:
```tsx
import TagInput from "@/components/lightswind-pro/tag-input";

export function Demo() {
  return <TagInput placeholder="Add tags..." onChange={(tags) => console.log(tags)} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): smart-radio-group
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Selection interface utilizing background masks and iconography. Radio options display with animated highlight masks and icon support.
URL: https://lightswind.com/components/smart-radio-group
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group"

Usage:
```tsx
import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group";

const options = [
  { value: "monthly", label: "Monthly", icon: <CalendarIcon /> },
  { value: "yearly", label: "Yearly", icon: <StarIcon /> },
];

export function Demo() {
  return <SmartRadioGroup options={options} defaultValue="monthly" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): floating-label-input
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Text field featuring mathematical label transforms and underline animations. The label floats above the input with smooth CSS transform on focus/fill.
URL: https://lightswind.com/components/floating-label-input
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FloatingLabelInput from "@/components/lightswind-pro/floating-label-input"

Usage:
```tsx
import FloatingLabelInput from "@/components/lightswind-pro/floating-label-input";

export function Demo() {
  return <FloatingLabelInput label="Email Address" type="email" />;
}
```
--------------------------------------------------

### COMPONENT (PRO): file-upload
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Drag-and-drop file upload interface with real-time list animations. Files animate into a live list as they are dropped or selected.
URL: https://lightswind.com/components/file-upload
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FileUpload from "@/components/lightswind-pro/file-upload"

Usage:
```tsx
import FileUpload from "@/components/lightswind-pro/file-upload";

export function Demo() {
  return <FileUpload accept="image/*" multiple onFilesChange={(files) => console.log(files)} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): sticky-scroll-layout
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Scroll-driven layout pinning visual content while fading text nodes. Content stays sticky while corresponding text fades in/out during scroll.
URL: https://lightswind.com/components/sticky-scroll-layout
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import StickyScrollLayout from "@/components/lightswind-pro/sticky-scroll-layout"

Usage:
```tsx
import StickyScrollLayout from "@/components/lightswind-pro/sticky-scroll-layout";

export function Demo() {
  return <StickyScrollLayout content={sections} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): timeline-layout
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Vertical scrolling grid linked to an animated SVG path track. A timeline with animated connecting line that fills progressively on scroll.
URL: https://lightswind.com/components/timeline-layout
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TimelineLayout from "@/components/lightswind-pro/timeline-layout"

Usage:
```tsx
import TimelineLayout from "@/components/lightswind-pro/timeline-layout";

export function Demo() {
  return <TimelineLayout items={timelineItems} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): parallax-scroll
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Masonry grid layout offsetting columns at different velocities. Creates depth through differential column scroll speeds.
URL: https://lightswind.com/components/parallax-scroll
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ParallaxScroll from "@/components/lightswind-pro/parallax-scroll"

Usage:
```tsx
import ParallaxScroll from "@/components/lightswind-pro/parallax-scroll";

export function Demo() {
  return <ParallaxScroll images={images} speed={0.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): hero-parallax
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: 3D scrolling hero grid tilting backwards in global space. As the page scrolls, the grid of images tilts back creating a dramatic entry effect.
URL: https://lightswind.com/components/hero-parallax
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import HeroParallax from "@/components/lightswind-pro/hero-parallax"

Usage:
```tsx
import HeroParallax from "@/components/lightswind-pro/hero-parallax";

export function Demo() {
  return <HeroParallax products={products} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): container-scroll
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Device showcase layout translating and scaling isometric iPad chassis. The device transforms from an angled isometric view to full-screen as user scrolls.
URL: https://lightswind.com/components/container-scroll
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ContainerScroll from "@/components/lightswind-pro/container-scroll"

Usage:
```tsx
import ContainerScroll from "@/components/lightswind-pro/container-scroll";

export function Demo() {
  return (
    <ContainerScroll
      titleComponent={<h1>Your App</h1>}
    >
      <img src="/app-screenshot.png" alt="App screenshot" />
    </ContainerScroll>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): focus-cards
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Masonry layout implementing sibling blur-states on hover. Hovering a card blurs all siblings to bring focus to the hovered card.
URL: https://lightswind.com/components/focus-cards
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FocusCards from "@/components/lightswind-pro/focus-cards"

Usage:
```tsx
import FocusCards from "@/components/lightswind-pro/focus-cards";

export function Demo() {
  return <FocusCards cards={cards} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): layout-grid
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Fluid grid engine expanding cards visually across container on click. Cards expand to reveal more content with smooth layout animations.
URL: https://lightswind.com/components/layout-grid
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import LayoutGrid from "@/components/lightswind-pro/layout-grid"

Usage:
```tsx
import LayoutGrid from "@/components/lightswind-pro/layout-grid";

export function Demo() {
  return <LayoutGrid cards={cards} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): wobble-card
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Tilting card component relying on motion values and spring physics. Cards wobble and tilt realistically in response to mouse position.
URL: https://lightswind.com/components/wobble-card
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import WobbleCard from "@/components/lightswind-pro/wobble-card"

Usage:
```tsx
import WobbleCard from "@/components/lightswind-pro/wobble-card";

export function Demo() {
  return (
    <WobbleCard containerClassName="col-span-1">
      <p>Card Content</p>
    </WobbleCard>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): dynamic-island
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Apple-inspired layout morpher calculating structural boundaries. A UI element that smoothly morphs between different pill shapes, sizes, and liquid glassmorphism variants.
URL: https://lightswind.com/components/dynamic-island
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import DynamicIsland from "@/components/lightswind-pro/dynamic-island"

Usage:
```tsx
import DynamicIsland from "@/components/lightswind-pro/dynamic-island";

export function Demo() {
  return (
    <DynamicIsland state="long" variant="glass">
      <div className="flex items-center justify-between px-4 h-full w-full text-xs">
        <span>Call from Tim Cook</span>
      </div>
    </DynamicIsland>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): horizontal-scroll
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Side-scrolling container intercepting vertical scroll for horizontal gallery. Scrolling vertically translates to horizontal content movement.
URL: https://lightswind.com/components/horizontal-scroll
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import HorizontalScroll from "@/components/lightswind-pro/horizontal-scroll"

Usage:
```tsx
import HorizontalScroll from "@/components/lightswind-pro/horizontal-scroll";

export function Demo() {
  return (
    <HorizontalScroll>
      {panels.map((p, i) => <Panel key={i} {...p} />)}
    </HorizontalScroll>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): stacking-cards
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Vertical scrolling layout where cards layer and scale down. Each card pins to the top and the next one stacks on top as user scrolls.
URL: https://lightswind.com/components/stacking-cards
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import StackingCards from "@/components/lightswind-pro/stacking-cards"

Usage:
```tsx
import StackingCards from "@/components/lightswind-pro/stacking-cards";

export function Demo() {
  return <StackingCards cards={cards} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): scroll-stack
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Scroll-synchronized stacking layout transforming cards in 3D space. Cards stack and transform with depth as the user scrolls through the section.
URL: https://lightswind.com/components/scroll-stack
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ScrollStack from "@/components/lightswind-pro/scroll-stack"

Usage:
```tsx
import ScrollStack from "@/components/lightswind-pro/scroll-stack";

export function Demo() {
  return <ScrollStack items={items} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): animated-tooltip
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Avatar group tracking mouse movement and rotating labels dynamically. Hovering an avatar in a group shows a smooth animated tooltip.
URL: https://lightswind.com/components/animated-tooltip
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AnimatedTooltip from "@/components/lightswind-pro/animated-tooltip"

Usage:
```tsx
import AnimatedTooltip from "@/components/lightswind-pro/animated-tooltip";

const people = [
  { id: 1, name: "Alice", designation: "Engineer", image: "/alice.jpg" },
];

export function Demo() {
  return <AnimatedTooltip items={people} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): cool-bento-effect
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Expanding bento grid with Framer Motion layout physics. Grid cells expand and rearrange dynamically with spring animations.
URL: https://lightswind.com/components/cool-bento-effect
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import CoolBentoEffect from "@/components/lightswind-pro/cool-bento-effect"

Usage:
```tsx
import CoolBentoEffect from "@/components/lightswind-pro/cool-bento-effect";

export function Demo() {
  return <CoolBentoEffect items={items} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): circular-carousel
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Infinite draggable circular carousel gallery with physics inertia. Drag to rotate items around a circle with realistic momentum.
URL: https://lightswind.com/components/circular-carousel
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import CircularCarousel from "@/components/lightswind-pro/circular-carousel"

Usage:
```tsx
import CircularCarousel from "@/components/lightswind-pro/circular-carousel";

export function Demo() {
  return <CircularCarousel items={carouselItems} radius={250} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): users-circle
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A premium orbital user avatar showcase component featuring concentric dotted ring tracks, upright counter-rotating avatars, customizable radius and gap, live status indicator badges, hover tooltips, and centerpiece slot.
URL: https://lightswind.com/components/users-circle
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { UsersCircle } from "@/components/lightswind-pro/users-circle"

Usage:
```tsx
import { UsersCircle } from "@/components/lightswind-pro/users-circle";

export function Demo() {
  return (
    <div className="w-full h-[550px] relative flex items-center justify-center">
      <UsersCircle
        pathStyle="dotted"
        direction="clockwise"
        alternateDirection={true}
        pauseOnHover={true}
        avatarSize={52}
      />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): direction-aware-hover
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Hover effect calculating entry point of cursor to animate overlays. The overlay slides in from the direction the cursor entered the card.
URL: https://lightswind.com/components/direction-aware-hover
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import DirectionAwareHover from "@/components/lightswind-pro/direction-aware-hover"

Usage:
```tsx
import DirectionAwareHover from "@/components/lightswind-pro/direction-aware-hover";

export function Demo() {
  return (
    <DirectionAwareHover imageUrl="/image.jpg">
      <p>Hover reveal content</p>
    </DirectionAwareHover>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): exclusive-tab
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Liquid staggered highlight tab control powered by Framer Motion. Tab selection animates with a fluid sliding highlight underneath.
URL: https://lightswind.com/components/exclusive-tab
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ExclusiveTab from "@/components/lightswind-pro/exclusive-tab"

Usage:
```tsx
import ExclusiveTab from "@/components/lightswind-pro/exclusive-tab";

export function Demo() {
  return <ExclusiveTab tabs={tabs} defaultTab={0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): fancy-cards
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Arc gallery of cards leveraging modern CSS offset paths. Cards arrange along a curved arc path with hover animations.
URL: https://lightswind.com/components/fancy-cards
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FancyCards from "@/components/lightswind-pro/fancy-cards"

Usage:
```tsx
import FancyCards from "@/components/lightswind-pro/fancy-cards";

export function Demo() {
  return <FancyCards cards={cards} arcRadius={300} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): falling-sections
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Stacked collapsing panels utilizing GSAP pinned scroll mechanics. Section panels fall away as you scroll, revealing the next one beneath.
URL: https://lightswind.com/components/falling-sections
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FallingSections from "@/components/lightswind-pro/falling-sections"

Usage:
```tsx
import FallingSections from "@/components/lightswind-pro/falling-sections";

export function Demo() {
  return <FallingSections sections={sections} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): flying-bird-3d
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Scroll-driven 3D bird model flying along a GSAP motion path. A 3D bird model follows a curved path as the user scrolls.
URL: https://lightswind.com/components/flying-bird-3d
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FlyingBird3D from "@/components/lightswind-pro/flying-bird-3d"

Usage:
```tsx
import FlyingBird3D from "@/components/lightswind-pro/flying-bird-3d";

export function Demo() {
  return <FlyingBird3D pathColor="#a855f7" speed={1.0} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): infinite-webgl-scroll
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Infinite 2D canvas WebGL scroll gallery with displacement physics. Images warp and distort as the canvas scrolls infinitely.
URL: https://lightswind.com/components/infinite-webgl-scroll
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import InfiniteWebGLScroll from "@/components/lightswind-pro/infinite-webgl-scroll"

Usage:
```tsx
import InfiniteWebGLScroll from "@/components/lightswind-pro/infinite-webgl-scroll";

export function Demo() {
  return <InfiniteWebGLScroll images={images} displacementScale={0.3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): morph-carousel
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: WebGL-based carousel featuring noise-based morphing transitions. Images morph between each other with organic liquid-like transitions.
URL: https://lightswind.com/components/morph-carousel
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import MorphCarousel from "@/components/lightswind-pro/morph-carousel"

Usage:
```tsx
import MorphCarousel from "@/components/lightswind-pro/morph-carousel";

export function Demo() {
  return <MorphCarousel images={images} morphSpeed={1.5} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): morphing-switch
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Multi-level switch with fluid morphing sub-tier transitions. A switch that morphs its shape between states revealing nested controls.
URL: https://lightswind.com/components/morphing-switch
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import MorphingSwitch from "@/components/lightswind-pro/morphing-switch"

Usage:
```tsx
import MorphingSwitch from "@/components/lightswind-pro/morphing-switch";

export function Demo() {
  return <MorphingSwitch options={options} onChange={(v) => console.log(v)} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): shimmer-accordion
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: FAQ accordion revealed with gradient shimmer sweeps. Accordion items animate open with a shimmer effect across the content.
URL: https://lightswind.com/components/shimmer-accordion
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ShimmerAccordion from "@/components/lightswind-pro/shimmer-accordion"

Usage:
```tsx
import ShimmerAccordion from "@/components/lightswind-pro/shimmer-accordion";

const items = [
  { question: "What is Lightswind?", answer: "A premium React component library." }
];

export function Demo() {
  return <ShimmerAccordion items={items} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): meteor-impact-effect
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Meteor impacts triggering particle explosions on border collision. Meteorites streak across the card border triggering explosion effects on impact.
URL: https://lightswind.com/components/meteor-impact-effect
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import MeteorImpactEffect from "@/components/lightswind-pro/meteor-impact-effect"

Usage:
```tsx
import MeteorImpactEffect from "@/components/lightswind-pro/meteor-impact-effect";

export function Demo() {
  return (
    <MeteorImpactEffect meteorCount={10} explosionRadius={30}>
      <div className="p-8">Card Content</div>
    </MeteorImpactEffect>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): meteor-impact-border
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Glow meteor tail tracing perimeter border continuously. A glowing meteor travels along the card border leaving a luminous trail.
URL: https://lightswind.com/components/meteor-impact-border
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import MeteorImpactBorder from "@/components/lightswind-pro/meteor-impact-border"

Usage:
```tsx
import MeteorImpactBorder from "@/components/lightswind-pro/meteor-impact-border";

export function Demo() {
  return (
    <MeteorImpactBorder glowColor="#a855f7" speed={3}>
      <div className="p-6">Card Content</div>
    </MeteorImpactBorder>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): animated-meteors-link
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A dynamic, high-performance meteor connection component connecting DOM elements with curved Bezier vector paths, shooting meteor trails, impact spark droplets, and interactive color themes.
URL: https://lightswind.com/components/animated-meteors-link
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import { AnimatedMeteorsLink } from "@/components/lightswind-pro/animated-meteors-link"

Usage:
```tsx
import { useRef } from "react";
import { AnimatedMeteorsLink } from "@/components/lightswind-pro/animated-meteors-link";

export function Demo() {
  const containerRef = useRef(null);
  const sourceRef = useRef(null);
  const targetRef = useRef(null);

  return (
    <div ref={containerRef} className="relative flex justify-between p-12">
      <div ref={sourceRef}>Source Node</div>
      <div ref={targetRef}>Target Node</div>

      <AnimatedMeteorsLink
        containerRef={containerRef}
        sourceRef={sourceRef}
        targetRef={targetRef}
        curvature={45}
        meteorCount={2}
        duration={3}
        themePreset="cyber-neon"
        bidirectional={true}
        enableSplash={true}
      />
    </div>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): animated-cart-button
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Interactive cart button with physical 3D drop animations. Items visually drop into the cart with a satisfying 3D bounce animation.
URL: https://lightswind.com/components/animated-cart-button
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import AnimatedCartButton from "@/components/lightswind-pro/animated-cart-button"

Usage:
```tsx
import AnimatedCartButton from "@/components/lightswind-pro/animated-cart-button";

export function Demo() {
  return <AnimatedCartButton onAdd={() => console.log("Added!")} itemCount={3} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): magnifying-zoom
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: A professional, highly animated premium component.
URL: https://lightswind.com/components/magnifying-zoom
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
--------------------------------------------------

### COMPONENT (PRO): gooey-text
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Liquid typography transition effect with CSS combination filters. Text transitions between states with organic gooey liquid morphing.
URL: https://lightswind.com/components/gooey-text
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import GooeyText from "@/components/lightswind-pro/gooey-text"

Usage:
```tsx
import GooeyText from "@/components/lightswind-pro/gooey-text";

export function Demo() {
  return <GooeyText words={["Hello", "World", "Lightswind"]} duration={2000} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): scroll-ring-text
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Kinetic ring of letters assembling via GSAP scroll tying. Letters arrange in a circular path and animate based on scroll position.
URL: https://lightswind.com/components/scroll-ring-text
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import ScrollRingText from "@/components/lightswind-pro/scroll-ring-text"

Usage:
```tsx
import ScrollRingText from "@/components/lightswind-pro/scroll-ring-text";

export function Demo() {
  return <ScrollRingText text="LIGHTSWIND · PRO · COMPONENTS · " radius={80} />;
}
```
--------------------------------------------------

### COMPONENT (PRO): flip-words
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Typography animation flipping through choices with physics bounds. Words flip in like cards with a 3D perspective flip effect.
URL: https://lightswind.com/components/flip-words
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import FlipWords from "@/components/lightswind-pro/flip-words"

Usage:
```tsx
import FlipWords from "@/components/lightswind-pro/flip-words";

export function Demo() {
  return (
    <h1>
      Build <FlipWords words={["faster", "smarter", "beautifully"]} /> with Lightswind
    </h1>
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): text-reveal-card
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Mouse-tracking hover effect progressively revealing underlying text. Hovering reveals hidden text beneath with a spotlight effect.
URL: https://lightswind.com/components/text-reveal-card
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TextRevealCard from "@/components/lightswind-pro/text-reveal-card"

Usage:
```tsx
import TextRevealCard from "@/components/lightswind-pro/text-reveal-card";

export function Demo() {
  return (
    <TextRevealCard
      text="You know the business"
      revealText="I know the chemistry"
    />
  );
}
```
--------------------------------------------------

### COMPONENT (PRO): text-generate-effect
Category: Pro Components
Access Level: Premium Pro Component (Source code excluded)
Description: Cinematic staggered blur fade-in for statements. Words appear with a sequenced blur-to-sharp animation creating a cinematic text reveal.
URL: https://lightswind.com/components/text-generate-effect
How to Unlock: Upgrade to Lightswind Pro at https://lightswind.com/pricing to unlock the source code and dashboard access for this component.
Import: import TextGenerateEffect from "@/components/lightswind-pro/text-generate-effect"

Usage:
```tsx
import TextGenerateEffect from "@/components/lightswind-pro/text-generate-effect";

export function Demo() {
  return <TextGenerateEffect words="The future of UI is here." duration={0.5} />;
}
```
--------------------------------------------------


--- BLOCKS (418 TOTAL: 67 ANIMATED, 351 PROFESSIONAL) ---

--- ANIMATED BLOCKS (METADATA ONLY) (67 Blocks across 21 Categories) ---

## BLOCK CATEGORY (ANIMATED): Animated 3D Blocks (9)
Description: Production WebGL, Three.js, and Rapier physics 3D interactive hero and card components.
URL: https://lightswind.com/blocks/animated-3d-blocks

### BLOCK (ANIMATED PRO): animated-3dblock01
Title: Animated Infinite 3D Carousel Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A high-performance 3D infinite carousel component built with React and GSAP, featuring scroll-triggered animations, smooth color transitions, and overlapping panel cards.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock02
Title: Animated Levitating 3D Geometric Shapes
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive hero background featuring floating, interactive geometric 3D shapes built with React Three Fiber, WebGL lighting, and smooth mouse physics.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock03
Title: Animated Interactive 3D World Globe
Access Level: Premium Pro Block (Source code excluded)
Description: A rotatable interactive 3D globe with custom location markers, global network arcs, and smooth momentum physics for visualizing global infrastructure.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock04
Title: Animated Scroll-Driven 3D Laptop Mockup
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity 3D laptop model that smoothly opens, rotates, and closes based on scroll position, featuring customizable high-resolution screen contents.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock04
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock05
Title: Animated 3D Smartphone Product Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A realistic 3D smartphone mockup for showcasing mobile apps and responsive interfaces with interactive 3D rotation and specular highlights.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock05
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock06
Title: Animated Glassmorphic 3D Depth Tunnel
Access Level: Premium Pro Block (Source code excluded)
Description: An abstract 3D tunnel component with glassmorphic materials, depth-of-field blur, and dynamic mouse lighting for immersive landing page backgrounds.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock06
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock07
Title: Animated Interactive Particle Wave Field
Access Level: Premium Pro Block (Source code excluded)
Description: A fluid, interactive 3D particle wave simulation responding dynamically to cursor position with undulating sine waves and glowing color spectrums.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock07
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock08
Title: Animated Spatial 3D Orbital Feature Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: An immersive 3D orbital showcase where floating spatial UI cards deconstruct, rotate, and align based on scroll position and viewport focus.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock08
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-3dblock09
Title: Animated Interactive 3D Orbital Planet System
Access Level: Premium Pro Block (Source code excluded)
Description: A WebGL-powered 3D planetary simulation featuring customizable terrestrial, gaseous, and stellar atmospheric shaders with physics-based mouse interactions.
URL: https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock09
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated AI Prompt (2)
Description: Volumetric WebGL AI prompt builders, agent prompt input fields with border beam raytracing, and quick action preset pills.
URL: https://lightswind.com/blocks/animated-ai-prompt

### BLOCK (ANIMATED PRO): animated-aiprompt01
Title: Animated AI Agent Beam Glow Prompt Box
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive AI prompt input box featuring animated beam flow border glow, specialist agent dropdown selector, file attachments, and quick-action prompt presets.
URL: https://lightswind.com/blocks/animated-ai-prompt/animated-aiprompt01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-aiprompt02
Title: Animated Multi-Border AI Prompt & Steer Controls
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive multi-border AI prompt card featuring context steering pills, editable tags, reasoning model selectors, voice audio input, and animated status triggers.
URL: https://lightswind.com/blocks/animated-ai-prompt/animated-aiprompt02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Analytics (2)
Description: Interactive animated analytics charts, live revenue maps, donut metrics, and executive telemetry dashboards.
URL: https://lightswind.com/blocks/animated-analytics

### BLOCK (ANIMATED PRO): animated-analytics01
Title: Animated Financial Analytics Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive financial analytics dashboard featuring a multi-section left navigation sidebar, 3 telemetry summary cards with mini bar sparklines, an interactive monthly usage bar chart with floating tooltips, and a transaction history log.
URL: https://lightswind.com/blocks/animated-analytics/animated-analytics01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-analytics02
Title: Animated 3-Column SaaS Financial Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: An ultimate 3-column financial analytics workspace featuring a left collapsible navigation sidebar, 3 summary telemetry cards, an interactive 12-month usage bar chart, transaction log with authentic brand vector logos, metallic silver VISA card, and budget savings breakdown.
URL: https://lightswind.com/blocks/animated-analytics/animated-analytics02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Authentication (4)
Description: Interactive animated authentication portals, liquid glass login cards, OTP verification, and biometric security flows.
URL: https://lightswind.com/blocks/animated-auth

### BLOCK (ANIMATED PRO): authworldmap01
Title: Animated Global World Map Authentication Portal
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting global SaaS authentication and login portal featuring an interactive dotted vector world map, live multi-timezone beacon pings with city tooltips, dynamic UTC timezone ticker, OAuth login, and responsive glassmorphic card.
URL: https://lightswind.com/blocks/animated-auth/authworldmap01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-login05
Title: Animated Shield Glassmorphism Login Card
Access Level: Premium Pro Block (Source code excluded)
Description: A secure, high-converting React login card component featuring a floating security shield badge, animated rotating gradient background shader, rounded pill input fields, and social OAuth login buttons.
URL: https://lightswind.com/blocks/animated-auth/animated-login05
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-login06
Title: Animated SSO Dot Pattern Sign In Section
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise-grade React sign-in section featuring interactive dot background matrix pattern accents, Single Sign-On (SSO) integration, Google & Microsoft OAuth, and responsive dark mode support.
URL: https://lightswind.com/blocks/animated-auth/animated-login06
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-signup03
Title: Animated Split Screen Sign Up & Registration Page
Access Level: Premium Pro Block (Source code excluded)
Description: A modern conversion-focused split-screen sign up and registration page with an interactive user onboarding form on the left and a dynamic live dashboard preview with customer testimonial on the right.
URL: https://lightswind.com/blocks/animated-auth/animated-signup03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Background (2)
Description: High-performance Canvas and WebGL animated background effects, particle meshes, and gradient waves.
URL: https://lightswind.com/blocks/animated-background

### BLOCK (ANIMATED PRO): animated-background06
Title: Animated Grain Background
Access Level: Premium Pro Block (Source code excluded)
Description: An atmospheric animated React background block featuring the AnimatedGrain WebGL shader, 8 curated color palette presets, 3 analog dither matrices (Bayer, Crosshatch, Hash), real-time shader controls, and dynamic cursor turbulence.
URL: https://lightswind.com/blocks/animated-background/animated-background06
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-background07
Title: Animated Stepped Gradient Light Beams Background
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive animated background component featuring stepped vertical glowing light beams, soft ambient diffusion, dynamic ripple click physics, 4 rich color presets (Sunset, Amber, Emerald, Violet), and full light/dark mode support.
URL: https://lightswind.com/blocks/animated-background/animated-background07
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Card (7)
Description: Interactive 3D tilt cards, holographic borders, animated glassmorphism containers, and glowing hover states.
URL: https://lightswind.com/blocks/animated-card

### BLOCK (ANIMATED PRO): animated-card01
Title: Animated 3D Interactive Profile Card Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: Interactive 3D profile and creator cards featuring dynamic hover tilt effects, following state management, smooth animated gradients, and full light/dark theme support.
URL: https://lightswind.com/blocks/animated-card/animated-card01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card05
Title: Animated Cybernetic Sales & Revenue Analytics Card
Access Level: Premium Pro Block (Source code excluded)
Description: A futuristic cybernetic analytics card featuring neon glowing indicators, multi-metric tab switching (Sales, Revenue, Conversions, Engagement), interactive monthly telemetry bars, and floating cursor tooltips.
URL: https://lightswind.com/blocks/animated-card/animated-card05
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card06
Title: Animated Gaussian Peak Conversion Analytics Card
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive conversion analytics card with timeframe filtering (Daily, Weekly, Monthly, Quarterly), animated SVG spline wave curves, dynamic peak pulse highlights, and live conversion telemetry.
URL: https://lightswind.com/blocks/animated-card/animated-card06
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card07
Title: Animated Sunset Revenue Flow Bar Analytics Card
Access Level: Premium Pro Block (Source code excluded)
Description: A sleek financial analytics card with warm sunset ambient glow flares, monthly revenue timeline switching, interactive vertical telemetry progress bars, and floating metric tooltips.
URL: https://lightswind.com/blocks/animated-card/animated-card07
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card02
Title: Animated Interactive Magic Card Showcase Grid
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive spotlight card grid featuring smooth cursor hover reveal animations, dynamic media spotlight glow, and seamless light/dark mode adaptation.
URL: https://lightswind.com/blocks/animated-card/animated-card02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card03
Title: Animated ASCII Data Wave Developer Card
Access Level: Premium Pro Block (Source code excluded)
Description: A developer-focused product feature card featuring a dynamic real-time Canvas ASCII wave animation, Firecrawl-inspired typography, call-to-action button, and smooth gradient blending.
URL: https://lightswind.com/blocks/animated-card/animated-card03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-card04
Title: Animated 3D E-Commerce Product Spotlight Card
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-sleek, feature-packed e-commerce product card featuring 3D floating hover image physics, interactive color variant swatches, size selector, quick-view modal drawer, and full dark/light theme support.
URL: https://lightswind.com/blocks/animated-card/animated-card04
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Career (1)
Description: Interactive animated job board listings, applicant tracking cards, and team perk showcases.
URL: https://lightswind.com/blocks/animated-career

### BLOCK (ANIMATED PRO): animated-career01
Title: Animated Interactive Career Experience Timeline
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive career journey and experience timeline component featuring a smooth draggable vertical year ruler, glowing dynamic spotlight curve, detailed milestone cards, key achievements, and tech stack pills.
URL: https://lightswind.com/blocks/animated-career/animated-career01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Connect & Integrations (2)
Description: Interactive animated integrations flow blocks with particle rays connecting SaaS apps to backend AI pipelines.
URL: https://lightswind.com/blocks/animated-connect

### BLOCK (ANIMATED PRO): animated-connect-01
Title: Animated AI SaaS Integrations Connect Flow
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive SaaS integration node network connecting 15+ popular productivity tools (Zoom, Gmail, Slack, Notion, Drive) into a centralized AI vector pipeline with animated data stream pulses.
URL: https://lightswind.com/blocks/animated-connect/animated-connect-01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-connect-02
Title: Animated Hub & Spoke Central AI Orchestrator
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive hub-and-spoke AI integration diagram featuring metallic border shine cards, animated SVG Bezier light beams, interactive node focus states, and dual light/dark theme support.
URL: https://lightswind.com/blocks/animated-connect/animated-connect-02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Dashboard (2)
Description: High-density animated SaaS telemetry dashboards, real-time widget grids, and live metric streams.
URL: https://lightswind.com/blocks/animated-dashboard

### BLOCK (ANIMATED PRO): animated-dashboard01
Title: Animated Financial Analytics Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive financial analytics dashboard featuring a multi-section left navigation sidebar, 3 telemetry summary cards with mini bar sparklines, an interactive monthly usage bar chart with floating tooltips, and a transaction history log.
URL: https://lightswind.com/blocks/animated-dashboard/animated-dashboard01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-dashboard02
Title: Animated 3-Column SaaS Financial Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: An ultimate 3-column financial analytics workspace featuring a left collapsible navigation sidebar, 3 summary telemetry cards, an interactive 12-month usage bar chart, transaction log with authentic brand vector logos, metallic silver VISA card, and budget savings breakdown.
URL: https://lightswind.com/blocks/animated-dashboard/animated-dashboard02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Dropdown (1)
Description: Interactive glassmorphic dropdowns, Command-K search palettes, popover menus, and multi-border select triggers.
URL: https://lightswind.com/blocks/animated-dropdown

### BLOCK (ANIMATED PRO): animated-dropdown01
Title: Animated Command-K Search & Autocomplete Dropdown
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive glassmorphic Command-K search and autocomplete dropdown menu. Features an animated glowing border beam search input, keyboard navigation (⌘K, ↑↓, ↵), live category filter pills, status badges, and dual light/dark theme support.
URL: https://lightswind.com/blocks/animated-dropdown/animated-dropdown01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated E-Commerce (1)
Description: Interactive animated e-commerce checkout flows, product carousels, floating cart drawers, and payment confirmation circuits.
URL: https://lightswind.com/blocks/animated-ecommerce

### BLOCK (ANIMATED PRO): animated-ecommercejacket01
Title: Animated Color Morphing Product Hero Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive e-commerce product hero section featuring real-time radial gradient background color morphing, apparel color variant swatches, dynamic pricing telemetry, size selector, and smooth slider transitions.
URL: https://lightswind.com/blocks/animated-ecommerce/animated-ecommercejacket01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Features (1)
Description: Interactive Bento feature blocks with animated marquees, scheduled payment flows, live transaction feeds, and real-time expense bar charts.
URL: https://lightswind.com/blocks/animated-features

### BLOCK (ANIMATED PRO): animated-features-01
Title: Animated Fintech & Payment Features Bento Grid
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive 4-card SaaS Bento grid section showcasing automated payment scheduling circuits, multi-gateway marquee ticker (Stripe, Apple Pay, PayPal), live transaction notification feed, and real-time expense telemetry chart.
URL: https://lightswind.com/blocks/animated-features/animated-features-01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Forms (3)
Description: Multi-step interactive animated forms, liquid input fields, validation animations, and survey wizards.
URL: https://lightswind.com/blocks/animated-forms

### BLOCK (ANIMATED PRO): animated-login07
Title: Animated Gravity Particle Electric Sign In Form
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting React sign-in card component featuring an interactive gravity particle electric submit button, dynamic SVG turbulence displacement filters, floating inputs, and multi-provider social auth.
URL: https://lightswind.com/blocks/animated-forms/animated-login07
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-login08
Title: Animated 3D Concentric Wave Ripple Sign In Form
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive sign-in form component featuring a 3D animated WebGL concentric bottom wave ripple background, glowing glassmorphic card layout, and animated border beam accents.
URL: https://lightswind.com/blocks/animated-forms/animated-login08
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-login09
Title: Animated Wavy Glass Ribbon Shader Sign In Form
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-sleek React sign-in form featuring a custom WebGL vertical waving glass ribbon shader effect, glassmorphic card layout, animated border beam, and smooth interactive inputs.
URL: https://lightswind.com/blocks/animated-forms/animated-login09
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Hero (11)
Description: Next-gen animated hero sections featuring WebGL particle fields, glowing beam borders, interactive prompt cards, and neural meshes.
URL: https://lightswind.com/blocks/animated-hero

### BLOCK (ANIMATED PRO): animated-hero17
Title: Animated AI Specialist Marketplace Hero Section
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive AI agent and specialist marketplace hero section featuring an animated glowing spotlight beam, interactive agent matching prompt builder, and dynamic specialist category dropdowns.
URL: https://lightswind.com/blocks/animated-hero/animated-hero17
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero21
Title: Animated Metallic Slanted Beams Launcher Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A developer-focused app launcher hero section featuring interactive 3D metallic slanted light beams with cursor glint tracking, command bar search shortcut display, and responsive navigation.
URL: https://lightswind.com/blocks/animated-hero/animated-hero21
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero18
Title: Animated Cosmic Audio Telemetry & Music Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A music streaming and audio telemetry SaaS landing hero featuring a cosmic starfield background, interactive spinning vinyl disc player, live play metrics, and audience tab switching.
URL: https://lightswind.com/blocks/animated-hero/animated-hero18
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero20
Title: Animated Stadium Light Beams Waitlist Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting startup waitlist launch hero featuring animated atmospheric stadium spotlight rays, live spot reservation counter, early access badges, and instant invite email form.
URL: https://lightswind.com/blocks/animated-hero/animated-hero20
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero19
Title: Animated Concentric Ripple Web3 Crypto Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A Web3 and crypto SaaS landing hero section featuring animated concentric wave ripple rings, live crypto token metrics, floating telemetry badges, and dual call-to-action buttons.
URL: https://lightswind.com/blocks/animated-hero/animated-hero19
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero14
Title: Animated Autonomous AI Workflow Engine Hero
Access Level: Premium Pro Block (Source code excluded)
Description: An autonomous AI execution engine hero section featuring a 3D animated wavy ripple background, interactive multi-card slide gallery, real-time neural memory stats, and dual theme support.
URL: https://lightswind.com/blocks/animated-hero/animated-hero14
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero15
Title: Animated Edge AI Inference & Cloud Network Hero
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise cloud and edge AI inference hero section featuring custom WebGL raytracing top-right light rays, global edge network latency telemetry, and interactive node deployment controls.
URL: https://lightswind.com/blocks/animated-hero/animated-hero15
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero16
Title: Animated Aurora Shader AI Prompt Builder Hero
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive AI prompt crafting studio hero featuring a dynamic WebGL Aurora shader background, real-time prompt generation playground, category filter chips, and sliding logo marquee.
URL: https://lightswind.com/blocks/animated-hero/animated-hero16
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero22
Title: Animated AI Agent Hero Section
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive AI agent orchestration hero section featuring WebGL domain-warping Animated Flow background shader, real-time agent command prompt builder, live flow color palette controls, and interactive AI agent button cards.
URL: https://lightswind.com/blocks/animated-hero/animated-hero22
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero23
Title: Animated AI Studio Hero Section
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive all-in-one AI Studio hero section with Animated Grain background shader, live interactive workspace showcase with switchable Code, UI Design, Copywriting, and Analytics preview playgrounds.
URL: https://lightswind.com/blocks/animated-hero/animated-hero23
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-hero24
Title: Animated 3D Interactive Globe Hero Section
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive dual-theme global edge infrastructure hero section featuring a 3D procedural Three.js rotating dot globe, 60fps hardware-accelerated motion tracking HUD cards, curved cutout header notch, and dual-theme inversion.
URL: https://lightswind.com/blocks/animated-hero/animated-hero24
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Menubar (3)
Description: Floating liquid menubars, animated tab indicators, and glassmorphic header navigation.
URL: https://lightswind.com/blocks/animated-menubar

### BLOCK (ANIMATED PRO): animated-menubar01
Title: Animated Morphing Curved Notch Floating Menubar
Access Level: Premium Pro Block (Source code excluded)
Description: An animated floating menubar component featuring an organic Bezier curve cutout notch that glides smoothly with spring motion across active navigation tabs.
URL: https://lightswind.com/blocks/animated-menubar/animated-menubar01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-menubar02
Title: Animated iOS Labeled Cutout Notch Pill Menubar
Access Level: Premium Pro Block (Source code excluded)
Description: An animated iOS-style bottom floating pill menubar featuring labeled tabs, organic Bezier cutout notch glide, elevated active circle indicator, and bottom home bar element.
URL: https://lightswind.com/blocks/animated-menubar/animated-menubar02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-menubar03
Title: Animated Frosted Glass Team & Settings Menubar
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-sleek frosted glass floating menubar block featuring dual team avatar stack, live activity badges, active spring hover capsule, biometric touch ID reset, privacy toggle switch, and interactive drill-down menus.
URL: https://lightswind.com/blocks/animated-menubar/animated-menubar03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Sidebar (5)
Description: Collapsible animated sidebars with smooth spring physics, active indicator glows, and workspace switchers.
URL: https://lightswind.com/blocks/animated-sidebar

### BLOCK (ANIMATED PRO): animated-sidebar08
Title: Animated Collapsible Sidebar App Shell Layout
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive animated SaaS sidebar and app shell layout component. Features Framer Motion layoutId smooth sliding active tab highlight with glowing pink neon indicator, collapsible/expandable sidebar toggle physics, workspace switcher dropdown, dynamic view switching, and full Light/Dark mode support.
URL: https://lightswind.com/blocks/animated-sidebar/animated-sidebar08
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-sidebar09
Title: Animated Multi-Border Collapsible Sidebar Navigation
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive collapsible sidebar navigation block featuring dual collapsed icon rail and expanded views, multi-border menu items with Framer Motion layout animations, active pill highlights, keyboard toggle shortcuts, and a live activity telemetry widget.
URL: https://lightswind.com/blocks/animated-sidebar/animated-sidebar09
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-sidebar10
Title: Animated Interactive Career Timeline Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive career journey and experience timeline component featuring a smooth draggable vertical year ruler, glowing dynamic spotlight curve, detailed milestone cards, key achievements, and tech stack pills.
URL: https://lightswind.com/blocks/animated-sidebar/animated-sidebar10
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-sidebar11
Title: Animated VisionOS Liquid Glass Pill Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: An authentic Apple VisionOS 3D Liquid Glass vertical pill sidebar block featuring specular crystal glare highlights, morphing liquid active bubble indicators, logo hover toggle, and dual Light & Dark theme support.
URL: https://lightswind.com/blocks/animated-sidebar/animated-sidebar11
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-sidebar12
Title: Animated macOS Liquid Glass Sidebar Navigation
Access Level: Premium Pro Block (Source code excluded)
Description: An authentic Apple macOS Liquid Glass translucent sidebar block featuring true SVG lens refraction displacement, traffic light controls, workspace selector, dual expanded & mini-rail modes, and atmospheric backdrop.
URL: https://lightswind.com/blocks/animated-sidebar/animated-sidebar12
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Upload (2)
Description: Interactive animated glassmorphic upload progress cards, drag-and-drop dropzones, and luminous neon beam telemetry.
URL: https://lightswind.com/blocks/animated-upload

### BLOCK (ANIMATED PRO): animated-upload01
Title: Animated Neon Beam File Upload Card
Access Level: Premium Pro Block (Source code excluded)
Description: A glassmorphic file upload progress card featuring real-time drag-and-drop ingestion, glowing neon progress beam, live telemetry counter, and multi-file preset tags.
URL: https://lightswind.com/blocks/animated-upload/animated-upload01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-upload02
Title: Animated Multi-File Asset Dropzone Pipeline
Access Level: Premium Pro Block (Source code excluded)
Description: A multi-file upload manager featuring real-time progressive streaming, drag-and-drop dropzone, individual item controls, and live batch telemetry.
URL: https://lightswind.com/blocks/animated-upload/animated-upload02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Profile (3)
Description: Interactive animated social profile cards, radiant glowing contour banners, verified identity badges, and developer HUD telemetry showcases.
URL: https://lightswind.com/blocks/animated-profile

### BLOCK (ANIMATED PRO): animated-profile01
Title: Animated Glowing Contour Social Profile Card
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive animated social profile card featuring luminous contour lines, live status beacon, interactive follow state toggle, and audio voice intro waveform.
URL: https://lightswind.com/blocks/animated-profile/animated-profile01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-profile02
Title: Animated Creative Studio Agency Profile Card
Access Level: Premium Pro Block (Source code excluded)
Description: A glassmorphic creative studio team showcase card featuring overlapping grayscale team avatars, glowing step dashes, radiant indigo aurora flare, and interactive slide transitions.
URL: https://lightswind.com/blocks/animated-profile/animated-profile02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-profile03
Title: Animated Cybernetic Developer Identity HUD Card
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive developer HUD identity card featuring a cybernetic laser banner, live local clock, interactive tabbed skills matrix with animated progress bars, and GitHub contribution heatmap.
URL: https://lightswind.com/blocks/animated-profile/animated-profile03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated OTP (1)
Description: Interactive animated one-time password (OTP) verification cards, overhead radiant spotlights, floating mailboxes, and auto-focus glass inputs.
URL: https://lightswind.com/blocks/animated-otp

### BLOCK (ANIMATED PRO): animated-otp01
Title: Animated Cosmic Spotlight OTP Verification Card
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive glassmorphic OTP verification card featuring a radiant overhead spotlight cone, floating 3D inbox mailbox, auto-focusing numeric glass inputs, and live resend timer.
URL: https://lightswind.com/blocks/animated-otp/animated-otp01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Pricing (4)
Description: Interactive animated pricing tiers, stadium beam spotlights, orbital specular glass cards, metallic layered matrix tiers, billing period switches, and dynamic discount calculators.
URL: https://lightswind.com/blocks/animated-pricing

### BLOCK (ANIMATED PRO): animated-pricing01
Title: Animated Flow 3-Tier Pricing Table
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting 3-tier metallic layered pricing section with discount pill switch, fluid WebGL AnimatedFlow featured Pro tier, and comprehensive feature checklists.
URL: https://lightswind.com/blocks/animated-pricing/animated-pricing01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-pricing02
Title: Animated Orbital Glassmorphism Pricing Table
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive glassmorphic pricing section featuring Month/Quarter/Year billing switcher, radiant violet Pro card, obsidian Enterprise card, and overhead orbital specular arcs.
URL: https://lightswind.com/blocks/animated-pricing/animated-pricing02
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-pricing03
Title: Animated AI Agent Pricing Table with Wave Mesh
Access Level: Premium Pro Block (Source code excluded)
Description: A 3-tier AI agent pricing section featuring dynamic monthly/annual billing switcher, featured Pro card with animated dot wave background, animated CountUp prices, and dual theme support.
URL: https://lightswind.com/blocks/animated-pricing/animated-pricing03
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (ANIMATED PRO): animated-pricing04
Title: Animated 3D Morphing Stack Pricing Cards
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive upgrade panel featuring a 3D morphing stacked card deck for AI agent and serverless GPU compute tiers, live billing-cycle discount switcher, and real-time order breakdown.
URL: https://lightswind.com/blocks/animated-pricing/animated-pricing04
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (ANIMATED): Animated Subscription (1)
Description: Interactive subscription offer ladders, reactivation retention funnels, discounted step matrices, and one-click reactivation flows.
URL: https://lightswind.com/blocks/animated-subscription

### BLOCK (ANIMATED PRO): animated-subscription01
Title: Animated Subscription Reactivation Offer Ladder
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive vertical subscription offer ladder featuring a dynamic 3-step discount progression, dashed stepper track, glowing amber retention tier, and one-click reactivation action.
URL: https://lightswind.com/blocks/animated-subscription/animated-subscription01
How to Unlock: This is a premium animated layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------


--- PROFESSIONAL BLOCKS (METADATA ONLY) (351 Blocks across 58 Categories) ---

## BLOCK CATEGORY (PRO): Animated Analytics (14)
Description: Interactive animated analytics charts, live revenue maps, donut metrics, and executive telemetry dashboards.
URL: https://lightswind.com/blocks/animated-analytics

### BLOCK (PRO): analyticschart01
Title: Animated Revenue Chart
Access Level: Premium Pro Block (Source code excluded)
Description: A premium SVG line and area chart featuring dynamic path-drawing animations entirely powered by Framer Motion. Uses an interactive hover grid for rich tooltips.
URL: https://lightswind.com/blocks/animated-analytics/analyticschart01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analyticspie01
Title: Dynamic Donut Analytics
Access Level: Premium Pro Block (Source code excluded)
Description: A structurally pure SVG donut chart showing traffic acquisition. Computes strokes dynamically and features an active legend targeting specific data slices.
URL: https://lightswind.com/blocks/animated-analytics/analyticspie01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics03
Title: Enterprise Infrastructure Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: Real-time enterprise infrastructure monitoring dashboard. Features global heatmaps, server health status, and network latency graphs. Built for high-scale applications requiring instant data feedback.
URL: https://lightswind.com/blocks/animated-analytics/analytics03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics04
Title: Global Revenue Heatmap
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive geographical heatmap for tracking real-time global revenue distribution. Features localized data drill-downs and animated growth indicators for high-level business intelligence.
URL: https://lightswind.com/blocks/animated-analytics/analytics04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics05
Title: LLM Intelligence Engine
Access Level: Premium Pro Block (Source code excluded)
Description: Premium real-time computational monitoring and sandbox calculator dashboard for multi-model LLM inference gateways.
URL: https://lightswind.com/blocks/animated-analytics/analytics05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics06
Title: Neural Analytics Core
Access Level: Premium Pro Block (Source code excluded)
Description: A professional
URL: https://lightswind.com/blocks/animated-analytics/analytics06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics07
Title: Conversion Engine Manifest
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity conversion and traffic analytics dashboard. Features a sophisticated funnel visualization, vertical traffic source bars, and status-aware infrastructure headers.
URL: https://lightswind.com/blocks/animated-analytics/analytics07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics08
Title: User Behavior Tracker
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime behavior analytics dashboard monitoring page sessions, bounce rates, interaction event streams, and device saturation.
URL: https://lightswind.com/blocks/animated-analytics/analytics08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics09
Title: Portfolio Asset Tracker
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime investment portfolio asset tracker. Features allocation pie charts, growth trend lines, and transfer transaction ledgers.
URL: https://lightswind.com/blocks/animated-analytics/analytics09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics10
Title: Global Delivery Fleet Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime logistics delivery fleet monitor. Features regional performance bar charts, load allocation radial charts, and telemetry tracking lists.
URL: https://lightswind.com/blocks/animated-analytics/analytics10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics11
Title: SaaS Subscription Tracker
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime subscription and SaaS revenue monitor. Features MRR growth area charts, payback cohorts, active logos metrics, and expansion activity ledgers.
URL: https://lightswind.com/blocks/animated-analytics/analytics11
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics12
Title: Threat Intelligence Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime cybersecurity threat intelligence monitor. Features alert volume area charts, security compliance radial charts, and threat stream logs.
URL: https://lightswind.com/blocks/animated-analytics/analytics12
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics13
Title: API Gateway Telemetry Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime developer platform API usage monitor. Features request volume area charts, latency percentile bar charts, and routing gateway logs.
URL: https://lightswind.com/blocks/animated-analytics/analytics13
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): analytics14
Title: Kubernetes Cluster Optimizer
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity realtime Kubernetes pod and cloud node optimizer. Features bandwidth area charts, namespace CPU request bar charts, and active pods logs.
URL: https://lightswind.com/blocks/animated-analytics/analytics14
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated App Shell & Layouts (5)
Description: Interactive animated application shells, multi-workspace layouts, and breadcrumb command bars.
URL: https://lightswind.com/blocks/animated-app-shell

### BLOCK (PRO): app-shell-01
Title: Vortex OS Enterprise Application Shell
Access Level: Premium Pro Block (Source code excluded)
Description: A production-grade application shell layout featuring collapsible grouped sidebar navigation, breadcrumbs, region selectors, summary cards, and live request velocity charts.
URL: https://lightswind.com/blocks/animated-app-shell/app-shell-01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): app-shell-02
Title: Neural AI Developer Platform Shell
Access Level: Premium Pro Block (Source code excluded)
Description: A developer platform workspace shell featuring top control bars, left dock sidebars, model inference routers, token velocity charts, and vector database memory controls.
URL: https://lightswind.com/blocks/animated-app-shell/app-shell-02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): app-shell-03
Title: Cybersecurity SOC Command Shell
Access Level: Premium Pro Block (Source code excluded)
Description: A production-grade Security Operations Center command shell layout featuring threat posture alert banners, SIEM event velocity charts, and active threat vector triage.
URL: https://lightswind.com/blocks/animated-app-shell/app-shell-03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): app-shell-04
Title: SaaS Billing & Revenue Operations Shell
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise revenue operations workspace featuring tenant subscription ledgers, MRR trajectory graphs, billing cycle selectors, and invoice management controls.
URL: https://lightswind.com/blocks/animated-app-shell/app-shell-04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): app-shell-05
Title: Kubernetes Workload Mesh Shell
Access Level: Premium Pro Block (Source code excluded)
Description: A multi-cloud Kubernetes service mesh command shell featuring cluster switcher dropdowns, container pod replica health graphs, and namespace resource allocation.
URL: https://lightswind.com/blocks/animated-app-shell/app-shell-05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Authentication (11)
Description: Interactive animated authentication portals, liquid glass login cards, OTP verification, and biometric security flows.
URL: https://lightswind.com/blocks/animated-auth

### BLOCK (PRO): authlogin01
Title: Pro Visual Login
Access Level: Premium Pro Block (Source code excluded)
Description: An elite split-screen authentication portal with high-fidelity visual context, social providers, and secure multi-input fields. Optimized for enterprise SaaS and developer workflows.
URL: https://lightswind.com/blocks/animated-auth/authlogin01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authlogin02
Title: Glassmorphic Magic Link Portal
Access Level: Premium Pro Block (Source code excluded)
Description: A high-security passwordless authentication gate featuring live email dispatch sequences, social identity providers (Google, GitHub), and glowing background orbs.
URL: https://lightswind.com/blocks/animated-auth/authlogin02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authpasskey01
Title: Biometric Passkey Sign-In Gateway
Access Level: Premium Pro Block (Source code excluded)
Description: A futuristic biometric Passkey / WebAuthn sign-in gate featuring visual TouchID fingerprint scanning animation, loading synchronization states, and FIDO2 compliance indicators.
URL: https://lightswind.com/blocks/animated-auth/authpasskey01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authworkspace01
Title: Workspace & Tenant Single Sign-On Route Resolver
Access Level: Premium Pro Block (Source code excluded)
Description: A workspace resolver screen allowing users to input company subdomains to locate active tenant endpoints. Automatically routes verified tenants to enterprise SSO login options.
URL: https://lightswind.com/blocks/animated-auth/authworkspace01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authmfasetup01
Title: Interactive Multi-Factor Authenticator Setup Flow
Access Level: Premium Pro Block (Source code excluded)
Description: A 2FA onboarding experience with interactive steps for QR code app linking, recovery backup codes extraction, and live OTP verification confirmation.
URL: https://lightswind.com/blocks/animated-auth/authmfasetup01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authsignup01
Title: Multi-Step Onboarding
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated triple-phase registration experience with profile, workspace, and team invitation layers. Features interactive progress tracking and real-time validation.
URL: https://lightswind.com/blocks/animated-auth/authsignup01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): auth2fa01
Title: Secure 2-Step Gate
Access Level: Premium Pro Block (Source code excluded)
Description: A high-security two-factor verification block with timed OTP input sequences, biometric fallback options, and rapid re-authentication logic.
URL: https://lightswind.com/blocks/animated-auth/auth2fa01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authotp01
Title: Magic Access Portal
Access Level: Premium Pro Block (Source code excluded)
Description: A passwordless authentication experience utilizing magic links and secure one-time passcodes. Features immersive inbox-check transitions and email app deep-linking.
URL: https://lightswind.com/blocks/animated-auth/authotp01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authpasswordreset01
Title: Recovery Flow Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A robust multi-phase password recovery system. Handles secure link requests, complex password application with validation, and comprehensive success confirmation.
URL: https://lightswind.com/blocks/animated-auth/authpasswordreset01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authsso01
Title: Enterprise SSO Portal
Access Level: Premium Pro Block (Source code excluded)
Description: A dedicated Single Sign-On portal enabling users to log in with okta, azure, saml, or custom workspace domains.
URL: https://lightswind.com/blocks/animated-auth/authsso01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): authsession01
Title: Device & Active Session Controller
Access Level: Premium Pro Block (Source code excluded)
Description: A professional security console listing all authorized login devices and browser locations with interactive single-click revocation actions.
URL: https://lightswind.com/blocks/animated-auth/authsession01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Background (5)
Description: High-performance Canvas and WebGL animated background effects, particle meshes, and gradient waves.
URL: https://lightswind.com/blocks/animated-background

### BLOCK (PRO): background02
Title: Procedural Fire Shader
Access Level: Premium Pro Block (Source code excluded)
Description: A highly optimized, fully procedural WebGL fire simulation with interactive fluid dynamics. Built with native WebGL, React, and GSAP for a premium zero-lag experience.
URL: https://lightswind.com/blocks/animated-background/background02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): background03
Title: Falling Aether Beams
Access Level: Premium Pro Block (Source code excluded)
Description: A professional vertical beam effect system. High-performance energy trails fall smoothly across the screen, creating a high-tech corporate and SaaS aesthetic with deep contrast.
URL: https://lightswind.com/blocks/animated-background/background03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): background04
Title: Geometric Connection Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A neat, tech-focused background featuring interactive floating nodes with dynamic connection lines. Built with Canvas API for extreme performance, reacting subtly to mouse proximity for a professional high-tech feel.
URL: https://lightswind.com/blocks/animated-background/background04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): background05
Title: Orbital Canvas Background
Access Level: Premium Pro Block (Source code excluded)
Description: A pure, high-performance 3D planet background powered by WebGL shaders. Dynamically morphs and responds to user movement, providing a high-end cosmic environment for any landing page.
URL: https://lightswind.com/blocks/animated-background/background05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): background01
Title: Liquid Surface Background
Access Level: Premium Pro Block (Source code excluded)
Description: A mesmerizing interactive liquid distortion background powered by WebGL. Features dynamic color schemes, interactive touch repulsion, and a premium GUI for color picking built with GSAP and Framer Motion.
URL: https://lightswind.com/blocks/animated-background/background01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Card (1)
Description: Interactive 3D tilt cards, holographic borders, animated glassmorphism containers, and glowing hover states.
URL: https://lightswind.com/blocks/animated-card

### BLOCK (PRO): card08
Title: AI Architect & Executive Profile Suite Cards
Access Level: Premium Pro Block (Source code excluded)
Description: High-density executive profile cards featuring avatar status badges, 3-column cluster SLA metrics, managed infrastructure allocations, and interactive advisory proposals.
URL: https://lightswind.com/blocks/animated-card/card08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated E-Commerce (9)
Description: Interactive animated e-commerce checkout flows, product carousels, floating cart drawers, and payment confirmation circuits.
URL: https://lightswind.com/blocks/animated-ecommerce

### BLOCK (PRO): ecoproduct01
Title: Product Detail Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, high-converting product detail view. Features a large image gallery, seamless variant selection pills, and trust badges.
URL: https://lightswind.com/blocks/animated-ecommerce/ecoproduct01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecocart01
Title: Shopping Cart Summary
Access Level: Premium Pro Block (Source code excluded)
Description: A beautifully animated cart slide-out UI. Allows users to effortlessly adjust quantities, view subtotal calculations, and proceed to checkout.
URL: https://lightswind.com/blocks/animated-ecommerce/ecocart01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecocheckout01
Title: Multi-step Checkout
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity animated checkout flow for e-commerce. Seamlessly handles Address, Payment, and Success states with beautiful Spring animations and Apple Pay mockups.
URL: https://lightswind.com/blocks/animated-ecommerce/ecocheckout01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecocategorygrid01
Title: Smart Category Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A premium horizontal category showcase featuring high-impact imagery, ambient lighting hover states, and dynamic item counters for ecommerce navigations.
URL: https://lightswind.com/blocks/animated-ecommerce/ecocategorygrid01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecoorderhistory01
Title: Enterprise Order Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A highly-detailed order management ledger for customer accounts. Includes professional status tracking, CSV exports, and interactive shipment details.
URL: https://lightswind.com/blocks/animated-ecommerce/ecoorderhistory01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecowishlist01
Title: Curated Wishlist Board
Access Level: Premium Pro Block (Source code excluded)
Description: An elite wishlist experience featuring interactive product cards, rating visualizers, and streamlined
URL: https://lightswind.com/blocks/animated-ecommerce/ecowishlist01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecoproductcomparison01
Title: Specifications Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A high-end product comparison table with detailed hardware specs, neural feature toggles, and integrated purchase CTAs for elite product lines.
URL: https://lightswind.com/blocks/animated-ecommerce/ecoproductcomparison01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecoreviewstats01
Title: Verified Feedback Hub
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced customer reviews dashboard featuring metric distribution charts, filtered recent insights, and high-fidelity user sentiment indicators.
URL: https://lightswind.com/blocks/animated-ecommerce/ecoreviewstats01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ecoinventorytracker01
Title: Admin Telemetry Center
Access Level: Premium Pro Block (Source code excluded)
Description: A specialized internal inventory management block for tracking SKU performance, stock levels, and automated restock sequences across supply chains.
URL: https://lightswind.com/blocks/animated-ecommerce/ecoinventorytracker01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Features (10)
Description: Interactive Bento feature blocks with animated marquees, scheduled payment flows, live transaction feeds, and real-time expense bar charts.
URL: https://lightswind.com/blocks/animated-features

### BLOCK (PRO): feature01
Title: Bento Feature Grid
Access Level: Premium Pro Block (Source code excluded)
Description: Modern Bento box style feature grid. A trendy, modular layout specifically designed to showcase multiple product features in a visually engaging and organized manner.
URL: https://lightswind.com/blocks/animated-features/feature01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature02
Title: Bento Feature Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A trendy Bento-box style grid layout featuring mixed card sizes, hover lifts, and integrated icon accents. Perfect for explaining complex product features simply.
URL: https://lightswind.com/blocks/animated-features/feature02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature03
Title: Sticky List Features
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated feature comparison layout with a sticky sidebar navigation and scrolling content area. Ideal for detailed product tours and technical deep dives.
URL: https://lightswind.com/blocks/animated-features/feature03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature04
Title: Interactive Sandbox Feature
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced feature block with an interactive playground area. Allows users to toggle states or view different configurations of a product feature live.
URL: https://lightswind.com/blocks/animated-features/feature04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature05
Title: Code-First Feature Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A technical feature showcase designed for developer tools. Integrates syntax-highlighted code snippets alongside benefit descriptions to prove technical capability.
URL: https://lightswind.com/blocks/animated-features/feature05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature06
Title: Bento Grid Ecosystem
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive Bento-style grid for displaying a product ecosystem. Mixes icon cards, text blocks, and small previews to create a cohesive overview.
URL: https://lightswind.com/blocks/animated-features/feature06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature07
Title: Tiered Service Comparison
Access Level: Premium Pro Block (Source code excluded)
Description: A professional feature comparison matrix designed for complex service offerings. Uses a clean, structured layout to help users evaluate plans and identify the best value proposition.
URL: https://lightswind.com/blocks/animated-features/feature07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature08
Title: Engineered Depth Bento
Access Level: Premium Pro Block (Source code excluded)
Description: A trendy bento-style feature grid with depth-optimized cards, hover interactions, and professional icon integration.
URL: https://lightswind.com/blocks/animated-features/feature08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature09
Title: Premium Services Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated, high-end feature grid designed for digital agencies and consulting firms. Features abstract gradients, clean icons, and a strong call-to-action block.
URL: https://lightswind.com/blocks/animated-features/feature09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feature10
Title: Ecosystem Beam Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A highly professional and interactive ecosystem diagram. Features glowing energy beams simulating power supply travelling to a centralized core.
URL: https://lightswind.com/blocks/animated-features/feature10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Forms (9)
Description: Multi-step interactive animated forms, liquid input fields, validation animations, and survey wizards.
URL: https://lightswind.com/blocks/animated-forms

### BLOCK (PRO): login01
Title: Professional Auth Login
Access Level: Premium Pro Block (Source code excluded)
Description: A production-ready login form featuring social authentication providers (Google, GitHub), secure password toggles, and a refined glassmorphic aesthetic. Fully accessible and responsive.
URL: https://lightswind.com/blocks/animated-forms/login01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): signup01
Title: Minimalist Multi-step Signup
Access Level: Premium Pro Block (Source code excluded)
Description: A streamlined sign-up experience focusing on reducing friction. ideal for SaaS onboarding with clear progress indication and error handling.
URL: https://lightswind.com/blocks/animated-forms/signup01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): login02
Title: Visual Split Login
Access Level: Premium Pro Block (Source code excluded)
Description: A visually striking split-screen login page. Combines a clean authentication form with a high-fidelity image or branded content area to reinforce brand identity.
URL: https://lightswind.com/blocks/animated-forms/login02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contactform02
Title: Elite Contact Dispatch
Access Level: Premium Pro Block (Source code excluded)
Description: A premium, split-column contact form featuring corporate detail cards, voice dispatch info, and a high-converting message manifest area.
URL: https://lightswind.com/blocks/animated-forms/contactform02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): feedbackform01
Title: System Feedback Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A professional interactive feedback widget with star rating micro-animations, secure data manifest, and immersive success/exit states.
URL: https://lightswind.com/blocks/animated-forms/feedbackform01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): searchform01
Title: Advanced Discovery Engine
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity search filter board featuring animated expansion logic, system attribute badges, and pro-discovery command tips.
URL: https://lightswind.com/blocks/animated-forms/searchform01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): login03
Title: Glossy Cyberpunk Sign-In
Access Level: Premium Pro Block (Source code excluded)
Description: A dark-themed glassmorphic auth form with gradient integrated input pill, floating top labels, and social authentication.
URL: https://lightswind.com/blocks/animated-forms/login03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): login04
Title: Golden Flare & Dot Matrix Sign-In
Access Level: Premium Pro Block (Source code excluded)
Description: A glassmorphic auth card featuring top-left amber glow flare, top-right dot matrix grid, email input icon, and warm gold button elements.
URL: https://lightswind.com/blocks/animated-forms/login04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): signup02
Title: Split Spotlight Sign-Up Wizard
Access Level: Premium Pro Block (Source code excluded)
Description: A split-screen registration layout featuring a deep purple spotlight onboarding step visualizer on the left and a responsive sign-up form on the right.
URL: https://lightswind.com/blocks/animated-forms/signup02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Hero (13)
Description: Next-gen animated hero sections featuring WebGL particle fields, glowing beam borders, interactive prompt cards, and neural meshes.
URL: https://lightswind.com/blocks/animated-hero

### BLOCK (PRO): hero11
Title: SaaS AI Sales Hero with Animated Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A premium dark-themed Tailwind CSS hero block designed for SaaS landing pages. Features a glowing orange horizon backdrop, brand marquee, announcement badge, and an interactive visitor telemetry dashboard mockup.
URL: https://lightswind.com/blocks/animated-hero/hero11
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero10
Title: SaaS Developer Command Center
Access Level: Premium Pro Block (Source code excluded)
Description: An elite, high-converting marketing hero section designed for developer platforms and SaaS command centers. Features custom serif typography, a glassmorphic partner brand marquee, a floating announcement badge, and a gorgeous painterly landscape footer.
URL: https://lightswind.com/blocks/animated-hero/hero10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero12
Title: SaaS Landing Hero with Interactive CSS Glowing Dome
Access Level: Premium Pro Block (Source code excluded)
Description: A high-performance CSS-only dark-themed hero section. Replaces background images with pure Tailwind glowing orange dome gradients, background drift stars, and an interactive 3D tilt sales dashboard preview.
URL: https://lightswind.com/blocks/animated-hero/hero12
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero13
Title: Premium RAW Video Background Hero (VEX)
Access Level: Premium Pro Block (Source code excluded)
Description: A cinematic hero section with full-screen autoplaying video, liquid glass navigations/panels, and staggered character-by-character typography entrance animations. Perfect for design studios, high-end portfolios, and vision-driven ventures.
URL: https://lightswind.com/blocks/animated-hero/hero13
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero01
Title: Creative Agency Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A bold, visually striking hero section designed for creative agencies. Features irregular grid layouts and large typography to make a strong first impression.
URL: https://lightswind.com/blocks/animated-hero/hero01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero02
Title: Modern Landing Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A high-conversion landing page hero with glassmorphic cards and smooth entrance animations. Optimized for SaaS and technology products.
URL: https://lightswind.com/blocks/animated-hero/hero02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero09
Title: Far Edge Hero Section
Access Level: Premium Pro Block (Source code excluded)
Description: An elite, cosmic-scale hero section featuring a world-class 3D planet as its visual centerpiece. Pairs stunning WebGL visuals with bold, black-box typography and a high-impact data-driven stat grid. Perfect for high-tech SaaS and Web3 platforms.
URL: https://lightswind.com/blocks/animated-hero/hero09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero03
Title: Immersive Centered Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A commanding centered hero section with ambient background gradients and a featured dashboard preview. Designed to maximize initial user engagement.
URL: https://lightswind.com/blocks/animated-hero/hero03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero04
Title: Split Impact Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A high-conversion split screen hero section. Combines a clear value proposition with a dedicated media area, trust badges, and a floating testimonial for immediate social proof.
URL: https://lightswind.com/blocks/animated-hero/hero04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero05
Title: SaaS Dashboard Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A premium hero section featuring a 3D-tilted dashboard mockup. Designed to instantly communicate
URL: https://lightswind.com/blocks/animated-hero/hero05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero06
Title: Split Media Conversion Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting split-screen hero section pairing immersive media (video/image) with sharp, benefit-driven copy. Optimized for SaaS landing pages to drive immediate user action.
URL: https://lightswind.com/blocks/animated-hero/hero06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero07
Title: Universal Gravity Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A commanding centered hero section with orbiting elements, premium glassmorphism, and high-impact social proof.
URL: https://lightswind.com/blocks/animated-hero/hero07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): hero08
Title: Enterprise SaaS Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A highly professional, dark-themed hero section optimized for B2B tech products. Features a large interactive app mockup and subtle glowing mesh gradients.
URL: https://lightswind.com/blocks/animated-hero/hero08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Scroll (1)
Description: Smooth scroll-driven animation components, sticky timeline reveals, and parallax section transitions.
URL: https://lightswind.com/blocks/animated-scroll

### BLOCK (PRO): scroll01
Title: Infinite Scroll Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: A dual-direction infinite scrolling gallery synchronized to the user
URL: https://lightswind.com/blocks/animated-scroll/scroll01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Sidebar (7)
Description: Collapsible animated sidebars with smooth spring physics, active indicator glows, and workspace switchers.
URL: https://lightswind.com/blocks/animated-sidebar

### BLOCK (PRO): sidebar01
Title: Modern Collapsible Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, responsive dashboard sidebar with collapsible state, smooth animations, and integrated user profile section. Built with Framer Motion for premium feel.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar02
Title: Pro Workspace Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: A high-end, responsive sidebar supporting both light and dark modes. Features nested folders, workspace switcher, and glassmorphic details. Perfect for SaaS apps.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar03
Title: Dual Context Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced, dual-column sidebar layout. Features a primary context rail for switching between major apps/workspaces and a secondary panel for detailed navigation.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar04
Title: Minimal Rail Navigation
Access Level: Premium Pro Block (Source code excluded)
Description: A high-performance icon-only sidebar rail for complex SaaS applications. Features multi-state tooltip logic, hover-active pill mechanics, and integrated system telemetry.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar05
Title: Dark Console Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: A professional, dark-console sidebar console for enterprise SaaS. Features hierarchical menu groups, active pill transitions, and a built-in search manifest and system status indicators.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar06
Title: Glassmorphic Pro Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: A professional, spring-animated glassmorphic sidebar for complex dashboards. Features hierarchical navigation groups, shared element transitions (LayoutGroup), and a full dashboard frame mockup.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): sidebar07
Title: Protocol Enterprise Console
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity enterprise console mockup with a custom floating toggle. Features a protocol-inspired monochromatic brand identity, nested action states, and a status-aware header system.
URL: https://lightswind.com/blocks/animated-sidebar/sidebar07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Animated Pricing (9)
Description: Interactive animated pricing tiers, stadium beam spotlights, orbital specular glass cards, metallic layered matrix tiers, billing period switches, and dynamic discount calculators.
URL: https://lightswind.com/blocks/animated-pricing

### BLOCK (PRO): pricing09
Title: Glassmorphic Aura Tiers
Access Level: Premium Pro Block (Source code excluded)
Description: A premium glassmorphic 3-column pricing board featuring responsive yearly billing toggle, ambient background glow, and a highlighted Pro plan with sky-blue outer glow borders.
URL: https://lightswind.com/blocks/animated-pricing/pricing09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing01
Title: Professional Pricing
Access Level: Premium Pro Block (Source code excluded)
Description: Clean, conversion-optimized pricing tables for SaaS products. Features clear visual hierarchy, highlighted
URL: https://lightswind.com/blocks/animated-pricing/pricing01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing02
Title: Premium Tier Grid
Access Level: Premium Pro Block (Source code excluded)
Description: Advanced pricing grid layout with emphasis on premium tiers. Includes detailed feature checklists, tooltips, and a comparative layout designed to upsell users to higher plans.
URL: https://lightswind.com/blocks/animated-pricing/pricing02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing03
Title: Enterprise Comparison Table
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive pricing comparison table for enterprise software. Detailed feature-by-feature breakdown with sticky headers and category separation. Essential for B2B SaaS.
URL: https://lightswind.com/blocks/animated-pricing/pricing03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing04
Title: High-Contrast Comparison
Access Level: Premium Pro Block (Source code excluded)
Description: A bold, two-tier pricing component using high-contrast design to distinguish between
URL: https://lightswind.com/blocks/animated-pricing/pricing04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing06
Title: Enterprise Comparison Table
Access Level: Premium Pro Block (Source code excluded)
Description: A detailed, feature-rich pricing comparison table. Includes sticky headers, category segmentation, and clear check/cross indicators for deep plan comparison.
URL: https://lightswind.com/blocks/animated-pricing/pricing06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing07
Title: Toggle Switch Pricing
Access Level: Premium Pro Block (Source code excluded)
Description: A clean pricing section with a prominent monthly/yearly toggle. Highlights savings to encourage annual subscriptions and uses a card-based layout.
URL: https://lightswind.com/blocks/animated-pricing/pricing07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing05
Title: High-Contrast Tier Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A bold pricing grid that uses high-contrast colors to highlight the
URL: https://lightswind.com/blocks/animated-pricing/pricing05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricing08
Title: Scalable Enterprise Tiers
Access Level: Premium Pro Block (Source code excluded)
Description: A high-impact pricing grid focused on enterprise scale, featuring custom quote triggers and unlimited feature tiering.
URL: https://lightswind.com/blocks/animated-pricing/pricing08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): AdTech & Analytics (6)
Description: Sophisticated advertising performance dashboards, campaign management tools, and audience targeting interfaces.
URL: https://lightswind.com/blocks/ad-tech

### BLOCK (PRO): adcreativeheatmap01
Title: Visual Creative Performance Heatmap
Access Level: Premium Pro Block (Source code excluded)
Description: A data-driven heatmap for analyzing visual attention and CTR performance across different ad creatives.
URL: https://lightswind.com/blocks/ad-tech/adcreativeheatmap01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): conversionfunnel01
Title: Multi-Touch Attribution Funnel
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive visualization of the conversion funnel with multi-touch attribution modeling and drop-off analysis.
URL: https://lightswind.com/blocks/ad-tech/conversionfunnel01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): audienceinsights01
Title: Deep Audience Segment Radar
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity visualization of user demographics, interests, and behavioral segments with overlap analysis.
URL: https://lightswind.com/blocks/ad-tech/audienceinsights01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): biddingoptimizer01
Title: Real-time RTB Bidding Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A low-latency dashboard for monitoring real-time bidding auctions, win rates, and bid price distribution.
URL: https://lightswind.com/blocks/ad-tech/biddingoptimizer01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): adperformance01
Title: Global Ad Performance Radar
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive dashboard for monitoring ad spend, CTR, and conversion rates across different geographic regions and platforms.
URL: https://lightswind.com/blocks/ad-tech/adperformance01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): campaignmanager01
Title: Campaign Creative Manager
Access Level: Premium Pro Block (Source code excluded)
Description: An intuitive workspace for managing multiple marketing campaigns, creative assets, and A/B test variations.
URL: https://lightswind.com/blocks/ad-tech/campaignmanager01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): AI & Neural (8)
Description: Cutting-edge AI components including chat interfaces, neural dashboards, and advanced prompt inputs. Designed for high-performance AI SaaS products.
URL: https://lightswind.com/blocks/ai

### BLOCK (PRO): aimodelcompare01
Title: Neural Model Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A premium model comparison dashboard for selecting LLM tiers. Includes interactive badges, latency stats, and cost metrics.
URL: https://lightswind.com/blocks/ai/aimodelcompare01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aipromptclassic02
Title: Floating AI Copilot Prompt
Access Level: Premium Pro Block (Source code excluded)
Description: An expandable, glassmorphic floating prompt bar for executing inline AI commands, generating images, and querying code.
URL: https://lightswind.com/blocks/ai/aipromptclassic02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aichat02
Title: Split-View Document Analyst
Access Level: Premium Pro Block (Source code excluded)
Description: A dual-pane interface allowing users to view source documents on the left while conversing with a specialized AI analyst on the right.
URL: https://lightswind.com/blocks/ai/aichat02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aichat01
Title: Pro AI Chat Interface
Access Level: Premium Pro Block (Source code excluded)
Description: A sleek, black-and-white professional AI chat interface. Features smooth Framer Motion animations, typing indicators, and a premium neural engine aesthetic.
URL: https://lightswind.com/blocks/ai/aichat01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aipromptclassic01
Title: Magic AI Prompt Area
Access Level: Premium Pro Block (Source code excluded)
Description: A high-end AI prompt input field with immersive motion effects and ambient glow. Designed to capture attention and provide a premium generative experience.
URL: https://lightswind.com/blocks/ai/aipromptclassic01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aiworkflow01
Title: Neural Engine Pipeline
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated visual workflow for AI pipelines. Illustrates the journey from data ingestion to code synthesis with stunning motion and premium typography.
URL: https://lightswind.com/blocks/ai/aiworkflow01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aiagentpool01
Title: Agent Matrix Controller
Access Level: Premium Pro Block (Source code excluded)
Description: A professional UI for managing multiple AI agents and models. Features real-time status indicators, connecting lines, and detailed statistical breakdowns per node.
URL: https://lightswind.com/blocks/ai/aiagentpool01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aiconfig01
Title: Neural Model Configurator
Access Level: Premium Pro Block (Source code excluded)
Description: A sleek configuration panel for adjusting AI parameters like Temperature and Max Tokens. Includes interactive custom sliders and a tabbed navigation system.
URL: https://lightswind.com/blocks/ai/aiconfig01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): AI Agents (6)
Description: Autonomous agent operations control centers, live run health, approval backlogs, tool reliability metrics, and active execution run queues.
URL: https://lightswind.com/blocks/ai-agents

### BLOCK (PRO): ai-agents-01
Title: Autonomous Agent Operations Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A production-grade AI agent control panel featuring real-time throughput metrics, approval backlogs, incident logs, and interactive run queue management.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ai-agents-02
Title: Agentic Workflow & Chain Studio
Access Level: Premium Pro Block (Source code excluded)
Description: An orchestration studio for multi-agent DAG execution flows, prompt memory inspection, RAG vector retrieval, and multi-model benchmark performance.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ai-agents-03
Title: Swarm Fleet Command & P2P Mesh Topology
Access Level: Premium Pro Block (Source code excluded)
Description: A distributed agent cluster control deck featuring interactive SVG network topology maps, inter-agent P2P payload streams, and real-time node health monitoring.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ai-agents-04
Title: Multi-Agent Chat Studio & Reasoning Workspace
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive AI agent chat console featuring collapsible thought reasoning trees, tool execution call cards, session memory, and live tool call inspection.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ai-agents-05
Title: Agent Memory Vault & Vector Knowledge Base
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise vector store memory console featuring cosine similarity metrics, namespace tabs, live chunk inspectors, and memory retention policies.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): ai-agents-06
Title: Autonomous Tool Approval & Safety Guardrails Deck
Access Level: Premium Pro Block (Source code excluded)
Description: A Human-in-the-Loop (HITL) agent tool approval deck featuring risk threshold sliders, automated sandbox policies, and security audit trails.
URL: https://lightswind.com/blocks/ai-agents/ai-agents-06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): AI Analytics (8)
Description: Advanced analytics and monitoring dashboards tailored for AI agents, neural pathways, and live LLM usage statistics.
URL: https://lightswind.com/blocks/ai-analytics

### BLOCK (PRO): aimetrics01
Title: LLM Operations Overview
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive dashboard for tracking LLM metrics, token usage, performance success rates, and dynamic fallback monitoring across multiple neural models.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aitracker01
Title: VectorStore Index Manager
Access Level: Premium Pro Block (Source code excluded)
Description: Real-time analytics for RAG infrastructure. Monitors multiple vector database nodes, ingestion rates, semantic cache hits, and embedding latency metrics.
URL: https://lightswind.com/blocks/ai-analytics/aitracker01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics02
Title: Cluster Telemetry Console
Access Level: Premium Pro Block (Source code excluded)
Description: A professional high-fidelity AI metrics console. Features region-specific inference latency tracking (BarChart), a real-time event stream manifest, and detailed infrastructure telemetry.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics03
Title: AI Operations & Cost Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A premium AI analytics dashboard designed for monitoring LLM operations. Features real-time generated token counters, an interactive dynamic model cost estimator with range sliders, and active ingress node tables.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics04
Title: Generative AI Token Throughput & Cost Analytics
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise token usage analytics dashboard featuring dynamic budget sliders, team tabs, search filtering, and API key consumption tables.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics05
Title: Neural Inference Latency & SLA Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A real-time latency SLA monitoring console featuring P50/P95/P99 percentile selectors, anomaly filtering switches, and endpoint SLA telemetry roster tables.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics06
Title: Generative AI Prompt Token Distribution & Cost Heatmap
Access Level: Premium Pro Block (Source code excluded)
Description: A prompt token length distribution matrix featuring prompt category dropdowns, context ceiling sliders, semantic cache toggles, and prompt telemetry tables.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aimetrics07
Title: Autonomous Guardrail Security & Prompt Injection Analytics
Access Level: Premium Pro Block (Source code excluded)
Description: An enterprise LLM security guardrail telemetry console tracking jailbreak attempt rates, toxicity scores, PII redaction metrics, and blocked payload logs.
URL: https://lightswind.com/blocks/ai-analytics/aimetrics07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): AI Search (5)
Description: Intelligent AI search interfaces with intelligent filtering, recent activity, and command-palette styles.
URL: https://lightswind.com/blocks/ai-search

### BLOCK (PRO): aisearch01
Title: Intelligent AI Search
Access Level: Premium Pro Block (Source code excluded)
Description: A highly interactive search overlay designed for AI documentation and queries. Features command-palette style navigation, quick filters, and intelligent suggestions.
URL: https://lightswind.com/blocks/ai-search/aisearch01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aisearch02
Title: Perplexity-Style AI Search
Access Level: Premium Pro Block (Source code excluded)
Description: A professional high-fidelity Perplexity-style AI search dashboard. Features source citations, real-time synthesized summaries, inline code previews, and follow-up prompts.
URL: https://lightswind.com/blocks/ai-search/aisearch02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aisearchcommand01
Title: AI Command Palette
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, spotlight-style Command+K menu interface. Includes mapped keyboard navigation, rapid suggestion chips, and categorized AI action prompts.
URL: https://lightswind.com/blocks/ai-search/aisearchcommand01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aisearchask01
Title: AI Google Landing Page
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, centered conversational AI search that streams typewritten answers. Features background orbs, intelligent suggestion badges, and interactive copy/share actions.
URL: https://lightswind.com/blocks/ai-search/aisearchask01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): aisearchcode01
Title: Developer Code Search
Access Level: Premium Pro Block (Source code excluded)
Description: A premium dark-mode specialized AI search targeting codebases. Includes context selector pills (@web, @workspace) and renders syntax-highlighted code blocks with copy features.
URL: https://lightswind.com/blocks/ai-search/aisearchcode01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Application Settings (5)
Description: Essential account management layers. Includes highly detailed user profile editors, security access logs, and active session managers.
URL: https://lightswind.com/blocks/settings

### BLOCK (PRO): settingsprofile01
Title: User Profile Overview
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive profile management screen featuring banner customization, avatar uploads, and professional identity inputs.
URL: https://lightswind.com/blocks/settings/settingsprofile01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): settingssecurity01
Title: Security & Logic Center
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced application access panel integrating hardware key registrations, dynamic 2FA toggles, and live tracking of active browser sessions.
URL: https://lightswind.com/blocks/settings/settingssecurity01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): settingsnotifications01
Title: Notification Control Portal
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced communication management hub featuring multi-channel alert toggles, critical feed prioritization, and quiet-hour configuration states.
URL: https://lightswind.com/blocks/settings/settingsnotifications01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): settingsbilling01
Title: Enterprise Billing Settings
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive financial settings layer with subscription plan overviews, node usage telemetry, payment method controls, and invoice ledger history.
URL: https://lightswind.com/blocks/settings/settingsbilling01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): settingsintegrations01
Title: Platform Integration Core
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced settings board for connecting third-party APIs and enterprise services. Features app-specific toggle logic and custom system bridge requests.
URL: https://lightswind.com/blocks/settings/settingsintegrations01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Bento Showcase (7)
Description: Elite modular grid systems. High-density information layouts that combine modern aesthetics with strategic visual hierarchy.
URL: https://lightswind.com/blocks/bento

### BLOCK (PRO): bento01
Title: Strategic Product Bento
Access Level: Premium Pro Block (Source code excluded)
Description: A premium product-focused bento grid featuring staggered card sizes, interactive hover states, and smooth glassmorphic details. Ideal for main feature sections.
URL: https://lightswind.com/blocks/bento/bento01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento02
Title: Data-Dense Analytics Bento
Access Level: Premium Pro Block (Source code excluded)
Description: A high-density information grid designed for analytics and data tracking. Combines micro-charts, stat counters, and activity maps into a cohesive system.
URL: https://lightswind.com/blocks/bento/bento02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento03
Title: Digital Ecosystem Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A futuristic enterprise-grade bento grid focusing on global telemetry, multi-cloud monitoring, and planetary scale security. Low-light glassmorphic HUD look.
URL: https://lightswind.com/blocks/bento/bento03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento04
Title: Engineering Matrix Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A neo-brutalist industrial bento layout designed for developer platforms and hardware startups. Features high-contrast yellow/black aesthetics and grid-pinned units.
URL: https://lightswind.com/blocks/bento/bento04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento05
Title: Planetary Grid
Access Level: Premium Pro Block (Source code excluded)
Description: An elite bento layout featuring a central interactive globe and dynamic border-beam effects. Perfect for global infrastructure and network monitoring.
URL: https://lightswind.com/blocks/bento/bento05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento06
Title: Mobile Ecosystem
Access Level: Premium Pro Block (Source code excluded)
Description: A high-end bento showcasing mobile-first experiences through a central iPhone mockup and staggered information grids.
URL: https://lightswind.com/blocks/bento/bento06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): bento07
Title: Analytics Control Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A premium high-density Bento grid showing AI models routing orchestration, secure Quantum Key checks, and glowing load latency SVG charts.
URL: https://lightswind.com/blocks/bento/bento07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Billing & Plans (6)
Description: High-converting billing architectures. Beautiful plan tiers with animated toggles and extensive feature comparison matrices.
URL: https://lightswind.com/blocks/billing

### BLOCK (PRO): billingusage01
Title: Plan Usage Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive dashboard widget displaying current plan limits, usage statistics with progress bars, and an upgrade prompt.
URL: https://lightswind.com/blocks/billing/billingusage01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): billinghistory01
Title: Invoice History Table
Access Level: Premium Pro Block (Source code excluded)
Description: A clean and organized table layout for displaying past invoices, amounts, status badges, and download actions.
URL: https://lightswind.com/blocks/billing/billinghistory01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): billingpaymentmethod01
Title: Payment Methods Manager
Access Level: Premium Pro Block (Source code excluded)
Description: A specialized interface for managing active credit cards, adding new payment methods, and updating billing addresses.
URL: https://lightswind.com/blocks/billing/billingpaymentmethod01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricingtier01
Title: SaaS Subscription Tiers
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, high-converting 3-tier pricing layout. Features dynamic yearly/monthly toggle animations and glowing highlight badges.
URL: https://lightswind.com/blocks/billing/pricingtier01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pricingcompare01
Title: Enterprise Feature Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive, fully responsive feature comparison table. Displays plan limitations side-by-side using unified, clean iconography and sticky headers.
URL: https://lightswind.com/blocks/billing/pricingcompare01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): billingtoggle01
Title: UI Standardized Billing Cards
Access Level: Premium Pro Block (Source code excluded)
Description: A high-converting 3-column SaaS pricing board. Demonstrates extensive usage of the site
URL: https://lightswind.com/blocks/billing/billingtoggle01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Blog (10)
Description: Editorial-grade blog sections and article cards optimized for readability. Engage your audience with beautiful content previews and list layouts.
URL: https://lightswind.com/blocks/blog

### BLOCK (PRO): blog01
Title: Editorial Blog Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, typography-focused blog listing component. Features category filtering, search functionality, and an elegant card layout optimized for high readability.
URL: https://lightswind.com/blocks/blog/blog01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog10
Title: Neural & Engineering Editorial Studio
Access Level: Premium Pro Block (Source code excluded)
Description: An editorial-grade blog hub featuring spotlight technical papers, code preview cards, curated multi-border article grids, and integrated email dispatch subscription.
URL: https://lightswind.com/blocks/blog/blog10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog03
Title: Modern Blog Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A visually rich blog grid featuring card hover effects, glassmorphic overlays, and metadata badges. Optimized for showcasing high-quality editorial content.
URL: https://lightswind.com/blocks/blog/blog03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog02
Title: Minimalist Article List
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated, typography-first article list. Features elegant grayscale styling that transitions to color on interaction, perfect for minimal personal brands.
URL: https://lightswind.com/blocks/blog/blog02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog04
Title: Landscape Featured Articles
Access Level: Premium Pro Block (Source code excluded)
Description: A wide-format blog layout for featured stories. Prioritizes large imagery and headline legibility, suitable for hero inputs or major announcements.
URL: https://lightswind.com/blocks/blog/blog04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog05
Title: Classic Sidebar Blog
Access Level: Premium Pro Block (Source code excluded)
Description: A traditional blog layout featuring a main content column and a functional sidebar for categories, search, and recent posts. Best for content-heavy sites.
URL: https://lightswind.com/blocks/blog/blog05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog06
Title: Bento Grid Blog Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-modern bento grid blog layout with full-screen layouts, glassmorphism badges, and a integrated interactive newsletter call-to-action.
URL: https://lightswind.com/blocks/blog/blog06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog07
Title: Magazine Slider & Interactive Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A digital magazine-style blog layout featuring a responsive main carousel slider with smooth transitions and an interactive trending posts list.
URL: https://lightswind.com/blocks/blog/blog07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog08
Title: Timeline Changelog Style Blog Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous timeline-style blog feed that presents articles chronologically with visual date tags, a connecting vertical line, and inline categories.
URL: https://lightswind.com/blocks/blog/blog08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): blog09
Title: Minimal Newsletter-First Substack Style Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, content-first layout that prioritizes a premium email capture section at the top, followed by a sleek list of articles.
URL: https://lightswind.com/blocks/blog/blog09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Case Studies (10)
Description: Premium metrics grids, narrative layout panels, and before/after outcome dashboards highlighting client success stories.
URL: https://lightswind.com/blocks/case-study

### BLOCK (PRO): casestudy01
Title: Metrics Storytelling Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A conversion-focused case study landing page with interactive challenge, solution, and results tabs.
URL: https://lightswind.com/blocks/case-study/casestudy01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy02
Title: Performance Metrics Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A grid layout highlighting before and after performance gains with an interactive legacy switcher.
URL: https://lightswind.com/blocks/case-study/casestudy02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy03
Title: Split Outcome narrative
Access Level: Premium Pro Block (Source code excluded)
Description: A split case study block featuring an interactive engineering checklist and executive quote panel.
URL: https://lightswind.com/blocks/case-study/casestudy03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy04
Title: Problem Solution Stepper
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive step-based journey showcasing legacy bottlenecks, strategy implementation, and rollout success metrics.
URL: https://lightswind.com/blocks/case-study/casestudy04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy05
Title: Lighthouse Audit Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A dark high-contrast panel comparing Core Web Vitals upgrades with live tab selectors.
URL: https://lightswind.com/blocks/case-study/casestudy05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy06
Title: Video Stream Overview
Access Level: Premium Pro Block (Source code excluded)
Description: A split block displaying an interactive media video preview player and detailed statistics columns.
URL: https://lightswind.com/blocks/case-study/casestudy06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy07
Title: ROI Interactive Calculator
Access Level: Premium Pro Block (Source code excluded)
Description: An estimation widget allowing users to configure team metrics to project monthly savings value.
URL: https://lightswind.com/blocks/case-study/casestudy07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy08
Title: Directory Client Stories
Access Level: Premium Pro Block (Source code excluded)
Description: A professional tabbed logo selector card loaded with case summary metadata and rollout facts.
URL: https://lightswind.com/blocks/case-study/casestudy08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy09
Title: Milestone Rollout Timeline
Access Level: Premium Pro Block (Source code excluded)
Description: A vertical roadmap component with responsive milestone marker details and layout tags.
URL: https://lightswind.com/blocks/case-study/casestudy09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): casestudy10
Title: Key Metrics Spotlight
Access Level: Premium Pro Block (Source code excluded)
Description: A multi-metric spotlight panel containing detailed helper icon tooltip annotations.
URL: https://lightswind.com/blocks/case-study/casestudy10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Changelogs (10)
Description: Responsive narrative timelines, collapsible release details, searchable feeds, and pipeline states showing version histories.
URL: https://lightswind.com/blocks/changelog

### BLOCK (PRO): changelog01
Title: Timeline Changelog
Access Level: Premium Pro Block (Source code excluded)
Description: A professional vertical release timeline tracking version tags, descriptions, and authors.
URL: https://lightswind.com/blocks/changelog/changelog01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog02
Title: Collapsible Accordion Details
Access Level: Premium Pro Block (Source code excluded)
Description: A collapsible accordion layout showing detailed features, stability fixes, and commit shas.
URL: https://lightswind.com/blocks/changelog/changelog02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog03
Title: Searchable Notes Feed
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive tabbed search board filtering updates dynamically by categories.
URL: https://lightswind.com/blocks/changelog/changelog03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog04
Title: Header Metrics Changelog
Access Level: Premium Pro Block (Source code excluded)
Description: A changelog feed topped with core summary statistics and contributor activity metrics.
URL: https://lightswind.com/blocks/changelog/changelog04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog05
Title: Pipeline Status Lanes
Access Level: Premium Pro Block (Source code excluded)
Description: A release workflow pipeline visualization showcasing stable, candidate, and beta release states.
URL: https://lightswind.com/blocks/changelog/changelog05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog06
Title: Interactive Commit Stream
Access Level: Premium Pro Block (Source code excluded)
Description: A dynamic git commit log tracking modified file counts, line insertions, and authors.
URL: https://lightswind.com/blocks/changelog/changelog06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog07
Title: Roadmap Milestones Tracker
Access Level: Premium Pro Block (Source code excluded)
Description: A task tracking dashboard visualization showing completed, active, and planned milestones.
URL: https://lightswind.com/blocks/changelog/changelog07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog08
Title: Release Subscription Newsletter
Access Level: Premium Pro Block (Source code excluded)
Description: A subscription newsletter signup block alongside a snapshot version summary card.
URL: https://lightswind.com/blocks/changelog/changelog08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog09
Title: Developer Upgrade Path
Access Level: Premium Pro Block (Source code excluded)
Description: A copy-pasteable CLI command and code snippet dashboard for release migrations.
URL: https://lightswind.com/blocks/changelog/changelog09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): changelog10
Title: Multi-Product Version Registry
Access Level: Premium Pro Block (Source code excluded)
Description: A grid tracking stable, candidate, and beta deployment statuses across tools.
URL: https://lightswind.com/blocks/changelog/changelog10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Cloud Infrastructure (6)
Description: Production-grade dashboards for monitoring servers, architecture topologies, and distributed compute clusters.
URL: https://lightswind.com/blocks/cloud-infrastructure

### BLOCK (PRO): k8sclusteroptimizer01
Title: Kubernetes Cluster Resource Optimizer
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity dashboard for analyzing K8s pod utilization, node scaling, and cost-efficiency recommendations.
URL: https://lightswind.com/blocks/cloud-infrastructure/k8sclusteroptimizer01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): trafficloadbalancer01
Title: Advanced Traffic Distribution Console
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive monitor for global load balancers, showing request distribution, health checks, and TLS termination stats.
URL: https://lightswind.com/blocks/cloud-infrastructure/trafficloadbalancer01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): databaseclusters01
Title: High-Availability DB Clusters
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive monitor for database clusters, showing replication lag, node health, and automated failover status.
URL: https://lightswind.com/blocks/cloud-infrastructure/databaseclusters01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): globalcdnstatus01
Title: Edge Network & Latency Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A global visualization of CDN edge nodes, traffic distribution, and real-time latency across different regions.
URL: https://lightswind.com/blocks/cloud-infrastructure/globalcdnstatus01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): serverinstances01
Title: Compute Instances Table
Access Level: Premium Pro Block (Source code excluded)
Description: High-density cloud server management table featuring live CPU/RAM utilization mini-charts, region badges, and power controls.
URL: https://lightswind.com/blocks/cloud-infrastructure/serverinstances01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cloudarchitecture01
Title: Infrastructure Topology map
Access Level: Premium Pro Block (Source code excluded)
Description: A live visualization of production cloud architecture showing load balancers, node clusters, and database latency.
URL: https://lightswind.com/blocks/cloud-infrastructure/cloudarchitecture01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Contact (7)
Description: User-friendly contact sections and forms designed to reduce friction. Perfect for generating leads, support inquiries, and customer feedback.
URL: https://lightswind.com/blocks/contact

### BLOCK (PRO): contact01
Title: Glassmorphic Contact Form
Access Level: Premium Pro Block (Source code excluded)
Description: Premium contact section featuring trendy glassmorphism effects. Includes floating input labels, 3D depth, and form validation for a polished user experience.
URL: https://lightswind.com/blocks/contact/contact01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact02
Title: Modern Split Contact
Access Level: Premium Pro Block (Source code excluded)
Description: A professional split-screen contact layout. Displays company contact info on one side and a clean, minimalist enquiry form on the other. Ideal for agencies and consultancies.
URL: https://lightswind.com/blocks/contact/contact02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact03
Title: Minimalist Tech Contact
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, spacious contact form designed for clarity. Features bold typography, high-contrast inputs, and a simplified layout to reduce user friction.
URL: https://lightswind.com/blocks/contact/contact03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact04
Title: Contact with Sidebar Info
Access Level: Premium Pro Block (Source code excluded)
Description: A two-column contact layout that pairs a functional form with a sidebar for address, email, and phone details. Builds trust by showing physical presence.
URL: https://lightswind.com/blocks/contact/contact04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact05
Title: Institutional Support Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A professional support-focused contact block with prioritized department channels, elite typography, and unified service callouts.
URL: https://lightswind.com/blocks/contact/contact05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact06
Title: Global Headquarters Presence
Access Level: Premium Pro Block (Source code excluded)
Description: An elite international office network block featuring live local time synchronization per timezone and stylized HQ narrative visuals.
URL: https://lightswind.com/blocks/contact/contact06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): contact07
Title: Architectural Consultation
Access Level: Premium Pro Block (Source code excluded)
Description: A premium solution-oriented contact block with service selection chips, elite typography, and high-fidelity institutional inquiry forms.
URL: https://lightswind.com/blocks/contact/contact07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): CTA (8)
Description: Action-oriented Call to Action sections. Banners, buttons, and prompts strategically designed to guide user flow and boost conversion metrics.
URL: https://lightswind.com/blocks/cta

### BLOCK (PRO): cta01
Title: Growth Accelerator CTA
Access Level: Premium Pro Block (Source code excluded)
Description: A high-impact Call to Action section designed for conversions. Features glassmorphic backgrounds, blurred light accents, and clear value propositions.
URL: https://lightswind.com/blocks/cta/cta01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta02
Title: Modern Glass CTA
Access Level: Premium Pro Block (Source code excluded)
Description: A sleek, horizontal call-to-action bar with subtle background blurs and interactive hover states. Designed to fit seamlessly between content sections.
URL: https://lightswind.com/blocks/cta/cta02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta03
Title: Immersive Dark Conversion
Access Level: Premium Pro Block (Source code excluded)
Description: A visually rich, dark-themed Call to Action block. Features a full-width background image with an overlay, perfect for breaking up light-themed pages.
URL: https://lightswind.com/blocks/cta/cta03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta04
Title: App Store Conversion
Access Level: Premium Pro Block (Source code excluded)
Description: A dedicated mobile app promotion block. Includes buttons for App Store and Google Play, alongside a device mockup placeholder.
URL: https://lightswind.com/blocks/cta/cta04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta05
Title: Large Immersive CTA
Access Level: Premium Pro Block (Source code excluded)
Description: A full-width, centered call-to-action block with impactful typography and background effects. Ideal for the bottom of landing pages to drive final conversion.
URL: https://lightswind.com/blocks/cta/cta05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta06
Title: Glassmorphic Call to Action
Access Level: Premium Pro Block (Source code excluded)
Description: A visually stunning CTA block with a glassmorphic background, ambient glow, and high-impact typography. Perfect for driving final conversions at the bottom of a landing page.
URL: https://lightswind.com/blocks/cta/cta06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta07
Title: Infinitive Launch CTA
Access Level: Premium Pro Block (Source code excluded)
Description: A high-conversion CTA section with floating magnetic animations, premium glass panels, and ambient atmospheric effects.
URL: https://lightswind.com/blocks/cta/cta07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): cta08
Title: Card Inset Metric Row CTA
Access Level: Premium Pro Block (Source code excluded)
Description: A professional floating card inset CTA section featuring key performance metrics, enterprise badge, dual action buttons, and full dark/light theme support.
URL: https://lightswind.com/blocks/cta/cta08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Data & Admin (5)
Description: Enterprise data governance, administrative audit logs, and high-security internal management interfaces.
URL: https://lightswind.com/blocks/data-admin

### BLOCK (PRO): datagovernance01
Title: Enterprise Data Governance & Lineage
Access Level: Premium Pro Block (Source code excluded)
Description: A professional interface for tracking data lineage, classification, and sensitivity across the entire organization.
URL: https://lightswind.com/blocks/data-admin/datagovernance01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): internaluseraudit01
Title: Admin User Activity & Session Audit
Access Level: Premium Pro Block (Source code excluded)
Description: A high-security audit log for tracking administrator actions, session duration, and sensitive permission changes.
URL: https://lightswind.com/blocks/data-admin/internaluseraudit01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): datadisplaytable01
Title: SaaS User Management Table
Access Level: Premium Pro Block (Source code excluded)
Description: A professional-grade data table engineered for scale. Features custom status badges,
URL: https://lightswind.com/blocks/data-admin/datadisplaytable01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): datadisplaykanban01
Title: Sprint Project Board
Access Level: Premium Pro Block (Source code excluded)
Description: An incredibly responsive Kanban-style project tracker. Seamlessly displays priority tags, nested avatars, comment/attachment logic, and interactive filter states.
URL: https://lightswind.com/blocks/data-admin/datadisplaykanban01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): datadisplaystats01
Title: Metric Analytics Pulse
Access Level: Premium Pro Block (Source code excluded)
Description: A professional landing-page statistics block featuring animated sparklines, dynamic trend indicators, and high-contrast numerical highlights for business-critical data.
URL: https://lightswind.com/blocks/data-admin/datadisplaystats01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Data Science & ML (2)
Description: Specialized interfaces for machine learning workflows, interactive notebooks, and model performance metrics.
URL: https://lightswind.com/blocks/data-science

### BLOCK (PRO): datasciencenotebook01
Title: Interactive ML Notebook
Access Level: Premium Pro Block (Source code excluded)
Description: A Jupyter-style interactive cell interface with run buttons, python code highlighting, and output visualization.
URL: https://lightswind.com/blocks/data-science/datasciencenotebook01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): datasciencemodelmetrics01
Title: Model Metrics Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: Real-time performance metrics dashboard for machine learning models, featuring live training loss curves.
URL: https://lightswind.com/blocks/data-science/datasciencemodelmetrics01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Developer & API (2)
Description: High-performance developer interfaces including interactive API documentation, webhook managers, and secret key controls.
URL: https://lightswind.com/blocks/developer-platform

### BLOCK (PRO): apireference01
Title: API Endpoint Reference
Access Level: Premium Pro Block (Source code excluded)
Description: A two-pane API documentation layout with parameter details, required tags, and an interactive cURL code playground.
URL: https://lightswind.com/blocks/developer-platform/apireference01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): apikeys01
Title: API Keys Manager
Access Level: Premium Pro Block (Source code excluded)
Description: Advanced secret key management interface with visibility toggles, copy actions, environment tags, and usage metadata.
URL: https://lightswind.com/blocks/developer-platform/apikeys01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Developer Tools (6)
Description: Sophisticated administration boards, webhook trackers, and API key managers modeled after leading tech platforms.
URL: https://lightswind.com/blocks/dev-tools

### BLOCK (PRO): devapikey01
Title: API Key Manager
Access Level: Premium Pro Block (Source code excluded)
Description: A secure and professional dashboard component for managing API security tokens. Features environment toggles, hiding values, and robust visual warnings.
URL: https://lightswind.com/blocks/dev-tools/devapikey01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): devwebhook01
Title: Webhook Delivery Log
Access Level: Premium Pro Block (Source code excluded)
Description: A highly detailed webhook request tracker mimicking Stripe
URL: https://lightswind.com/blocks/dev-tools/devwebhook01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): devsecrets01
Title: Environment Vault Manager
Access Level: Premium Pro Block (Source code excluded)
Description: A secure administrative interface for managing sensitive environment variables and secrets with reveal-on-demand and audit state tracking.
URL: https://lightswind.com/blocks/dev-tools/devsecrets01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): devaudit01
Title: Compliance Audit Protocol
Access Level: Premium Pro Block (Source code excluded)
Description: An elite system event ledger featuring immutable logs, actor tracking, and high-fidelity event classification for high-compliance platforms.
URL: https://lightswind.com/blocks/dev-tools/devaudit01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): devusage01
Title: Resource Quota Intelligence
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity infrastructure metrics dashboard for monitoring API quotas, compute allocation, and storage performance in real-time.
URL: https://lightswind.com/blocks/dev-tools/devusage01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): devtoolswebhook01
Title: Webhook Realtime Listener
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous real-time webhook dashboard. Listens and simulates incoming POST requests, displaying visual connectivity statuses and rendering formatted multi-tab JSON payloads securely.
URL: https://lightswind.com/blocks/dev-tools/devtoolswebhook01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Device Mockups (2)
Description: Pixel-perfect device shells for high-end product showcases. Includes adaptive iPhone, Laptop, and Tablet frameworks with interactive screens.
URL: https://lightswind.com/blocks/mockups

### BLOCK (PRO): mockup01
Title: Native Precision
Access Level: Premium Pro Block (Source code excluded)
Description: A premium iPhone 16 Pro hero display with industrial-grade feature highlights and high-fidelity typography.
URL: https://lightswind.com/blocks/mockups/mockup01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): mockup02
Title: Multi-Device Scale
Access Level: Premium Pro Block (Source code excluded)
Description: A stunning triple-device array with staggered animations and global reach telemetry. Ideal for scaling product visions.
URL: https://lightswind.com/blocks/mockups/mockup02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): EdTech Pro (2)
Description: Advanced learning management systems, interactive student progress dashboards, and curriculum planning interfaces.
URL: https://lightswind.com/blocks/edtech-pro

### BLOCK (PRO): learninglms01
Title: Enterprise Learning Hub
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive LMS interface for managing courses, students, and certification tracks with interactive content previews.
URL: https://lightswind.com/blocks/edtech-pro/learninglms01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): studentprogress01
Title: Student Growth Analytics
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive dashboard for tracking student performance, skill acquisition, and engagement metrics over time.
URL: https://lightswind.com/blocks/edtech-pro/studentprogress01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Enterprise Admin (3)
Description: Advanced high-density administration panels for user management, role-based access control, and organization scaling.
URL: https://lightswind.com/blocks/enterprise-admin

### BLOCK (PRO): adminusers01
Title: Enterprise User Directory
Access Level: Premium Pro Block (Source code excluded)
Description: A highly robust user management table featuring role badges, bulk actions, and advanced status filtering designed for SaaS admin panels.
URL: https://lightswind.com/blocks/enterprise-admin/adminusers01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): adminroles01
Title: RBAC Permissions Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated matrix interface for configuring fine-grained Role-Based Access Control permissions across multiple organizational modules.
URL: https://lightswind.com/blocks/enterprise-admin/adminroles01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): advancedadmindashboard01
Title: Advanced Admin Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: Full-featured enterprise dashboard with real-time stat cards, telemetry monitoring, audit logs, and interactive user roster tables.
URL: https://lightswind.com/blocks/enterprise-admin/advancedadmindashboard01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): FAQ (5)
Description: Organized accordion and list components for Frequently Asked Questions. Reduce support tickets and help users find answers quickly.
URL: https://lightswind.com/blocks/faq

### BLOCK (PRO): faq01
Title: Modern Minimalist FAQ
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, accessible accordion component for Frequently Asked Questions. Features smooth expansion animations and a clutter-free design to answer user queries efficiently.
URL: https://lightswind.com/blocks/faq/faq01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): faq02
Title: Categorized Support FAQ
Access Level: Premium Pro Block (Source code excluded)
Description: A professional help center layout with sidebar navigation for categorized questions. Ideal for documentation sites and extensive support pages.
URL: https://lightswind.com/blocks/faq/faq02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): faq03
Title: Premium Accordion FAQ
Access Level: Premium Pro Block (Source code excluded)
Description: A polished FAQ section featuring smooth expansion animations and clean typography. Includes a built-in support contact card for unresolved queries.
URL: https://lightswind.com/blocks/faq/faq03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): faq04
Title: Strategic Two-Column FAQ
Access Level: Premium Pro Block (Source code excluded)
Description: A space-efficient FAQ component with a sticky sidebar header and categorization. Perfect for long lists of questions without overwhelming the user.
URL: https://lightswind.com/blocks/faq/faq04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): faq05
Title: Enterprise Solution Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A structured, category-based FAQ system designed for complex products. Features search integration and organized response tiers.
URL: https://lightswind.com/blocks/faq/faq05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): FinTech & Web3 (6)
Description: Premium blocks tailored for financial platforms. Multi-asset wallets, complex blockchain transaction feeds, and modern banking visuals.
URL: https://lightswind.com/blocks/fintech

### BLOCK (PRO): finwallet01
Title: Crypto / Multi-Asset Wallet
Access Level: Premium Pro Block (Source code excluded)
Description: A compact, highly polished wallet presentation block showing user balances, portfolio percentage changes, and send/swap action points.
URL: https://lightswind.com/blocks/fintech/finwallet01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): fintransaction01
Title: Live Transaction Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A dynamic list of recent on-chain activities (withdrawals, swaps, smart contracts) featuring precise status badges, icons, and timestamp displays.
URL: https://lightswind.com/blocks/fintech/fintransaction01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): fintrade01
Title: Web3 Asset Exchange
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity asset swap interface featuring real-time state simulations, slippage controls, and professional protocol design. Optimized for institutional Web3 platforms.
URL: https://lightswind.com/blocks/fintech/fintrade01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): finassets01
Title: Portfolio Asset Manifest
Access Level: Premium Pro Block (Source code excluded)
Description: A professional portfolio analytics dashboard with live SVG sparklines, yield distribution trackers, and high-fidelity transactional manifests. Designed for deep-tech finance.
URL: https://lightswind.com/blocks/fintech/finassets01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): fincredit01
Title: Digital Card Protocol
Access Level: Premium Pro Block (Source code excluded)
Description: An elite digital card management interface featuring 3D flip card animations, security detail toggles, and professional protocol-based spending controls.
URL: https://lightswind.com/blocks/fintech/fincredit01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): fintechwallet01
Title: Crypto Wallet Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A mobile-first Web3 active wallet display. Shows interactive percentage changes, multi-token asset tracking lists, gradient promotional areas, and ambient blurring lights.
URL: https://lightswind.com/blocks/fintech/fintechwallet01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): FinTech Pro (2)
Description: Sophisticated financial interfaces including market analysis charts, real-time asset allocation, and algorithmic trading monitors.
URL: https://lightswind.com/blocks/fintech-pro

### BLOCK (PRO): marketanalysis01
Title: Live Market Analysis Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A high-performance trading dashboard featuring real-time price action charts, order books, and depth visualizations for algorithmic trading.
URL: https://lightswind.com/blocks/fintech-pro/marketanalysis01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): assetallocation01
Title: Dynamic Asset Allocation
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive portfolio rebalancing interface with donut charts, risk assessment sliders, and automated distribution proposals.
URL: https://lightswind.com/blocks/fintech-pro/assetallocation01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Footers (6)
Description: Comprehensive footer layouts designed for optimal site navigation and SEO. Includes multi-column links, newsletter signups, and legal compliance sections.
URL: https://lightswind.com/blocks/footer

### BLOCK (PRO): footer01
Title: Modern Multi-Column Footer
Access Level: Premium Pro Block (Source code excluded)
Description: A comprehensive SEO-friendly footer layout. Features multi-column navigation links, an integrated newsletter subscription form, and social media icons.
URL: https://lightswind.com/blocks/footer/footer01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): footer02
Title: Comprehensive Ecosystem Footer
Access Level: Premium Pro Block (Source code excluded)
Description: A feature-rich footer designed for large platforms. Includes multi-tier navigation, system status indicators, legal links, and an integrated newsletter capture.
URL: https://lightswind.com/blocks/footer/footer02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): footer03
Title: Minimalist Copyright Footer
Access Level: Premium Pro Block (Source code excluded)
Description: A simple, understated footer focusing on copyright info, a logo, and essential social links. Best for single-page sites or rapid prototypes.
URL: https://lightswind.com/blocks/footer/footer03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): footer04
Title: Elite CPU Ecosystem Footer
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-modern, high-fidelity footer with a CPU-inspired brand section, rapid multi-column navigation links with micro-animations, and an integrated system status manifest. Designed for deep monochromatic professionalism.
URL: https://lightswind.com/blocks/footer/footer04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): footer05
Title: Minimal High-End Footer
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, centered minimal footer designed for premium dark-mode interfaces. Features clean typography, spacious navigation rows, and a subtle system uptime status bar for mission-critical reliability.
URL: https://lightswind.com/blocks/footer/footer05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): footer06
Title: Protocol Command Center
Access Level: Premium Pro Block (Source code excluded)
Description: A high-tech, terminal-inspired
URL: https://lightswind.com/blocks/footer/footer06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Gallery (4)
Description: Stunning image grids and masonry layouts for portfolios. perfect for showcasing photography, designs, or products in a cohesive visual system.
URL: https://lightswind.com/blocks/gallery

### BLOCK (PRO): gallery01
Title: Modern Masonry Portfolio
Access Level: Premium Pro Block (Source code excluded)
Description: A classic masonry image gallery that adapts to different image aspect ratios. Features a hover overlay for project titles and categories.
URL: https://lightswind.com/blocks/gallery/gallery01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): gallery02
Title: Immersive Lightbox Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: A premium image gallery grid that opens full-screen interactive lightboxes on click. Perfect for photography portfolios requiring close-up inspection.
URL: https://lightswind.com/blocks/gallery/gallery02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): gallery03
Title: Advanced Masonry Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A high-performance masonry grid for image-heavy portfolios. Features dynamic loading, sleek hover transitions, and a responsive layout that adapts to any screen size.
URL: https://lightswind.com/blocks/gallery/gallery03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfolio01
Title: Professional Filtered Portfolio
Access Level: Premium Pro Block (Source code excluded)
Description: A stunning masonry-style portfolio grid with category filtering. Includes smooth layout animations via Framer Motion and detailed hover overlays.
URL: https://lightswind.com/blocks/gallery/portfolio01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): HealthTech & Wellness (2)
Description: Medical-grade dashboards for monitoring patient vitals, medical imaging visualizations, and healthcare compliance tracking.
URL: https://lightswind.com/blocks/health-tech

### BLOCK (PRO): patientvitals01
Title: Critical Patient Vitals Monitor
Access Level: Premium Pro Block (Source code excluded)
Description: A medical-grade monitoring screen showing real-time heart rate, SpO2, and blood pressure with wave-form animations and alert thresholds.
URL: https://lightswind.com/blocks/health-tech/patientvitals01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): medicalimaging01
Title: DICOM Viewer Workspace
Access Level: Premium Pro Block (Source code excluded)
Description: A dark-themed medical imaging workspace for reviewing MRI/CT scans with zoom, pan, and annotation tools simulation.
URL: https://lightswind.com/blocks/health-tech/medicalimaging01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Interactive Primitives (2)
Description: Low-level interactive building blocks. From magnetic buttons and ripple loaders to 3D hover effects and complex micro-interactions.
URL: https://lightswind.com/blocks/primitives

### BLOCK (PRO): primitive01
Title: Interactive Atoms
Access Level: Premium Pro Block (Source code excluded)
Description: A showcase of fundamental interactive building blocks like ripple loaders and luminance sweep effects.
URL: https://lightswind.com/blocks/primitives/primitive01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): primitive02
Title: Quantum Depth View
Access Level: Premium Pro Block (Source code excluded)
Description: Advanced 3D perspective transformations for stunning visual depth and parallax interaction models.
URL: https://lightswind.com/blocks/primitives/primitive02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Legal & Compliance (2)
Description: Enterprise-grade legal document management, compliance tracking matrices, and automated policy acceptance interfaces.
URL: https://lightswind.com/blocks/legal-tech

### BLOCK (PRO): legalvault01
Title: Immutable Legal Vault
Access Level: Premium Pro Block (Source code excluded)
Description: A secure document repository for legal contracts featuring version control, digital signature status, and expiration alerts.
URL: https://lightswind.com/blocks/legal-tech/legalvault01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): compliancematrix01
Title: Compliance Risk Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A high-density grid visualization for tracking regulatory compliance across multiple jurisdictions with risk heatmap coloring.
URL: https://lightswind.com/blocks/legal-tech/compliancematrix01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Logistics & Supply Chain (2)
Description: Real-time fleet tracking, inventory management systems, and global supply chain visualization for logistics enterprises.
URL: https://lightswind.com/blocks/logistics-pro

### BLOCK (PRO): fleettracker01
Title: Global Fleet Radar
Access Level: Premium Pro Block (Source code excluded)
Description: A real-time logistics dashboard for tracking global vehicle fleets with status indicators, route history, and driver metadata.
URL: https://lightswind.com/blocks/logistics-pro/fleettracker01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): inventoryheatmap01
Title: Inventory Velocity Heatmap
Access Level: Premium Pro Block (Source code excluded)
Description: A visual warehouse management tool for tracking stock levels across multiple locations with predictive replenishment alerts.
URL: https://lightswind.com/blocks/logistics-pro/inventoryheatmap01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Logo (10)
Description: Professional logo clouds and ticker components to showcase clients, partners, or sophisticated tech stacks, building immediate social proof and credibility.
URL: https://lightswind.com/blocks/logo

### BLOCK (PRO): logo01
Title: Infinite Brand Carousel
Access Level: Premium Pro Block (Source code excluded)
Description: A smooth, infinite-scrolling logo marquee component. Essential for showcasing client partnerships and building social proof on landing pages.
URL: https://lightswind.com/blocks/logo/logo01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo02
Title: Infinite Logo Marquee
Access Level: Premium Pro Block (Source code excluded)
Description: A smooth, continuous scrolling marquee for partner logos. Features grayscale-to-color hover transitions to subtly highlight brands without cluttering the interface.
URL: https://lightswind.com/blocks/logo/logo02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo03
Title: Professional Brand Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A clean, static logo grid with a subtle hover zoom effect. Designed to display partner or client logos with professional restraint and elegance.
URL: https://lightswind.com/blocks/logo/logo03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo04
Title: Minimalist Trusted Strip
Access Level: Premium Pro Block (Source code excluded)
Description: A compact, single-line logo strip perfect for separating content sections. Uses grayscale branding to add authority without distractions.
URL: https://lightswind.com/blocks/logo/logo04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo05
Title: Enterprise Cloud & Tech Ecosystem Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive, category-filtered enterprise partner matrix featuring dynamic SLA badges, real-time metrics, and tactile brand cards.
URL: https://lightswind.com/blocks/logo/logo05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo06
Title: Bento Trust & Real-Time Partner Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A high-conversion compact bento showcase combining social proof ratings, customer avatar stacks, and live status pings for top partners.
URL: https://lightswind.com/blocks/logo/logo06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo07
Title: Dual-Track Ambient Velocity Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A dual-speed infinite velocity marquee with ambient edge gradient masks, pause-on-hover physics, and a floating enterprise case study spotlight.
URL: https://lightswind.com/blocks/logo/logo07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo08
Title: Orbital Constellation & Cloud Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A concentric rotating orbital constellation holding partner nodes around an enterprise core hub with interactive latency inspection.
URL: https://lightswind.com/blocks/logo/logo08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo09
Title: Enterprise Brand Proof & Testimonial Switcher
Access Level: Premium Pro Block (Source code excluded)
Description: Interactive partner tabs dynamically switching verified customer testimonial quotes, executive avatars, and measurable ROI metric counters.
URL: https://lightswind.com/blocks/logo/logo09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): logo10
Title: Global Multi-Region Compliance Ticker
Access Level: Premium Pro Block (Source code excluded)
Description: A compact enterprise logo bar with regional data residency tabs (US, EU, APAC) displaying local enterprise partners and compliance accreditations.
URL: https://lightswind.com/blocks/logo/logo10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Media Mention Bars (5)
Description: Professional logo grids, quote widgets, and infinite marquees displaying media and press publications.
URL: https://lightswind.com/blocks/media-mentions

### BLOCK (PRO): mediamention01
Title: Media Grid Quotes
Access Level: Premium Pro Block (Source code excluded)
Description: A responsive logo grid with animated cover cards and press quote flyouts on hover.
URL: https://lightswind.com/blocks/media-mentions/mediamention01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): mediamention02
Title: Continuous Press Marquee
Access Level: Premium Pro Block (Source code excluded)
Description: An infinite horizontal scrolling ticker of brand logos with hover pause-states.
URL: https://lightswind.com/blocks/media-mentions/mediamention02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): mediamention03
Title: Quote Tab Switcher
Access Level: Premium Pro Block (Source code excluded)
Description: A clickable brand logo roster that updates the active central testimonial widget.
URL: https://lightswind.com/blocks/media-mentions/mediamention03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): mediamention04
Title: Split Cover Story Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A split design with a primary featured story card alongside minor press mentions.
URL: https://lightswind.com/blocks/media-mentions/mediamention04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): mediamention05
Title: Glow Accolade Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A dark high-contrast panel grid featuring custom branding glow effects and ratings.
URL: https://lightswind.com/blocks/media-mentions/mediamention05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Navigation (5)
Description: Responsive headers, navbars, and mega-menus. The backbone of your site structure, ensuring easy access to all pages on any device.
URL: https://lightswind.com/blocks/navigation

### BLOCK (PRO): navsidebar01
Title: Animated SaaS Sidebar
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, collapsable dashboard sidebar navigation. Features nested accordion sub-menus, smooth Framer Motion expanding physics, and integrated user profiles.
URL: https://lightswind.com/blocks/navigation/navsidebar01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): navmegamenu01
Title: Framer Mega Menu
Access Level: Premium Pro Block (Source code excluded)
Description: An incredibly complex drop-down mega menu. Utilizes physics-based height adjustments to cleanly render deep content hierarchies without jarring clipping.
URL: https://lightswind.com/blocks/navigation/navmegamenu01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): header01
Title: Enterprise Navigation Header
Access Level: Premium Pro Block (Source code excluded)
Description: A robust, responsive navigation bar suitable for large-scale applications. Features support for mega-menus, user account dropdowns, and mobile drawers.
URL: https://lightswind.com/blocks/navigation/header01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): header02
Title: Floating Protocol Header
Access Level: Premium Pro Block (Source code excluded)
Description: A gorgeous, floating glassmorphic header designed for modern SaaS. Features a command search mock, notification badges, and high-fidelity
URL: https://lightswind.com/blocks/navigation/header02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): header03
Title: Dynamic Tabbed Pill
Access Level: Premium Pro Block (Source code excluded)
Description: An elite, centered pill navigation system. Features high-contrast branding, active tab spring animations (LayoutGroup), and a premium micro-status indicator overlay.
URL: https://lightswind.com/blocks/navigation/header03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Newsletter (4)
Description: High-converting newsletter signup blocks to grow your audience. Clean inputs and compelling copy areas to maximize subscription rates.
URL: https://lightswind.com/blocks/newsletter

### BLOCK (PRO): newsletter01
Title: High-Conversion Newsletter
Access Level: Premium Pro Block (Source code excluded)
Description: Maximize your subscriber growth with this premium newsletter block. Features ambient glow effects, real-time input validation, and persuasive micro-copy placement.
URL: https://lightswind.com/blocks/newsletter/newsletter01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): newsletter02
Title: High-Polished Dark Newsletter
Access Level: Premium Pro Block (Source code excluded)
Description: An immersive dark-mode newsletter capture form. Features sophisticated gradient glows, ambient blurs, and high-contrast input fields designed for developer-focused tools.
URL: https://lightswind.com/blocks/newsletter/newsletter02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): newsletter03
Title: Minimalist Glass Capture
Access Level: Premium Pro Block (Source code excluded)
Description: A sleek, glassmorphic newsletter signup block with floating input fields and refined micro-interactions for maximum conversion.
URL: https://lightswind.com/blocks/newsletter/newsletter03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): newsletter04
Title: High-Impact Dark Newsletter
Access Level: Premium Pro Block (Source code excluded)
Description: An immersive, horizontally-structured newsletter section featuring ambient typography effects, glassmorphic inputs, and premium motion-trigger states.
URL: https://lightswind.com/blocks/newsletter/newsletter04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Page (2)
Description: Full-page templates and layouts that provide a cohesive structure for landing pages, ensuring design consistency and speeding up development time.
URL: https://lightswind.com/blocks/page

### BLOCK (PRO): page01
Title: AI Launch Landing Page
Access Level: Premium Pro Block (Source code excluded)
Description: A complete, high-converting landing page template tailored for AI SaaS products. Includes Hero, Features, Pricing, and Testimonial sections in one cohesive, copy-paste React component.
URL: https://lightswind.com/blocks/page/page01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): page02
Title: SaaS Writer Landing Page
Access Level: Premium Pro Block (Source code excluded)
Description: A copy-paste landing page layout built with high-quality animated backgrounds, grid layouts, and custom badges. Tailored for writing assistants, content creators, and copywriters.
URL: https://lightswind.com/blocks/page/page02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Pipeline Visualizers (10)
Description: Interactive CI/CD charts, node stream graphs, version control flows, and deployment topology monitors.
URL: https://lightswind.com/blocks/pipeline-visualizers

### BLOCK (PRO): pipeline01
Title: CI/CD Build Pipeline
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive build stage tracker featuring console log panel visualization.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline02
Title: Data Streaming Graph
Access Level: Premium Pro Block (Source code excluded)
Description: An ingestion flow node graph detailing real-time message rates and backpressure metrics.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline03
Title: ML Training Process
Access Level: Premium Pro Block (Source code excluded)
Description: A machine learning pipeline tracker highlighting accuracy and cross-entropy loss parameters.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline04
Title: Git Release Flow
Access Level: Premium Pro Block (Source code excluded)
Description: A version control visualizer mapping git branches, validation checklists, and signature reviews.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline05
Title: Canary Scale Topography
Access Level: Premium Pro Block (Source code excluded)
Description: A Kubernetes replica topology controller showing active canary proxy weights.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline06
Title: API Gateway Router
Access Level: Premium Pro Block (Source code excluded)
Description: An inbound gateway proxy routing request headers to internal micro-services.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline07
Title: ETL Processor
Access Level: Premium Pro Block (Source code excluded)
Description: An extract-transform-load pipeline with live record counter simulations.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline08
Title: FaaS Orchestrator
Access Level: Premium Pro Block (Source code excluded)
Description: A step-function execution visualizer tracking inputs/outputs and execution times.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline09
Title: Webhook Delivery Queue
Access Level: Premium Pro Block (Source code excluded)
Description: A webhook retry queue manager tracking event delivery parameters.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): pipeline10
Title: Database Replication Sync
Access Level: Premium Pro Block (Source code excluded)
Description: A primary-replica database syncing topology dashboard highlighting lags.
URL: https://lightswind.com/blocks/pipeline-visualizers/pipeline10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Portfolio Sections (18)
Description: Advanced, professional portfolio sections with modern animations and high-end layouts.
URL: https://lightswind.com/blocks/portfolio

### BLOCK (PRO): portfoliosection04
Title: Dark Masonry Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: A dark-themed, sleek masonry-style portfolio with scroll parallax and large aesthetic imagery.
URL: https://lightswind.com/blocks/portfolio/portfoliosection04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection05
Title: Sticky Scroll Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A highly professional split-screen portfolio featuring a sticky descriptive left pane and scrolling cards on the right.
URL: https://lightswind.com/blocks/portfolio/portfoliosection05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection06
Title: Expandable Accordion Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive full-width accordion portfolio where hovering seamlessly expands project imagery.
URL: https://lightswind.com/blocks/portfolio/portfoliosection06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection07
Title: List With Floating Reveal
Access Level: Premium Pro Block (Source code excluded)
Description: A premium list-based portfolio that reveals high-resolution images floating alongside the user
URL: https://lightswind.com/blocks/portfolio/portfoliosection07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection08
Title: Infinite Marquee Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: An ultra-modern layout where a continuous marquee of project cards glides across the screen horizontally tied to your scroll.
URL: https://lightswind.com/blocks/portfolio/portfoliosection08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection09
Title: Stacked Parallax Cards
Access Level: Premium Pro Block (Source code excluded)
Description: A premium full-screen layout where giant project cards elegantly stack on top of each other as you scroll down.
URL: https://lightswind.com/blocks/portfolio/portfoliosection09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection10
Title: 3D Perspective Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A refined grid where cards elegantly tilt in 3D space based on mouse cursor position.
URL: https://lightswind.com/blocks/portfolio/portfoliosection10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection11
Title: Minimal Full-Screen Slider
Access Level: Premium Pro Block (Source code excluded)
Description: A highly editorial, full-screen slider focusing on massive typography and stunning crossfade imagery.
URL: https://lightswind.com/blocks/portfolio/portfoliosection11
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection12
Title: Pinned Horizontal Track
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced scrolling experience where the section pins to the viewport while content scrolls horizontally.
URL: https://lightswind.com/blocks/portfolio/portfoliosection12
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection13
Title: Asymmetric Offset Gallery
Access Level: Premium Pro Block (Source code excluded)
Description: A highly sophisticated layout utilizing an alternating two-column vertical offset to create a premium editorial feel.
URL: https://lightswind.com/blocks/portfolio/portfoliosection13
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection14
Title: Interactive Card Deck
Access Level: Premium Pro Block (Source code excluded)
Description: A playful yet highly professional stacked deck interaction where users swipe cards to reveal previous projects.
URL: https://lightswind.com/blocks/portfolio/portfoliosection14
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection15
Title: Text Mask Reveal
Access Level: Premium Pro Block (Source code excluded)
Description: A bold list-based layout featuring massive typography that masks and reveals project imagery only upon hover.
URL: https://lightswind.com/blocks/portfolio/portfoliosection15
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection16
Title: Aurora Portfolio Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A professional split-screen portfolio hero section featuring typing/shine text effects, custom stats, and a border-beaming laptop mockup card.
URL: https://lightswind.com/blocks/portfolio/portfoliosection16
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection17
Title: Cosmic Spotlight Bento Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A professional dark cosmic bento-grid portfolio hero section featuring star meteor animations and mouse-tracking spotlight cards.
URL: https://lightswind.com/blocks/portfolio/portfoliosection17
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection18
Title: Interactive Creative Director Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A highly professional creative director portfolio hero featuring custom dot-grid background alignments, client headshot tooltips, and interactive wobble card projections.
URL: https://lightswind.com/blocks/portfolio/portfoliosection18
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection19
Title: Immersive Art & CGI Portfolio Hero
Access Level: Premium Pro Block (Source code excluded)
Description: A professional immersive visual art portfolio section featuring mouse-interactive ambient blob backgrounds and floating grid gallery layers.
URL: https://lightswind.com/blocks/portfolio/portfoliosection19
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection02
Title: Advanced Bento Portfolio
Access Level: Premium Pro Block (Source code excluded)
Description: A highly professional bento-grid style portfolio section with Framer Motion hover effects.
URL: https://lightswind.com/blocks/portfolio/portfoliosection02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): portfoliosection03
Title: Professional Interactive Portfolio
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced, full-width interactive portfolio showcase with smooth transitions and glassmorphism details.
URL: https://lightswind.com/blocks/portfolio/portfoliosection03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Professional Onboarding (2)
Description: Intelligent, multi-step onboarding wizards designed to capture user data effortlessly while maximizing conversion rates.
URL: https://lightswind.com/blocks/onboarding-pro

### BLOCK (PRO): onboardingwizard01
Title: Multi-step Setup Wizard
Access Level: Premium Pro Block (Source code excluded)
Description: An elegant, animated multi-step setup flow for configuring new workspaces, selecting plans, and team invitations.
URL: https://lightswind.com/blocks/onboarding-pro/onboardingwizard01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): onboardingwelcome01
Title: Personalized Welcome Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A beautifully personalized welcome screen with a progress checklist and quick start resources to get users engaged immediately.
URL: https://lightswind.com/blocks/onboarding-pro/onboardingwelcome01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): SaaS Sections (13)
Description: Professional, conversion-optimized layouts and widgets tailored specifically for modern software-as-a-service platforms.
URL: https://lightswind.com/blocks/saas

### BLOCK (PRO): saasfeaturegrid01
Title: Bento Feature Manifest
Access Level: Premium Pro Block (Source code excluded)
Description: A professional high-fidelity Bento Grid featuring SaaS capabilities, mouse-tracking spotlights, interactive elements, and custom badges.
URL: https://lightswind.com/blocks/saas/saasfeaturegrid01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasstats01
Title: SaaS Enterprise Core Stats
Access Level: Premium Pro Block (Source code excluded)
Description: A conversion-optimized enterprise statistics block with animated trends, secondary controls, and interactive details.
URL: https://lightswind.com/blocks/saas/saasstats01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasmetricdashboard01
Title: KPI Optimization Console
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity dashboard console presenting critical SaaS key performance indicators (KPIs) with detailed telemetry panels.
URL: https://lightswind.com/blocks/saas/saasmetricdashboard01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasintegrationhub01
Title: Connected Integration Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A visually stunning integration grid showcasing automated connections, API statuses, and interactive workflow setups.
URL: https://lightswind.com/blocks/saas/saasintegrationhub01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saaspricing01
Title: SaaS Conversion Pricing
Access Level: Premium Pro Block (Source code excluded)
Description: A premium SaaS pricing grid featuring interactive plan highlights, feature matrices, and conversion-optimized checkout links.
URL: https://lightswind.com/blocks/saas/saaspricing01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasbilling01
Title: Flexible Seat Billing
Access Level: Premium Pro Block (Source code excluded)
Description: A professional seats and plan billing configurator with dynamic price calculator and commitment toggle.
URL: https://lightswind.com/blocks/saas/saasbilling01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasfeedbackwidget01
Title: Feature Feedback Hub
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive feedback collection panel with emoji ratings and category filters.
URL: https://lightswind.com/blocks/saas/saasfeedbackwidget01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasonboarding01
Title: Workspace Onboarding Setup
Access Level: Premium Pro Block (Source code excluded)
Description: A multi-step onboarding flow for workspaces with naming, accent colors, and developer invitations.
URL: https://lightswind.com/blocks/saas/saasonboarding01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasusermanagement01
Title: Team User Console
Access Level: Premium Pro Block (Source code excluded)
Description: A high-density user roster view with customizable role menus and filter query fields.
URL: https://lightswind.com/blocks/saas/saasusermanagement01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasactivityfeed01
Title: Workspace Live Logs
Access Level: Premium Pro Block (Source code excluded)
Description: A real-time telemetry log feed displaying interactive JSON payloads.
URL: https://lightswind.com/blocks/saas/saasactivityfeed01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasfeaturegrid02
Title: Developer Bento Feature Manifest
Access Level: Premium Pro Block (Source code excluded)
Description: A premium interactive SaaS Feature Bento Grid with smooth tab-switching animations, glassmorphic styling, and latency/uptime metrics.
URL: https://lightswind.com/blocks/saas/saasfeaturegrid02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasintegrationhub02
Title: Observability Integration Hub
Access Level: Premium Pro Block (Source code excluded)
Description: An advanced integration console featuring active fuzzy search, category filtering, live connection toggles, and webhook payload terminal preview.
URL: https://lightswind.com/blocks/saas/saasintegrationhub02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): saasactivityfeed02
Title: Telemetry Activity Console
Access Level: Premium Pro Block (Source code excluded)
Description: A state-of-the-art live activity and log console featuring simulated live streams, pause controls, search queries, and collapsible metadata payloads.
URL: https://lightswind.com/blocks/saas/saasactivityfeed02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Security & DevSecOps (2)
Description: Real-time threat monitoring, immutable audit logs, and compliance dashboards for security-first products.
URL: https://lightswind.com/blocks/security-ops

### BLOCK (PRO): securityauditlog01
Title: Immutable Audit Log
Access Level: Premium Pro Block (Source code excluded)
Description: A detailed, filterable timeline of system events, logins, and API accesses with categorized risk level badges.
URL: https://lightswind.com/blocks/security-ops/securityauditlog01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): securitythreatmap01
Title: Active Threat Radar
Access Level: Premium Pro Block (Source code excluded)
Description: A high-end, dark-themed threat map simulation featuring sweeping radar animations and active ingress plotting.
URL: https://lightswind.com/blocks/security-ops/securitythreatmap01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Social & Community (5)
Description: Engaging social and community interfaces. Highly interactive chat messengers, timeline feeds, and animated comment threading structures.
URL: https://lightswind.com/blocks/social

### BLOCK (PRO): socialfeed01
Title: Interactive Timeline Feed
Access Level: Premium Pro Block (Source code excluded)
Description: A highly engaging social media feed block. Features inline media grids, interaction counts, expandable threaded comments, and sleek
URL: https://lightswind.com/blocks/social/socialfeed01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): socialchat01
Title: Fidelity Direct Messenger
Access Level: Premium Pro Block (Source code excluded)
Description: A complex web messaging component. Features a seamless sidebar contact list, dynamic read-receipt mapping, interactive
URL: https://lightswind.com/blocks/social/socialchat01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): socialdiscovery01
Title: Creator Discovery Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A premium creator exploration interface with interactive follow cards, high-fidelity bio snippets, and institutional social aesthetics.
URL: https://lightswind.com/blocks/social/socialdiscovery01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): socialcommunity01
Title: Elite Community Dashboard
Access Level: Premium Pro Block (Source code excluded)
Description: A sophisticated community hub with channelized navigation, real-time member statistics, and polished event promotion areas.
URL: https://lightswind.com/blocks/social/socialcommunity01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): socialprofile01
Title: Animated User Profile
Access Level: Premium Pro Block (Source code excluded)
Description: A high-fidelity social profile interface structured with semantic HTML. Displays a sticky hero header, Framer Motion nested tab indicators, and a comprehensive Twitter-style feed complete with interactions.
URL: https://lightswind.com/blocks/social/socialprofile01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Stats (3)
Description: Visual statistics headers and count-up animations. Display growth metrics, user numbers, and achievements with professional confidence.
URL: https://lightswind.com/blocks/stats

### BLOCK (PRO): stats01
Title: Growth & Impact Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A minimalist statistics grid designed to highlight key performance indicators (KPIs) and company achievements. Features animated number counters to draw attention.
URL: https://lightswind.com/blocks/stats/stats01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): stats02
Title: Abstract Dark Metrics
Access Level: Premium Pro Block (Source code excluded)
Description: A futuristic statistics block for dark-mode interfaces. Uses large, high-contrast numbers and subtle gradients to make key performance indicators pop.
URL: https://lightswind.com/blocks/stats/stats02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): stats03
Title: Live Metric Pulse
Access Level: Premium Pro Block (Source code excluded)
Description: An animated statistics section with radial progress indicators and live trend visualizations. Designed for modern dashboards and company overview pages.
URL: https://lightswind.com/blocks/stats/stats03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Steps (3)
Description: Clear process visualizers and
URL: https://lightswind.com/blocks/steps

### BLOCK (PRO): step01
Title: Animated Process Map
Access Level: Premium Pro Block (Source code excluded)
Description: A visual
URL: https://lightswind.com/blocks/steps/step01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): step02
Title: Vertical Progress Tracker
Access Level: Premium Pro Block (Source code excluded)
Description: A vertical step progress component with active state indicators. Ideal for multi-stage forms, tutorials, or shipment tracking interfaces.
URL: https://lightswind.com/blocks/steps/step02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): step03
Title: Fluid Horizontal Progress
Access Level: Premium Pro Block (Source code excluded)
Description: An elite horizontal step-progress component with physics-based line animations, interactive tooltip labels, and high-fidelity active state indicators.
URL: https://lightswind.com/blocks/steps/step03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Team (10)
Description: Modern team content blocks to humanize your brand. Showcase founders, employees, and contributors with clean cards and profile layouts.
URL: https://lightswind.com/blocks/team

### BLOCK (PRO): team01
Title: Modern Team Profiles
Access Level: Premium Pro Block (Source code excluded)
Description: Sleek and professional team member cards with integrated social media links and subtle hover effects. Perfect for
URL: https://lightswind.com/blocks/team/team01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team02
Title: Modern Social Team Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A dynamic team directory featuring large profile images and interactive social media overlays. Grayscale-to-color hover effects create an engaging user experience.
URL: https://lightswind.com/blocks/team/team02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team03
Title: Executive Spotlight
Access Level: Premium Pro Block (Source code excluded)
Description: A premium layout for highlighting executive team members. Features a side-by-side photo and bio arrangement with a refined serif typography option.
URL: https://lightswind.com/blocks/team/team03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team04
Title: Visionary Portrait Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A premium team showcase featuring large, high-resolution portraits with hover-reveal bios. Designed for executive leadership pages where personal branding is key.
URL: https://lightswind.com/blocks/team/team04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team05
Title: Circular Avatar Grid
Access Level: Premium Pro Block (Source code excluded)
Description: A clean team grid using circular avatars and centered text. A classic, approachable design choice for startups and community-focused groups.
URL: https://lightswind.com/blocks/team/team05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team06
Title: Interactive Departmental Bento Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive, department-filtered bento team matrix with real-time status badges, location tags, and direct social links.
URL: https://lightswind.com/blocks/team/team06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team07
Title: Executive Leadership & Advisory Board Dossier
Access Level: Premium Pro Block (Source code excluded)
Description: A dual-roster executive leadership grid paired with a distinguished advisory board, alumni badges, and animated global talent counters.
URL: https://lightswind.com/blocks/team/team07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team08
Title: Global Distributed Team & Live Timezone HUD
Access Level: Premium Pro Block (Source code excluded)
Description: Autonomous distributed engineer cards equipped with dynamic local timezone clocks, core stack pills, and office hours booking actions.
URL: https://lightswind.com/blocks/team/team08
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team09
Title: Engineering Pods & Technical Squads
Access Level: Premium Pro Block (Source code excluded)
Description: An autonomous engineering pod architecture matrix featuring domain squad leads, sprint telemetry metrics, and core tech stack chips.
URL: https://lightswind.com/blocks/team/team09
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): team10
Title: Open Roles & Team Culture Radar
Access Level: Premium Pro Block (Source code excluded)
Description: An interactive talent manifesto and open engineering roles directory with compensation transparency, culture perks, and GitHub quick-apply.
URL: https://lightswind.com/blocks/team/team10
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Testimonials (7)
Description: Persuasive testimonial grids and sliders to showcase customer success. build authority and reduce hesitation with authentic social proof.
URL: https://lightswind.com/blocks/testimonials

### BLOCK (PRO): testimonial01
Title: Scrolling Social Proof
Access Level: Premium Pro Block (Source code excluded)
Description: A dynamic, infinite-scroll testimonial marquee. Perfect for displaying a large volume of customer feedback in a compact, engaging way to build instant credibility.
URL: https://lightswind.com/blocks/testimonials/testimonial01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial02
Title: Trusted Wall of Love
Access Level: Premium Pro Block (Source code excluded)
Description: A masonry-style grid of customer testimonials. Designed to showcase diverse user stories and high ratings in a visually rich
URL: https://lightswind.com/blocks/testimonials/testimonial02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial03
Title: Large Featured Quote
Access Level: Premium Pro Block (Source code excluded)
Description: A commanding single-testimonial layout featuring oversized typography and a dedicated author profile. Ideal for highlighting a key customer success story.
URL: https://lightswind.com/blocks/testimonials/testimonial03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial04
Title: Infinite Carousel Wall
Access Level: Premium Pro Block (Source code excluded)
Description: A smooth, auto-scrolling testimonial marquee that pauses on interaction. Perfect for showcasing a high volume of client feedback in a compact, dynamic strip.
URL: https://lightswind.com/blocks/testimonials/testimonial04
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial05
Title: Executive Highlight Quote
Access Level: Premium Pro Block (Source code excluded)
Description: A large-format testimonial block dedicated to a single, impactful quote. Features a high-fidelity avatar and subtle background styling to draw focus.
URL: https://lightswind.com/blocks/testimonials/testimonial05
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial06
Title: Dynamic Highlight Wall
Access Level: Premium Pro Block (Source code excluded)
Description: A premium masonry testimonial grid featuring interactive highlighter-style text effects and social proof metadata. Perfect for showcasing high-impact customer feedback.
URL: https://lightswind.com/blocks/testimonials/testimonial06
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): testimonial07
Title: Corporate B2B Testimonial Slider
Access Level: Premium Pro Block (Source code excluded)
Description: A refined, corporate testimonial slider built for high-level quotes. Includes company logo placeholders, star ratings, and smooth fade transitions.
URL: https://lightswind.com/blocks/testimonials/testimonial07
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

## BLOCK CATEGORY (PRO): Timeline (3)
Description: Chronological layout components for company history, product roadmaps, or changelogs. visualise progress and milestones effectively.
URL: https://lightswind.com/blocks/timeline

### BLOCK (PRO): timeline01
Title: Industrial Vertical Timeline
Access Level: Premium Pro Block (Source code excluded)
Description: A professional vertical timeline component. Ideal for displaying company history, potential product roadmaps, or release logs with a structured, step-by-step layout.
URL: https://lightswind.com/blocks/timeline/timeline01
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): timeline02
Title: Product Roadmap Showcase
Access Level: Premium Pro Block (Source code excluded)
Description: A premium horizontal scrolling timeline featuring scroll-synced progress indicators, glassmorphic roadmap cards, and smooth staggered entrance animations. Perfect for product roadmaps and strategic vision segments.
URL: https://lightswind.com/blocks/timeline/timeline02
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------

### BLOCK (PRO): timeline03
Title: Phase Execution Matrix
Access Level: Premium Pro Block (Source code excluded)
Description: A professional vertical timeline specializing in project cycle visualization. Features staggered neo-brutalist cards, central spine progression, and interactive phase indicators.
URL: https://lightswind.com/blocks/timeline/timeline03
How to Unlock: This is a premium layout block. Get lifetime access to all 390+ blocks by upgrading to Pro at https://lightswind.com/pricing.
--------------------------------------------------