===== COMPONENT: 3d-folder =====
Title: 3D Folder
Description: A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.

--- file: gammaui/3d-folder.tsx ---
"use client"

import {
  forwardRef,
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react"
import type React from "react"
import {
  IconChevronLeft,
  IconChevronRight,
  IconExternalLink,
  IconX,
} from "@tabler/icons-react"

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

interface Project {
  id: string
  image: string
  title: string
}

interface AnimatedFolderProps {
  title: string
  projects: Project[]
  className?: string
}

export function AnimatedFolder({
  title,
  projects,
  className,
}: AnimatedFolderProps) {
  const [isOpened, setIsOpened] = useState(false)
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
  const [sourceRect, setSourceRect] = useState<DOMRect | null>(null)
  const [hiddenCardId, setHiddenCardId] = useState<string | null>(null)
  const cardRefs = useRef<(HTMLDivElement | null)[]>([])

  const handleProjectClick = (project: Project, index: number) => {
    const cardEl = cardRefs.current[index]
    if (cardEl) {
      setSourceRect(cardEl.getBoundingClientRect())
    }
    setSelectedIndex(index)
    setHiddenCardId(project.id)
  }

  const handleCloseLightbox = () => {
    setSelectedIndex(null)
    setSourceRect(null)
  }

  const handleCloseComplete = () => {
    setHiddenCardId(null)
  }

  const handleNavigate = (newIndex: number) => {
    setSelectedIndex(newIndex)
    setHiddenCardId(projects[newIndex]?.id || null)
  }

  return (
    <>
      <div
        className={cn(
          "relative flex flex-col items-center justify-center",
          "cursor-pointer rounded-2xl p-8",
          "transition-all duration-500 ease-out",
          "group",
          className
        )}
        style={{
          minWidth: "280px",
          minHeight: "320px",
          perspective: "1000px",
        }}
      >
        {/* Subtle background glow on hover */}
        <div
          className="absolute inset-0 rounded-2xl transition-opacity duration-500"
          style={{
            background:
              "radial-gradient(circle at 50% 70%, var(--accent) 0%, transparent 70%)",
            opacity: isOpened ? 0.08 : 0,
          }}
        />

        <div
          className="relative mb-4 flex items-center justify-center"
          style={{ height: "160px", width: "200px" }}
          onClick={() => setIsOpened((prev) => !prev)}
        >
          {/* Folder back layer - z-index 10 */}
          <div
            className="absolute h-24 w-32 rounded-[10px] bg-[#437cb2] shadow-md"
            style={{
              transformOrigin: "bottom center",
              transform: isOpened ? "rotateX(-15deg)" : "rotateX(0deg)",
              transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
              zIndex: 10,
            }}
          />

          {/* Folder tab - z-index 10 */}
          <div
            className="absolute h-4 w-12 rounded-t-[7px] bg-[#5184b3]"
            style={{
              top: "calc(50% - 48px - 12px)",
              left: "calc(50% - 64px + 2px)",
              transformOrigin: "bottom center",
              transform: isOpened
                ? "rotateX(-25deg) translateY(2px)"
                : "rotateX(0deg)",
              transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
              zIndex: 10,
            }}
          />

          {/* Project cards - z-index 20, between back and front */}
          <div
            className="absolute"
            style={{
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              zIndex: 20,
            }}
          >
            {projects.slice(0, 3).map((project, index) => (
              <ProjectCard
                key={project.id}
                ref={(el) => {
                  cardRefs.current[index] = el
                }}
                image={project.image}
                title={project.title}
                delay={index * 80}
                isVisible={isOpened}
                index={index}
                onClick={() => handleProjectClick(project, index)}
                isSelected={hiddenCardId === project.id}
              />
            ))}
          </div>

          {/* Folder front layer - z-index 30 */}
          <div
            className="absolute h-24 w-32 rounded-[10px] bg-[#5184b3] shadow-lg"
            style={{
              top: "calc(50% - 48px + 4px)",
              transformOrigin: "bottom center",
              transform: isOpened
                ? "rotateX(25deg) translateY(8px)"
                : "rotateX(0deg)",
              transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
              zIndex: 30,
            }}
          />

          {/* Folder shine effect - z-index 31 */}
          <div
            className="pointer-events-none absolute h-24 w-32 overflow-hidden rounded-[10px]"
            style={{
              top: "calc(50% - 48px + 4px)",
              background:
                "linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%)",
              transformOrigin: "bottom center",
              transform: isOpened
                ? "rotateX(25deg) translateY(8px)"
                : "rotateX(0deg)",
              transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
              zIndex: 31,
            }}
          />
        </div>

        {/* Folder title */}
        <h3
          className="text-foreground text-lg font-semibold transition-all duration-300"
          style={{
            transform: isOpened ? "translateY(4px)" : "translateY(0)",
          }}
        >
          {title}
        </h3>

        {/* Project count */}
        <p
          className="text-muted-foreground text-sm transition-all duration-300"
          style={{
            opacity: isOpened ? 0.7 : 1,
          }}
        >
          {projects.length} Documents
        </p>

        {/* Hover hint */}
        <div
          className="text-muted-foreground absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-1.5 text-xs transition-all duration-300"
          style={{
            opacity: isOpened ? 0 : 0.6,
            transform: isOpened ? "translateY(10px)" : "translateY(0)",
          }}
        >
          <span>Click to explore</span>
        </div>
      </div>

      <ImageLightbox
        projects={projects.slice(0, 3)}
        currentIndex={selectedIndex ?? 0}
        isOpen={selectedIndex !== null}
        onClose={handleCloseLightbox}
        sourceRect={sourceRect}
        onCloseComplete={handleCloseComplete}
        onNavigate={handleNavigate}
      />
    </>
  )
}

interface Project {
  id: string
  image: string
  title: string
}

interface ImageLightboxProps {
  projects: Project[]
  currentIndex: number
  isOpen: boolean
  onClose: () => void
  sourceRect: DOMRect | null
  onCloseComplete?: () => void
  onNavigate: (index: number) => void
}

export function ImageLightbox({
  projects,
  currentIndex,
  isOpen,
  onClose,
  sourceRect,
  onCloseComplete,
  onNavigate,
}: ImageLightboxProps) {
  const [animationPhase, setAnimationPhase] = useState<
    "initial" | "animating" | "complete"
  >("initial")
  const [isClosing, setIsClosing] = useState(false)
  const [shouldRender, setShouldRender] = useState(false)
  const [internalIndex, setInternalIndex] = useState(currentIndex)
  const [prevIndex, setPrevIndex] = useState(currentIndex)
  const [isSliding, setIsSliding] = useState(false)
  const [slideDirection, setSlideDirection] = useState<"left" | "right">(
    "right"
  )
  const containerRef = useRef<HTMLDivElement>(null)

  const totalProjects = projects.length
  const hasNext = internalIndex < totalProjects - 1
  const hasPrev = internalIndex > 0

  const currentProject = projects[internalIndex]

  useEffect(() => {
    if (isOpen && currentIndex !== internalIndex && !isSliding) {
      const direction = currentIndex > internalIndex ? "left" : "right"
      setSlideDirection(direction)
      setPrevIndex(internalIndex)
      setIsSliding(true)

      const timer = setTimeout(() => {
        setInternalIndex(currentIndex)
        setIsSliding(false)
      }, 400)

      return () => clearTimeout(timer)
    }
  }, [currentIndex, isOpen])

  useEffect(() => {
    if (isOpen) {
      setInternalIndex(currentIndex)
      setPrevIndex(currentIndex)
      setIsSliding(false)
    }
  }, [isOpen])

  const navigateNext = useCallback(() => {
    if (internalIndex >= totalProjects - 1 || isSliding) return
    onNavigate(internalIndex + 1)
  }, [internalIndex, totalProjects, isSliding, onNavigate])

  const navigatePrev = useCallback(() => {
    if (internalIndex <= 0 || isSliding) return
    onNavigate(internalIndex - 1)
  }, [internalIndex, isSliding, onNavigate])

  const handleClose = useCallback(() => {
    setIsClosing(true)
    onClose()
    setTimeout(() => {
      setIsClosing(false)
      setShouldRender(false)
      setAnimationPhase("initial")
      onCloseComplete?.()
    }, 400)
  }, [onClose, onCloseComplete])

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (!isOpen) return
      if (e.key === "Escape") handleClose()
      if (e.key === "ArrowRight") navigateNext()
      if (e.key === "ArrowLeft") navigatePrev()
    }

    window.addEventListener("keydown", handleKeyDown)
    if (isOpen) {
      document.body.style.overflow = "hidden"
    }

    return () => {
      window.removeEventListener("keydown", handleKeyDown)
      document.body.style.overflow = ""
    }
  }, [isOpen, handleClose, navigateNext, navigatePrev])

  useLayoutEffect(() => {
    if (isOpen && sourceRect) {
      setShouldRender(true)
      setAnimationPhase("initial")
      setIsClosing(false)
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setAnimationPhase("animating")
        })
      })
      const timer = setTimeout(() => {
        setAnimationPhase("complete")
      }, 500)
      return () => clearTimeout(timer)
    }
  }, [isOpen, sourceRect])

  const handleDotClick = (idx: number) => {
    if (isSliding || idx === internalIndex) return
    onNavigate(idx)
  }

  if (!shouldRender || !currentProject) return null

  const getInitialStyles = (): React.CSSProperties => {
    if (!sourceRect) return {}

    const viewportWidth = window.innerWidth
    const viewportHeight = window.innerHeight
    const targetWidth = Math.min(768, viewportWidth - 64)
    const targetHeight = Math.min(viewportHeight * 0.85, 600)

    const targetX = (viewportWidth - targetWidth) / 2
    const targetY = (viewportHeight - targetHeight) / 2

    const scaleX = sourceRect.width / targetWidth
    const scaleY = sourceRect.height / targetHeight
    const scale = Math.max(scaleX, scaleY)

    const translateX =
      sourceRect.left + sourceRect.width / 2 - (targetX + targetWidth / 2)
    const translateY =
      sourceRect.top + sourceRect.height / 2 - (targetY + targetHeight / 2)

    return {
      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
      opacity: 1,
    }
  }

  const getFinalStyles = (): React.CSSProperties => {
    return {
      transform: "translate(0, 0) scale(1)",
      opacity: 1,
    }
  }

  const currentStyles =
    animationPhase === "initial" && !isClosing
      ? getInitialStyles()
      : getFinalStyles()

  return (
    <div
      className={cn(
        "fixed inset-0 z-50 flex items-center justify-center p-4 md:p-8"
      )}
      onClick={handleClose}
      style={{
        opacity: isClosing ? 0 : 1,
        transition: "opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)",
      }}
    >
      <div
        className="bg-background/80 absolute inset-0 backdrop-blur-xl"
        style={{
          opacity: animationPhase === "initial" && !isClosing ? 0 : 1,
          transition: "opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      />

      {/* Close button */}
      <button
        onClick={(e) => {
          e.stopPropagation()
          handleClose()
        }}
        className={cn(
          "absolute top-5 right-5 z-50",
          "flex h-10 w-10 items-center justify-center",
          "bg-muted/50 rounded-full backdrop-blur-md",
          "border-border border",
          "text-muted-foreground hover:text-foreground hover:bg-muted",
          "transition-all duration-300 ease-out hover:scale-105 active:scale-95"
        )}
        style={{
          opacity: animationPhase === "complete" && !isClosing ? 1 : 0,
          transform:
            animationPhase === "complete" && !isClosing
              ? "translateY(0)"
              : "translateY(-10px)",
          transition: "opacity 300ms ease-out, transform 300ms ease-out",
        }}
      >
        <IconX className="h-4 w-4" strokeWidth={2.5} />
      </button>

      <button
        onClick={(e) => {
          e.stopPropagation()
          navigatePrev()
        }}
        disabled={!hasPrev || isSliding}
        className={cn(
          "absolute left-4 z-50 md:left-8",
          "flex h-12 w-12 items-center justify-center",
          "bg-muted/50 rounded-full backdrop-blur-md",
          "border-border border",
          "text-muted-foreground hover:text-foreground hover:bg-muted",
          "transition-all duration-300 ease-out hover:scale-110 active:scale-95",
          "disabled:pointer-events-none disabled:opacity-0"
        )}
        style={{
          opacity:
            animationPhase === "complete" && !isClosing && hasPrev ? 1 : 0,
          transform:
            animationPhase === "complete" && !isClosing
              ? "translateX(0)"
              : "translateX(-20px)",
          transition:
            "opacity 300ms ease-out 150ms, transform 300ms ease-out 150ms",
        }}
      >
        <IconChevronLeft className="h-5 w-5" strokeWidth={2.5} />
      </button>

      <button
        onClick={(e) => {
          e.stopPropagation()
          navigateNext()
        }}
        disabled={!hasNext || isSliding}
        className={cn(
          "absolute right-4 z-50 md:right-8",
          "flex h-12 w-12 items-center justify-center",
          "bg-muted/50 rounded-full backdrop-blur-md",
          "border-border border",
          "text-muted-foreground hover:text-foreground hover:bg-muted",
          "transition-all duration-300 ease-out hover:scale-110 active:scale-95",
          "disabled:pointer-events-none disabled:opacity-0"
        )}
        style={{
          opacity:
            animationPhase === "complete" && !isClosing && hasNext ? 1 : 0,
          transform:
            animationPhase === "complete" && !isClosing
              ? "translateX(0)"
              : "translateX(20px)",
          transition:
            "opacity 300ms ease-out 150ms, transform 300ms ease-out 150ms",
        }}
      >
        <IconChevronRight className="h-5 w-5" strokeWidth={2.5} />
      </button>

      <div
        ref={containerRef}
        className="relative z-10 w-full max-w-3xl"
        onClick={(e) => e.stopPropagation()}
        style={{
          ...currentStyles,
          transform: isClosing
            ? "translate(0, 0) scale(0.95)"
            : currentStyles.transform,
          transition:
            animationPhase === "initial" && !isClosing
              ? "none"
              : "transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease-out",
          transformOrigin: "center center",
        }}
      >
        <div
          className={cn(
            "relative overflow-hidden",
            "rounded-2xl",
            "bg-card",
            "ring-border ring-1",
            "shadow-2xl"
          )}
          style={{
            borderRadius:
              animationPhase === "initial" && !isClosing ? "8px" : "16px",
            transition: "border-radius 500ms cubic-bezier(0.16, 1, 0.3, 1)",
          }}
        >
          <div className="relative overflow-hidden">
            <div
              className="flex transition-transform duration-400 ease-out"
              style={{
                transform: `translateX(-${internalIndex * 100}%)`,
                transition: isSliding
                  ? "transform 400ms cubic-bezier(0.32, 0.72, 0, 1)"
                  : "none",
              }}
            >
              {projects.map((project, idx) => (
                <img
                  key={project.id}
                  src={project.image || "/placeholder.svg"}
                  alt={project.title}
                  className="bg-background h-auto max-h-[70vh] w-full shrink-0 object-contain"
                  style={{ minWidth: "100%" }}
                />
              ))}
            </div>

            {/* Subtle vignette effect */}
            <div className="from-card/20 to-card/10 pointer-events-none absolute inset-0 bg-linear-to-t via-transparent" />
          </div>

          <div
            className={cn("px-6 py-5", "bg-card", "border-border border-t")}
            style={{
              opacity: animationPhase === "complete" && !isClosing ? 1 : 0,
              transform:
                animationPhase === "complete" && !isClosing
                  ? "translateY(0)"
                  : "translateY(20px)",
              transition:
                "opacity 300ms ease-out 100ms, transform 300ms ease-out 100ms",
            }}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0 flex-1">
                <h3 className="text-foreground h-7 truncate text-lg font-medium tracking-tight">
                  {currentProject?.title}
                </h3>
                <div className="mt-1 flex items-center gap-3">
                  <p className="text-muted-foreground text-sm">
                    <kbd className="bg-muted text-muted-foreground border-border mx-0.5 rounded border px-1.5 py-0.5 text-xs font-medium">
                      ←
                    </kbd>
                    <kbd className="bg-muted text-muted-foreground border-border mx-0.5 rounded border px-1.5 py-0.5 text-xs font-medium">
                      →
                    </kbd>{" "}
                    to navigate
                  </p>
                  <div className="flex items-center gap-1.5">
                    {projects.map((_, idx) => (
                      <button
                        key={idx}
                        onClick={() => handleDotClick(idx)}
                        className={cn(
                          "h-2 w-2 rounded-full transition-all duration-300",
                          idx === internalIndex
                            ? "bg-foreground scale-110"
                            : "bg-muted-foreground/40 hover:bg-muted-foreground/60"
                        )}
                      />
                    ))}
                  </div>
                </div>
              </div>

              <button
                className={cn(
                  "flex items-center gap-2 px-4 py-2",
                  "text-muted-foreground text-sm font-medium",
                  "bg-muted/50 hover:bg-muted",
                  "border-border rounded-lg border",
                  "transition-all duration-200 ease-out",
                  "hover:text-foreground"
                )}
              >
                <span>View</span>
                <IconExternalLink className="h-3.5 w-3.5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

interface ProjectCardProps {
  image: string
  title: string
  delay: number
  isVisible: boolean
  index: number
  onClick: () => void
  isSelected: boolean
}

export const ProjectCard = forwardRef<HTMLDivElement, ProjectCardProps>(
  ({ image, title, delay, isVisible, index, onClick, isSelected }, ref) => {
    const rotations = [-12, 0, 12]
    const translations = [-55, 0, 55]

    return (
      <div
        ref={ref}
        className={cn(
          "absolute h-28 w-20 overflow-hidden rounded-[8px] shadow-xl",
          "bg-card border-border border",
          "cursor-pointer hover:ring-2 hover:ring-orange-400/50",
          isSelected && "opacity-0"
        )}
        style={{
          transform: isVisible
            ? `translateY(-90px) translateX(${translations[index]}px) rotate(${rotations[index]}deg) scale(1)`
            : "translateY(0px) translateX(0px) rotate(0deg) scale(0.5)",
          opacity: isSelected ? 0 : isVisible ? 1 : 0,
          transition: `all 600ms cubic-bezier(0.34, 1.56, 0.64, 1) ${delay}ms`,
          zIndex: 10 - index,
          left: "-40px",
          top: "-56px",
        }}
        onClick={(e) => {
          e.stopPropagation()
          onClick()
        }}
      >
        <img
          src={image || "/placeholder.svg"}
          alt={title}
          className="h-full w-full object-cover"
        />
        <div className="from-foreground/60 absolute inset-0 bg-linear-to-t to-transparent" />
        <p className="text-primary-foreground absolute right-1.5 bottom-1.5 left-1.5 truncate text-[10px] font-medium">
          {title}
        </p>
      </div>
    )
  }
)

ProjectCard.displayName = "ProjectCard"


===== EXAMPLE: 3d-folder-demo =====
Title: 3D Folder Demo

--- file: example/3d-folder-demo.tsx ---
import { AnimatedFolder } from "@/registry/gammaui/3d-folder"

const portfolioData = [
  {
    title: "Folder Name",
    projects: [
      {
        id: "1",
        image:
          "https://images.pexels.com/photos/29531041/pexels-photo-29531041.jpeg",
        title: "Tokyo",
      },
      {
        id: "2",
        image:
          "https://images.pexels.com/photos/569416/pexels-photo-569416.jpeg",
        title: "Berlin",
      },
      {
        id: "3",
        image:
          "https://images.pexels.com/photos/1461974/pexels-photo-1461974.jpeg",
        title: "Pris",
      },
    ],
  },
]

export default function AnimatedFolderDemo() {
  return (
    <main className="bg-background flex w-full items-center justify-center">
      {/* Main content */}
      <section className="mx-auto max-w-6xl px-6 py-16">
        <div className="flex w-full items-center justify-center">
          {portfolioData.map((folder) => (
            <AnimatedFolder
              key={folder.title}
              title={folder.title}
              projects={folder.projects}
            />
          ))}
        </div>
      </section>
    </main>
  )
}



===== COMPONENT: activity-dropdown =====
Title: Activity Dropdown
Description: A modern activity/notification dropdown with smooth animations and responsive motion.

--- file: gammaui/activity-dropdown.tsx ---
"use client"

import type React from "react"
import { useState } from "react"
import {
  IconAward,
  IconBell,
  IconCalendar,
  IconCheckbox,
  IconChevronUp,
  IconMessageCircle,
  IconTag,
} from "@tabler/icons-react"

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

interface Activity {
  id: number
  icon: React.ReactNode
  iconBg: string
  title: string
  description: string
  time: string
}

const activities: Activity[] = [
  {
    id: 1,
    icon: <IconMessageCircle className="h-4 w-4" />,
    iconBg: "bg-neutral-700 dark:bg-neutral-700 bg-neutral-200",
    title: "New Message!",
    description: "Sarah sent you a message.",
    time: "Just Now",
  },
  {
    id: 2,
    icon: <IconAward className="h-4 w-4" />,
    iconBg: "bg-neutral-700 dark:bg-neutral-700 bg-neutral-200",
    title: "Level Up!",
    description: "You've unlocked a new achievement.",
    time: "2 min ago",
  },
  {
    id: 3,
    icon: <IconCalendar className="h-4 w-4" />,
    iconBg: "bg-neutral-700 dark:bg-neutral-700 bg-neutral-200",
    title: "Reminder: Meeting Today",
    description: "Your team meeting starts in 30 minutes.",
    time: "3 hour ago",
  },
  {
    id: 4,
    icon: <IconTag className="h-4 w-4" />,
    iconBg: "bg-neutral-700 dark:bg-neutral-700 bg-neutral-200",
    title: "Special Offer!",
    description: "Save 20% off on subscription upgrade.",
    time: "12 hours ago",
  },
  {
    id: 5,
    icon: <IconCheckbox className="h-4 w-4" />,
    iconBg: "bg-neutral-700 dark:bg-neutral-700 bg-neutral-200",
    title: "Task Assigned!",
    description: "A new task is awaiting your action.",
    time: "Yesterday",
  },
]

export default function ActivityDropdown() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div
      className={cn(
        "w-full max-w-md cursor-pointer overflow-hidden rounded-2xl shadow-2xl select-none",
        "bg-white dark:bg-neutral-900",
        "shadow-xl shadow-black/10 dark:shadow-black/50",
        "transition-all duration-500 ease-in-out",
        isOpen ? "rounded-3xl" : "rounded-2xl"
      )}
      onClick={() => setIsOpen(!isOpen)}
    >
      {/* Header */}
      <div className="flex items-center gap-4 p-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 transition-colors duration-300 dark:bg-neutral-800">
          <IconBell className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
        </div>
        <div className="flex-1 overflow-hidden">
          <h3 className="text-base font-semibold text-neutral-900 dark:text-white">
            5 New Activities
          </h3>
          <p
            className={cn(
              "text-sm text-neutral-500 dark:text-neutral-400",
              "transition-all duration-500 ease-in-out",
              isOpen ? "mt-0 max-h-0 opacity-0" : "mt-0.5 max-h-6 opacity-100"
            )}
          >
            What's happening around you
          </p>
        </div>
        <div className="flex h-8 w-8 items-center justify-center">
          <IconChevronUp
            className={cn(
              "h-5 w-5 text-neutral-400 transition-transform duration-500 ease-in-out",
              isOpen ? "rotate-0" : "rotate-180"
            )}
          />
        </div>
      </div>

      {/* Activity List */}
      <div
        className={cn(
          "grid",
          "transition-all duration-500 ease-in-out",
          isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
        )}
      >
        <div className="overflow-hidden">
          <div className="px-2 pb-4">
            <div className="space-y-1">
              {activities.map((activity, index) => (
                <div
                  key={activity.id}
                  className={cn(
                    "flex items-start gap-3 rounded-xl p-3",
                    "transition-all duration-500 ease-in-out",
                    "hover:bg-neutral-100 dark:hover:bg-neutral-800/50",
                    isOpen
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  )}
                  style={{
                    transitionDelay: isOpen ? `${index * 75}ms` : "0ms",
                  }}
                >
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 transition-colors duration-300 dark:bg-neutral-700">
                    <span className="text-neutral-600 dark:text-neutral-300">
                      {activity.icon}
                    </span>
                  </div>
                  <div className="min-w-0 flex-1">
                    <h4 className="text-sm font-semibold text-neutral-900 dark:text-white">
                      {activity.title}
                    </h4>
                    <p className="truncate text-sm text-neutral-500 dark:text-neutral-400">
                      {activity.description}
                    </p>
                  </div>
                  <span className="shrink-0 pt-0.5 text-xs text-neutral-400 dark:text-neutral-500">
                    {activity.time}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: activity-dropdown-demo =====
Title: Activity Dropdown Demo

--- file: example/activity-dropdown-demo.tsx ---
import ActivityDropdown from "@/registry/gammaui/activity-dropdown"

export default function ActivityDropdownDemo() {
  return (
    <div className="mx-auto">
      <ActivityDropdown />
    </div>
  )
}



===== COMPONENT: animated-list =====
Title: Animated List
Description: A dynamic list component with smooth animations that forms a column and scrolls through items continuously.

--- file: gammaui/animated-list.tsx ---
"use client"

import React, { useEffect, useMemo, useState } from "react"
import { AnimatePresence, motion, useAnimationControls } from "motion/react"

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

type AnimationPhase = "idle" | "forming_column" | "scrolling_down" | "resetting"

interface AnimatedListProps {
  children: React.ReactNode
  className?: string
  stackGap?: number
  columnGap?: number
  scaleFactor?: number
  scrollDownDuration?: number
  formationDuration?: number
}

interface AnimatedListItemProps {
  children: React.ReactNode
  className?: string
  index: number
  listLength: number
  stackGap?: number
  columnGap?: number
  scaleFactor?: number
}

function InternalAnimatedListItem({
  children,
  className,
  index,
  listLength,
  animationPhase,
  onFormationComplete,
  stackGap = 10,
  columnGap = 100,
  scaleFactor = 0.1,
  formationDuration = 1,
  visibleItemsCount = 4,
  resetSpringStiffness = 120,
  resetSpringDamping = 20,
}: AnimatedListItemProps & {
  animationPhase: AnimationPhase
  onFormationComplete?: () => void
  formationDuration: number
  visibleItemsCount: number
  resetSpringStiffness: number
  resetSpringDamping: number
}) {
  const reverseIndex = listLength - 1 - index
  const isVisible = reverseIndex < visibleItemsCount
  const lastItemOffset = (listLength - 1) * columnGap
  const isLastItem = index === listLength - 1
  let initialScale = 1
  let columnScale = 0.8

  if (typeof window !== "undefined") {
    const w = window.innerWidth

    if (w < 480) {
      // 📱 Mobile
      initialScale = 0.5
      columnScale = 0.8
    } else if (w < 768) {
      // 📲 Tablet
      initialScale = 0.45
      columnScale = 0.7
    } else {
      // 🖥 Desktop (default)
      initialScale = 1
      columnScale = 0.8
    }
  }
  const itemVariants = {
    initial: {
      scale: initialScale + index * scaleFactor,
      y: reverseIndex * stackGap,
      opacity: isVisible ? 1 : 0,
    },
    column: {
      scale: columnScale,
      y: index * columnGap - lastItemOffset,
      opacity: 1,
    },
  }

  const target =
    animationPhase === "idle" || animationPhase === "resetting"
      ? "initial"
      : "column"

  const getTransition = () => {
    if (animationPhase === "resetting") {
      return {
        type: "spring" as const,
        stiffness: resetSpringStiffness,
        damping: resetSpringDamping,
      }
    } else {
      return { duration: formationDuration, ease: [0.4, 0, 0.2, 1] as const }
    }
  }

  const handleAnimationComplete = (definition: string) => {
    if (
      isLastItem &&
      definition === "column" &&
      animationPhase === "forming_column"
    ) {
      onFormationComplete?.()
    }
  }

  return (
    <motion.div
      key={index}
      className={cn("absolute inset-x-0 flex w-full justify-center", className)}
      variants={itemVariants}
      initial="initial"
      animate={target}
      transition={getTransition()}
      onAnimationComplete={handleAnimationComplete}
    >
      {children}
    </motion.div>
  )
}

export function AnimatedList({
  children,
  className,
  stackGap = 20,
  columnGap = 85,
  scaleFactor = 0.05,
  scrollDownDuration = 5,
  formationDuration = 1,
}: AnimatedListProps) {
  const initialDelayValue = 500
  const loopPauseDurationValue = 100
  const listResetSpringStiffness = 100
  const listResetSpringDamping = 25
  const itemResetSpringStiffness = 120
  const itemResetSpringDamping = 20
  const visibleItemsCountValue = 4

  const [animationPhase, setAnimationPhase] = useState<AnimationPhase>("idle")
  const listControls = useAnimationControls()
  const childrenArray = useMemo(
    () => React.Children.toArray(children),
    [children]
  )
  const listLength = childrenArray.length
  const totalHeight = listLength * columnGap

  useEffect(() => {
    let timer: NodeJS.Timeout
    if (animationPhase === "idle") {
      timer = setTimeout(
        () => {
          setAnimationPhase("forming_column")
        },
        animationPhase === "idle" ? loopPauseDurationValue : initialDelayValue
      )
    }
    return () => clearTimeout(timer)
  }, [animationPhase, loopPauseDurationValue, initialDelayValue])

  const handleFormationComplete = () => {
    if (animationPhase === "forming_column") setAnimationPhase("scrolling_down")
  }
  const handleScrollDownComplete = () => {
    if (animationPhase === "scrolling_down") setAnimationPhase("resetting")
  }
  const handleScrollUpComplete = () => {
    if (animationPhase === "resetting") setAnimationPhase("idle")
  }

  useEffect(() => {
    if (animationPhase === "scrolling_down") {
      listControls.start({
        y: totalHeight,
        transition: {
          duration: scrollDownDuration,
          ease: [0.4, 0, 0.2, 1] as const,
        },
      })
    } else if (animationPhase === "resetting") {
      listControls.start({
        y: 0,
        transition: {
          type: "spring" as const,
          stiffness: listResetSpringStiffness,
          damping: listResetSpringDamping,
        },
      })
    } else {
      listControls.set({ y: 0 })
    }
  }, [
    animationPhase,
    listControls,
    totalHeight,
    scrollDownDuration,
    listResetSpringStiffness,
    listResetSpringDamping,
  ])

  const handleListAnimationComplete = (definition: { y?: number }) => {
    if (definition.y === totalHeight && animationPhase === "scrolling_down") {
      handleScrollDownComplete()
    } else if (definition.y === 0 && animationPhase === "resetting") {
      handleScrollUpComplete()
    }
  }

  return (
    <motion.div
      className={cn("relative flex h-full w-full items-center", className)}
      initial={{ y: 0 }}
      animate={listControls}
      onAnimationComplete={handleListAnimationComplete}
    >
      <AnimatePresence>
        {childrenArray.map((child, index) => (
          <InternalAnimatedListItem
            key={index}
            index={index}
            listLength={listLength}
            animationPhase={animationPhase}
            onFormationComplete={
              index === listLength - 1 ? handleFormationComplete : undefined
            }
            stackGap={stackGap}
            columnGap={columnGap}
            scaleFactor={scaleFactor}
            formationDuration={formationDuration}
            visibleItemsCount={visibleItemsCountValue}
            resetSpringStiffness={itemResetSpringStiffness}
            resetSpringDamping={itemResetSpringDamping}
          >
            {child}
          </InternalAnimatedListItem>
        ))}
      </AnimatePresence>
    </motion.div>
  )
}


===== EXAMPLE: animated-list-demo =====
Title: Animated List Demo

--- file: example/animated-list-demo.tsx ---
import { AnimatedList } from "@/registry/gammaui/animated-list"

export function AnimatedListDemo() {
  const notifications = [
    { name: "Location", message: "Thomas has arrived home", time: "2h ago" },
    { name: "Fitness", message: "Daily step goal reached!", time: "1h ago" },
    {
      name: "Calendar",
      message: "Team meeting in 30 minutes",
      time: "45m ago",
    },
    { name: "Tasks", message: "3 tasks due today", time: "1d ago" },
    { name: "Health", message: "Heart rate elevated", time: "3h ago" },
    { name: "Email", message: "New message from manager", time: "5m ago" },
    { name: "Social", message: "Video got 1000 likes!", time: "2d ago" },
    { name: "Family", message: "How are you doing?", time: "1w ago" },
    { name: "Friends", message: "Coffee tomorrow?", time: "2d ago" },
    { name: "Movies", message: "Did you see the new movie?", time: "4h ago" },
  ]

  return (
    <div className="bg-background relative h-[400px] w-full overflow-hidden rounded-lg border">
      <AnimatedList
        stackGap={20}
        columnGap={70}
        scaleFactor={0.05}
        scrollDownDuration={5}
        formationDuration={1}
      >
        {notifications.map((notification, index) => (
          <div
            key={index}
            className="bg-card flex w-full max-w-[350px] items-center gap-4 rounded-2xl border p-4 shadow-sm"
          >
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-sm font-medium text-white">
              {notification.name.charAt(0)}
            </div>
            <div className="flex flex-1 flex-col">
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground text-sm font-medium">
                  {notification.name}
                </span>
                <span className="text-muted-foreground text-xs">
                  {notification.time}
                </span>
              </div>
              <span className="text-muted-foreground text-sm">
                {notification.message}
              </span>
            </div>
          </div>
        ))}
      </AnimatedList>
    </div>
  )
}



===== COMPONENT: aurora-glass =====
Title: Aurora Glass
Description: A shimmering glass tile background with ripple layers, bevel shading, and chromatic spread.

--- file: gammaui/aurora-glass.tsx ---
"use client"

import { useEffect, useRef } from "react"
import type { ReactNode } from "react"

/**
 * AuroraGlass
 * A shimmering background of colorful glass tiles, rendered with raw WebGL2.
 *
 * A handful of broad directional ripple layers sweep across the whole tile
 * lattice in one continuous field (sampled per-fragment in grid-space), so
 * the highlight band flows smoothly from tile to tile rather than each tile
 * animating independently. Each tile's rounded-rect bevel normal warps the
 * sample point near its edges, giving a refraction-like bend as the band
 * crosses every tile.
 *
 * Props
 * ----------------------------------------------------------------------
 * width            string | number   "100%"     Container width
 * height           string | number   "100%"     Container height
 * className        string            ""         Additional CSS classes
 * children         ReactNode         undefined  Content rendered above the effect
 * speed            number            1          Animation speed multiplier (0-3)
 * tileDensity      number            4          Tiles across the surface (1-16)
 * rippleLayers     number            6          Stacked ripple layers (1-8)
 * warpStrength     number            0.33       Per-tile inverse-distance warp (0-0.6)
 * bandSharpness    number            3          Highlight peak sharpness (0.5-10)
 * chromaticSpread  number            0          Per-channel separation (0-1)
 * colorA           string            "#1E00FF"  Gradient stop (deep color)
 * colorB           string            "#D765E6"  Gradient stop (bright color)
 * backgroundColor  string            "#FFFFFF"  Fill where the field is dark
 * opacity          number            1          Master alpha (0-1)
 * dpr              number            1.5        Max device pixel ratio (1-3)
 *
 * Usage
 *   <AuroraGlass colorA="#1E00FF" colorB="#D765E6" tileDensity={6}>
 *     <h1>Your content, rendered above the effect</h1>
 *   </AuroraGlass>
 */

const MAX_RIPPLE_LAYERS = 8

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

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

uniform vec2 u_resolution;
uniform float u_time;
uniform float u_speed;
uniform float u_tileDensity;
uniform int u_rippleLayers;
uniform float u_warpStrength;
uniform float u_bandSharpness;
uniform float u_chromaticSpread;
uniform vec3 u_colorA;
uniform vec3 u_colorB;
uniform vec3 u_backgroundColor;
uniform float u_opacity;

out vec4 fragColor;

float hash21(vec2 p) {
  p = fract(p * vec2(123.34, 456.21));
  p += dot(p, p + 45.32);
  return fract(p.x * p.y);
}

vec2 hash22(vec2 p) {
  float n = hash21(p);
  float n2 = hash21(p + 17.13);
  return vec2(n, n2);
}

float sdRoundRect(vec2 p, vec2 halfSize, float r) {
  vec2 q = abs(p) - halfSize + r;
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
}

// Height field for the tile surface: flat in the middle, with a wide
// rounded bevel that rises toward the border -- like a slightly domed pane
// of glass set in a frame. d is the rounded-rect SDF (negative inside, 0 at
// the border). Near the border height is highest; deep inside it flattens.
float tileHeight(float d, float r) {
  float bevelWidth = r * 4.0;
  float distFromEdge = clamp(-d / bevelWidth, 0.0, 1.0);
  float bevel = 1.0 - distFromEdge;
  return bevel * bevel * (3.0 - 2.0 * bevel);
}

// One directional ripple band. Layer 0-2 are broad, slow, coherent sweeps
// (the main visible "ribbons"); layers beyond that add progressively finer,
// dimmer secondary detail so increasing rippleLayers enriches the texture
// without diluting the primary bands.
float rippleLayer(vec2 guv, float t, int i) {
  float fi = float(i);
  float dirAngle = 0.55 + fi * 0.7;
  vec2 dir = vec2(cos(dirAngle), sin(dirAngle));
  vec2 perp = vec2(-dir.y, dir.x);

  float freqBase = 0.16 + fract(fi * 0.31) * 0.1;
  float freq = freqBase * (1.0 + fi * 0.22);
  float speedVar = 0.35 + fract(fi * 0.53) * 0.35;
  float phase = fi * 2.7;
  float bow = 1.6 + fract(fi * 0.19) * 1.4;

  float along = dot(guv, dir);
  float across = dot(guv, perp);

  float bend = sin(along * freq + t * speedVar + phase) * bow
             + cos(t * speedVar * 0.5 + phase * 1.3) * 1.2;
  float d = abs(across - bend);

  float sharpness = 6.0 + fi * 1.5;
  float core = exp(-d * d * sharpness);
  float halo = exp(-d * d * 1.1) * 0.15;

  float weight = 1.0 / (1.0 + fi * 0.55);

  return (core + halo) * weight;
}

// Sum of N ripple layers sampled at this grid-space position. The field is
// continuous across the whole grid (not per-tile), so highlights flow
// smoothly from one tile into its neighbor.
float lightField(vec2 guv, float t) {
  float field = 0.0;
  for (int i = 0; i < ${MAX_RIPPLE_LAYERS}; i++) {
    if (i >= u_rippleLayers) break;
    field += rippleLayer(guv, t, i);
  }
  return field;
}

void main() {
  vec2 fragCoord = gl_FragCoord.xy;
  vec2 res = u_resolution;

  // tileDensity = how many tile cells fit across the SHORTER side of the
  // surface, so density reads consistently regardless of aspect ratio.
  float shortSide = min(res.x, res.y);
  float cell = shortSide / max(u_tileDensity, 1.0);
  float gap = cell * 0.06;

  vec2 gridPos = fragCoord / cell;
  vec2 cellId = floor(gridPos);
  vec2 localUv = fract(gridPos) - 0.5;
  vec2 localPx = localUv * cell;

  float tileHalf = (cell - gap) * 0.5;
  float radius = tileHalf * 0.32;

  float d = sdRoundRect(localPx, vec2(tileHalf), radius);

  if (d > 0.0) {
    fragColor = vec4(u_backgroundColor, u_opacity);
    return;
  }

  vec2 rnd = hash22(cellId);

  // --- Always-on ambient bevel shading ---
  // A true 3D surface normal derived from a domed height field, lit by a
  // fixed upper-left studio light. This runs on EVERY tile regardless of
  // the colorful streak, so dark tiles still read as curved glass rather
  // than flat black squares.
  float epsH = 1.2;
  float dCx1 = sdRoundRect(localPx + vec2(epsH, 0.0), vec2(tileHalf), radius);
  float dCx0 = sdRoundRect(localPx - vec2(epsH, 0.0), vec2(tileHalf), radius);
  float dCy1 = sdRoundRect(localPx + vec2(0.0, epsH), vec2(tileHalf), radius);
  float dCy0 = sdRoundRect(localPx - vec2(0.0, epsH), vec2(tileHalf), radius);
  float hR = tileHeight(dCx1, radius);
  float hL = tileHeight(dCx0, radius);
  float hU = tileHeight(dCy1, radius);
  float hD = tileHeight(dCy0, radius);
  vec2 heightGrad = vec2(hR - hL, hU - hD) / (2.0 * epsH);
  vec3 surfaceNormal = normalize(vec3(-heightGrad * 4.0, 1.0));

  vec3 lightDir = normalize(vec3(-0.45, 0.55, 0.7));
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  vec3 halfDir = normalize(lightDir + viewDir);

  float diffuse = max(dot(surfaceNormal, lightDir), 0.0);
  float specular = pow(max(dot(surfaceNormal, halfDir), 0.0), 14.0);

  // Tinted by the background color rather than neutral gray, so it reads as
  // a hint of glass curvature rather than a separate plastic/keycap layer.
  vec3 ambientBevel = u_backgroundColor * diffuse * 0.16
                     + mix(u_backgroundColor, vec3(0.7, 0.65, 0.78), 0.5) * specular * 0.22;

  // Bevel normal from the rounded-rect SDF gradient, used only to bend
  // (warp) the light sample point near tile edges -- a refraction cue.
  float eps = 1.5;
  float dx = sdRoundRect(localPx + vec2(eps, 0.0), vec2(tileHalf), radius)
           - sdRoundRect(localPx - vec2(eps, 0.0), vec2(tileHalf), radius);
  float dy = sdRoundRect(localPx + vec2(0.0, eps), vec2(tileHalf), radius)
           - sdRoundRect(localPx - vec2(0.0, eps), vec2(tileHalf), radius);
  vec2 gradDir = vec2(dx, dy) / (2.0 * eps);
  float rim = smoothstep(-radius * 1.6, 0.0, d);

  // Per-tile inverse-distance warp: the closer to the tile edge, the more
  // the sample point bends, like light refracting through curved glass.
  float distFromCenter = length(localPx) / max(tileHalf, 0.001);
  float invDist = 1.0 / max(1.0 - distFromCenter * 0.85, 0.15);
  vec2 warpOffset = gradDir * rim * u_warpStrength * invDist * 0.4;

  float t = u_time * u_speed;
  vec2 sampleUv = gridPos + warpOffset;

  float fieldR = lightField(sampleUv + vec2(u_chromaticSpread * 0.6, 0.0), t);
  float fieldG = lightField(sampleUv, t);
  float fieldB = lightField(sampleUv - vec2(u_chromaticSpread * 0.6, 0.0), t);

  float shaped = pow(clamp(fieldG, 0.0, 1.6), u_bandSharpness);
  float shapedR = pow(clamp(fieldR, 0.0, 1.6), u_bandSharpness);
  float shapedB = pow(clamp(fieldB, 0.0, 1.6), u_bandSharpness);

  float variance = mix(0.75, 1.15, rnd.y);
  shaped *= variance;
  shapedR *= variance;
  shapedB *= variance;

  vec3 gradColor = mix(u_colorA, u_colorB, clamp(shaped, 0.0, 1.0));

  vec3 lit = gradColor * shaped;
  float chromaMix = clamp(u_chromaticSpread * 3.0, 0.0, 1.0);
  lit.r = mix(lit.r, gradColor.r * shapedR, chromaMix);
  lit.b = mix(lit.b, gradColor.b * shapedB, chromaMix);

  vec3 color = u_backgroundColor * 0.03 + ambientBevel + lit;

  // Soft recessed contact shadow right at the rounded border
  float innerEdge = smoothstep(-2.5, 0.0, d);
  color *= (1.0 - innerEdge * 0.55);

  fragColor = vec4(color, u_opacity);
}
`

function compileShader(
  gl: WebGL2RenderingContext,
  type: number,
  source: string
): WebGLShader {
  const shader = gl.createShader(type)!
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const info = gl.getShaderInfoLog(shader)
    gl.deleteShader(shader)
    throw new Error("Shader compile error: " + info)
  }
  return shader
}

function createProgram(
  gl: WebGL2RenderingContext,
  vertexSrc: string,
  fragmentSrc: string
): WebGLProgram {
  const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSrc)
  const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSrc)
  const program = gl.createProgram()!
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    const info = gl.getProgramInfoLog(program)
    gl.deleteProgram(program)
    throw new Error("Program link error: " + info)
  }
  gl.deleteShader(vs)
  gl.deleteShader(fs)
  return program
}

function hexToRgb(hex: string) {
  const clean = (hex || "#000000").replace("#", "")
  const full =
    clean.length === 3
      ? clean
          .split("")
          .map((c) => c + c)
          .join("")
      : clean
  const bigint = parseInt(full, 16) || 0
  const r = ((bigint >> 16) & 255) / 255
  const g = ((bigint >> 8) & 255) / 255
  const b = (bigint & 255) / 255
  return [r, g, b]
}

const clamp = (value: number, min: number, max: number) =>
  Math.min(max, Math.max(min, value))

interface AuroraGlassProps {
  width?: string | number
  height?: string | number
  className?: string
  children?: ReactNode
  speed?: number
  tileDensity?: number
  rippleLayers?: number
  warpStrength?: number
  bandSharpness?: number
  chromaticSpread?: number
  colorA?: string
  colorB?: string
  backgroundColor?: string
  opacity?: number
  dpr?: number
}

export default function AuroraGlass({
  width = "100%",
  height = "100%",
  className = "",
  children,
  speed = 1,
  tileDensity = 4,
  rippleLayers = 6,
  warpStrength = 0.33,
  bandSharpness = 3,
  chromaticSpread = 0,
  colorA = "#1E00FF",
  colorB = "#D765E6",
  backgroundColor = "#FFFFFF",
  opacity = 1,
  dpr = 1.5,
}: AuroraGlassProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const rafRef = useRef(0)

  // Keep the latest prop values in a ref so the render loop (started once)
  // always reads current values without needing to be torn down and
  // rebuilt on every prop change.
  interface PropsSnapshot {
    speed: number
    tileDensity: number
    rippleLayers: number
    warpStrength: number
    bandSharpness: number
    chromaticSpread: number
    colorA: string
    colorB: string
    backgroundColor: string
    opacity: number
  }
  const propsRef = useRef<PropsSnapshot>({} as PropsSnapshot)
  propsRef.current = {
    speed,
    tileDensity: clamp(tileDensity, 1, 16),
    rippleLayers: Math.round(clamp(rippleLayers, 1, MAX_RIPPLE_LAYERS)),
    warpStrength: clamp(warpStrength, 0, 0.6),
    bandSharpness: clamp(bandSharpness, 0.5, 10),
    chromaticSpread: clamp(chromaticSpread, 0, 1),
    colorA,
    colorB,
    backgroundColor,
    opacity: clamp(opacity, 0, 1),
  }

  const dprRef = useRef(clamp(dpr, 1, 3))
  dprRef.current = clamp(dpr, 1, 3)

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

    const gl = canvas.getContext("webgl2", { antialias: true, alpha: true })
    if (!gl) {
      console.warn(
        "WebGL2 is not supported in this browser; AuroraGlass cannot render."
      )
      return
    }

    let program: WebGLProgram
    try {
      program = createProgram(gl, VERTEX_SRC, FRAGMENT_SRC)
    } catch (err) {
      console.error(err)
      return
    }
    gl.useProgram(program)
    gl.enable(gl.BLEND)
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

    const positionBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 3, -1, -1, 3]),
      gl.STATIC_DRAW
    )
    const positionLoc = gl.getAttribLocation(program, "a_position")
    gl.enableVertexAttribArray(positionLoc)
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

    const u: Record<string, WebGLUniformLocation | null> = {}
    ;[
      "u_resolution",
      "u_time",
      "u_speed",
      "u_tileDensity",
      "u_rippleLayers",
      "u_warpStrength",
      "u_bandSharpness",
      "u_chromaticSpread",
      "u_colorA",
      "u_colorB",
      "u_backgroundColor",
      "u_opacity",
    ].forEach((name) => {
      u[name] = gl.getUniformLocation(program, name)
    })

    let w = 0
    let h = 0

    function resize() {
      const cv = canvas!
      const parent = cv.parentElement
      const rect = parent
        ? parent.getBoundingClientRect()
        : cv.getBoundingClientRect()
      const ratio = dprRef.current
      w = Math.max(1, Math.floor(rect.width * ratio))
      h = Math.max(1, Math.floor(rect.height * ratio))
      if (cv.width !== w || cv.height !== h) {
        cv.width = w
        cv.height = h
      }
      gl!.viewport(0, 0, w, h)
    }

    const resizeObserver = new ResizeObserver(resize)
    if (canvas.parentElement) resizeObserver.observe(canvas.parentElement)
    resize()

    const start = performance.now()

    function frame(now: number) {
      const t = (now - start) / 1000
      const p = propsRef.current
      const g = gl!

      g.useProgram(program)
      g.clearColor(0, 0, 0, 0)
      g.clear(g.COLOR_BUFFER_BIT)

      g.uniform2f(u.u_resolution, w, h)
      g.uniform1f(u.u_time, t)
      g.uniform1f(u.u_speed, p.speed)
      g.uniform1f(u.u_tileDensity, p.tileDensity)
      g.uniform1i(u.u_rippleLayers, p.rippleLayers)
      g.uniform1f(u.u_warpStrength, p.warpStrength)
      g.uniform1f(u.u_bandSharpness, p.bandSharpness)
      g.uniform1f(u.u_chromaticSpread, p.chromaticSpread)
      g.uniform3fv(u.u_colorA, hexToRgb(p.colorA))
      g.uniform3fv(u.u_colorB, hexToRgb(p.colorB))
      g.uniform3fv(u.u_backgroundColor, hexToRgb(p.backgroundColor))
      g.uniform1f(u.u_opacity, p.opacity)

      g.drawArrays(g.TRIANGLES, 0, 3)
      rafRef.current = requestAnimationFrame(frame)
    }

    rafRef.current = requestAnimationFrame(frame)

    return () => {
      cancelAnimationFrame(rafRef.current)
      resizeObserver.disconnect()
      gl.deleteProgram(program)
      gl.deleteBuffer(positionBuffer)
    }
    // Render loop is started once; per-frame values are read from propsRef
    // and dprRef so prop changes don't require tearing down the GL context.
  }, [])

  return (
    <div
      className={className}
      style={{
        position: "relative",
        width,
        height,
        overflow: "hidden",
      }}
    >
      <canvas
        ref={canvasRef}
        style={{
          position: "absolute",
          inset: 0,
          display: "block",
          width: "100%",
          height: "100%",
        }}
      />
      {children != null && (
        <div style={{ position: "relative", width: "100%", height: "100%" }}>
          {children}
        </div>
      )}
    </div>
  )
}


===== EXAMPLE: aurora-glass-demo =====
Title: Aurora Glass Demo

--- file: example/aurora-glass-demo.tsx ---
"use client"

import AuroraGlass from "@/registry/gammaui/aurora-glass"

export const AuroraGlassDemo = () => {
  return (
    <div className="relative h-[600px] w-full overflow-hidden rounded-xl">
      <AuroraGlass
        speed={1}
        tileDensity={5}
        rippleLayers={8}
        warpStrength={0.33}
        bandSharpness={3}
        colorA="#001eff"
        colorB="#00bcff"
        backgroundColor="#000"
      />
    </div>
  )
}



===== COMPONENT: badge =====
Title: Badge
Description: A flexible and customizable Badge component for labels, statuses, and indicators.

--- file: gammaui/badge.tsx ---
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span"

  return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }


===== EXAMPLE: badge-demo =====
Title: Badge Demo

--- file: example/badge-demo.tsx ---
import { IconCircleCheck } from "@tabler/icons-react"

import { Badge } from "@/registry/gammaui/badge"

export function BadgeDemo() {
  return (
    <div className="mx-auto flex flex-col items-center gap-2">
      <div className="flex w-full flex-wrap gap-2">
        <Badge>Badge</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>
      </div>
      <div className="flex w-full flex-wrap gap-2">
        <Badge
          variant="secondary"
          className="bg-blue-500 text-white dark:bg-blue-600"
        >
          <IconCircleCheck />
          Verified
        </Badge>
        <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
          8
        </Badge>
        <Badge
          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
          variant="destructive"
        >
          99
        </Badge>
        <Badge
          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
          variant="outline"
        >
          20+
        </Badge>
      </div>
    </div>
  )
}



===== COMPONENT: border-button =====
Title: Border Button
Description: A reactive border animation button that follows cursor movement using Framer Motion and CSS masks.

--- file: gammaui/border-button.tsx ---
"use client"

import { MouseEvent, useState } from "react"
import { motion } from "motion/react"

interface Position {
  x: number
  y: number
}

interface BorderButtonProps {
  label: string
}

export default function BorderButton({ label }: BorderButtonProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  const [positions, setPositions] = useState<Record<number, Position>>({})
  const [opacities, setOpacities] = useState<Record<number, number>>({})

  const handleMouseMove = (e: MouseEvent<HTMLDivElement>, index: number) => {
    const rect = e.currentTarget.getBoundingClientRect()
    setPositions((prev) => ({
      ...prev,
      [index]: {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      },
    }))
  }

  const handleMouseEnter = (index: number) => {
    setHoveredIndex(index)
    setOpacities((prev) => ({
      ...prev,
      [index]: 1,
    }))
  }

  const handleMouseLeave = () => {
    if (hoveredIndex !== null) {
      setOpacities((prev) => ({
        ...prev,
        [hoveredIndex]: 0,
      }))
    }
    setHoveredIndex(null)
  }

  const i = 0

  return (
    <motion.button
      initial={{ "--x": "100%", scale: 1.5 }}
      animate={{ "--x": "-100%" }}
      whileTap={{ scale: 0.97 }}
      transition={{
        stiffness: 20,
        damping: 15,
        mass: 2,
        scale: {
          type: "spring",
          stiffness: 10,
          damping: 5,
          mass: 0.1,
        },
      }}
      className="radial-gradient-border-button relative overflow-hidden rounded-xl bg-transparent"
    >
      <div
        key={i}
        onMouseMove={(e) => handleMouseMove(e, i)}
        onMouseEnter={() => handleMouseEnter(i)}
        onMouseLeave={handleMouseLeave}
        className="relative flex flex-col items-center justify-center rounded-xl px-2 py-1"
      >
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            borderRadius: "inherit",
            // border: "1px solid rgba(255, 255, 255, 0.5)",
            opacity: hoveredIndex === i ? opacities[i] : 0,
            pointerEvents: "none",
            WebkitMaskImage: `radial-gradient(circle 20px at ${positions[i]?.x || 0}px ${positions[i]?.y || 0}px, white 15%, transparent)`,
          }}
          className={`absolute inset-0 w-full rounded-xl border border-sky-500 transition-opacity duration-500 dark:border-white/40`}
        />
        <p className="text-white">{label}</p>
      </div>
    </motion.button>
  )
}


===== EXAMPLE: border-button-demo =====
Title: Border Button Demo

--- file: example/border-button-demo.tsx ---
import BorderButton from "../gammaui/border-button"

export default function BorderButtonDemo() {
  return <BorderButton label="Gamma UI" />
}



===== COMPONENT: cloud-flow =====
Title: Cloud Flow
Description: An interactive cloud architecture visualization component featuring animated SVG flow paths, glowing data particles, node badges, and a central hub with layered motion effects—ideal for showcasing distributed systems, API traffic, and real-time infrastructure flows.

--- file: gammaui/cloud-flow.tsx ---
"use client"

import React from "react"
import { IconCloud, IconDatabase, IconServer } from "@tabler/icons-react"
import { motion } from "motion/react"

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

interface CloudFlowProps {
  className?: string
  centerText?: string
  nodeLabels?: {
    topLeft: string
    topRight: string
    bottomLeft: string
    bottomRight: string
  }
  badges?: {
    left: string
    right: string
  }
  title?: string
  accentColor?: string
}

export default function CloudFlow({
  className,
  centerText,
  nodeLabels,
  badges,
  title,
  accentColor = "#00A6F5",
}: CloudFlowProps) {
  return (
    <div
      className={cn(
        "relative flex h-[350px] w-full max-w-[500px] flex-col items-center",
        className
      )}
    >
      {/* SVG Flow Diagram */}
      <svg
        className="text-muted h-full w-full"
        width="100%"
        height="100%"
        viewBox="0 0 200 100"
      >
        <g
          stroke="currentColor"
          fill="none"
          strokeWidth="0.3"
          strokeDasharray="100 100"
          pathLength="100"
        >
          {/* Top Left to Center */}
          <path d="M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48" />
          {/* Top Right to Center */}
          <path d="M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48" />
          {/* Center to Bottom Left */}
          <path d="M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85" />
          {/* Center to Bottom Right */}
          <path d="M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85" />

          {/* Animation */}
          <animate
            attributeName="stroke-dashoffset"
            from="100"
            to="0"
            dur="1.2s"
            fill="freeze"
            calcMode="spline"
            keySplines="0.4,0,0.2,1"
            keyTimes="0; 1"
          />
        </g>

        <motion.path
          d="M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48"
          fill="none"
          stroke={accentColor}
          strokeWidth="0.5"
          strokeDasharray="6 94"
          strokeDashoffset="100"
          initial={{ opacity: 0 }}
          animate={{
            strokeDashoffset: [100, 0],
            opacity: [0, 1, 1, 0],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "linear",
            times: [0, 0.1, 0.9, 1],
          }}
        />

        <motion.path
          d="M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48"
          fill="none"
          stroke={accentColor}
          strokeWidth="0.5"
          strokeDasharray="6 94"
          strokeDashoffset="100"
          initial={{ opacity: 0 }}
          animate={{
            strokeDashoffset: [100, 0],
            opacity: [0, 1, 1, 0],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "linear",
            times: [0, 0.1, 0.9, 1],
          }}
        />

        <motion.path
          d="M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85"
          fill="none"
          stroke={accentColor}
          strokeWidth="0.5"
          strokeDasharray="6 94"
          strokeDashoffset="100"
          initial={{ opacity: 0 }}
          animate={{
            strokeDashoffset: [100, 0],
            opacity: [0, 1, 1, 0],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "linear",
            times: [0, 0.1, 0.9, 1],
          }}
        />
        <motion.path
          d="M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85"
          fill="none"
          stroke={accentColor}
          strokeWidth="0.5"
          strokeDasharray="6 94"
          strokeDashoffset="100"
          initial={{ opacity: 0 }}
          animate={{
            strokeDashoffset: [100, 0],
            opacity: [0, 1, 1, 0],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "linear",
            times: [0, 0.1, 0.9, 1],
          }}
        />

        {/* Node Badges */}
        <g stroke="currentColor" fill="none" strokeWidth="0.3">
          {/* Top Left Node */}
          <g>
            <rect fill="#0F172A" x="8" y="10" width="34" height="10" rx="5" />
            <IconServer x="12" y="12.5" size={6} color={accentColor} />
            <text
              x="21"
              y="17"
              fill="white"
              stroke="none"
              fontSize="4.5"
              fontWeight="500"
            >
              {nodeLabels?.topLeft || "API"}
            </text>
          </g>

          {/* Top Right Node */}
          <g>
            <rect fill="#0F172A" x="158" y="10" width="34" height="10" rx="5" />
            <IconCloud x="162" y="12.5" size={6} color={accentColor} />
            <text
              x="171"
              y="17"
              fill="white"
              stroke="none"
              fontSize="4.5"
              fontWeight="500"
            >
              {nodeLabels?.topRight || "CDN"}
            </text>
          </g>

          {/* Bottom Left Node */}
          <g>
            <rect fill="#0F172A" x="8" y="85" width="34" height="10" rx="5" />
            <IconDatabase x="12" y="87.5" size={6} color={accentColor} />
            <text
              x="21"
              y="92"
              fill="white"
              stroke="none"
              fontSize="4.5"
              fontWeight="500"
            >
              {nodeLabels?.bottomLeft || "DB"}
            </text>
          </g>
        </g>

        <defs>
          {/* Flow Path Masks */}
          <mask id="flow-mask-1">
            <path
              d="M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>
          <mask id="flow-mask-2">
            <path
              d="M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>
          <mask id="flow-mask-3">
            <path
              d="M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>
          <mask id="flow-mask-4">
            <path
              d="M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>

          {/* Gradient */}
          <radialGradient id="flow-gradient" fx="1">
            <stop offset="0%" stopColor={accentColor} />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>
      </svg>

      {/* Main Container */}
      <div className="absolute bottom-10 flex w-full flex-col items-center">
        {/* Shadow */}
        <div className="bg-accent/20 absolute -bottom-4 h-[100px] w-[62%] rounded-xl blur-xl" />

        {/* Title Badge */}
        <div className="absolute -top-3 z-20 flex items-center justify-center rounded-lg border bg-linear-to-r from-slate-900 to-slate-800 px-3 py-1.5 shadow-lg sm:-top-4">
          <IconCloud className="size-3.5" color={accentColor} />
          <span className="ml-2 text-[11px] font-medium text-white">
            {title || "Distributed Cloud Architecture"}
          </span>
        </div>

        {/* Center Hub Circle */}
        <div
          className="absolute -bottom-8 z-30 grid h-[60px] w-[60px] place-items-center rounded-full bg-slate-900 text-xs font-bold shadow-xl"
          style={{
            color: accentColor,
            border: `1px solid ${accentColor}`,
          }}
        >
          {centerText || "HUB"}
        </div>

        {/* Main Content Box */}
        <div className="bg-background relative z-10 flex h-[150px] w-full items-center justify-center overflow-hidden rounded-xl border shadow-2xl">
          {/* Info Badges */}
          <div className="absolute bottom-8 left-12 z-10 flex h-8 items-center gap-2 rounded-full border border-slate-700 bg-slate-900/90 px-3 text-xs font-medium text-white shadow-lg backdrop-blur-sm">
            <IconServer className="size-4" color={accentColor} />
            <span>{badges?.left || "Live Traffic"}</span>
          </div>
          <div className="absolute top-8 right-16 z-10 hidden h-8 items-center gap-2 rounded-full border border-slate-700 bg-slate-900/90 px-3 text-xs font-medium text-white shadow-lg backdrop-blur-sm sm:flex">
            <IconDatabase className="size-4" color={accentColor} />
            <span>{badges?.right || "Sync Active"}</span>
          </div>

          {/* Animated Concentric Circles */}
          <motion.div
            className="bg-accent/5 absolute -bottom-14 h-[100px] w-[100px] rounded-full border border-emerald-500/20"
            animate={{
              scale: [1, 1.05, 1],
              opacity: [0.5, 0.8, 0.5],
            }}
            transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
          />
          <motion.div
            className="bg-accent/5 absolute -bottom-20 h-[145px] w-[145px] rounded-full border border-emerald-500/15"
            animate={{
              scale: [1, 1.03, 1],
              opacity: [0.4, 0.7, 0.4],
            }}
            transition={{
              duration: 3,
              repeat: Infinity,
              ease: "easeInOut",
              delay: 0.3,
            }}
          />
          <motion.div
            className="bg-accent/5 absolute -bottom-[100px] h-[190px] w-[190px] rounded-full border border-emerald-500/10"
            animate={{
              scale: [1, 1.02, 1],
              opacity: [0.3, 0.6, 0.3],
            }}
            transition={{
              duration: 3,
              repeat: Infinity,
              ease: "easeInOut",
              delay: 0.6,
            }}
          />
          <motion.div
            className="bg-accent/5 absolute -bottom-[120px] h-[235px] w-[235px] rounded-full border border-emerald-500/5"
            animate={{
              scale: [1, 1.01, 1],
              opacity: [0.2, 0.5, 0.2],
            }}
            transition={{
              duration: 3,
              repeat: Infinity,
              ease: "easeInOut",
              delay: 0.9,
            }}
          />
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: cloud-flow-demo =====
Title: Cloud Flow Demo

--- file: example/cloud-flow-demo.tsx ---
import CloudFlow from "@/registry/gammaui/cloud-flow"

export const CloudFlowDemo = () => {
  return (
    <div className="flex w-full justify-center rounded-xl p-4">
      <CloudFlow />
    </div>
  )
}



===== COMPONENT: cpu-architecture =====
Title: CPU Architecture
Description: A fully animated CPU architecture SVG component with dynamic paths, gradients, and optional CPU connections.

--- file: gammaui/cpu-architecture.tsx ---
import React from "react"

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

export interface CpuArchitectureSvgProps {
  className?: string
  width?: string
  height?: string
  text?: string
  showCpuConnections?: boolean
  lineMarkerSize?: number
  animateText?: boolean
  animateLines?: boolean
  animateMarkers?: boolean
}

export default function CpuArchitecture({
  className,
  width = "100%",
  height = "100%",
  text = "CPU",
  showCpuConnections = true,
  animateText = true,
  lineMarkerSize = 18,
  animateLines = true,
  animateMarkers = true,
}: CpuArchitectureSvgProps) {
  return (
    <svg
      className={cn("text-muted", className)}
      width={width}
      height={height}
      viewBox="0 0 200 100"
    >
      {/* Paths */}
      <g
        stroke="currentColor"
        fill="none"
        strokeWidth="0.3"
        strokeDasharray="100 100"
        pathLength="100"
        markerStart="url(#cpu-circle-marker)"
      >
        {/* 1st */}
        <path
          strokeDasharray="100 100"
          pathLength="100"
          d="M 10 20 h 79.5 q 5 0 5 5 v 30"
        />
        {/* 2nd */}
        <path
          strokeDasharray="100 100"
          pathLength="100"
          d="M 180 10 h -69.7 q -5 0 -5 5 v 30"
        />
        {/* 3rd */}
        <path d="M 130 20 v 21.8 q 0 5 -5 5 h -10" />
        {/* 4th */}
        <path d="M 170 80 v -21.8 q 0 -5 -5 -5 h -50" />
        {/* 5th */}
        <path
          strokeDasharray="100 100"
          pathLength="100"
          d="M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20"
        />
        {/* 6th */}
        <path d="M 94.8 95 v -36" />
        {/* 7th */}
        <path d="M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 14" />
        {/* 8th */}
        <path d="M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20" />
        {/* Animation For Path Starting */}
        {animateLines && (
          <animate
            attributeName="stroke-dashoffset"
            from="100"
            to="0"
            dur="1s"
            fill="freeze"
            calcMode="spline"
            keySplines="0.25,0.1,0.5,1"
            keyTimes="0; 1"
          />
        )}
      </g>

      {/* 1. Blue Light */}
      <g mask="url(#cpu-mask-1)">
        <circle
          className="cpu-architecture cpu-line-1"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-blue-grad)"
        />
      </g>
      {/* 2. Yellow Light */}
      <g mask="url(#cpu-mask-2)">
        <circle
          className="cpu-architecture cpu-line-2"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-yellow-grad)"
        />
      </g>
      {/* 3. Pinkish Light */}
      <g mask="url(#cpu-mask-3)">
        <circle
          className="cpu-architecture cpu-line-3"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-pinkish-grad)"
        />
      </g>
      {/* 4. White Light */}
      <g mask="url(#cpu-mask-4)">
        <circle
          className="cpu-architecture cpu-line-4"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-white-grad)"
        />
      </g>
      {/* 5. Green Light */}
      <g mask="url(#cpu-mask-5)">
        <circle
          className="cpu-architecture cpu-line-5"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-green-grad)"
        />
      </g>
      {/* 6. Orange Light */}
      <g mask="url(#cpu-mask-6)">
        <circle
          className="cpu-architecture cpu-line-6"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-orange-grad)"
        />
      </g>
      {/* 7. Cyan Light */}
      <g mask="url(#cpu-mask-7)">
        <circle
          className="cpu-architecture cpu-line-7"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-cyan-grad)"
        />
      </g>
      {/* 8. Rose Light */}
      <g mask="url(#cpu-mask-8)">
        <circle
          className="cpu-architecture cpu-line-8"
          cx="0"
          cy="0"
          r="8"
          fill="url(#cpu-rose-grad)"
        />
      </g>
      {/* CPU Box */}
      <g>
        {/* Cpu connections */}
        {showCpuConnections && (
          <g fill="url(#cpu-connection-gradient)">
            <rect x="93" y="37" width="2.5" height="5" rx="0.7" />
            <rect x="104" y="37" width="2.5" height="5" rx="0.7" />
            <rect
              x="116.3"
              y="44"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(90 116.25 45.5)"
            />
            <rect
              x="122.8"
              y="44"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(90 116.25 45.5)"
            />
            <rect
              x="104"
              y="16"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(180 105.25 39.5)"
            />
            <rect
              x="114.5"
              y="16"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(180 105.25 39.5)"
            />
            <rect
              x="80"
              y="-13.6"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(270 115.25 19.5)"
            />
            <rect
              x="87"
              y="-13.6"
              width="2.5"
              height="5"
              rx="0.7"
              transform="rotate(270 115.25 19.5)"
            />
          </g>
        )}
        {/* Main CPU Rectangle */}
        <rect
          x="85"
          y="40"
          width="30"
          height="20"
          rx="2"
          fill="#181818"
          filter="url(#cpu-light-shadow)"
        />
        {/* CPU Text */}
        <text
          x="92"
          y="52.5"
          fontSize="7"
          fill={animateText ? "url(#cpu-text-gradient)" : "white"}
          fontWeight="600"
          letterSpacing="0.05em"
        >
          {text}
        </text>
      </g>
      {/* Masks */}
      <defs>
        <mask id="cpu-mask-1">
          <path
            d="M 10 20 h 79.5 q 5 0 5 5 v 24"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-2">
          <path
            d="M 180 10 h -69.7 q -5 0 -5 5 v 24"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-3">
          <path
            d="M 130 20 v 21.8 q 0 5 -5 5 h -10"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-4">
          <path
            d="M 170 80 v -21.8 q 0 -5 -5 -5 h -50"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-5">
          <path
            d="M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-6">
          <path d="M 94.8 95 v -36" strokeWidth="0.5" stroke="white" />
        </mask>
        <mask id="cpu-mask-7">
          <path
            d="M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 14"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        <mask id="cpu-mask-8">
          <path
            d="M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20"
            strokeWidth="0.5"
            stroke="white"
          />
        </mask>
        {/* Gradients */}
        <radialGradient id="cpu-blue-grad" fx="1">
          <stop offset="0%" stopColor="#00E8ED" />
          <stop offset="50%" stopColor="#08F" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-yellow-grad" fx="1">
          <stop offset="0%" stopColor="#FFD800" />
          <stop offset="50%" stopColor="#FFD800" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-pinkish-grad" fx="1">
          <stop offset="0%" stopColor="#830CD1" />
          <stop offset="50%" stopColor="#FF008B" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-white-grad" fx="1">
          <stop offset="0%" stopColor="white" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-green-grad" fx="1">
          <stop offset="0%" stopColor="#22c55e" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-orange-grad" fx="1">
          <stop offset="0%" stopColor="#f97316" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-cyan-grad" fx="1">
          <stop offset="0%" stopColor="#06b6d4" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="cpu-rose-grad" fx="1">
          <stop offset="0%" stopColor="#f43f5e" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <filter
          id="cpu-light-shadow"
          x="-50%"
          y="-50%"
          width="200%"
          height="200%"
        >
          <feDropShadow
            dx="1.5"
            dy="1.5"
            stdDeviation="1"
            floodColor="black"
            floodOpacity="0.1"
          />
        </filter>
        <marker
          id="cpu-circle-marker"
          viewBox="0 0 10 10"
          refX="5"
          refY="5"
          markerWidth={lineMarkerSize}
          markerHeight={lineMarkerSize}
        >
          <circle
            id="innerMarkerCircle"
            cx="5"
            cy="5"
            r="2"
            fill="black"
            stroke="#232323"
            strokeWidth="0.5"
          >
            {animateMarkers && (
              <animate attributeName="r" values="0; 3; 2" dur="0.5s" />
            )}
          </circle>
        </marker>
        {/* Cpu connection gradient */}
        <linearGradient
          id="cpu-connection-gradient"
          x1="0"
          y1="0"
          x2="0"
          y2="1"
        >
          <stop offset="0%" stopColor="#4F4F4F" />
          <stop offset="60%" stopColor="#121214" />
        </linearGradient>
        {/* Add CPU Text Gradient */}
        <linearGradient id="cpu-text-gradient" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#666666">
            <animate
              attributeName="offset"
              values="-2; -1; 0"
              dur="5s"
              repeatCount="indefinite"
              calcMode="spline"
              keyTimes="0; 0.5; 1"
              keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
            />
          </stop>
          <stop offset="25%" stopColor="white">
            <animate
              attributeName="offset"
              values="-1; 0; 1"
              dur="5s"
              repeatCount="indefinite"
              calcMode="spline"
              keyTimes="0; 0.5; 1"
              keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
            />
          </stop>
          <stop offset="50%" stopColor="#666666">
            <animate
              attributeName="offset"
              values="0; 1; 2;"
              dur="5s"
              repeatCount="indefinite"
              calcMode="spline"
              keyTimes="0; 0.5; 1"
              keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
            />
          </stop>
        </linearGradient>
      </defs>
    </svg>
  )
}



===== COMPONENT: data-feeding-in =====
Title: Data Feeding In
Description: An animated data ingestion visualization with flowing SVG paths, pulsing gradient beams, and a staggered table reveal using Framer Motion.

--- file: gammaui/data-feeding-in.tsx ---
"use client"

import React, { useEffect, useRef } from "react"
import { motion, useAnimation } from "motion/react"

const paths = [
  "M0 100H55.022C61.8914 100 68.6451 101.769 74.6324 105.137L120.368 130.863C126.355 134.231 133.109 136 139.978 136H201.5",
  "M0 60H48.2171C59.2463 60 69.7861 64.5539 77.3451 72.5854L117.655 115.415C125.214 123.446 135.754 128 146.783 128H201.5",
  "M0 188H55.022C61.8914 188 68.6451 186.231 74.6324 182.863L120.368 157.137C126.355 153.769 133.109 152 139.978 152H201.5",
  "M0 228H48.2171C59.2463 228 69.7861 223.446 77.3451 215.415L117.655 172.585C125.214 164.554 135.754 160 146.783 160H201.5",
  "M0 287H41.7852C56.4929 287 70.0142 278.929 76.994 265.983L118.49 189.017C125.47 176.071 138.991 168 153.699 168H202",
  "M0 144L201 145",
  "M0 1H41.5946C56.3171 1 69.8495 9.08744 76.823 22.0537L118.177 98.9463C125.15 111.913 138.683 120 153.405 120H201.5",
]

export default function DataFeedingIn() {
  const svgRef = useRef<SVGSVGElement>(null)
  const controls = useAnimation()

  useEffect(() => {
    if (!svgRef.current) return

    controls.start({
      x1: ["-50%", "100%"],
      x2: ["50%", "150%"],
      transition: {
        duration: 1.5,
        ease: "linear",
        repeat: Infinity,
        delay: 0.25,
      },
    })
  }, [controls])

  return (
    <div className="mt-[120px] flex flex-col items-center justify-center">
      <div
        className="h-20 origin-right text-black dark:text-white"
        style={{ transform: "rotate(90deg) translateX(40px) translateY(0)" }}
      >
        <svg
          width="202"
          className="ml-auto"
          viewBox="0 0 202 288"
          fill="none"
          ref={svgRef}
        >
          {paths.map((d, index) => (
            <React.Fragment key={index}>
              <path
                d={d}
                stroke="currentColor"
                mask="url(#mask)"
                strokeLinecap="round"
                strokeOpacity="0.2"
                strokeWidth="2"
                strokeDasharray="0.1 3"
              />
              <path
                d={d}
                stroke={`url(#pulse-${index})`}
                strokeLinecap="round"
                strokeOpacity="1"
                strokeWidth="2"
                strokeDasharray="0.1 3"
                mask="url(#mask)"
              />
            </React.Fragment>
          ))}
          <defs>
            <linearGradient
              id="maskGrad"
              x1="202"
              y1="227"
              x2="32"
              y2="227"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor="white" />
              <stop offset="1" stopColor="white" stopOpacity="0" />
            </linearGradient>
            <mask id="mask" maskUnits="userSpaceOnUse">
              <rect width="202" height="288" fill="url(#maskGrad)" />
            </mask>
            {Array.from({ length: 7 }).map((_, index) => (
              <motion.linearGradient
                key={index}
                id={`pulse-${index}`}
                x1="-100%"
                y1="0"
                x2="0"
                y2="0"
                gradientUnits="userSpaceOnUse"
                animate={controls}
              >
                <stop offset="0.35" stopColor="#00bcff" stopOpacity="0" />
                <stop offset="0.45" stopColor="#00bcff" />
                <stop offset="0.55" stopColor="#00bcff" />
                <stop offset="0.65" stopColor="#00bcff" stopOpacity="0" />
              </motion.linearGradient>
            ))}
          </defs>
        </svg>
      </div>

      <div className="h-[260px] w-[400px] overflow-hidden rounded-[14px] bg-[linear-gradient(rgba(0,0,0,0.05)_0%,rgba(0,0,0,0)_100%)] dark:bg-[linear-gradient(rgba(255,255,255,0.05)_0%,rgba(255,255,255,0)_100%)]">
        <div className="flex gap-2 border-b border-black/7.5 p-2.5 dark:border-white/7.5">
          {Array.from({ length: 3 }).map((_, i) => (
            <div
              key={i}
              className="h-2 w-2 rounded-full bg-black/10 dark:bg-white/10"
            />
          ))}
        </div>
        <div>
          <div className="flex w-full overflow-hidden">
            {Array.from({ length: 3 }, (_, index) => (
              <div
                key={index}
                className="flex h-10 w-[180px] shrink-0 items-center gap-2 border-r border-b border-black/7.5 px-2 dark:border-white/7.5"
              >
                <div className="h-4 w-4 rounded border-2 border-black/7.5 bg-black/15 dark:border-white/7.5 dark:bg-white/15" />
                <div className="h-2 w-[88px] rounded bg-black/7.5 dark:bg-white/7.5" />
              </div>
            ))}
          </div>
          {Array.from({ length: 6 }, (_, i) => (
            <motion.div
              key={i}
              className="flex w-full overflow-hidden"
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{
                ease: "easeIn",
                delay: 1.25 + i * 1.5,
                duration: 0.3,
              }}
            >
              {Array.from({ length: 3 }, (_, j) => (
                <div
                  key={j}
                  className="flex h-9 w-[180px] shrink-0 items-center gap-2 border-r border-b border-black/7.5 px-2 dark:border-white/7.5"
                >
                  <div className="h-2 w-[88px] rounded bg-black/7.5 dark:bg-white/7.5" />
                </div>
              ))}
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: data-feeding-in-demo =====
Title: Data Feeding In Demo

--- file: example/data-feeding-in-demo.tsx ---
import DataFeedingIn from "@/registry/gammaui/data-feeding-in"

export const DataFeedingInDemo = () => {
  return (
    <div className="flex h-full min-h-[400px] w-full items-center justify-center">
      <DataFeedingIn />
    </div>
  )
}



===== COMPONENT: inverted-cursor =====
Title: Inverted Cursor
Description: A smooth, animated custom cursor component with blend mode effects.

--- file: gammaui/inverted-cursor.tsx ---
"use client"

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

interface CursorProps {
  size?: number
}

export const Cursor: React.FC<CursorProps> = ({ size = 60 }) => {
  const cursorRef = useRef<HTMLDivElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  // @ts-ignore
  const requestRef = useRef<number>()
  const previousPos = useRef({ x: -size, y: -size })

  const [visible, setVisible] = useState(false)
  const [position, setPosition] = useState({ x: -size, y: -size })

  const animate = () => {
    if (!cursorRef.current) return

    const currentX = previousPos.current.x
    const currentY = previousPos.current.y
    const targetX = position.x - size / 2
    const targetY = position.y - size / 2

    const deltaX = (targetX - currentX) * 0.2
    const deltaY = (targetY - currentY) * 0.2

    const newX = currentX + deltaX
    const newY = currentY + deltaY

    previousPos.current = { x: newX, y: newY }
    cursorRef.current.style.transform = `translate(${newX}px, ${newY}px)`

    requestRef.current = requestAnimationFrame(animate)
  }

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

    const handleMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect()
      setVisible(true)
      setPosition({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      })
    }

    const handleMouseEnter = () => {
      setVisible(true)
    }

    const handleMouseLeave = () => {
      setVisible(false)
    }

    container.addEventListener("mousemove", handleMouseMove)
    container.addEventListener("mouseenter", handleMouseEnter)
    container.addEventListener("mouseleave", handleMouseLeave)

    requestRef.current = requestAnimationFrame(animate)

    return () => {
      container.removeEventListener("mousemove", handleMouseMove)
      container.removeEventListener("mouseenter", handleMouseEnter)
      container.removeEventListener("mouseleave", handleMouseLeave)
      if (requestRef.current) cancelAnimationFrame(requestRef.current)
    }
  }, [position, size])

  return (
    <div ref={containerRef} className="absolute inset-0 cursor-none">
      <div
        ref={cursorRef}
        className="pointer-events-none absolute z-50 rounded-full bg-white mix-blend-difference transition-opacity duration-300"
        style={{
          width: size,
          height: size,
          opacity: visible ? 1 : 0,
        }}
        aria-hidden="true"
      />
    </div>
  )
}

export default Cursor


===== EXAMPLE: inverted-cursor-demo =====
Title: Inverted Cursor Demo

--- file: example/inverted-cursor-demo.tsx ---
"use client"

import { Cursor } from "@/registry/gammaui/inverted-cursor"

export default function CursorDemo() {
  return (
    <div className="relative h-96 w-full cursor-none overflow-hidden">
      {/* Custom circular inverted color cursor */}
      <Cursor />

      {/* Main content centered vertically and horizontally */}
      <main className="flex h-full items-center justify-center">
        <h1 className="text-4xl font-extrabold select-none">Move your mouse</h1>
      </main>
    </div>
  )
}



===== COMPONENT: live-waveform =====
Title: Live Waveform
Description: A customizable live audio waveform visualizer using the Web Audio API.

--- file: gammaui/live-waveform.tsx ---
"use client"

import { useEffect, useRef, type HTMLAttributes } from "react"

export type LiveWaveformProps = HTMLAttributes<HTMLDivElement> & {
  active?: boolean
  processing?: boolean
  deviceId?: string
  barWidth?: number
  barGap?: number
  barRadius?: number
  barColor?: string
  fadeEdges?: boolean
  fadeWidth?: number
  height?: string | number
  sensitivity?: number
  smoothingTimeConstant?: number
  fftSize?: number
  historySize?: number
  updateRate?: number
  mode?: "scrolling" | "static"
  onError?: (error: Error) => void
  onStreamReady?: (stream: MediaStream) => void
  onStreamEnd?: () => void
}

export function LiveWaveform({
  active = false,
  processing = false,
  deviceId,
  barWidth = 3,
  barGap = 1,
  barRadius = 1.5,
  barColor,
  fadeEdges = true,
  fadeWidth = 24,
  height = 64,
  sensitivity = 1,
  smoothingTimeConstant = 0.8,
  fftSize = 256,
  historySize = 60,
  updateRate = 30,
  mode = "static",
  onError,
  onStreamReady,
  onStreamEnd,
  className,
  ...props
}: LiveWaveformProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const historyRef = useRef<number[]>([])
  const analyserRef = useRef<AnalyserNode | null>(null)
  const audioContextRef = useRef<AudioContext | null>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const animationRef = useRef<number>(0)
  const lastUpdateRef = useRef<number>(0)
  const processingAnimationRef = useRef<number | null>(null)
  const lastActiveDataRef = useRef<number[]>([])
  const transitionProgressRef = useRef(0)
  const staticBarsRef = useRef<number[]>([])
  const needsRedrawRef = useRef(true)
  const gradientCacheRef = useRef<CanvasGradient | null>(null)
  const lastWidthRef = useRef(0)
  const currentWidthRef = useRef(0) // Track current width

  const heightStyle = typeof height === "number" ? `${height}px` : height

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

    const updateCanvasSize = () => {
      const rect = container.getBoundingClientRect()
      const dpr = window.devicePixelRatio || 1

      // Store the current width for use in animation loop
      currentWidthRef.current = rect.width

      canvas.width = rect.width * dpr
      canvas.height = rect.height * dpr
      canvas.style.width = `${containerRef.current?.offsetWidth}px`
      canvas.style.height = `${rect.height}px`

      const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.scale(dpr, dpr)
      }

      gradientCacheRef.current = null
      lastWidthRef.current = rect.width
      needsRedrawRef.current = true
    }

    // Initial size
    updateCanvasSize()

    const resizeObserver = new ResizeObserver(() => {
      updateCanvasSize()
    })

    resizeObserver.observe(container)
    return () => resizeObserver.disconnect()
  }, [])

  useEffect(() => {
    if (processing && !active) {
      let time = 0
      transitionProgressRef.current = 0

      const animateProcessing = () => {
        time += 0.03
        transitionProgressRef.current = Math.min(
          1,
          transitionProgressRef.current + 0.02
        )

        const processingData = []
        // Use currentWidthRef instead of getBoundingClientRect
        const barCount = Math.floor(
          currentWidthRef.current / (barWidth + barGap)
        )

        if (mode === "static") {
          const halfCount = Math.floor(barCount / 2)

          for (let i = 0; i < barCount; i++) {
            const normalizedPosition = (i - halfCount) / halfCount
            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4

            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25
            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2
            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15
            const combinedWave = wave1 + wave2 + wave3
            const processingValue = (0.2 + combinedWave) * centerWeight

            let finalValue = processingValue
            if (
              lastActiveDataRef.current.length > 0 &&
              transitionProgressRef.current < 1
            ) {
              const lastDataIndex = Math.min(
                i,
                lastActiveDataRef.current.length - 1
              )
              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
              finalValue =
                lastValue * (1 - transitionProgressRef.current) +
                processingValue * transitionProgressRef.current
            }

            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
          }
        } else {
          for (let i = 0; i < barCount; i++) {
            const normalizedPosition = (i - barCount / 2) / (barCount / 2)
            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4

            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25
            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2
            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15
            const combinedWave = wave1 + wave2 + wave3
            const processingValue = (0.2 + combinedWave) * centerWeight

            let finalValue = processingValue
            if (
              lastActiveDataRef.current.length > 0 &&
              transitionProgressRef.current < 1
            ) {
              const lastDataIndex = Math.floor(
                (i / barCount) * lastActiveDataRef.current.length
              )
              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
              finalValue =
                lastValue * (1 - transitionProgressRef.current) +
                processingValue * transitionProgressRef.current
            }

            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
          }
        }

        if (mode === "static") {
          staticBarsRef.current = processingData
        } else {
          historyRef.current = processingData
        }

        needsRedrawRef.current = true
        processingAnimationRef.current =
          requestAnimationFrame(animateProcessing)
      }

      animateProcessing()

      return () => {
        if (processingAnimationRef.current) {
          cancelAnimationFrame(processingAnimationRef.current)
        }
      }
    } else if (!active && !processing) {
      const hasData =
        mode === "static"
          ? staticBarsRef.current.length > 0
          : historyRef.current.length > 0

      if (hasData) {
        let fadeProgress = 0
        const fadeToIdle = () => {
          fadeProgress += 0.03
          if (fadeProgress < 1) {
            if (mode === "static") {
              staticBarsRef.current = staticBarsRef.current.map(
                (value) => value * (1 - fadeProgress)
              )
            } else {
              historyRef.current = historyRef.current.map(
                (value) => value * (1 - fadeProgress)
              )
            }
            needsRedrawRef.current = true
            requestAnimationFrame(fadeToIdle)
          } else {
            if (mode === "static") {
              staticBarsRef.current = []
            } else {
              historyRef.current = []
            }
          }
        }
        fadeToIdle()
      }
    }
  }, [processing, active, barWidth, barGap, mode])

  // Handle microphone setup and teardown
  useEffect(() => {
    if (!active) {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
        streamRef.current = null
        onStreamEnd?.()
      }
      if (
        audioContextRef.current &&
        audioContextRef.current.state !== "closed"
      ) {
        audioContextRef.current.close()
        audioContextRef.current = null
      }
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
        animationRef.current = 0
      }
      return
    }

    const setupMicrophone = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: deviceId
            ? {
                deviceId: { exact: deviceId },
                echoCancellation: true,
                noiseSuppression: true,
                autoGainControl: true,
              }
            : {
                echoCancellation: true,
                noiseSuppression: true,
                autoGainControl: true,
              },
        })
        streamRef.current = stream
        onStreamReady?.(stream)

        const AudioContextConstructor =
          window.AudioContext || (window as any).webkitAudioContext
        const audioContext = new AudioContextConstructor()
        const analyser = audioContext.createAnalyser()
        analyser.fftSize = fftSize
        analyser.smoothingTimeConstant = smoothingTimeConstant

        const source = audioContext.createMediaStreamSource(stream)
        source.connect(analyser)

        audioContextRef.current = audioContext
        analyserRef.current = analyser

        historyRef.current = []
      } catch (error) {
        onError?.(error as Error)
      }
    }

    setupMicrophone()

    return () => {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
        streamRef.current = null
        onStreamEnd?.()
      }
      if (
        audioContextRef.current &&
        audioContextRef.current.state !== "closed"
      ) {
        audioContextRef.current.close()
        audioContextRef.current = null
      }
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
        animationRef.current = 0
      }
    }
  }, [
    active,
    deviceId,
    fftSize,
    smoothingTimeConstant,
    onError,
    onStreamReady,
    onStreamEnd,
  ])

  // Animation loop
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

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

    let rafId: number

    const animate = (currentTime: number) => {
      // Use currentWidthRef for consistent width throughout render
      const width = currentWidthRef.current
      const rect = canvas.getBoundingClientRect()

      // Update audio data if active
      if (active && currentTime - lastUpdateRef.current > updateRate) {
        lastUpdateRef.current = currentTime

        if (analyserRef.current) {
          const dataArray = new Uint8Array(
            analyserRef.current.frequencyBinCount
          )
          analyserRef.current.getByteFrequencyData(dataArray)

          if (mode === "static") {
            const startFreq = Math.floor(dataArray.length * 0.05)
            const endFreq = Math.floor(dataArray.length * 0.4)
            const relevantData = dataArray.slice(startFreq, endFreq)

            const barCount = Math.floor(width / (barWidth + barGap))
            const halfCount = Math.floor(barCount / 2)
            const newBars: number[] = []

            for (let i = halfCount - 1; i >= 0; i--) {
              const dataIndex = Math.floor(
                (i / halfCount) * relevantData.length
              )
              const value = Math.min(
                1,
                (relevantData[dataIndex] / 255) * sensitivity
              )
              newBars.push(Math.max(0.05, value))
            }

            for (let i = 0; i < halfCount; i++) {
              const dataIndex = Math.floor(
                (i / halfCount) * relevantData.length
              )
              const value = Math.min(
                1,
                (relevantData[dataIndex] / 255) * sensitivity
              )
              newBars.push(Math.max(0.05, value))
            }

            staticBarsRef.current = newBars
            lastActiveDataRef.current = newBars
          } else {
            let sum = 0
            const startFreq = Math.floor(dataArray.length * 0.05)
            const endFreq = Math.floor(dataArray.length * 0.4)
            const relevantData = dataArray.slice(startFreq, endFreq)

            for (let i = 0; i < relevantData.length; i++) {
              sum += relevantData[i]
            }
            const average = (sum / relevantData.length / 255) * sensitivity

            historyRef.current.push(Math.min(1, Math.max(0.05, average)))
            lastActiveDataRef.current = [...historyRef.current]

            if (historyRef.current.length > historySize) {
              historyRef.current.shift()
            }
          }
          needsRedrawRef.current = true
        }
      }

      if (!needsRedrawRef.current && !active) {
        rafId = requestAnimationFrame(animate)
        return
      }

      needsRedrawRef.current = active
      ctx.clearRect(0, 0, width, rect.height)

      const computedBarColor =
        barColor ||
        (() => {
          const style = getComputedStyle(canvas)
          const color = style.color
          return color || "#000"
        })()

      const step = barWidth + barGap
      const barCount = Math.floor(width / step)
      const centerY = rect.height / 2

      if (mode === "static") {
        const dataToRender = processing
          ? staticBarsRef.current
          : active
            ? staticBarsRef.current
            : staticBarsRef.current.length > 0
              ? staticBarsRef.current
              : []

        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
          const value = dataToRender[i] || 0.1
          const x = i * step
          const barHeight = Math.max(4, value * rect.height * 0.8)
          const y = centerY - barHeight / 2

          ctx.fillStyle = computedBarColor
          ctx.globalAlpha = 0.4 + value * 0.6

          if (barRadius > 0) {
            ctx.beginPath()
            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
            ctx.fill()
          } else {
            ctx.fillRect(x, y, barWidth, barHeight)
          }
        }
      } else {
        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
          const dataIndex = historyRef.current.length - 1 - i
          const value = historyRef.current[dataIndex] || 0.1
          const x = width - (i + 1) * step
          const barHeight = Math.max(4, value * rect.height * 0.8)
          const y = centerY - barHeight / 2

          ctx.fillStyle = computedBarColor
          ctx.globalAlpha = 0.4 + value * 0.6

          if (barRadius > 0) {
            ctx.beginPath()
            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
            ctx.fill()
          } else {
            ctx.fillRect(x, y, barWidth, barHeight)
          }
        }
      }

      if (fadeEdges && fadeWidth > 0 && width > 0) {
        if (!gradientCacheRef.current || lastWidthRef.current !== width) {
          const gradient = ctx.createLinearGradient(0, 0, width, 0)
          const fadePercent = Math.min(0.3, fadeWidth / width)

          gradient.addColorStop(0, "rgba(255,255,255,1)")
          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)")
          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)")
          gradient.addColorStop(1, "rgba(255,255,255,1)")

          gradientCacheRef.current = gradient
          lastWidthRef.current = width
        }

        ctx.globalCompositeOperation = "destination-out"
        ctx.fillStyle = gradientCacheRef.current
        ctx.fillRect(0, 0, width, rect.height)
        ctx.globalCompositeOperation = "source-over"
      }

      ctx.globalAlpha = 1

      rafId = requestAnimationFrame(animate)
    }

    rafId = requestAnimationFrame(animate)

    return () => {
      if (rafId) {
        cancelAnimationFrame(rafId)
      }
    }
  }, [
    active,
    processing,
    sensitivity,
    updateRate,
    historySize,
    barWidth,
    barGap,
    barRadius,
    barColor,
    fadeEdges,
    fadeWidth,
    mode,
  ])

  return (
    <div
      className={`relative h-full w-full ${className || ""}`}
      ref={containerRef}
      style={{ height: heightStyle }}
      aria-label={
        active
          ? "Live audio waveform"
          : processing
            ? "Processing audio"
            : "Audio waveform idle"
      }
      role="img"
      {...props}
    >
      {!active && !processing && (
        <div className="border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted" />
      )}
      <canvas
        className="block h-full w-full"
        ref={canvasRef}
        aria-hidden="true"
      />
    </div>
  )
}

export default LiveWaveform


===== EXAMPLE: live-waveform-demo =====
Title: Live Waveform Demo

--- file: example/live-waveform-demo.tsx ---
"use client"

import { useState } from "react"

import { Button } from "@/components/ui/button"
import { LiveWaveform } from "@/registry/gammaui/live-waveform"

export default function LiveWaveformDemo() {
  const [active, setActive] = useState(false)
  const [processing, setProcessing] = useState(false)
  const [mode, setMode] = useState<"static" | "scrolling">("static")

  const handleToggleActive = () => {
    setActive(!active)
    if (!active) {
      setProcessing(false)
    }
  }

  const handleToggleProcessing = () => {
    setProcessing(!processing)
    if (!processing) {
      setActive(false)
    }
  }

  return (
    <div className="bg-card mx-4 w-full rounded-lg border p-6">
      <div className="mb-4">
        <h3 className="text-muted-foreground text-lg font-semibold">
          Live Audio Waveform
        </h3>
        <p className="text-muted-foreground text-sm">
          Real-time microphone input visualization with audio reactivity
        </p>
      </div>

      <div className="space-y-4">
        <LiveWaveform
          active={active}
          processing={processing}
          height={80}
          barWidth={3}
          barGap={2}
          mode={mode}
          fadeEdges={true}
          barColor="gray"
          historySize={120}
        />

        <div className="flex flex-wrap justify-center gap-2">
          <Button
            size="sm"
            variant={active ? "default" : "outline"}
            onClick={handleToggleActive}
            className="text-black dark:text-white"
          >
            {active ? "Stop" : "Start"} Listening
          </Button>
          <Button
            size="sm"
            variant={processing ? "default" : "outline"}
            onClick={handleToggleProcessing}
            className="text-black dark:text-white"
          >
            {processing ? "Stop" : "Start"} Processing
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
            className="text-black dark:text-white"
          >
            Mode: {mode === "static" ? "Static" : "Scrolling"}
          </Button>
        </div>
      </div>
    </div>
  )
}



===== COMPONENT: location-map =====
Title: Location Map
Description: An interactive 3D-tilting location card with expandable animated map, live indicator, and motion-based hover effects.

--- file: gammaui/location-map.tsx ---
"use client"

import type React from "react"
import { useRef, useState } from "react"
import {
  AnimatePresence,
  motion,
  useMotionValue,
  useSpring,
  useTransform,
} from "motion/react"

interface LocationMapProps {
  location?: string
  coordinates?: string
  className?: string
}

export function LocationMap({
  location = "San Francisco, CA",
  coordinates = "37.7749° N, 122.4194° W",
  className,
}: LocationMapProps) {
  const [isHovered, setIsHovered] = useState(false)
  const [isExpanded, setIsExpanded] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)

  const rotateX = useTransform(mouseY, [-50, 50], [8, -8])
  const rotateY = useTransform(mouseX, [-50, 50], [-8, 8])

  const springRotateX = useSpring(rotateX, { stiffness: 300, damping: 30 })
  const springRotateY = useSpring(rotateY, { stiffness: 300, damping: 30 })

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2
    mouseX.set(e.clientX - centerX)
    mouseY.set(e.clientY - centerY)
  }

  const handleMouseLeave = () => {
    mouseX.set(0)
    mouseY.set(0)
    setIsHovered(false)
  }

  const handleClick = () => {
    setIsExpanded(!isExpanded)
  }

  return (
    <motion.div
      ref={containerRef}
      className={`relative cursor-pointer select-none ${className}`}
      style={{
        perspective: 1000,
      }}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      <motion.div
        className="bg-background border-border relative overflow-hidden rounded-2xl border"
        style={{
          rotateX: springRotateX,
          rotateY: springRotateY,
          transformStyle: "preserve-3d",
        }}
        animate={{
          width: isExpanded ? 360 : 240,
          height: isExpanded ? 280 : 140,
        }}
        transition={{
          type: "spring",
          stiffness: 400,
          damping: 35,
        }}
      >
        {/* Subtle gradient overlay */}
        <div className="from-muted/20 to-muted/40 absolute inset-0 bg-linear-to-br via-transparent" />

        <AnimatePresence>
          {isExpanded && (
            <motion.div
              className="pointer-events-none absolute inset-0"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.4, delay: 0.1 }}
            >
              <div className="bg-muted absolute inset-0 rounded-2xl" />

              <svg
                className="absolute inset-0 h-full w-full"
                preserveAspectRatio="none"
              >
                {/* Main roads - using foreground with opacity */}
                <motion.line
                  x1="0%"
                  y1="35%"
                  x2="100%"
                  y2="35%"
                  className="stroke-foreground/25"
                  strokeWidth="4"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 0.8, delay: 0.2 }}
                />
                <motion.line
                  x1="0%"
                  y1="65%"
                  x2="100%"
                  y2="65%"
                  className="stroke-foreground/25"
                  strokeWidth="4"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 0.8, delay: 0.3 }}
                />

                {/* Vertical main roads */}
                <motion.line
                  x1="30%"
                  y1="0%"
                  x2="30%"
                  y2="100%"
                  className="stroke-foreground/20"
                  strokeWidth="3"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 0.6, delay: 0.4 }}
                />
                <motion.line
                  x1="70%"
                  y1="0%"
                  x2="70%"
                  y2="100%"
                  className="stroke-foreground/20"
                  strokeWidth="3"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 0.6, delay: 0.5 }}
                />

                {/* Secondary streets */}
                {[20, 50, 80].map((y, i) => (
                  <motion.line
                    key={`h-${i}`}
                    x1="0%"
                    y1={`${y}%`}
                    x2="100%"
                    y2={`${y}%`}
                    className="stroke-foreground/10"
                    strokeWidth="1.5"
                    initial={{ pathLength: 0 }}
                    animate={{ pathLength: 1 }}
                    transition={{ duration: 0.5, delay: 0.6 + i * 0.1 }}
                  />
                ))}
                {[15, 45, 55, 85].map((x, i) => (
                  <motion.line
                    key={`v-${i}`}
                    x1={`${x}%`}
                    y1="0%"
                    x2={`${x}%`}
                    y2="100%"
                    className="stroke-foreground/10"
                    strokeWidth="1.5"
                    initial={{ pathLength: 0 }}
                    animate={{ pathLength: 1 }}
                    transition={{ duration: 0.5, delay: 0.7 + i * 0.1 }}
                  />
                ))}
              </svg>

              {/* Buildings - using muted-foreground */}
              <motion.div
                className="bg-muted-foreground/30 border-muted-foreground/20 absolute top-[40%] left-[10%] h-[20%] w-[15%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.5 }}
              />
              <motion.div
                className="bg-muted-foreground/25 border-muted-foreground/15 absolute top-[15%] left-[35%] h-[15%] w-[12%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.6 }}
              />
              <motion.div
                className="bg-muted-foreground/28 border-muted-foreground/18 absolute top-[70%] left-[75%] h-[18%] w-[18%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.7 }}
              />
              <motion.div
                className="bg-muted-foreground/22 border-muted-foreground/15 absolute top-[20%] right-[10%] h-[25%] w-[10%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.55 }}
              />
              <motion.div
                className="bg-muted-foreground/20 border-muted-foreground/12 absolute top-[55%] left-[5%] h-[12%] w-[8%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.65 }}
              />
              <motion.div
                className="bg-muted-foreground/22 border-muted-foreground/15 absolute top-[8%] left-[75%] h-[10%] w-[14%] rounded-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.75 }}
              />

              <motion.div
                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
                initial={{ scale: 0, y: -20 }}
                animate={{ scale: 1, y: 0 }}
                transition={{
                  type: "spring",
                  stiffness: 400,
                  damping: 20,
                  delay: 0.3,
                }}
              >
                <svg
                  width="32"
                  height="32"
                  viewBox="0 0 24 24"
                  fill="none"
                  className="drop-shadow-lg"
                  style={{
                    filter: "drop-shadow(0 0 10px rgba(52, 211, 153, 0.5))",
                  }}
                >
                  <path
                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
                    fill="#34D399"
                  />
                  <circle cx="12" cy="9" r="2.5" className="fill-background" />
                </svg>
              </motion.div>

              <div className="from-background absolute inset-0 bg-linear-to-t via-transparent to-transparent opacity-60" />
            </motion.div>
          )}
        </AnimatePresence>

        {/* Grid pattern - only show when collapsed */}
        <motion.div
          className="absolute inset-0 opacity-[0.03]"
          animate={{ opacity: isExpanded ? 0 : 0.03 }}
          transition={{ duration: 0.3 }}
        >
          <svg width="100%" height="100%" className="absolute inset-0">
            <defs>
              <pattern
                id="grid"
                width="20"
                height="20"
                patternUnits="userSpaceOnUse"
              >
                <path
                  d="M 20 0 L 0 0 0 20"
                  fill="none"
                  className="stroke-foreground"
                  strokeWidth="0.5"
                />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>
        </motion.div>

        {/* Content */}
        <div className="relative z-10 flex h-full flex-col justify-between p-5">
          {/* Top section */}
          <div className="flex items-start justify-between">
            <div className="relative">
              <motion.div
                className="relative"
                animate={{
                  opacity: isExpanded ? 0 : 1,
                }}
                transition={{ duration: 0.3 }}
              >
                {/* Map Icon SVG */}
                <motion.svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="text-emerald-400"
                  animate={{
                    filter: isHovered
                      ? "drop-shadow(0 0 8px rgba(52, 211, 153, 0.6))"
                      : "drop-shadow(0 0 4px rgba(52, 211, 153, 0.3))",
                  }}
                  transition={{ duration: 0.3 }}
                >
                  <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" />
                  <line x1="9" x2="9" y1="3" y2="18" />
                  <line x1="15" x2="15" y1="6" y2="21" />
                </motion.svg>
              </motion.div>
            </div>

            {/* Status indicator */}
            <motion.div
              className="bg-foreground/5 flex items-center gap-1.5 rounded-full px-2 py-1 backdrop-blur-sm"
              animate={{
                scale: isHovered ? 1.05 : 1,
                backgroundColor: isHovered
                  ? "hsl(var(--foreground) / 0.08)"
                  : "hsl(var(--foreground) / 0.05)",
              }}
              transition={{ duration: 0.2 }}
            >
              <div className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
              <span className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
                Live
              </span>
            </motion.div>
          </div>

          {/* Bottom section */}
          <div className="space-y-1">
            <motion.h3
              className="text-foreground text-sm font-medium tracking-tight"
              animate={{
                x: isHovered ? 4 : 0,
              }}
              transition={{ type: "spring", stiffness: 400, damping: 25 }}
            >
              {location}
            </motion.h3>

            <AnimatePresence>
              {isExpanded && (
                <motion.p
                  className="text-muted-foreground font-mono text-xs"
                  initial={{ opacity: 0, y: -10, height: 0 }}
                  animate={{ opacity: 1, y: 0, height: "auto" }}
                  exit={{ opacity: 0, y: -10, height: 0 }}
                  transition={{ duration: 0.25 }}
                >
                  {coordinates}
                </motion.p>
              )}
            </AnimatePresence>

            {/* Animated underline */}
            <motion.div
              className="h-px bg-linear-to-r from-emerald-500/50 via-emerald-400/30 to-transparent"
              initial={{ scaleX: 0, originX: 0 }}
              animate={{
                scaleX: isHovered || isExpanded ? 1 : 0.3,
              }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            />
          </div>
        </div>
      </motion.div>

      {/* Click hint */}
      <motion.p
        className="text-muted-foreground absolute -bottom-6 left-1/2 text-[10px] whitespace-nowrap"
        style={{ x: "-50%" }}
        initial={{ opacity: 0 }}
        animate={{
          opacity: isHovered && !isExpanded ? 1 : 0,
          y: isHovered ? 0 : 4,
        }}
        transition={{ duration: 0.2 }}
      >
        Click to expand
      </motion.p>
    </motion.div>
  )
}


===== EXAMPLE: location-map-demo =====
Title: Location Map Demo

--- file: example/location-map-demo.tsx ---
import { LocationMap } from "@/registry/gammaui/location-map"

export default function LocationMapDemo() {
  return (
    <main className="flex w-full items-center justify-center">
      <div className="relative z-10 flex flex-col items-center gap-8">
        {/* Optional subtle label */}
        <p className="text-xs font-medium tracking-[0.2em] text-neutral-600 uppercase">
          Current Location
        </p>

        <LocationMap
          location="Berlin, Germany"
          coordinates="52.5200° N, 13.4050° E"
        />
      </div>
    </main>
  )
}



===== COMPONENT: logo-cloud =====
Title: Logo Cloud
Description: A responsive logo grid component supporting dark mode, decorations, and flexible layout.

--- file: gammaui/logo-cloud.tsx ---
import { IconPlus } from "@tabler/icons-react"

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

interface Logo {
  src: string
  alt: string
  width?: number
  height?: number
}

type LogoCloudProps = React.ComponentProps<"div">

export default function LogoCloud({ className, ...props }: LogoCloudProps) {
  return (
    <div
      className={cn(
        "relative grid grid-cols-2 border-x md:grid-cols-4",
        className
      )}
      {...props}
    >
      <div className="pointer-events-none absolute -top-px left-1/2 w-screen -translate-x-1/2 border-t" />

      <LogoCard
        className="relative border-r border-b bg-gray-100 dark:bg-[#121212]"
        logo={{
          src: "https://svgl.app/library/nvidia-wordmark-light.svg",
          alt: "Nvidia Logo",
        }}
      >
        <IconPlus
          className="absolute -right-[12.5px] -bottom-[12.5px] z-10 size-6"
          strokeWidth={1}
        />
      </LogoCard>

      <LogoCard
        className="border-b bg-white md:border-r dark:bg-black"
        logo={{
          src: "https://svgl.app/library/supabase_wordmark_light.svg",
          alt: "Supabase Logo",
        }}
      />

      <LogoCard
        className="relative border-r border-b bg-gray-100 md:bg-gray-100 dark:bg-[#121212] md:dark:bg-[#121212]"
        logo={{
          src: "https://svgl.app/library/github_wordmark_light.svg",
          alt: "GitHub Logo",
        }}
      >
        <IconPlus
          className="absolute -right-[12.5px] -bottom-[12.5px] z-10 size-6"
          strokeWidth={1}
        />
        <IconPlus
          className="absolute -bottom-[12.5px] -left-[12.5px] z-10 hidden size-6 md:block"
          strokeWidth={1}
        />
      </LogoCard>

      <LogoCard
        className="relative border-b bg-gray-100 md:bg-white dark:bg-[#121212] md:dark:bg-black"
        logo={{
          src: "https://svgl.app/library/openai_wordmark_light.svg",
          alt: "OpenAI Logo",
        }}
      />

      <LogoCard
        className="relative border-r border-b bg-gray-100 md:border-b-0 md:bg-white dark:bg-[#121212] md:dark:bg-black"
        logo={{
          src: "https://svgl.app/library/turso-wordmark-light.svg",
          alt: "Turso Logo",
        }}
      >
        <IconPlus
          className="absolute -right-[12.5px] -bottom-[12.5px] z-10 size-6 md:-left-[12.5px] md:hidden"
          strokeWidth={1}
        />
      </LogoCard>

      <LogoCard
        className="border-b bg-white md:border-r md:border-b-0 md:bg-gray-100 dark:bg-black md:dark:bg-[#121212]"
        logo={{
          src: "https://svgl.app/library/clerk-wordmark-light.svg",
          alt: "Clerk Logo",
        }}
      />

      <LogoCard
        className="border-r bg-white dark:bg-black"
        logo={{
          src: "https://svgl.app/library/claude-ai-wordmark-icon_light.svg",
          alt: "Claude AI Logo",
        }}
      />

      <LogoCard
        className="bg-gray-100 dark:bg-[#121212]"
        logo={{
          src: "https://svgl.app/library/vercel_wordmark.svg",
          alt: "Vercel Logo",
        }}
      />

      <div className="pointer-events-none absolute -bottom-px left-1/2 w-screen -translate-x-1/2 border-b" />
    </div>
  )
}

type LogoCardProps = React.ComponentProps<"div"> & {
  logo: Logo
}

function LogoCard({ logo, className, children, ...props }: LogoCardProps) {
  return (
    <div
      className={cn(
        "bg-background flex items-center justify-center px-4 py-8 md:p-8",
        className
      )}
      {...props}
    >
      <img
        alt={logo.alt}
        className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
        height={logo.height || "auto"}
        src={logo.src}
        width={logo.width || "auto"}
      />
      {children}
    </div>
  )
}


===== EXAMPLE: logo-cloud-demo =====
Title: Logo Cloud Demo

--- file: example/logo-cloud-demo.tsx ---
import LogoCloud from "@/registry/gammaui/logo-cloud"

export default function DemoOne() {
  return (
    <div className="w-full place-content-center px-4">
      <section className="relative mx-auto grid max-w-3xl">
        <h2 className="text-muted-foreground mb-6 text-center text-lg font-medium tracking-tight md:text-2xl">
          Companies we{" "}
          <span className="text-primary font-semibold">collaborate</span> with.
        </h2>

        <LogoCloud />
      </section>
    </div>
  )
}



===== COMPONENT: logo-loop =====
Title: Logo Timeline
Description: A looping logo marquee component with horizontal and vertical motion, hover effects, fading edges, and responsive behavior.

--- file: gammaui/logo-loop.tsx ---
"use client"

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"

export type LogoItem =
  | {
      node: React.ReactNode
      href?: string
      title?: string
      ariaLabel?: string
    }
  | {
      src: string
      alt?: string
      href?: string
      title?: string
      srcSet?: string
      sizes?: string
      width?: number
      height?: number
    }

export interface LogoLoopProps {
  logos: LogoItem[]
  speed?: number
  direction?: "left" | "right" | "up" | "down"
  width?: number | string
  logoHeight?: number
  gap?: number
  pauseOnHover?: boolean
  hoverSpeed?: number
  fadeOut?: boolean
  fadeOutColor?: string
  scaleOnHover?: boolean
  renderItem?: (item: LogoItem, key: React.Key) => React.ReactNode
  ariaLabel?: string
  className?: string
  style?: React.CSSProperties
}

const ANIMATION_CONFIG = {
  SMOOTH_TAU: 0.25,
  MIN_COPIES: 2,
  COPY_HEADROOM: 2,
} as const

const toCssLength = (value?: number | string): string | undefined =>
  typeof value === "number" ? `${value}px` : (value ?? undefined)

const cx = (...parts: (string | false | null | undefined)[]) =>
  parts.filter(Boolean).join(" ")

const useResizeObserver = (
  callback: () => void,
  elements: React.RefObject<Element | null>[],
  dependencies: React.DependencyList
) => {
  useEffect(() => {
    if (!window.ResizeObserver) {
      const handleResize = () => callback()
      window.addEventListener("resize", handleResize)
      callback()
      return () => window.removeEventListener("resize", handleResize)
    }

    const observers = elements.map((ref) => {
      if (!ref.current) return null
      const observer = new ResizeObserver(callback)
      observer.observe(ref.current)
      return observer
    })

    callback()

    return () => {
      observers.forEach((observer) => observer?.disconnect())
    }
  }, dependencies)
}

const useImageLoader = (
  seqRef: React.RefObject<HTMLUListElement | null>,
  onLoad: () => void,
  dependencies: React.DependencyList
) => {
  useEffect(() => {
    const images = seqRef.current?.querySelectorAll("img") ?? []

    if (images.length === 0) {
      onLoad()
      return
    }

    let remainingImages = images.length
    const handleImageLoad = () => {
      remainingImages -= 1
      if (remainingImages === 0) {
        onLoad()
      }
    }

    images.forEach((img) => {
      const htmlImg = img as HTMLImageElement
      if (htmlImg.complete) {
        handleImageLoad()
      } else {
        htmlImg.addEventListener("load", handleImageLoad, { once: true })
        htmlImg.addEventListener("error", handleImageLoad, { once: true })
      }
    })

    return () => {
      images.forEach((img) => {
        img.removeEventListener("load", handleImageLoad)
        img.removeEventListener("error", handleImageLoad)
      })
    }
  }, dependencies)
}

const useAnimationLoop = (
  trackRef: React.RefObject<HTMLDivElement | null>,
  targetVelocity: number,
  seqWidth: number,
  seqHeight: number,
  isHovered: boolean,
  hoverSpeed: number | undefined,
  isVertical: boolean
) => {
  const rafRef = useRef<number | null>(null)
  const lastTimestampRef = useRef<number | null>(null)
  const offsetRef = useRef(0)
  const velocityRef = useRef(0)

  useEffect(() => {
    const track = trackRef.current
    if (!track) return

    const prefersReduced =
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches

    const seqSize = isVertical ? seqHeight : seqWidth

    if (seqSize > 0) {
      offsetRef.current = ((offsetRef.current % seqSize) + seqSize) % seqSize
      const transformValue = isVertical
        ? `translate3d(0, ${-offsetRef.current}px, 0)`
        : `translate3d(${-offsetRef.current}px, 0, 0)`
      track.style.transform = transformValue
    }

    if (prefersReduced) {
      track.style.transform = isVertical
        ? "translate3d(0, 0, 0)"
        : "translate3d(0, 0, 0)"
      return () => {
        lastTimestampRef.current = null
      }
    }

    const animate = (timestamp: number) => {
      if (lastTimestampRef.current === null) {
        lastTimestampRef.current = timestamp
      }

      const deltaTime = Math.max(0, timestamp - lastTimestampRef.current) / 1000
      lastTimestampRef.current = timestamp

      const target =
        isHovered && hoverSpeed !== undefined ? hoverSpeed : targetVelocity

      const easingFactor =
        1 - Math.exp(-deltaTime / ANIMATION_CONFIG.SMOOTH_TAU)
      velocityRef.current += (target - velocityRef.current) * easingFactor

      if (seqSize > 0) {
        let nextOffset = offsetRef.current + velocityRef.current * deltaTime
        nextOffset = ((nextOffset % seqSize) + seqSize) % seqSize
        offsetRef.current = nextOffset

        const transformValue = isVertical
          ? `translate3d(0, ${-offsetRef.current}px, 0)`
          : `translate3d(${-offsetRef.current}px, 0, 0)`
        track.style.transform = transformValue
      }

      rafRef.current = requestAnimationFrame(animate)
    }

    rafRef.current = requestAnimationFrame(animate)

    return () => {
      if (rafRef.current !== null) {
        cancelAnimationFrame(rafRef.current)
        rafRef.current = null
      }
      lastTimestampRef.current = null
    }
  }, [targetVelocity, seqWidth, seqHeight, isHovered, hoverSpeed, isVertical])
}

export const LogoLoop = React.memo<LogoLoopProps>(
  ({
    logos,
    speed = 120,
    direction = "left",
    width = "100%",
    logoHeight = 28,
    gap = 32,
    pauseOnHover,
    hoverSpeed,
    fadeOut = false,
    fadeOutColor,
    scaleOnHover = false,
    renderItem,
    ariaLabel = "Partner logos",
    className,
    style,
  }) => {
    const containerRef = useRef<HTMLDivElement>(null)
    const trackRef = useRef<HTMLDivElement>(null)
    const seqRef = useRef<HTMLUListElement>(null)

    const [seqWidth, setSeqWidth] = useState<number>(0)
    const [seqHeight, setSeqHeight] = useState<number>(0)
    const [copyCount, setCopyCount] = useState<number>(
      ANIMATION_CONFIG.MIN_COPIES
    )
    const [isHovered, setIsHovered] = useState<boolean>(false)

    const effectiveHoverSpeed = useMemo(() => {
      if (hoverSpeed !== undefined) return hoverSpeed
      if (pauseOnHover === true) return 0
      if (pauseOnHover === false) return undefined
      return 0
    }, [hoverSpeed, pauseOnHover])

    const isVertical = direction === "up" || direction === "down"

    const targetVelocity = useMemo(() => {
      const magnitude = Math.abs(speed)
      let directionMultiplier: number
      if (isVertical) {
        directionMultiplier = direction === "up" ? 1 : -1
      } else {
        directionMultiplier = direction === "left" ? 1 : -1
      }
      const speedMultiplier = speed < 0 ? -1 : 1
      return magnitude * directionMultiplier * speedMultiplier
    }, [speed, direction, isVertical])

    const updateDimensions = useCallback(() => {
      const containerWidth = containerRef.current?.clientWidth ?? 0
      const sequenceRect = seqRef.current?.getBoundingClientRect?.()
      const sequenceWidth = sequenceRect?.width ?? 0
      const sequenceHeight = sequenceRect?.height ?? 0
      if (isVertical) {
        const parentHeight =
          containerRef.current?.parentElement?.clientHeight ?? 0
        if (containerRef.current && parentHeight > 0) {
          const targetHeight = Math.ceil(parentHeight)
          if (containerRef.current.style.height !== `${targetHeight}px`)
            containerRef.current.style.height = `${targetHeight}px`
        }
        if (sequenceHeight > 0) {
          setSeqHeight(Math.ceil(sequenceHeight))
          const viewport =
            containerRef.current?.clientHeight ?? parentHeight ?? sequenceHeight
          const copiesNeeded =
            Math.ceil(viewport / sequenceHeight) +
            ANIMATION_CONFIG.COPY_HEADROOM
          setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded))
        }
      } else if (sequenceWidth > 0) {
        setSeqWidth(Math.ceil(sequenceWidth))
        const copiesNeeded =
          Math.ceil(containerWidth / sequenceWidth) +
          ANIMATION_CONFIG.COPY_HEADROOM
        setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded))
      }
    }, [isVertical])

    useResizeObserver(
      updateDimensions,
      [containerRef, seqRef],
      [logos, gap, logoHeight, isVertical]
    )

    useImageLoader(seqRef, updateDimensions, [
      logos,
      gap,
      logoHeight,
      isVertical,
    ])

    useAnimationLoop(
      trackRef,
      targetVelocity,
      seqWidth,
      seqHeight,
      isHovered,
      effectiveHoverSpeed,
      isVertical
    )

    const cssVariables = useMemo(
      () =>
        ({
          "--logoloop-gap": `${gap}px`,
          "--logoloop-logoHeight": `${logoHeight}px`,
          ...(fadeOutColor && { "--logoloop-fadeColor": fadeOutColor }),
        }) as React.CSSProperties,
      [gap, logoHeight, fadeOutColor]
    )

    const rootClasses = useMemo(
      () =>
        cx(
          "relative group",
          isVertical
            ? "overflow-hidden h-full inline-block"
            : "overflow-x-hidden",
          "[--logoloop-gap:32px]",
          "[--logoloop-logoHeight:28px]",
          "[--logoloop-fadeColorAuto:#ffffff]",
          "dark:[--logoloop-fadeColorAuto:#0b0b0b]",
          scaleOnHover && "py-[calc(var(--logoloop-logoHeight)*0.1)]",
          className
        ),
      [isVertical, scaleOnHover, className]
    )

    const handleMouseEnter = useCallback(() => {
      if (effectiveHoverSpeed !== undefined) setIsHovered(true)
    }, [effectiveHoverSpeed])
    const handleMouseLeave = useCallback(() => {
      if (effectiveHoverSpeed !== undefined) setIsHovered(false)
    }, [effectiveHoverSpeed])

    const renderLogoItem = useCallback(
      (item: LogoItem, key: React.Key) => {
        if (renderItem) {
          return (
            <li
              className={cx(
                "flex-none text-(length:--logoloop-logoHeight) leading-none",
                isVertical ? "mb-(--logoloop-gap)" : "mr-(--logoloop-gap)",
                scaleOnHover && "group/item overflow-visible"
              )}
              key={key}
              role="listitem"
            >
              {renderItem(item, key)}
            </li>
          )
        }

        const isNodeItem = "node" in item

        const content = isNodeItem ? (
          <span
            className={cx(
              "inline-flex items-center",
              "motion-reduce:transition-none",
              scaleOnHover &&
                "transition-transform duration-300 ease-in-out group-hover/item:scale-120"
            )}
            aria-hidden={!!(item as any).href && !(item as any).ariaLabel}
          >
            {(item as any).node}
          </span>
        ) : (
          <img
            className={cx(
              "block h-[--logoloop-logoHeight] w-auto object-contain",
              "pointer-events-none [-webkit-user-drag:none]",
              "[image-rendering:-webkit-optimize-contrast]",
              "motion-reduce:transition-none",
              scaleOnHover &&
                "transition-transform duration-300 ease-in-out group-hover/item:scale-120"
            )}
            src={(item as any).src}
            srcSet={(item as any).srcSet}
            sizes={(item as any).sizes}
            width={(item as any).width}
            height={(item as any).height}
            alt={(item as any).alt ?? ""}
            title={(item as any).title}
            loading="lazy"
            decoding="async"
            draggable={false}
          />
        )

        const itemAriaLabel = isNodeItem
          ? ((item as any).ariaLabel ?? (item as any).title)
          : ((item as any).alt ?? (item as any).title)

        const inner = (item as any).href ? (
          <a
            className={cx(
              "inline-flex items-center rounded no-underline",
              "transition-opacity duration-200 ease-linear",
              "hover:opacity-80",
              "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-current"
            )}
            href={(item as any).href}
            aria-label={itemAriaLabel || "logo link"}
            target="_blank"
            rel="noreferrer noopener"
          >
            {content}
          </a>
        ) : (
          content
        )

        return (
          <li
            className={cx(
              "flex-none text-(length:--logoloop-logoHeight) leading-none",
              isVertical ? "mb-[--logoloop-gap]" : "mr-[--logoloop-gap]",
              scaleOnHover && "group/item overflow-visible"
            )}
            key={key}
            role="listitem"
          >
            {inner}
          </li>
        )
      },
      [isVertical, scaleOnHover, renderItem]
    )

    const logoLists = useMemo(
      () =>
        Array.from({ length: copyCount }, (_, copyIndex) => (
          <ul
            className={cx("flex items-center", isVertical && "flex-col")}
            key={`copy-${copyIndex}`}
            role="list"
            aria-hidden={copyIndex > 0}
            ref={copyIndex === 0 ? seqRef : undefined}
          >
            {logos.map((item, itemIndex) =>
              renderLogoItem(item, `${copyIndex}-${itemIndex}`)
            )}
          </ul>
        )),
      [copyCount, logos, renderLogoItem, isVertical]
    )

    const containerStyle = useMemo(
      (): React.CSSProperties => ({
        width: isVertical
          ? toCssLength(width) === "100%"
            ? undefined
            : toCssLength(width)
          : (toCssLength(width) ?? "100%"),
        ...cssVariables,
        ...style,
      }),
      [width, cssVariables, style, isVertical]
    )

    return (
      <div
        ref={containerRef}
        className={rootClasses}
        style={containerStyle}
        role="region"
        aria-label={ariaLabel}
      >
        {fadeOut && (
          <>
            {isVertical ? (
              <>
                <div
                  aria-hidden
                  className={cx(
                    "pointer-events-none absolute inset-x-0 top-0 z-10",
                    "h-[clamp(24px,8%,120px)]",
                    "bg-[linear-gradient(to_bottom,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]"
                  )}
                />
                <div
                  aria-hidden
                  className={cx(
                    "pointer-events-none absolute inset-x-0 bottom-0 z-10",
                    "h-[clamp(24px,8%,120px)]",
                    "bg-[linear-gradient(to_top,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]"
                  )}
                />
              </>
            ) : (
              <>
                <div
                  aria-hidden
                  className={cx(
                    "pointer-events-none absolute inset-y-0 left-0 z-10",
                    "w-[clamp(24px,8%,120px)]",
                    "bg-[linear-gradient(to_right,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]"
                  )}
                />
                <div
                  aria-hidden
                  className={cx(
                    "pointer-events-none absolute inset-y-0 right-0 z-10",
                    "w-[clamp(24px,8%,120px)]",
                    "bg-[linear-gradient(to_left,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]"
                  )}
                />
              </>
            )}
          </>
        )}

        <div
          className={cx(
            "relative z-0 flex will-change-transform select-none",
            "motion-reduce:transform-none",
            isVertical ? "h-max w-full flex-col" : "w-max flex-row"
          )}
          ref={trackRef}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          {logoLists}
        </div>
      </div>
    )
  }
)

LogoLoop.displayName = "LogoLoop"

export default LogoLoop


===== EXAMPLE: logo-loop-demo =====
Title: Logo Timeline Demo 2

--- file: example/logo-loop-demo.tsx ---
import {
  IconBrandAndroid,
  IconBrandApple,
  IconBrandAws,
  IconBrandCss3,
  IconBrandDocker,
  IconBrandFigma,
  IconBrandFirebase,
  IconBrandGithub,
  IconBrandGitlab,
  IconBrandGoogle,
  IconBrandHtml5,
  IconBrandJavascript,
  IconBrandNextjs,
  IconBrandNodejs,
  IconBrandReact,
  IconBrandStripe,
  IconBrandSupabase,
  IconBrandTailwind,
  IconBrandTypescript,
  IconBrandVercel,
} from "@tabler/icons-react"

import { LogoLoop } from "@/registry/gammaui/logo-loop"

const techLogos = [
  {
    node: <IconBrandReact size={48} />,
    title: "React",
    href: "https://react.dev",
  },
  {
    node: <IconBrandNextjs size={48} />,
    title: "Next.js",
    href: "https://nextjs.org",
  },
  {
    node: <IconBrandTypescript size={48} />,
    title: "TypeScript",
    href: "https://www.typescriptlang.org",
  },
  {
    node: <IconBrandTailwind size={48} />,
    title: "Tailwind CSS",
    href: "https://tailwindcss.com",
  },

  // --- Added Logos ---
  {
    node: <IconBrandVercel size={48} />,
    title: "Vercel",
    href: "https://vercel.com",
  },
  {
    node: <IconBrandNodejs size={48} />,
    title: "Node.js",
    href: "https://nodejs.org",
  },
  {
    node: <IconBrandGithub size={48} />,
    title: "GitHub",
    href: "https://github.com",
  },
  {
    node: <IconBrandGitlab size={48} />,
    title: "GitLab",
    href: "https://gitlab.com",
  },
  {
    node: <IconBrandDocker size={48} />,
    title: "Docker",
    href: "https://www.docker.com",
  },
  {
    node: <IconBrandJavascript size={48} />,
    title: "JavaScript",
    href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
  },
  {
    node: <IconBrandHtml5 size={48} />,
    title: "HTML5",
    href: "https://developer.mozilla.org/en-US/docs/Web/HTML",
  },
  {
    node: <IconBrandCss3 size={48} />,
    title: "CSS3",
    href: "https://developer.mozilla.org/en-US/docs/Web/CSS",
  },
  {
    node: <IconBrandFigma size={48} />,
    title: "Figma",
    href: "https://figma.com",
  },
  {
    node: <IconBrandAws size={48} />,
    title: "Amazon AWS",
    href: "https://aws.amazon.com",
  },
  {
    node: <IconBrandGoogle size={48} />,
    title: "Google",
    href: "https://google.com",
  },
  {
    node: <IconBrandStripe size={48} />,
    title: "Stripe",
    href: "https://stripe.com",
  },
  {
    node: <IconBrandFirebase size={48} />,
    title: "Firebase",
    href: "https://firebase.google.com",
  },
  {
    node: <IconBrandSupabase size={48} />,
    title: "Supabase",
    href: "https://supabase.com",
  },
  {
    node: <IconBrandApple size={48} />,
    title: "Apple",
    href: "https://apple.com",
  },
  {
    node: <IconBrandAndroid size={48} />,
    title: "Android",
    href: "https://www.android.com",
  },
]

export function LogoLoopDemo() {
  return (
    <div style={{ height: "200px", position: "relative", overflow: "hidden" }}>
      <LogoLoop
        logos={techLogos}
        speed={50}
        direction="left"
        gap={80}
        hoverSpeed={0}
        scaleOnHover
        fadeOut
        ariaLabel="Technology partners"
      />
    </div>
  )
}



===== COMPONENT: logo-timeline =====
Title: Logo Timeline
Description: A multi-row infinitely scrolling logo timeline built with Motion One, supporting hover-activated animations and row grouping.

--- file: gammaui/logo-timeline.tsx ---
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "motion/react"

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

export interface LogoItem {
  /** The label text displayed next to the icon */
  label: string
  /** The icon name from the Icons object (e.g., "gitHub", "react", "tailwind") */
  icon: React.ReactNode
  /** Animation delay in seconds (use negative values for staggered effect) */
  animationDelay: number
  /** Animation duration in seconds */
  animationDuration: number
  /** The row number where this logo should appear (1-based) */
  row: number
}

export interface LogoTimelineProps {
  /** Array of logo items to display */
  items: LogoItem[]
  /** Optional title text to display in the center */
  title?: string
  /** Height of the timeline container */
  height?: string
  /** Additional className for the container */
  className?: string
  /** Icon size in pixels (default: 16) */
  iconSize?: number
  /** Whether to show separator lines between rows (default: true) */
  showRowSeparator?: boolean
  /** Whether to animate logos only on hover (default: false) */
  animateOnHover?: boolean
}

export function LogoTimeline({
  items,
  title,
  height = "h-[400px] sm:h-[800px]",
  className,
  iconSize = 16,
  showRowSeparator = true,
  animateOnHover = false,
}: LogoTimelineProps) {
  const [isHovered, setIsHovered] = useState(false)

  // Group items by row
  const rowsMap = new Map<number, LogoItem[]>()
  items.forEach((item) => {
    if (!rowsMap.has(item.row)) {
      rowsMap.set(item.row, [])
    }
    rowsMap.get(item.row)?.push(item)
  })

  // Convert map to sorted array
  const rows = Array.from(rowsMap.entries())
    .sort(([a], [b]) => a - b)
    .map(([, rowItems]) => rowItems)

  // Determine animation play state
  const animationPlayState = animateOnHover
    ? isHovered
      ? "running"
      : "paused"
    : "running"

  return (
    <section className={cn("w-full", height, className)}>
      <motion.div
        aria-hidden="true"
        className="bg-background relative h-full w-full overflow-hidden py-24 ring-inset sm:py-32"
        onMouseEnter={() => animateOnHover && setIsHovered(true)}
        onMouseLeave={() => animateOnHover && setIsHovered(false)}
      >
        {title && (
          <div className="absolute top-1/2 left-1/2 mx-auto w-full max-w-[90%] -translate-x-1/2 -translate-y-1/2 text-center">
            <div className="relative z-10">
              <p className="text-foreground/10 mx-auto mt-2 max-w-3xl text-4xl font-semibold tracking-tight text-pretty sm:text-5xl md:text-6xl">
                {title}
              </p>
            </div>
          </div>
        )}
        <div
          className="@container absolute inset-0 grid"
          style={{ gridTemplateRows: `repeat(${rows.length}, 1fr)` }}
        >
          {rows.map((rowItems, index) => (
            <div className="group relative flex items-center" key={index}>
              <div className="from-foreground/15 dark:from-foreground/15 absolute inset-x-0 top-1/2 h-0.5 bg-linear-to-r from-[2px] to-[2px] bg-size-[12px_100%]" />
              {showRowSeparator && (
                <div className="from-foreground/5 dark:from-foreground/5 absolute inset-x-0 bottom-0 h-0.5 bg-linear-to-r from-[2px] to-[2px] bg-size-[12px_100%] group-last:hidden" />
              )}
              {rowItems.map((logo) => {
                return (
                  <div
                    key={`${logo.row}-${logo.label}`}
                    className={cn(
                      "absolute top-1/2 flex -translate-y-1/2 items-center gap-2 px-3 py-1.5 whitespace-nowrap",
                      "ring-background/10 dark:ring-foreground/10 rounded-full bg-linear-to-t from-white/50 from-50% to-white/50 ring-1 backdrop-blur-sm ring-inset dark:from-neutral-900 dark:to-gray-900",
                      "repeat-[infinite] [--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-name:move-x] [animation-timing-function:linear]",
                      "shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:shadow-none"
                    )}
                    style={{
                      animationDelay: `${logo.animationDelay}s`,
                      animationDuration: `${logo.animationDuration}s`,
                      animationPlayState: animationPlayState,
                    }}
                  >
                    {logo.icon}
                    <span className="text-foreground text-sm/6 font-medium">
                      {logo.label}
                    </span>
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </motion.div>
    </section>
  )
}


===== EXAMPLE: logo-timeline-demo =====
Title: Logo Timeline Demo

--- file: example/logo-timeline-demo.tsx ---
import {
  IconBrandApple,
  IconBrandDiscord,
  IconBrandGithub,
  IconBrandGoogleDrive,
  IconBrandMessenger,
  IconBrandNotion,
  IconBrandOpenai,
  IconBrandPaypal,
  IconBrandReact,
  IconBrandTailwind,
  IconBrandTypescript,
  IconBrandWhatsapp,
  IconBrandX,
} from "@tabler/icons-react"

import { LogoTimeline } from "@/registry/gammaui/logo-timeline"
import type { LogoItem } from "@/registry/gammaui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: <IconBrandDiscord />,
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "X (Twitter)",
    icon: <IconBrandX />,
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: <IconBrandGithub />,
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: <IconBrandReact />,
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: <IconBrandTypescript />,
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: <IconBrandTailwind />,
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },

  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: <IconBrandGoogleDrive />,
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: <IconBrandNotion />,
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: <IconBrandWhatsapp />,
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: <IconBrandMessenger />, // Placeholder icon
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: <IconBrandOpenai />, // Placeholder icon
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },

  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: <IconBrandPaypal />, // Placeholder icon
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple",
    icon: <IconBrandApple />, // Placeholder icon
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        title="Built with the best tools"
        height="h-[400px] sm:h-[400px]"
        iconSize={18}
        showRowSeparator={true}
      />
    </div>
  )
}


===== EXAMPLE: logo-timeline-demo-2 =====
Title: Logo Timeline Demo 2

--- file: example/logo-timeline-demo-2.tsx ---
import {
  IconBrandApple,
  IconBrandDiscord,
  IconBrandGithub,
  IconBrandGoogleDrive,
  IconBrandMessenger,
  IconBrandNotion,
  IconBrandOpenai,
  IconBrandPaypal,
  IconBrandReact,
  IconBrandTailwind,
  IconBrandTypescript,
  IconBrandWhatsapp,
  IconBrandX,
} from "@tabler/icons-react"

import { LogoTimeline } from "@/registry/gammaui/logo-timeline"
import type { LogoItem } from "@/registry/gammaui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: <IconBrandDiscord />,
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "X (Twitter)",
    icon: <IconBrandX />,
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: <IconBrandGithub />,
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: <IconBrandReact />,
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: <IconBrandTypescript />,
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: <IconBrandTailwind />,
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },

  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: <IconBrandGoogleDrive />,
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: <IconBrandNotion />,
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: <IconBrandWhatsapp />,
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: <IconBrandMessenger />, // Placeholder icon
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: <IconBrandOpenai />, // Placeholder icon
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },

  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: <IconBrandPaypal />, // Placeholder icon
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple",
    icon: <IconBrandApple />, // Placeholder icon
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export default function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        height="h-[400px] sm:h-[400px]"
        iconSize={18}
        showRowSeparator={true}
        animateOnHover={true}
      />
    </div>
  )
}



===== COMPONENT: macbook-keyboard =====
Title: Macbook Keyboard
Description: Interactive animated MacBook keyboard component.

--- file: gammaui/macbook-keyboard.tsx ---
"use client"

import React, { memo, useEffect, useState } from "react"
import {
  ArrowDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ArrowUpIcon,
  ChevronUpIcon,
  CommandIcon,
  DotIcon,
  GlobeIcon,
  LayoutPanelLeft,
  MicIcon,
  MoonIcon,
  OptionIcon,
  PauseIcon,
  SearchIcon,
  SkipBackIcon,
  SkipForwardIcon,
  SunDimIcon,
  SunIcon,
  Volume1Icon,
  Volume2Icon,
  VolumeIcon,
} from "lucide-react"
import { motion } from "motion/react"

import { cn } from "../lib/utils"

const iconSize = 12

type CustomKeyType = "FingerPrintKey" | "ArrowKeys"

interface IconKeyboardKeyProps {
  icon: string | React.ReactNode
  text?: string | React.ReactNode
  className?: string
  isSingleKey?: boolean
  custom?: CustomKeyType
  index?: number
  rowIndex?: number
  isLastRow?: boolean
  keySize?: number
  transparentKey?: boolean
  glowColor?: string
  pressedKey: string | null
}

interface MacBookKeyboardSvgProps {
  transparentKey?: boolean
  keySize?: number
  glowColor?: string
}

type KeyRowDataProps = Omit<IconKeyboardKeyProps, "pressedKey">

const keyMap: Record<string, string> = {
  Escape: "esc",
  F1: "F1",
  F2: "F2",
  F3: "F3",
  F4: "F4",
  F5: "F5",
  F6: "F6",
  F7: "F7",
  F8: "F8",
  F9: "F9",
  F10: "F10",
  F11: "F11",
  F12: "F12",
  "`": "`",
  "1": "1",
  "2": "2",
  "3": "3",
  "4": "4",
  "5": "5",
  "6": "6",
  "7": "7",
  "8": "8",
  "9": "9",
  "0": "0",
  "-": "-",
  "=": "=",
  Backspace: "delete",
  Tab: "tab",
  q: "Q",
  w: "W",
  e: "E",
  r: "R",
  t: "T",
  y: "Y",
  u: "U",
  i: "I",
  o: "O",
  p: "P",
  "[": "[",
  "]": "]",
  "\\": "/",
  CapsLock: "caps lock",
  a: "A",
  s: "S",
  d: "D",
  f: "F",
  g: "G",
  h: "H",
  j: "J",
  k: "K",
  l: "L",
  ";": ";",
  "'": "'",
  Enter: "return",
  Shift: "shift",
  z: "Z",
  x: "X",
  c: "C",
  v: "V",
  b: "B",
  n: "N",
  m: "M",
  ",": ",",
  ".": ".",
  "/": "/",
  Control: "control",
  Alt: "option",
  Meta: "command",
  " ": "",
  ArrowUp: "ArrowUp",
  ArrowDown: "ArrowDown",
  ArrowLeft: "ArrowLeft",
  ArrowRight: "ArrowRight",
}

const MacBookKeyboard = memo(
  ({
    transparentKey = true,
    keySize = 40,
    glowColor = "#f43f5d",
  }: MacBookKeyboardSvgProps) => {
    const [pressedKey, setPressedKey] = useState<string | null>(null)

    useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        const mappedKey = keyMap[event.key]
        if (mappedKey !== undefined) {
          setPressedKey(mappedKey)
        }
      }

      const handleKeyUp = () => {
        setPressedKey(null)
      }

      window.addEventListener("keydown", handleKeyDown)
      window.addEventListener("keyup", handleKeyUp)

      return () => {
        window.removeEventListener("keydown", handleKeyDown)
        window.removeEventListener("keyup", handleKeyUp)
      }
    }, [])

    return (
      <div className="card-color flex w-full flex-col gap-1 rounded-[3px] p-2">
        {keysData.map((row, rowIndex) => {
          return (
            <div key={rowIndex} className="flex flex-row gap-1">
              {row.map((item, index) => {
                if (item.custom === "FingerPrintKey") {
                  return (
                    <FingerPrintKey
                      key={index}
                      index={index}
                      rowIndex={rowIndex}
                      keySize={keySize}
                      transparentKey={transparentKey}
                    />
                  )
                }

                if (item.custom === "ArrowKeys") {
                  return (
                    <ArrowKeys
                      key={index}
                      index={index}
                      rowIndex={rowIndex}
                      pressedKey={pressedKey}
                      glowColor={glowColor}
                    />
                  )
                }

                return (
                  <IconKeyboardKey
                    key={index}
                    index={index}
                    rowIndex={rowIndex}
                    text={item.text}
                    icon={item.icon}
                    className={item.className}
                    isSingleKey={item.isSingleKey}
                    isLastRow={rowIndex === keysData.length - 1}
                    keySize={keySize}
                    transparentKey={transparentKey}
                    glowColor={glowColor}
                    pressedKey={pressedKey}
                  />
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
)

MacBookKeyboard.displayName = "MacBookKeyboard"

const IconKeyboardKey = memo(
  ({
    icon,
    text,
    className,
    isSingleKey,
    index = 0,
    rowIndex = 0,
    isLastRow,
    keySize,
    transparentKey,
    glowColor,
    pressedKey,
  }: IconKeyboardKeyProps) => {
    const isText = typeof text === "string"
    const shouldGlow = isText && pressedKey === text

    return (
      <motion.div
        variants={{
          initial: { borderColor: "#212121" },
          animate: {
            borderColor: ["#212121", "#383838", "#212121"],
          },
        }}
        initial="initial"
        animate="animate"
        transition={{
          duration: 0.8,
          ease: "easeInOut",
          delay: index * 0.1 + rowIndex * 0.12,
        }}
        style={{
          width: `${keySize}px`,
          height: `${keySize}px`,
          minWidth: `${keySize}px`,
          flexBasis: `${keySize}px`,
          color: shouldGlow ? `${glowColor}50` : "#212121",
        }}
        className={cn(
          className,
          shouldGlow && "animate-[6000ms]",
          "group border-border/80 relative flex flex-col items-center justify-center gap-1.5 rounded-[3px] border border-x border-t-[1.5px] border-b-[0.1px] px-2 shadow-[inset_0px_0px_15px_rgba(0,0,0,0.2)] duration-200 select-none first:items-start last:items-end active:scale-[0.98]!",
          transparentKey ? "bg-transparent" : "bg-[#121214]"
        )}
      >
        {!isSingleKey && (
          <div className="text-muted-foreground/70 group-hover:text-muted-foreground mt-0.5 h-[10px] w-[10px] text-center text-xs font-light duration-200">
            {icon}
          </div>
        )}
        <div
          style={{
            color: shouldGlow ? glowColor : "",
            textShadow: shouldGlow ? `0 0 10px ${glowColor}` : "",
          }}
          className={cn(
            isLastRow && "text-[8px]!",
            isSingleKey ? "text-sm" : "text-xs",
            "dark:text-muted-foreground/70 text-center text-white duration-200 group-hover:text-white/60"
          )}
        >
          {text}
        </div>
      </motion.div>
    )
  }
)

IconKeyboardKey.displayName = "IconKeyboardKey"

const FingerPrintKey = memo(
  ({
    index,
    rowIndex,
    keySize,
    transparentKey,
  }: {
    index: number
    rowIndex: number
    keySize: number
    transparentKey: boolean
  }) => {
    return (
      <motion.div
        variants={{
          initial: { borderColor: "#212121" },
          animate: {
            borderColor: ["#212121", "#383838", "#212121"],
          },
        }}
        initial="initial"
        animate="animate"
        transition={{
          duration: 0.6,
          ease: "easeInOut",
          delay: index * 0.1 + rowIndex * 0.12,
        }}
        style={{
          width: `${keySize}px`,
          height: `${keySize}px`,
          minWidth: `${keySize}px`,
        }}
        className={cn(
          "group border-border/80 relative flex flex-col items-center justify-center gap-1.5 rounded-[3px] border border-x border-t-[1.5px] border-b-[0.1px] shadow-[inset_0px_0px_15px_rgba(0,0,0,0.2)] duration-200",
          transparentKey ? "bg-transparent" : "bg-[#121214]"
        )}
      >
        <div className="bg-muted/20 group-hover:bg-muted/35 h-8 w-8 rounded-full shadow-[inset_0px_0px_2px_rgba(0,0,0,0.6)] duration-200" />
      </motion.div>
    )
  }
)

FingerPrintKey.displayName = "FingerPrintKey"

const ArrowKeys = memo(
  ({
    index,
    rowIndex,
    pressedKey,
    glowColor,
  }: {
    index: number
    rowIndex: number
    pressedKey: string | null
    glowColor: string
  }) => {
    return (
      <div className="flex flex-row gap-1">
        <ArrowKey
          index={index}
          rowIndex={rowIndex}
          icon={<ArrowLeftIcon size={iconSize} />}
          keyName="ArrowLeft"
          pressedKey={pressedKey}
          glowColor={glowColor}
          className="h-1/2! translate-y-5 items-center!"
        />
        <div className="flex h-10 flex-col">
          <ArrowKey
            index={index}
            rowIndex={rowIndex}
            icon={<ArrowUpIcon size={iconSize} />}
            keyName="ArrowUp"
            pressedKey={pressedKey}
            glowColor={glowColor}
            className="h-1/2! items-center! rounded-b-none!"
          />
          <ArrowKey
            index={index}
            rowIndex={rowIndex}
            icon={<ArrowDownIcon size={iconSize} />}
            keyName="ArrowDown"
            pressedKey={pressedKey}
            glowColor={glowColor}
            className="h-1/2! items-center! rounded-t-none!"
          />
        </div>
        <ArrowKey
          index={index}
          rowIndex={rowIndex}
          icon={<ArrowRightIcon size={iconSize} />}
          keyName="ArrowRight"
          pressedKey={pressedKey}
          glowColor={glowColor}
          className="h-1/2! translate-y-5 items-center!"
        />
      </div>
    )
  }
)

ArrowKeys.displayName = "ArrowKeys"

const ArrowKey = memo(
  ({
    index,
    rowIndex,
    icon,
    keyName,
    pressedKey,
    glowColor,
    className,
  }: {
    index: number
    rowIndex: number
    icon: React.ReactNode
    keyName: string
    pressedKey: string | null
    glowColor: string
    className?: string
  }) => {
    const shouldGlow = pressedKey === keyName

    return (
      <motion.div
        variants={{
          initial: { borderColor: "#212121" },
          animate: {
            borderColor: ["#212121", "#383838", "#212121"],
          },
        }}
        initial="initial"
        animate="animate"
        transition={{
          duration: 0.8,
          ease: "easeInOut",
          delay: index * 0.1 + rowIndex * 0.12,
        }}
        className={cn(
          className,
          "group border-border/80 relative flex flex-col items-center justify-center gap-1.5 rounded-[3px] border border-x border-t-[1.5px] border-b-[0.1px] bg-transparent px-2 shadow-[inset_0px_0px_15px_rgba(0,0,0,0.2)] duration-200 select-none"
        )}
      >
        <div
          style={{
            color: shouldGlow ? glowColor : "",
            filter: shouldGlow ? `drop-shadow(0 0 8px ${glowColor})` : "",
          }}
          className="text-muted-foreground/70 text-center duration-200"
        >
          {icon}
        </div>
      </motion.div>
    )
  }
)

ArrowKey.displayName = "ArrowKey"

export { MacBookKeyboard }

const firstRowData: KeyRowDataProps[] = [
  {
    icon: null,
    text: "esc",
    className: "!basis-full",
  },
  {
    icon: <SunDimIcon size={iconSize} />,
    text: "F1",
  },
  {
    icon: <SunIcon size={iconSize} />,
    text: "F2",
  },
  {
    icon: <LayoutPanelLeft size={iconSize} />,
    text: "F3",
  },
  {
    icon: <SearchIcon size={iconSize} />,
    text: "F4",
  },
  {
    icon: <MicIcon size={iconSize} />,
    text: "F5",
  },
  {
    icon: <MoonIcon size={iconSize} />,
    text: "F6",
  },
  {
    icon: <SkipBackIcon size={iconSize} />,
    text: "F7",
  },
  {
    icon: <PauseIcon size={iconSize} />,
    text: "F8",
  },
  {
    icon: <SkipForwardIcon size={iconSize} />,
    text: "F9",
  },
  {
    icon: <VolumeIcon size={iconSize} />,
    text: "F10",
  },
  {
    icon: <Volume1Icon size={iconSize} />,
    text: "F11",
  },
  {
    icon: <Volume2Icon size={iconSize} />,
    text: "F12",
  },
  {
    custom: "FingerPrintKey",
    icon: null,
  },
]

const secondRowData: KeyRowDataProps[] = [
  {
    icon: "~",
    text: "`",
    className: "first:!items-center",
  },
  {
    icon: "!",
    text: "1",
  },
  {
    icon: "@",
    text: "2",
  },
  {
    icon: "#",
    text: "3",
  },
  {
    icon: "$",
    text: "4",
  },
  {
    icon: "%",
    text: "5",
  },
  {
    icon: "^",
    text: "6",
  },
  {
    icon: "&",
    text: "7",
  },
  {
    icon: "*",
    text: "8",
  },
  {
    icon: "(",
    text: "9",
  },
  {
    icon: ")",
    text: "0",
  },
  {
    icon: "_",
    text: "-",
  },
  {
    icon: "+",
    text: "=",
  },
  {
    icon: null,
    text: "delete",
    className: "!basis-full",
  },
]

const thirdRowData: KeyRowDataProps[] = [
  {
    icon: null,
    text: "tab",
    className: "!basis-full",
  },
  {
    icon: "q",
    text: "Q",
    isSingleKey: true,
  },
  {
    icon: "w",
    text: "W",
    isSingleKey: true,
  },
  {
    icon: "e",
    text: "E",
    isSingleKey: true,
  },
  {
    icon: "r",
    text: "R",
    isSingleKey: true,
  },
  {
    icon: "t",
    text: "T",
    isSingleKey: true,
  },
  {
    icon: "y",
    text: "Y",
    isSingleKey: true,
  },
  {
    icon: "u",
    text: "U",
    isSingleKey: true,
  },
  {
    icon: "i",
    text: "I",
    isSingleKey: true,
  },
  {
    icon: "o",
    text: "O",
    isSingleKey: true,
  },
  {
    icon: "p",
    text: "P",
    isSingleKey: true,
  },
  {
    icon: "{",
    text: "[",
  },
  {
    icon: "}",
    text: "]",
  },
  {
    icon: "|",
    text: "/",
    className: "last:!items-center",
  },
]

const fourthRowData: KeyRowDataProps[] = [
  {
    icon: <DotIcon size={iconSize + 3} className="-mt-0.5 -ml-1.5" />,
    text: "caps lock",
    className: "!basis-full",
  },
  {
    icon: "a",
    text: "A",
    isSingleKey: true,
  },
  {
    icon: "s",
    text: "S",
    isSingleKey: true,
  },
  {
    icon: "d",
    text: "D",
    isSingleKey: true,
  },
  {
    icon: "f",
    text: "F",
    isSingleKey: true,
  },
  {
    icon: "g",
    text: "G",
    isSingleKey: true,
  },
  {
    icon: "h",
    text: "H",
    isSingleKey: true,
  },
  {
    icon: "j",
    text: "J",
    isSingleKey: true,
  },
  {
    icon: "k",
    text: "K",
    isSingleKey: true,
  },
  {
    icon: "l",
    text: "L",
    isSingleKey: true,
  },
  {
    icon: ":",
    text: ";",
  },
  {
    icon: '"',
    text: "'",
  },
  {
    icon: null,
    text: "return",
    className: "!basis-full",
  },
]

const fifthRowData: KeyRowDataProps[] = [
  {
    icon: null,
    text: "shift",
    className: "!basis-full",
  },
  {
    icon: "z",
    text: "Z",
    isSingleKey: true,
  },
  {
    icon: "x",
    text: "X",
    isSingleKey: true,
  },
  {
    icon: "c",
    text: "C",
    isSingleKey: true,
  },
  {
    icon: "v",
    text: "V",
    isSingleKey: true,
  },
  {
    icon: "b",
    text: "B",
    isSingleKey: true,
  },
  {
    icon: "n",
    text: "N",
    isSingleKey: true,
  },
  {
    icon: "m",
    text: "M",
    isSingleKey: true,
  },
  {
    icon: "<",
    text: ",",
  },
  {
    icon: ">",
    text: ".",
  },
  {
    icon: "?",
    text: "/",
  },
  {
    icon: null,
    text: "shift",
    className: "!basis-full",
  },
]

const sixthRowData: KeyRowDataProps[] = [
  {
    icon: "fn",
    text: <GlobeIcon size={iconSize} />,
  },
  {
    icon: <ChevronUpIcon size={iconSize} />,
    text: "control",
    className: "!items-end",
  },
  {
    icon: <OptionIcon size={iconSize} />,
    text: "option",
    className: "!items-end",
  },
  {
    icon: <CommandIcon size={iconSize} />,
    text: "command",
    className: "!items-end !basis-20",
  },
  {
    icon: null,
    text: "",
    className: "!basis-80",
  },
  {
    icon: <CommandIcon size={iconSize} />,
    text: "command",
    className: "!items-start !basis-20",
  },
  {
    icon: <OptionIcon size={iconSize} />,
    text: "option",
    className: "!items-start",
  },
  {
    icon: null,
    custom: "ArrowKeys",
  },
]

const keysData = [
  firstRowData,
  secondRowData,
  thirdRowData,
  fourthRowData,
  fifthRowData,
  sixthRowData,
]


===== EXAMPLE: macbook-keyboard-demo =====
Title: Macbook Keyboard Demo

--- file: example/macbook-keyboard-demo.tsx ---
"use client"

import { useTheme } from "next-themes"

import { MacBookKeyboard } from "@/registry/gammaui/macbook-keyboard"

export const MacbookKeyboardDemo = () => {
  const { resolvedTheme } = useTheme()
  return (
    <div className="mx-4 w-full rounded-[3px] bg-[#0C0C0F]">
      <MacBookKeyboard glowColor={resolvedTheme === "dark" ? "#FFF" : "#000"} />
    </div>
  )
}


===== EXAMPLE: cpu-architecture-demo =====
Title: CPU Architecture Demo

--- file: example/cpu-architecture-demo.tsx ---
"use client"

import CpuArchitecture from "@/registry/gammaui/cpu-architecture"

const CpuArchitectureDemo = () => {
  return (
    <div className="h-full w-full rounded-xl p-4">
      <CpuArchitecture />
    </div>
  )
}

export default CpuArchitectureDemo



===== COMPONENT: magnetize-button =====
Title: Magnetize Button
Description: A magnetic particle-attraction button built with Framer Motion.

--- file: gammaui/magnetize-button.tsx ---
"use client"

import * as React from "react"
import { useCallback, useEffect, useState } from "react"
import { Magnet } from "lucide-react"
import { motion, useAnimation } from "motion/react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface MagnetizeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  particleCount?: number
  attractRadius?: number
}

interface Particle {
  id: number
  x: number
  y: number
}

export default function MagnetizeButton({
  className,
  particleCount = 12,
  attractRadius = 50,
  ...props
}: MagnetizeButtonProps) {
  const [isAttracting, setIsAttracting] = useState(false)
  const [particles, setParticles] = useState<Particle[]>([])
  const particlesControl = useAnimation()

  useEffect(() => {
    const newParticles = Array.from({ length: particleCount }, (_, i) => ({
      id: i,
      x: Math.random() * 360 - 180,
      y: Math.random() * 360 - 180,
    }))
    setParticles(newParticles)
  }, [particleCount])

  const handleInteractionStart = useCallback(async () => {
    setIsAttracting(true)
    await particlesControl.start({
      x: 0,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 50,
        damping: 10,
      },
    })
  }, [particlesControl])

  const handleInteractionEnd = useCallback(async () => {
    setIsAttracting(false)
    await particlesControl.start((i) => ({
      x: particles[i].x,
      y: particles[i].y,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 15,
      },
    }))
  }, [particlesControl, particles])

  return (
    <Button
      className={cn(
        "relative min-w-40 touch-none",
        "bg-violet-100 dark:bg-violet-900",
        "hover:bg-violet-200 dark:hover:bg-violet-800",
        "text-violet-600 dark:text-violet-300",
        "border border-violet-300 dark:border-violet-700",
        "cursor-pointer transition-all duration-300",
        className
      )}
      onMouseEnter={handleInteractionStart}
      onMouseLeave={handleInteractionEnd}
      onTouchStart={handleInteractionStart}
      onTouchEnd={handleInteractionEnd}
      {...props}
    >
      {particles.map((_, index) => (
        <motion.div
          key={index}
          custom={index}
          initial={{ x: particles[index].x, y: particles[index].y }}
          animate={particlesControl}
          className={cn(
            "absolute h-1.5 w-1.5 rounded-full",
            "bg-violet-400 dark:bg-violet-300",
            "transition-opacity duration-300",
            isAttracting ? "opacity-100" : "opacity-40"
          )}
        />
      ))}
      <span className="relative flex w-full items-center justify-center gap-2">
        <Magnet
          className={cn(
            "h-4 w-4 transition-transform duration-300",
            isAttracting && "scale-110"
          )}
        />
        {isAttracting ? "Attracting" : "Hover me"}
      </span>
    </Button>
  )
}


===== EXAMPLE: magnetize-button-demo =====
Title: Magnetize Button Demo

--- file: example/magnetize-button-demo.tsx ---
import MagnetizeButton from "@/registry/gammaui/magnetize-button"

export default function MagnetizeButtonDemo() {
  return (
    <MagnetizeButton
      particleCount={14}
      attractRadius={50}
      className="mx-auto"
    />
  )
}



===== COMPONENT: overlay-button =====
Title: Overlay Button
Description: An animated gradient button using Framer Motion with looping motion and spring transitions.

--- file: gammaui/overlay-button.tsx ---
"use client"

import { motion } from "motion/react"

interface OverlayButtonProps {
  label: string
}

export default function OverlayButton({ label }: OverlayButtonProps) {
  return (
    <motion.button
      initial={{ "--x": "100%", scale: 1.5 }}
      animate={{ "--x": "-100%" }}
      whileTap={{ scale: 0.97 }}
      transition={{
        repeat: Infinity,
        repeatType: "loop",
        repeatDelay: 1,
        type: "spring",
        stiffness: 20,
        damping: 15,
        mass: 2,
        scale: {
          type: "spring",
          stiffness: 10,
          damping: 5,
          mass: 0.1,
        },
      }}
      className="radial-gradient relative rounded-xl px-2 py-1"
    >
      <span className="linear-overlay absolute inset-0 top-0 left-0 h-full w-full rounded-xl" />
      <span className="linear-mask relative block h-full w-full font-light text-neutral-100">
        {label}
      </span>
    </motion.button>
  )
}


===== EXAMPLE: overlay-button-demo =====
Title: Overlay Button Demo

--- file: example/overlay-button-demo.tsx ---
import OverlayButton from "../gammaui/overlay-button"

export default function OverlayButtonDemo() {
  return <OverlayButton label="Gamma UI" />
}



===== COMPONENT: pixel-button =====
Title: Pixel Button
Description: A pixelated button animation effect built with Tailwind CSS and React.

--- file: gammaui/pixel-button.tsx ---
"use client"

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

interface PixelButtonProps {
  children: React.ReactNode
  color?: string
}

export const PixelButton: React.FC<PixelButtonProps> = ({
  children,
  color = "#ff5722",
}) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [hovered, setHovered] = useState(false)

  useEffect(() => {
    const button = buttonRef.current
    const pixelContainer = containerRef.current
    if (!button || !pixelContainer) return

    const pixelSize = 10
    const btnWidth = button.offsetWidth
    const btnHeight = button.offsetHeight
    const cols = Math.floor(btnWidth / pixelSize)
    const rows = Math.floor(btnHeight / pixelSize)

    // Clear old pixels
    pixelContainer.innerHTML = ""

    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        const pixel = document.createElement("div")
        pixel.className =
          "absolute w-[10px] h-[10px] border border-black/25 opacity-0 transition-opacity duration-500 ease-in-out"
        pixel.style.background = color
        pixel.style.left = `${col * pixelSize}px`
        pixel.style.top = `${row * pixelSize}px`
        pixel.style.transitionDelay = `${Math.random() * 0.8}s`
        pixelContainer.appendChild(pixel)
      }
    }
  }, [color])

  useEffect(() => {
    // When hover state changes, toggle opacity
    const pixels = containerRef.current?.querySelectorAll<HTMLDivElement>("div")
    if (!pixels) return
    pixels.forEach((pixel) => {
      pixel.style.opacity = hovered ? "1" : "0"
    })
  }, [hovered])

  return (
    <button
      ref={buttonRef}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="relative h-[60px] w-[180px] cursor-pointer overflow-hidden rounded-[10px] bg-black text-xl font-normal tracking-[0.1em] text-white uppercase shadow-[0_2px_8px_rgba(0,0,0,0.2)] transition-all duration-300 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] dark:bg-white dark:text-black"
    >
      <span className="relative z-10">{children}</span>
      <div
        ref={containerRef}
        className="pointer-events-none absolute inset-0 z-1 overflow-hidden rounded-[10px]"
      />
    </button>
  )
}


===== EXAMPLE: pixel-button-demo =====
Title: Pixel Button Demo

--- file: example/pixel-button-demo.tsx ---
"use client"

import { PixelButton } from "@/registry/gammaui/pixel-button"

export default function PixelButtonDemo() {
  return (
    <div className="z-10 flex h-full w-full justify-center gap-6">
      <PixelButton color="#ff5722">Pixel</PixelButton>
      <PixelButton color="#03a9f4">Button</PixelButton>
      <PixelButton color="#4caf50">Hover Me</PixelButton>
    </div>
  )
}



===== COMPONENT: plasma =====
Title: Plasma
Description: A mesmerizing plasma shader animation rendered with WebGL, perfect for dynamic backgrounds and previews.

--- file: gammaui/plasma.tsx ---
"use client"

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

export const Plasma: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)

  // Vertex shader
  const vsSource = `
    attribute vec4 aVertexPosition;
    void main() {
      gl_Position = aVertexPosition;
    }
  `

  // Fragment shader (same as before)
  const fsSource = `precision highp float;
    uniform vec2 iResolution;
    uniform float iTime;

    const float overallSpeed = 0.2;
    const float gridSmoothWidth = 0.015;
    const float axisWidth = 0.05;
    const float majorLineWidth = 0.025;
    const float minorLineWidth = 0.0125;
    const float majorLineFrequency = 5.0;
    const float minorLineFrequency = 1.0;
    const vec4 gridColor = vec4(0.5);
    const float scale = 5.0;
    const vec4 lineColor = vec4(0.4, 0.2, 0.8, 1.0);
    const float minLineWidth = 0.01;
    const float maxLineWidth = 0.2;
    const float lineSpeed = 1.0 * overallSpeed;
    const float lineAmplitude = 1.0;
    const float lineFrequency = 0.2;
    const float warpSpeed = 0.2 * overallSpeed;
    const float warpFrequency = 0.5;
    const float warpAmplitude = 1.0;
    const float offsetFrequency = 0.5;
    const float offsetSpeed = 1.33 * overallSpeed;
    const float minOffsetSpread = 0.6;
    const float maxOffsetSpread = 2.0;
    const int linesPerGroup = 16;

    #define drawCircle(pos, radius, coord) smoothstep(radius + gridSmoothWidth, radius, length(coord - (pos)))
    #define drawSmoothLine(pos, halfWidth, t) smoothstep(halfWidth, 0.0, abs(pos - (t)))
    #define drawCrispLine(pos, halfWidth, t) smoothstep(halfWidth + gridSmoothWidth, halfWidth, abs(pos - (t)))
    #define drawPeriodicLine(freq, width, t) drawCrispLine(freq / 2.0, width, abs(mod(t, freq) - (freq) / 2.0))

    float drawGridLines(float axis) {
      return drawCrispLine(0.0, axisWidth, axis)
            + drawPeriodicLine(majorLineFrequency, majorLineWidth, axis)
            + drawPeriodicLine(minorLineFrequency, minorLineWidth, axis);
    }

    float drawGrid(vec2 space) {
      return min(1.0, drawGridLines(space.x) + drawGridLines(space.y));
    }

    float random(float t) {
      return (cos(t) + cos(t * 1.3 + 1.3) + cos(t * 1.4 + 1.4)) / 3.0;
    }

    float getPlasmaY(float x, float horizontalFade, float offset) {
      return random(x * lineFrequency + iTime * lineSpeed) * horizontalFade * lineAmplitude + offset;
    }

    void main() {
      vec2 fragCoord = gl_FragCoord.xy;
      vec4 fragColor;
      vec2 uv = fragCoord.xy / iResolution.xy;
      vec2 space = (fragCoord - iResolution.xy / 2.0) / iResolution.x * 2.0 * scale;

      float horizontalFade = 1.0 - (cos(uv.x * 6.28) * 0.5 + 0.5);
      float verticalFade = 1.0 - (cos(uv.y * 6.28) * 0.5 + 0.5);

      space.y += random(space.x * warpFrequency + iTime * warpSpeed) * warpAmplitude * (0.5 + horizontalFade);
      space.x += random(space.y * warpFrequency + iTime * warpSpeed + 2.0) * warpAmplitude * horizontalFade;

      vec4 lines = vec4(0.0);
      vec4 bgColor1 = vec4(0.1, 0.1, 0.3, 1.0);
      vec4 bgColor2 = vec4(0.3, 0.1, 0.5, 1.0);

      for(int l = 0; l < linesPerGroup; l++) {
        float normalizedLineIndex = float(l) / float(linesPerGroup);
        float offsetTime = iTime * offsetSpeed;
        float offsetPosition = float(l) + space.x * offsetFrequency;
        float rand = random(offsetPosition + offsetTime) * 0.5 + 0.5;
        float halfWidth = mix(minLineWidth, maxLineWidth, rand * horizontalFade) / 2.0;
        float offset = random(offsetPosition + offsetTime * (1.0 + normalizedLineIndex)) * mix(minOffsetSpread, maxOffsetSpread, horizontalFade);
        float linePosition = getPlasmaY(space.x, horizontalFade, offset);
        float line = drawSmoothLine(linePosition, halfWidth, space.y) / 2.0 + drawCrispLine(linePosition, halfWidth * 0.15, space.y);

        float circleX = mod(float(l) + iTime * lineSpeed, 25.0) - 12.0;
        vec2 circlePosition = vec2(circleX, getPlasmaY(circleX, horizontalFade, offset));
        float circle = drawCircle(circlePosition, 0.01, space) * 4.0;

        line = line + circle;
        lines += line * lineColor * rand;
      }

      fragColor = mix(bgColor1, bgColor2, uv.x);
      fragColor *= verticalFade;
      fragColor.a = 1.0;
      fragColor += lines;

      gl_FragColor = fragColor;
    }
  `

  const loadShader = (
    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
  }

  const initShaderProgram = (
    gl: WebGLRenderingContext,
    vsSource: string,
    fsSource: string
  ): WebGLProgram | null => {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource)
    if (!vertexShader || !fragmentShader) return null

    const shaderProgram = gl.createProgram()
    if (!shaderProgram) return null

    gl.attachShader(shaderProgram, vertexShader)
    gl.attachShader(shaderProgram, fragmentShader)
    gl.linkProgram(shaderProgram)

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      console.error(
        "Shader program link error:",
        gl.getProgramInfoLog(shaderProgram)
      )
      return null
    }

    return shaderProgram
  }

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const gl = canvas.getContext("webgl")
    if (!gl) {
      console.warn("WebGL not supported.")
      return
    }

    const shaderProgram = initShaderProgram(gl, vsSource, fsSource)
    if (!shaderProgram) return

    const positionBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
    const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

    const programInfo = {
      program: shaderProgram,
      attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
      },
      uniformLocations: {
        resolution: gl.getUniformLocation(shaderProgram, "iResolution"),
        time: gl.getUniformLocation(shaderProgram, "iTime"),
      },
    }

    const resizeCanvas = () => {
      const rect = canvas.getBoundingClientRect()
      canvas.width = rect.width * window.devicePixelRatio
      canvas.height = rect.height * window.devicePixelRatio
      gl.viewport(0, 0, canvas.width, canvas.height)
    }

    resizeCanvas()
    const observer = new ResizeObserver(resizeCanvas)
    observer.observe(canvas)

    const startTime = Date.now()
    const render = () => {
      const currentTime = (Date.now() - startTime) / 1000
      gl.clearColor(0, 0, 0, 1)
      gl.clear(gl.COLOR_BUFFER_BIT)
      gl.useProgram(programInfo.program)

      if (programInfo.uniformLocations.resolution)
        gl.uniform2f(
          programInfo.uniformLocations.resolution,
          canvas.width,
          canvas.height
        )
      if (programInfo.uniformLocations.time)
        gl.uniform1f(programInfo.uniformLocations.time, currentTime)

      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
      gl.vertexAttribPointer(
        programInfo.attribLocations.vertexPosition,
        2,
        gl.FLOAT,
        false,
        0,
        0
      )
      gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition)
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
      requestAnimationFrame(render)
    }

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

  // ❗ Remove fixed/full-screen styling:
  return (
    <canvas
      ref={canvasRef}
      className="h-full w-full rounded-xl"
      style={{ display: "block" }}
    />
  )
}

export default Plasma


===== EXAMPLE: plasma-demo =====
Title: Plasma Demo

--- file: example/plasma-demo.tsx ---
import Plasma from "@/registry/gammaui/plasma"

export default function PlasmaDemo() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden rounded-xl">
      <Plasma />
    </div>
  )
}



===== COMPONENT: pricing-interaction =====
Title: Pricing Interaction
Description: An interactive pricing switcher with animated numbers, selectable plans, and monthly/yearly billing modes.

--- file: gammaui/pricing-interaction.tsx ---
"use client"

import React from "react"
import NumberFlow from "@number-flow/react"

export default function PricingInteraction() {
  const [active, setActive] = React.useState(0)
  const [period, setPeriod] = React.useState(0)
  const handleChangePlan = (index: number) => {
    setActive(index)
  }
  const handleChangePeriod = (index: number) => {
    setPeriod(index)
    if (index === 0) {
      setStarter(9.99)
      setPro(19.99)
    } else {
      setStarter(7.49)
      setPro(17.49)
    }
  }
  const [starter, setStarter] = React.useState(9.99)
  const [pro, setPro] = React.useState(19.99)
  return (
    <main className="relative flex w-full items-center justify-center p-4">
      <div className="flex w-full max-w-sm flex-col items-center gap-3 rounded-4xl border-2 p-3 shadow-md">
        <div className="relative flex w-full items-center rounded-full bg-slate-100 p-1.5 dark:bg-zinc-900">
          <button
            className="z-20 w-full rounded-full p-1.5 font-semibold text-slate-800 dark:text-white"
            onClick={() => handleChangePeriod(0)}
          >
            Monthly
          </button>
          <button
            className="z-20 w-full rounded-full p-1.5 font-semibold text-slate-800 dark:text-white"
            onClick={() => handleChangePeriod(1)}
          >
            Yearly
          </button>
          <div
            className="items-cnter absolute inset-0 z-10 flex w-1/2 justify-center p-1.5"
            style={{
              transform: `translateX(${period * 100}%)`,
              transition: "transform 0.3s",
            }}
          >
            <div className="h-full w-full rounded-full bg-white shadow-sm dark:bg-black" />
          </div>
        </div>
        <div className="relative flex w-full flex-col items-center justify-center gap-3">
          <div
            className="flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4"
            onClick={() => handleChangePlan(0)}
          >
            <div className="flex flex-col items-start">
              <p className="text-xl font-semibold text-black dark:text-white">
                Free
              </p>
              <p className="text-md text-slate-500 dark:text-zinc-600">
                <span className="font-medium text-black dark:text-white">
                  $0.00
                </span>
                /month
              </p>
            </div>
            <div
              className="mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1"
              style={{
                borderColor: `${active === 0 ? "#000" : "#64748b"}`,
                transition: "border-color 0.3s",
              }}
            >
              <div
                className="bg-primary size-3 rounded-full"
                style={{
                  opacity: `${active === 0 ? 1 : 0}`,
                  transition: "opacity 0.3s",
                }}
              ></div>
            </div>
          </div>
          <div
            className="flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4"
            onClick={() => handleChangePlan(1)}
          >
            <div className="flex flex-col items-start">
              <p className="flex items-center gap-2 text-xl font-semibold text-black dark:text-white">
                Starter{" "}
                <span className="block rounded-lg bg-yellow-100 px-2 py-1 text-sm text-yellow-950">
                  Popular
                </span>
              </p>
              <p className="text-md flex text-slate-500 dark:text-zinc-600">
                <span className="flex items-center font-medium text-black dark:text-white">
                  $ <NumberFlow className="font-medium" value={starter} />
                </span>
                /month
              </p>
            </div>
            <div
              className="mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1"
              style={{
                borderColor: `${active === 1 ? "#000" : "#64748b"}`,
                transition: "border-color 0.3s",
              }}
            >
              <div
                className="bg-primary size-3 rounded-full"
                style={{
                  opacity: `${active === 1 ? 1 : 0}`,
                  transition: "opacity 0.3s",
                }}
              ></div>
            </div>
          </div>
          <div
            className="flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4"
            onClick={() => handleChangePlan(2)}
          >
            <div className="flex flex-col items-start">
              <p className="text-xl font-semibold text-black dark:text-white">
                Pro
              </p>
              <p className="text-md flex text-slate-500 dark:text-zinc-600">
                <span className="flex items-center font-medium text-black dark:text-white">
                  $ <NumberFlow className="font-medium" value={pro} />
                </span>
                /month
              </p>
            </div>
            <div
              className="mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1"
              style={{
                borderColor: `${active === 2 ? "#000" : "#64748b"}`,
                transition: "border-color 0.3s",
              }}
            >
              <div
                className="bg-primary size-3 rounded-full"
                style={{
                  opacity: `${active === 2 ? 1 : 0}`,
                  transition: "opacity 0.3s",
                }}
              ></div>
            </div>
          </div>
          <div
            className={`absolute top-0 h-[88px] w-full rounded-2xl border-[3px] border-black dark:border-zinc-700`}
            style={{
              transform: `translateY(${active * 88 + 12 * active}px)`,
              transition: "transform 0.3s",
            }}
          ></div>
        </div>
        <button className="w-full rounded-full bg-black p-3 text-lg text-white transition-transform duration-300 active:scale-95 dark:bg-zinc-900">
          Get Started
        </button>
      </div>
    </main>
  )
}


===== EXAMPLE: pricing-interaction-demo =====
Title: Pricing Interaction Demo

--- file: example/pricing-interaction-demo.tsx ---
import PricingInteraction from "@/registry/gammaui/pricing-interaction"

export default function PricingInteractionDemo() {
  return <PricingInteraction />
}



===== COMPONENT: radial-intro =====
Title: Radial Intro
Description: A dynamic radial orbit animation built with Motion and React, featuring upright spinning image nodes.

--- file: gammaui/radial-intro.tsx ---
"use client"

import * as React from "react"
import {
  delay,
  LayoutGroup,
  motion,
  useAnimate,
  type AnimationSequence,
  type Transition,
} from "motion/react"

interface RadialIntroProps {
  orbitItems: OrbitItem[]
  stageSize?: number
  imageSize?: number
}

interface OrbitItem {
  id: number
  name: string
  src: string
}

const transition: Transition = {
  delay: 0,
  stiffness: 300,
  damping: 35,
  type: "spring",
  restSpeed: 0.01,
  restDelta: 0.01,
}

const spinConfig = {
  duration: 30,
  ease: "linear" as const,
  repeat: Infinity,
}

const qsa = (root: Element, sel: string) =>
  Array.from(root.querySelectorAll(sel))

const angleOf = (el: Element) => Number((el as HTMLElement).dataset.angle || 0)

const armOfImg = (img: Element) =>
  (img as HTMLElement).closest("[data-arm]") as HTMLElement | null

export default function RadialIntro({
  orbitItems,
  stageSize = 320,
  imageSize = 60,
}: RadialIntroProps) {
  const step = 360 / orbitItems.length
  const [scope, animate] = useAnimate()

  React.useEffect(() => {
    const root = scope.current
    if (!root) return

    // get arm and image elements
    const arms = qsa(root, "[data-arm]")
    const imgs = qsa(root, "[data-arm-image]")
    const stops: (() => void)[] = []

    // image lift-in
    delay(() => animate(imgs, { top: 0 }, transition), 250)

    // build sequence for orbit placement
    const orbitPlacementSequence: AnimationSequence = [
      ...arms.map((el): [Element, Record<string, any>, any] => [
        el,
        { rotate: angleOf(el) },
        { ...transition, at: 0 },
      ]),
      ...imgs.map((img): [Element, Record<string, any>, any] => [
        img,
        { rotate: -angleOf(armOfImg(img)!), opacity: 1 },
        { ...transition, at: 0 },
      ]),
    ]

    // play placement sequence
    delay(() => animate(orbitPlacementSequence), 700)

    // start continuous spin for arms and images
    delay(() => {
      // arms spin clockwise
      arms.forEach((el) => {
        const angle = angleOf(el)
        const ctrl = animate(el, { rotate: [angle, angle + 360] }, spinConfig)
        stops.push(() => ctrl.cancel())
      })

      // images counter-spin to stay upright
      imgs.forEach((img) => {
        const arm = armOfImg(img)
        const angle = arm ? angleOf(arm) : 0
        const ctrl = animate(
          img,
          { rotate: [-angle, -angle - 360] },
          spinConfig
        )
        stops.push(() => ctrl.cancel())
      })
    }, 1300)

    return () => stops.forEach((stop) => stop())
  }, [])

  return (
    <LayoutGroup>
      <motion.div
        ref={scope}
        className="relative overflow-visible"
        style={{ width: stageSize, height: stageSize }}
        initial={false}
      >
        {orbitItems.map((item, i) => (
          <motion.div
            key={item.id}
            data-arm
            className="absolute inset-0 will-change-transform"
            style={{ zIndex: orbitItems.length - i }}
            data-angle={i * step}
            layoutId={`arm-${item.id}`}
          >
            <motion.img
              data-arm-image
              className="translate absolute top-1/2 left-1/2 aspect-square -translate-x-1/2 rounded-full bg-black object-fill object-center"
              style={{
                width: imageSize,
                height: imageSize,
                opacity: i === 0 ? 1 : 0,
              }}
              src={item.src}
              alt={item.name}
              draggable={false}
              layoutId={`arm-img-${item.id}`}
            />
          </motion.div>
        ))}
      </motion.div>
    </LayoutGroup>
  )
}


===== EXAMPLE: radial-intro-demo =====
Title: Radial Intro Demo

--- file: example/radial-intro-demo.tsx ---
import RadialIntro from "@/registry/gammaui/radial-intro"

const ITEMS = [
  {
    id: 1,
    name: "Gamma UI",
    src: "/gamma-ui-dark.svg",
  },
  {
    id: 2,
    name: "arhamkhnz",
    src: "https://pbs.twimg.com/profile_images/1897311929028255744/otxpL-ke_400x400.jpg",
  },
  {
    id: 3,
    name: "Skyleen",
    src: "https://pbs.twimg.com/profile_images/1948770261848756224/oPwqXMD6_400x400.jpg",
  },
  {
    id: 4,
    name: "Shadcn",
    src: "https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg",
  },
  {
    id: 5,
    name: "Adam Wathan",
    src: "https://pbs.twimg.com/profile_images/1677042510839857154/Kq4tpySA_400x400.jpg",
  },
  {
    id: 6,
    name: "Guillermo Rauch",
    src: "https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg",
  },
  {
    id: 7,
    name: "Jhey",
    src: "https://pbs.twimg.com/profile_images/1534700564810018816/anAuSfkp_400x400.jpg",
  },
  {
    id: 8,
    name: "David Haz",
    src: "https://pbs.twimg.com/profile_images/1927474594102784000/Al0g-I6o_400x400.jpg",
  },
  {
    id: 9,
    name: "Matt Perry",
    src: "https://pbs.twimg.com/profile_images/1690345911149375488/wfD0Ai9j_400x400.jpg",
  },
]
export default function RadialIntroDemo() {
  return (
    <div className="mx-auto">
      <RadialIntro orbitItems={ITEMS} />
    </div>
  )
}



===== COMPONENT: shadcn-ui =====
Title: Shadcn UI
Description: Animated ShadCN UI SVG with glowing masked paths, motion shapes, and dynamic shimmering text with customizable props.

--- file: gammaui/shadcn-ui.tsx ---
"use client"

import { AnimationGeneratorType, motion } from "motion/react"
import { useTheme } from "next-themes"

import { cn } from "@/lib/utils"
import { TextShimmer } from "@/components/motion-primitives/text-shimmer"

const YourAppVariants = {
  hidden: { opacity: 0, scale: 0.5 },
  visible: {
    opacity: 0.2,
    scale: 1,
  },
}

const YourAppTransition: {
  duration: number
  type: AnimationGeneratorType
  damping: number
  bounce: number
  mass: number
} = {
  duration: 0.2,
  type: "spring",
  damping: 20,
  bounce: 0.1,
  mass: 2,
}

interface ShadCnUIProps {
  className?: string
  circleText?: string
  triangleText?: string
  diamondText?: string
  animatedText?: string
  animatedBoxText?: string
  hintText?: string
  appName?: string
}

export default function ShadCnUI({
  className,
  animatedBoxText = "Sidebar",
  animatedText = "npx shadcn add",
  appName = "Your App",
  circleText = "Registry",
  diamondText = "Registry",
  hintText = "(components.json)",
  triangleText = "AI",
}: ShadCnUIProps) {
  const { resolvedTheme } = useTheme()
  return (
    <div className={cn("text-muted relative", className)}>
      {/* SVG */}
      <svg width="100%" height="100%" viewBox="0 0 200 100">
        <defs>
          <mask id="shadn-mask1">
            <path
              d="M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>
          <mask id="shadn-mask2">
            <path d="M 30 50 h 52" strokeWidth="0.5" stroke="white" />
          </mask>
          <mask id="shadn-mask3">
            <path
              d="M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15"
              strokeWidth="0.5"
              stroke="white"
            />
          </mask>
          <radialGradient id="shadcn-white-grad" fx="1">
            <stop offset="0%" stopColor="gray" />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>
        {/* Paths */}
        <g
          stroke="#181818"
          fill="none"
          strokeWidth="0.3"
          strokeDasharray="100 100"
          pathLength="100"
          strokeOpacity="0"
        >
          <path d="M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15" />
          <path d="M 30 50 h 52" />
          <path d="M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15" />
          <path d="M 160 36 h -10 q -5 0 -5 5 v 4 q 0 5 -5 5 h -20" />
          <animate
            attributeName="stroke-dashoffset"
            from="100"
            to="0"
            dur="1s"
            fill="freeze"
            calcMode="spline"
            keySplines="0.25,0.1,0.5,1"
            keyTimes="0; 1"
            begin="1.2s"
          />
          <animate
            attributeName="stroke-opacity"
            dur="0.2s"
            from="0"
            to="1"
            fill="freeze"
            begin="1.2s"
          />
        </g>
        {/* Left-Hand Shapes */}
        <g stroke="#4d4d4d" strokeWidth="0.2" fill="none">
          {/* Registry Circle */}
          <circle
            cx="23"
            cy="14"
            r="12"
            strokeDasharray="2 3"
            fill="none"
            opacity="0.5"
            strokeOpacity="0.8"
            stroke={resolvedTheme === "dark" ? "white" : "black"}
          />
          <text
            x="23"
            y="14"
            textAnchor="middle"
            dy=".3em"
            fontSize="3.5"
            fontWeight="300"
          >
            {circleText}
          </text>
          {/* AI Trinangle */}
          <path
            d="M 23 40 l 15 20 h -30 z"
            strokeDasharray="2 3"
            opacity="0.5"
            strokeOpacity="0.8"
            stroke={resolvedTheme === "dark" ? "white" : "black"}
          />
          <text
            x="21"
            y="54"
            textAnchor="middle"
            dy=".3em"
            fontSize="4"
            fontWeight="300"
          >
            {triangleText}
          </text>
          <path
            transform="scale(0.2)"
            opacity={0.5}
            d="M130 260 a6 6 0 0 1-6 6 6 6 0 0 1 6 6 6 6 0 0 1 6-6 6 6 0 0 1-6-6m7.5 11a2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1-2.5-2.5"
            fill="#71717A"
            strokeWidth="1"
          />
          {/* Registry Polygon */}
          <path
            d="M 23 73 l 14 14 l -14 14 l -14 -14 z"
            strokeDasharray="2 3"
            opacity="0.5"
            strokeOpacity="0.8"
            stroke={resolvedTheme === "dark" ? "white" : "black"}
          />
          <text
            x="23"
            y="87"
            textAnchor="middle"
            dy=".3em"
            fontSize="3.5"
            stroke="#4d4d4d"
            fontWeight="300"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            {diamondText}
          </text>
        </g>
        {/* Right-Hand Shapes */}
        <g stroke="currentColor" strokeWidth="0.2" fill="none">
          <motion.rect
            variants={{
              ...YourAppVariants,
              visible: { ...YourAppVariants.visible, opacity: 1 },
            }}
            initial="hidden"
            animate="visible"
            transition={YourAppTransition}
            x="160"
            y="29.5"
            width="14"
            height="14"
            rx="3"
            strokeDasharray="2 2"
          />
          <motion.rect
            variants={YourAppVariants}
            initial="hidden"
            animate="visible"
            transition={{ ...YourAppTransition, delay: 0.3 }}
            x="176"
            y="29.5"
            width="14"
            height="14"
            rx="3"
            fill="#0C0D0E"
            strokeOpacity="0.4"
            stroke="white"
          />
          <motion.rect
            variants={YourAppVariants}
            initial="hidden"
            animate="visible"
            transition={{ ...YourAppTransition, delay: 0.6 }}
            x="160"
            y="45.5"
            width="14"
            height="14"
            rx="3"
            fill="#0C0D0E"
            strokeOpacity="0.4"
            stroke="white"
          />
          <motion.rect
            variants={YourAppVariants}
            initial="hidden"
            animate="visible"
            transition={{ ...YourAppTransition, delay: 0.9 }}
            x="176"
            y="45.5"
            width="14"
            height="14"
            rx="3"
            fill="#0C0D0E"
            strokeOpacity="0.4"
            stroke="white"
          />
          <motion.text
            variants={{
              ...YourAppVariants,
              visible: { ...YourAppVariants.visible, opacity: 1 },
            }}
            initial="hidden"
            animate="visible"
            transition={{ ...YourAppTransition, delay: 1.5 }}
            x="175"
            y="64"
            textAnchor="middle"
            dy=".3em"
            fontSize="3.5"
            fill="#606067"
            fontWeight="200"
          >
            {appName}
          </motion.text>
        </g>
        {/* Animated Lights */}
        <g mask="url(#shadn-mask1)">
          <circle
            className="shadcn shadcn-line-1"
            cx="0"
            cy="0"
            r="8"
            fill="url(#shadcn-white-grad)"
          />
        </g>
        <g mask="url(#shadn-mask2)">
          <circle
            className="shadcn shadcn-line-2"
            cx="0"
            cy="0"
            r="8"
            fill="url(#shadcn-white-grad)"
          />
        </g>
        <g mask="url(#shadn-mask3)">
          <circle
            className="shadcn shadcn-line-3"
            cx="0"
            cy="0"
            r="8"
            fill="url(#shadcn-white-grad)"
          />
        </g>
        {/* Animated - Comp Box */}
        <g
          className="compBox"
          stroke="currentColor"
          strokeWidth="0.2"
          style={{
            transform: "translateX(0px) translateY(-0.5px)",
            transformOrigin: "7px 7px",
          }}
        >
          <rect width="14" height="14" rx="3" fill="#131313" stroke="#1D1D1D" />
          <text
            x="7"
            y="5"
            textAnchor="middle"
            fontSize="3"
            stroke="#71717A"
            fontWeight="200"
          >
            {"</>"}
          </text>
          <text
            x="7"
            y="14"
            textAnchor="middle"
            fontSize="2.5"
            stroke="#71717A"
            fontWeight="200"
            style={{
              transformOrigin: "7px 11.5px",
              rotate: "180deg",
            }}
          >
            {animatedBoxText}
          </text>
        </g>
      </svg>
      {/* Shadcn Box */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        {/* Shadcn TextBox */}
        <div className="relative flex justify-center rounded-md bg-[#1c1c1c] px-4 py-1 text-sm shadow-sm">
          <p className="absolute -bottom-5 text-[10px] text-black dark:text-zinc-600">
            {hintText}
          </p>
          <TextShimmer delay={3.8} repeatDelay={1.8}>
            {animatedText}
          </TextShimmer>
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: shadcn-ui-demo =====
Title: Shadcn UI Demo

--- file: example/shadcn-ui-demo.tsx ---
"use client"

import ShadCnUI from "@/registry/gammaui/shadcn-ui"

const Page = () => {
  return (
    <div className="w-full rounded-xl p-4">
      <ShadCnUI />
    </div>
  )
}

export default Page



===== COMPONENT: support-box =====
Title: Support Box
Description: A collapsible animated support widget for quick help actions using Framer Motion.

--- file: gammaui/support-box.tsx ---
"use client"

import { useState } from "react"
import { AnimatePresence, motion, Variants } from "motion/react"

interface MenuItem {
  title: string
  description: string
  icon: React.ReactNode
  onPress: () => void
}

interface SupportBoxProps {
  title?: string
  items: MenuItem[]
  collapsedWidth?: number
  collapsedHeight?: number
  expandedWidth?: number
  expandedHeight?: number
  className?: string
  containerClassName?: string
  titleClassName?: string
  itemClassName?: string
  bgColor?: string
  borderColor?: string
}

export function SupportBox({
  items,
  title = "Need Help?",
  collapsedWidth = 120,
  collapsedHeight = 40,
  expandedWidth = 300,
  expandedHeight = 320,
  className = "",
  containerClassName = "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
  titleClassName = "text-gray-800 dark:text-gray-100",
  itemClassName = "text-gray-800 dark:text-gray-100",
  bgColor = "",
  borderColor = "",
}: SupportBoxProps) {
  const [isExpanded, setIsExpanded] = useState(false)

  const boxVariants: Variants = {
    collapsed: {
      width: collapsedWidth,
      height: collapsedHeight,
      transition: { type: "spring" as const, stiffness: 200, damping: 25 },
    },
    expanded: {
      width: expandedWidth,
      height: expandedHeight,
      transition: { type: "spring" as const, stiffness: 180, damping: 22 },
    },
  }

  const contentVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { delay: 0.1, duration: 0.25, ease: "easeOut" },
    },
    exit: { opacity: 0, y: 20, transition: { duration: 0.2 } },
  }

  return (
    <motion.div
      className={`relative ${className}`}
      variants={boxVariants}
      animate={isExpanded ? "expanded" : "collapsed"}
      initial="collapsed"
      layout
    >
      <div
        className={`${containerClassName} ${bgColor} ${borderColor} h-full overflow-hidden rounded-xl p-2 shadow-lg`}
      >
        <AnimatePresence mode="wait">
          {isExpanded ? (
            <motion.div
              key="expanded"
              className="flex h-full flex-col p-4"
              variants={contentVariants}
              initial="hidden"
              animate="visible"
              exit="exit"
            >
              <div className="mb-4 flex items-center justify-between">
                <h3 className={`text-lg font-semibold ${titleClassName}`}>
                  {title}
                </h3>
                <motion.button
                  onClick={() => setIsExpanded(false)}
                  className="text-gray-500 transition-all hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                  aria-label="Close menu"
                  whileHover={{ scale: 1.2 }}
                  whileTap={{ scale: 0.9 }}
                >
                  ✕
                </motion.button>
              </div>

              <motion.div
                className="flex-1 space-y-3 overflow-y-auto"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.15 }}
              >
                {items.map((option, index) => (
                  <motion.button
                    key={`${option.title}-${index}`}
                    onClick={option.onPress}
                    className={`flex w-full cursor-pointer items-center rounded-lg border border-gray-100 p-3 text-left transition-all hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 ${itemClassName}`}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.97 }}
                  >
                    <span className="mr-3 shrink-0 text-2xl text-gray-700 dark:text-gray-300">
                      {option.icon}
                    </span>
                    <div className="min-w-0 flex-1">
                      <p className="font-medium">{option.title}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">
                        {option.description}
                      </p>
                    </div>
                  </motion.button>
                ))}
              </motion.div>
            </motion.div>
          ) : (
            <motion.button
              key="collapsed"
              onClick={() => setIsExpanded(true)}
              className={`flex h-full w-full items-center justify-center font-medium ${titleClassName}`}
              aria-label={`Expand ${title}`}
              variants={contentVariants}
              initial="hidden"
              animate="visible"
              exit="exit"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {title}
            </motion.button>
          )}
        </AnimatePresence>
      </div>
    </motion.div>
  )
}

export default SupportBox


===== EXAMPLE: support-box-demo =====
Title: Support Box Demo

--- file: example/support-box-demo.tsx ---
"use client"

import {
  IconBook,
  IconBug,
  IconBulb,
  IconMessageCircle,
} from "@tabler/icons-react"
import { toast } from "sonner"

import { SupportBox } from "@/registry/gammaui/support-box"

export default function SupportBoxDemo() {
  const helpItems = [
    {
      title: "Contact Support",
      description: "Chat with our support team for assistance.",
      icon: <IconMessageCircle size={22} stroke={1.5} />,
      onPress: () => toast("Opening support chat..."),
    },
    {
      title: "Documentation",
      description: "Browse our guides and API documentation.",
      icon: <IconBook size={22} stroke={1.5} />,
      onPress: () => toast("Opening documentation..."),
    },
    {
      title: "Report a Bug",
      description: "Found an issue? Let us know!",
      icon: <IconBug size={22} stroke={1.5} />,
      onPress: () => toast("Redirecting to bug report form..."),
    },
    {
      title: "Request a Feature",
      description: "Suggest improvements or new features.",
      icon: <IconBulb size={22} stroke={1.5} />,
      onPress: () => toast("Opening feature request page..."),
    },
  ]

  return (
    <div className="flex items-center justify-center p-6">
      <SupportBox title="Need Help?" items={helpItems} />
    </div>
  )
}



===== COMPONENT: text-roll =====
Title: Text Roll
Description: A rolling hover-animated text component built with Motion One.

--- file: gammaui/text-roll.tsx ---
"use client"

import React from "react"
import { motion } from "motion/react"

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

const STAGGER = 0.035

export default function TextRoll({
  children,
  className,
  center = false,
}: {
  children: string
  className?: string
  center?: boolean
}) {
  return (
    <motion.span
      initial="initial"
      whileHover="hovered"
      className={cn(
        "relative block overflow-hidden text-black dark:text-white/90",
        className
      )}
      style={{
        lineHeight: 0.85,
      }}
    >
      {/* Top Text (Slides up) */}
      <div>
        {children.split("").map((l, i) => {
          const delay = center
            ? STAGGER * Math.abs(i - (children.length - 1) / 2)
            : STAGGER * i

          return (
            <motion.span
              variants={{
                initial: {
                  y: 0,
                },
                hovered: {
                  y: "-100%",
                },
              }}
              transition={{
                ease: "easeInOut",
                delay,
              }}
              className="inline-block"
              key={i}
            >
              {l}
            </motion.span>
          )
        })}
      </div>

      {/* Bottom Text (Slides in from bottom) */}
      <div className="absolute inset-0">
        {children.split("").map((l, i) => {
          const delay = center
            ? STAGGER * Math.abs(i - (children.length - 1) / 2)
            : STAGGER * i

          return (
            <motion.span
              variants={{
                initial: {
                  y: "100%",
                },
                hovered: {
                  y: 0,
                },
              }}
              transition={{
                ease: "easeInOut",
                delay,
              }}
              className="inline-block"
              key={i}
            >
              {l}
            </motion.span>
          )
        })}
      </div>
    </motion.span>
  )
}


===== EXAMPLE: text-roll-demo =====
Title: Text Roll Demo

--- file: example/text-roll-demo.tsx ---
import TextRoll from "@/registry/gammaui/text-roll"

const navigationItems = [
  {
    name: "Home",
    href: "/",
    description: "[0]",
  },
  {
    name: "Components",
    href: "/components",
    description: "[1]",
  },
  {
    name: "Pricing",
    href: "/pricing",
    description: "[2]",
  },
  {
    name: "How to use",
    href: "/docs/quick-start",
    description: "[3]",
  },
  {
    name: "Account",
    href: "/user",
    description: "[4]",
  },
  {
    name: "Login",
    href: "/login",
    description: "[7]",
  },
]

export default function TextRollDemo() {
  return (
    <ul className="flex min-h-full w-full flex-1 flex-col items-center justify-center gap-1.5 rounded-2xl px-7 py-3 backdrop-blur-sm">
      {navigationItems.map((item, index) => (
        <li
          className="relative flex cursor-pointer flex-col items-center overflow-visible"
          key={index}
        >
          <div className="relative flex items-start">
            <TextRoll
              center
              className="text-4xl leading-[0.8] font-extrabold tracking-[-0.03em] uppercase transition-colors lg:text-5xl"
            >
              {item.name}
            </TextRoll>
          </div>
        </li>
      ))}
    </ul>
  )
}



===== COMPONENT: usage-card =====
Title: Usage Card
Description: An animated system monitor card that displays a title, percentage, and neon-lit pill indicators driven by Motion.

--- file: gammaui/usage-card.tsx ---
"use client"

import { useEffect, useState } from "react"
import { animate, motion, useMotionValue, useTransform } from "motion/react"

interface UsageCardProps {
  title: string
  percentage: number
  pillCount?: number
  accentColor?: string
  icon?: React.ReactNode
}

function useAnimatedCounter(target: number, duration = 1.2) {
  const count = useMotionValue(0)
  const rounded = useTransform(count, (v) => Math.round(v))
  const [display, setDisplay] = useState(0)

  useEffect(() => {
    const controls = animate(count, target, {
      duration,
      ease: [0.16, 1, 0.3, 1],
    })
    const unsub = rounded.on("change", setDisplay)
    return () => {
      controls.stop()
      unsub()
    }
  }, [target])

  return display
}

function Pill({
  active,
  index,
  accent,
}: {
  active: boolean
  index: number
  accent: string
}) {
  return (
    <motion.div
      initial={{ scaleY: 0.3, opacity: 0 }}
      animate={{ scaleY: 1, opacity: 1 }}
      transition={{
        delay: index * 0.04,
        duration: 0.45,
        ease: [0.16, 1, 0.3, 1],
      }}
      style={{ originY: 1, flex: 1 }}
      className="relative h-full overflow-hidden rounded-xs"
    >
      {/* Track */}
      <div className="absolute inset-0 rounded-xs bg-black/5 dark:bg-white/5" />

      {/* Fill */}
      <motion.div
        className="absolute inset-0 rounded-xs"
        initial={{ scaleX: 0 }}
        animate={{ scaleX: active ? 1 : 0 }}
        transition={{
          delay: index * 0.055 + 0.25,
          duration: 0.4,
          ease: [0.16, 1, 0.3, 1],
        }}
        style={{
          originX: 0,
          background: active
            ? `linear-gradient(90deg, ${accent}bb, ${accent})`
            : "transparent",
          boxShadow: active
            ? `0 0 6px ${accent}99, 0 0 12px ${accent}44`
            : "none",
        }}
      />

      {/* Shimmer */}
      {active && (
        <motion.div
          className="absolute inset-0 rounded-xs"
          style={{
            background: `linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%)`,
            backgroundSize: "200% 100%",
          }}
          animate={{ backgroundPositionX: ["0%", "200%"] }}
          transition={{
            repeat: Infinity,
            duration: 2,
            ease: "linear",
            delay: index * 0.08,
          }}
        />
      )}
    </motion.div>
  )
}

export default function UsageCard({
  title,
  percentage,
  pillCount = 10,
  accentColor = "#00f5ff",
  icon,
}: UsageCardProps) {
  const display = useAnimatedCounter(percentage)
  const activePills = Math.round((percentage / 100) * pillCount)
  const accent = percentage >= 75 ? "#ff2d55" : accentColor

  return (
    <div
      className="relative w-64 select-none"
      style={{ fontFamily: "'IBM Plex Mono', 'Courier New', monospace" }}
    >
      {/* Outer glow */}
      <div
        className="pointer-events-none absolute -inset-px rounded-2xl opacity-20 blur-sm dark:opacity-30"
        style={{
          background: `linear-gradient(135deg, ${accent}66, transparent 60%)`,
        }}
      />

      {/* Card */}
      <div className="relative overflow-hidden rounded-[8px] border border-zinc-200 bg-white dark:border-white/7 dark:bg-zinc-950">
        <div className="flex flex-col gap-4 p-4">
          {/* Top row */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5 text-black dark:text-white/40">
              {icon}
              <span className="text-[11px] tracking-widest uppercase">
                {title}
              </span>
            </div>

            <div className="flex items-baseline gap-[3px]">
              <motion.span
                className="text-xl leading-none font-semibold"
                style={{ color: accent, textShadow: `0 0 12px ${accent}88` }}
              >
                {display}
              </motion.span>
              <span className="text-[10px] text-black dark:text-white/25">
                %
              </span>
            </div>
          </div>

          {/* Pills */}
          <div className="flex gap-[4px]" style={{ height: 32 }}>
            {Array.from({ length: pillCount }).map((_, i) => (
              <Pill
                key={i}
                index={i}
                active={i < activePills}
                accent={accent}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: usage-card-demo =====
Title: Usage Card Demo

--- file: example/usage-card-demo.tsx ---
"use client"

import { useEffect, useState } from "react"
import { IconCpu } from "@tabler/icons-react"

import UsageCard from "@/registry/gammaui/usage-card"

const UsageCardDemo = () => {
  const [cpuVal, setCpuVal] = useState(72)

  useEffect(() => {
    const id = setInterval(() => {
      setCpuVal((v) =>
        Math.min(100, Math.max(0, v + (Math.random() - 0.5) * 10))
      )
    }, 2000)
    return () => clearInterval(id)
  }, [])
  return (
    <div className="h-full">
      <UsageCard
        title="CPU"
        percentage={Math.round(cpuVal)}
        pillCount={20}
        accentColor="#00f5ff"
        icon={<IconCpu size={13} />}
      />
    </div>
  )
}

export default UsageCardDemo



===== COMPONENT: voxel-wall =====
Title: Voxel Wall
Description: A dark voxel tunnel with volumetric light rays, drifting cubes, and mouse-driven camera parallax.

--- file: gammaui/voxel-wall/camera-rig.tsx ---
"use client"

import { useEffect, useRef } from "react"
import { useFrame, useThree } from "@react-three/fiber"
import * as THREE from "three"

import { HOLE_CENTER } from "./wall"

const BASE_POSITION = new THREE.Vector3(0.15, -2.35, 4.2)
const LOOK_TARGET = new THREE.Vector3(
  HOLE_CENTER.x,
  HOLE_CENTER.y - 0.1,
  HOLE_CENTER.z + 1.5
)

export default function CameraRig() {
  const mouse = useRef({ x: 0, y: 0 })
  const { camera } = useThree()

  useEffect(() => {
    const onPointerMove = (event: PointerEvent) => {
      mouse.current.x = (event.clientX / window.innerWidth) * 2 - 1
      mouse.current.y = -(event.clientY / window.innerHeight) * 2 + 1
    }

    window.addEventListener("pointermove", onPointerMove, { passive: true })
    return () => window.removeEventListener("pointermove", onPointerMove)
  }, [])

  useFrame(({ clock }) => {
    const t = clock.elapsedTime

    const swayX = Math.sin(t * 0.18) * 0.05 + Math.cos(t * 0.14) * 0.03
    const swayY = Math.cos(t * 0.16) * 0.025 + Math.sin(t * 0.11) * 0.018
    const parallaxX = mouse.current.x * 0.18
    const parallaxY = mouse.current.y * 0.1

    camera.position.x = THREE.MathUtils.lerp(
      camera.position.x,
      BASE_POSITION.x + swayX + parallaxX,
      0.05
    )
    camera.position.y = THREE.MathUtils.lerp(
      camera.position.y,
      BASE_POSITION.y + swayY + parallaxY * 0.35,
      0.05
    )
    camera.position.z = THREE.MathUtils.lerp(
      camera.position.z,
      BASE_POSITION.z + Math.sin(t * 0.12) * 0.06,
      0.04
    )

    const lookAt = LOOK_TARGET.clone()
    lookAt.x += parallaxX * 0.12
    lookAt.y += parallaxY * 0.08
    camera.lookAt(lookAt)
  })

  return null
}

--- file: gammaui/voxel-wall/light-rays.tsx ---
"use client"

import { forwardRef, useMemo, useRef } from "react"
import { useFrame } from "@react-three/fiber"
import {
  Bloom,
  EffectComposer,
  GodRays,
  Noise,
  Vignette,
} from "@react-three/postprocessing"
import { BlendFunction } from "postprocessing"
import * as THREE from "three"

import { HOLE_CENTER, HOLE_SIZE, LIGHT_ORIGIN, ROOM_DEPTH } from "./wall"

interface LightSourceProps {
  position?: [number, number, number]
}

export const LightSource = forwardRef<THREE.Mesh, LightSourceProps>(
  function LightSource({ position }, ref) {
    useFrame(({ clock }) => {
      if (!ref || typeof ref === "function" || !ref.current) return

      const pulse = 0.96 + Math.sin(clock.elapsedTime * 1.2) * 0.04
      const mat = ref.current.material as THREE.MeshBasicMaterial
      mat.opacity = pulse
    })

    return (
      <mesh
        ref={ref}
        position={position ?? [HOLE_CENTER.x, HOLE_CENTER.y, HOLE_CENTER.z]}
        rotation={[0, 0, -0.08]}
      >
        <planeGeometry
          args={[HOLE_SIZE.width * 1.15, HOLE_SIZE.height * 1.2]}
        />
        <meshBasicMaterial
          color="#ffffff"
          transparent
          opacity={1}
          depthWrite={false}
          toneMapped={false}
        />
      </mesh>
    )
  }
)

export function DustMotes() {
  const pointsRef = useRef<THREE.Points>(null)

  const positions = useMemo(() => {
    const count = 220
    const arr = new Float32Array(count * 3)
    for (let i = 0; i < count; i++) {
      arr[i * 3] = HOLE_CENTER.x + (Math.random() - 0.5) * HOLE_SIZE.width * 1.6
      arr[i * 3 + 1] =
        HOLE_CENTER.y + (Math.random() - 0.5) * HOLE_SIZE.height * 1.5
      arr[i * 3 + 2] = -ROOM_DEPTH + Math.random() * (ROOM_DEPTH + 2)
    }
    return arr
  }, [])

  const geometry = useMemo(() => {
    const geo = new THREE.BufferGeometry()
    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3))
    return geo
  }, [positions])

  useFrame(({ clock }) => {
    const points = pointsRef.current
    if (!points) return
    points.rotation.z = Math.sin(clock.elapsedTime * 0.06) * 0.015
  })

  return (
    <points ref={pointsRef} geometry={geometry}>
      <pointsMaterial
        size={0.022}
        color="#ffffff"
        transparent
        opacity={0.14}
        depthWrite={false}
        blending={THREE.AdditiveBlending}
        sizeAttenuation
      />
    </points>
  )
}

interface LightEffectsProps {
  sun: THREE.Mesh
}

export function LightEffects({ sun }: LightEffectsProps) {
  return (
    <EffectComposer multisampling={0}>
      <GodRays
        sun={sun}
        blendFunction={BlendFunction.SCREEN}
        samples={80}
        density={0.96}
        decay={0.92}
        weight={0.5}
        exposure={0.42}
        clampMax={1}
        blur
      />
      <Bloom
        luminanceThreshold={0.55}
        luminanceSmoothing={0.35}
        intensity={1.15}
        mipmapBlur
      />
      <Noise opacity={0.07} blendFunction={BlendFunction.OVERLAY} />
      <Vignette eskil={false} offset={0.18} darkness={1.15} />
    </EffectComposer>
  )
}

export function SceneLights() {
  return (
    <>
      <ambientLight intensity={0.008} color="#0a0a0a" />
      <pointLight
        position={[LIGHT_ORIGIN.x, LIGHT_ORIGIN.y, LIGHT_ORIGIN.z]}
        intensity={340}
        color="#ffffff"
        distance={26}
        decay={2}
      />
    </>
  )
}

--- file: gammaui/voxel-wall/scene.tsx ---
"use client"

import { Suspense, useEffect, useLayoutEffect, useRef, useState } from "react"
import { Canvas } from "@react-three/fiber"
import * as THREE from "three"

import CameraRig from "./camera-rig"
import { DustMotes, LightEffects, LightSource, SceneLights } from "./light-rays"
import VoxelWall from "./wall"

interface VoxelWallSceneProps {
  className?: string
  height?: string | number
}

function SceneContents() {
  const sunRef = useRef<THREE.Mesh>(null!)
  const [sun, setSun] = useState<THREE.Mesh | null>(null)

  useLayoutEffect(() => {
    if (sunRef.current) setSun(sunRef.current)
  }, [])

  return (
    <>
      <SceneLights />
      <VoxelWall />
      <LightSource ref={sunRef} />
      <DustMotes />
      <CameraRig />
      {sun && <LightEffects sun={sun} />}
    </>
  )
}

export default function VoxelWallScene({
  className,
  height = "100%",
}: VoxelWallSceneProps) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <div
      className={className}
      style={{ width: "100%", height, background: "#000000" }}
    >
      {mounted ? (
        <Canvas
          dpr={[1, 2]}
          shadows
          camera={{ position: [0.15, -2.35, 4.2], fov: 52, near: 0.1, far: 40 }}
          gl={{
            antialias: false,
            alpha: false,
            toneMapping: THREE.ACESFilmicToneMapping,
            toneMappingExposure: 1.05,
          }}
          style={{ width: "100%", height: "100%" }}
        >
          <color attach="background" args={["#000000"]} />
          <fog attach="fog" args={["#000000", 6, 22]} />
          <Suspense fallback={null}>
            <SceneContents />
          </Suspense>
        </Canvas>
      ) : null}
    </div>
  )
}

--- file: gammaui/voxel-wall/wall.tsx ---
"use client"

import { useEffect, useMemo, useRef } from "react"
import { useFrame } from "@react-three/fiber"
import * as THREE from "three"

const SPACING = 0.44
const CUBE = 0.38
const ROOM_W = 9.2
const ROOM_H = 6.4
const ROOM_D = 10.5

const HOLE_CX = 0.55
const HOLE_CY = 0.85
const HOLE_W = 3.4
const HOLE_H = 2.55

interface CubeInstance {
  x: number
  y: number
  z: number
  rotX: number
  rotY: number
  rotZ: number
  scale: number
  jitter: boolean
  phase: number
  driftSpeed: number
  maxDrift: number
}

const LIGHT_TARGET = {
  x: HOLE_CX,
  y: HOLE_CY,
  z: -ROOM_D - 0.35,
}

function mulberry32(seed: number) {
  return () => {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

function isInHole(
  x: number,
  y: number,
  z: number,
  rand: () => number
): false | true | "debris" {
  const backZ = -ROOM_D
  if (Math.abs(z - backZ) > SPACING * 0.6) return false

  const dx = Math.abs(x - HOLE_CX)
  const dy = Math.abs(y - HOLE_CY)

  const inside = dx < HOLE_W / 2 && dy < HOLE_H / 2
  if (!inside) return false

  const edgeDist = Math.min(HOLE_W / 2 - dx, HOLE_H / 2 - dy)

  if (edgeDist < SPACING * 0.85) {
    if (rand() < 0.42) return true
    if (rand() < 0.72) return "debris"
    return false
  }

  if (edgeDist < SPACING * 1.6 && rand() < 0.38) return "debris"

  return true
}

function pushCube(
  cubes: CubeInstance[],
  x: number,
  y: number,
  z: number,
  rand: () => number,
  edge = false,
  debris = false
) {
  const spread = edge || debris ? 0.22 : 0.06
  const bx = x + (rand() - 0.5) * spread
  const by = y + (rand() - 0.5) * spread
  const bz = z + (rand() - 0.5) * (debris ? 0.5 : spread)

  const dx = LIGHT_TARGET.x - bx
  const dy = LIGHT_TARGET.y - by
  const dz = LIGHT_TARGET.z - bz
  const dist = Math.hypot(dx, dy, dz)

  cubes.push({
    x: bx,
    y: by,
    z: bz,
    rotX: edge || debris ? (rand() - 0.5) * 0.7 : 0,
    rotY: edge || debris ? (rand() - 0.5) * 0.9 : 0,
    rotZ: edge || debris ? (rand() - 0.5) * 0.55 : 0,
    scale:
      CUBE *
      (debris
        ? 0.65 + rand() * 0.45
        : edge
          ? 0.78 + rand() * 0.35
          : 0.92 + rand() * 0.12),
    jitter: edge || debris,
    phase: rand() * Math.PI * 2,
    driftSpeed: debris
      ? 0.18 + rand() * 0.14
      : edge
        ? 0.1 + rand() * 0.07
        : 0.03 + rand() * 0.025,
    maxDrift: debris ? dist * 0.98 : edge ? dist * 0.55 : dist * 0.18,
  })
}

function generateTunnel(): CubeInstance[] {
  const rand = mulberry32(481516)
  const cubes: CubeInstance[] = []

  const halfW = ROOM_W / 2
  const halfH = ROOM_H / 2
  const backZ = -ROOM_D

  for (let z = 0; z >= backZ; z -= SPACING) {
    for (let x = -halfW; x <= halfW; x += SPACING) {
      const hole = isInHole(x, -halfH, z, rand)
      if (hole === true) continue
      if (hole === "debris") {
        pushCube(cubes, x, -halfH, z + rand() * 0.4, rand, true, true)
        continue
      }
      pushCube(cubes, x, -halfH, z, rand, z < backZ + SPACING * 2)
    }
  }

  for (let z = 0; z >= backZ; z -= SPACING) {
    for (let x = -halfW; x <= halfW; x += SPACING) {
      const hole = isInHole(x, halfH, z, rand)
      if (hole === true) continue
      if (hole === "debris") {
        pushCube(cubes, x, halfH, z + rand() * 0.3, rand, true, true)
        continue
      }
      pushCube(cubes, x, halfH, z, rand)
    }
  }

  for (let z = 0; z >= backZ; z -= SPACING) {
    for (let y = -halfH; y <= halfH; y += SPACING) {
      const hole = isInHole(-halfW, y, z, rand)
      if (hole === true) continue
      if (hole === "debris") {
        pushCube(cubes, -halfW, y, z + rand() * 0.35, rand, true, true)
        continue
      }
      pushCube(cubes, -halfW, y, z, rand, z < backZ + SPACING * 3)
    }
  }

  for (let z = 0; z >= backZ; z -= SPACING) {
    for (let y = -halfH; y <= halfH; y += SPACING) {
      if (Math.abs(y) < 0.2 && z > backZ + SPACING * 4 && rand() < 0.18)
        continue
      const hole = isInHole(halfW, y, z, rand)
      if (hole === true) continue
      if (hole === "debris") {
        pushCube(cubes, halfW, y, z + rand() * 0.35, rand, true, true)
        continue
      }
      pushCube(cubes, halfW, y, z, rand, z < backZ + SPACING * 2)
    }
  }

  for (let y = -halfH; y <= halfH; y += SPACING) {
    for (let x = -halfW; x <= halfW; x += SPACING) {
      const hole = isInHole(x, y, backZ, rand)
      if (hole === true) continue
      if (hole === "debris") {
        pushCube(
          cubes,
          x + (rand() - 0.5) * 0.35,
          y + (rand() - 0.5) * 0.35,
          backZ + rand() * 0.8,
          rand,
          true,
          true
        )
        continue
      }

      const nearHole =
        Math.abs(x - HOLE_CX) < HOLE_W / 2 + SPACING * 1.5 &&
        Math.abs(y - HOLE_CY) < HOLE_H / 2 + SPACING * 1.5
      pushCube(cubes, x, y, backZ, rand, nearHole)
    }
  }

  for (let i = 0; i < 28; i++) {
    pushCube(
      cubes,
      HOLE_CX + (rand() - 0.5) * HOLE_W * 1.1,
      HOLE_CY + (rand() - 0.5) * HOLE_H * 1.1,
      backZ + 0.4 + rand() * 2.2,
      rand,
      true,
      true
    )
  }

  return cubes
}

export default function VoxelWall() {
  const meshRef = useRef<THREE.InstancedMesh>(null)
  const instances = useMemo(() => generateTunnel(), [])
  const dummy = useMemo(() => new THREE.Object3D(), [])

  useEffect(() => {
    const mesh = meshRef.current
    if (!mesh) return

    instances.forEach((cube, i) => {
      dummy.position.set(cube.x, cube.y, cube.z)
      dummy.rotation.set(cube.rotX, cube.rotY, cube.rotZ)
      dummy.scale.setScalar(cube.scale)
      dummy.updateMatrix()
      mesh.setMatrixAt(i, dummy.matrix)
    })
    mesh.instanceMatrix.needsUpdate = true
  }, [instances, dummy])

  useFrame(({ clock }) => {
    const mesh = meshRef.current
    if (!mesh) return

    const t = clock.elapsedTime

    instances.forEach((cube, i) => {
      const dx = LIGHT_TARGET.x - cube.x
      const dy = LIGHT_TARGET.y - cube.y
      const dz = LIGHT_TARGET.z - cube.z
      const dist = Math.hypot(dx, dy, dz) || 1

      const cycle = (t * cube.driftSpeed + cube.phase) % 1
      const eased = cycle * cycle * (3 - 2 * cycle)
      const suck = eased * eased
      const pull = suck * cube.maxDrift

      const px = cube.x + (dx / dist) * pull
      const py = cube.y + (dy / dist) * pull
      const pz = cube.z + (dz / dist) * pull

      const wobble = cube.jitter
        ? Math.sin(t * 1.4 + cube.phase) * 0.012 * (1 - suck * 0.6)
        : Math.sin(t * 0.6 + cube.phase) * 0.004 * (1 - suck * 0.4)

      dummy.position.set(
        px + Math.sin(t * 0.7 + cube.phase) * 0.003 * (1 - suck),
        py + wobble,
        pz
      )
      dummy.rotation.set(
        cube.rotX + suck * 0.5 + Math.sin(t + cube.phase) * 0.01,
        cube.rotY + suck * 0.8,
        cube.rotZ + suck * 0.4 + Math.cos(t * 1.1 + cube.phase) * 0.01
      )
      dummy.scale.setScalar(
        cube.scale * (1 - suck * (cube.jitter ? 0.55 : 0.3))
      )
      dummy.updateMatrix()
      mesh.setMatrixAt(i, dummy.matrix)
    })

    mesh.instanceMatrix.needsUpdate = true
  })

  return (
    <instancedMesh
      ref={meshRef}
      args={[undefined, undefined, instances.length]}
      castShadow
      receiveShadow
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#050505" roughness={0.98} metalness={0.02} />
    </instancedMesh>
  )
}

export const HOLE_CENTER = new THREE.Vector3(HOLE_CX, HOLE_CY, -ROOM_D - 0.35)

export const HOLE_SIZE = {
  width: HOLE_W * 0.95,
  height: HOLE_H * 0.95,
}

export const LIGHT_ORIGIN = new THREE.Vector3(
  HOLE_CX + 0.9,
  HOLE_CY + 1.4,
  -ROOM_D - 2.2
)

export const ROOM_DEPTH = ROOM_D


===== EXAMPLE: voxel-wall-demo =====
Title: Voxel Wall Demo

--- file: example/voxel-wall-demo.tsx ---
import VoxelWallScene from "@/registry/gammaui/voxel-wall/scene"

export default function VoxelWallDemo() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden rounded-xl">
      <VoxelWallScene />
    </div>
  )
}



===== COMPONENT: wave-path =====
Title: Wave Path
Description: A dynamic interactive SVG wave component that responds to pointer movement.

--- file: gammaui/wave-path.tsx ---
"use client"

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

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

type WWavePathProps = React.ComponentProps<"div">

export default function WavePath({ className, ...props }: WWavePathProps) {
  const path = useRef<SVGPathElement>(null)
  let progress = 0
  let x = 0.2
  let time = Math.PI / 2
  let reqId: number | null = null

  useEffect(() => {
    setPath(progress)
  }, [])

  const setPath = (progress: number) => {
    const width = window.innerWidth * 0.7
    if (path.current) {
      path.current.setAttributeNS(
        null,
        "d",
        `M0 100 Q${width * x} ${100 + progress * 0.6}, ${width} 100`
      )
    }
  }

  const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a

  const manageMouseEnter = () => {
    if (reqId) {
      cancelAnimationFrame(reqId)
      resetAnimation()
    }
  }

  const manageMouseMove = (e: React.MouseEvent) => {
    const { movementY, clientX } = e
    if (path.current) {
      const pathBound = path.current.getBoundingClientRect()
      x = (clientX - pathBound.left) / pathBound.width
      progress += movementY
      setPath(progress)
    }
  }

  const manageMouseLeave = () => {
    animateOut()
  }

  const animateOut = () => {
    const newProgress = progress * Math.sin(time)
    progress = lerp(progress, 0, 0.025)
    time += 0.2
    setPath(newProgress)
    if (Math.abs(progress) > 0.75) {
      reqId = requestAnimationFrame(animateOut)
    } else {
      resetAnimation()
    }
  }

  const resetAnimation = () => {
    time = Math.PI / 2
    progress = 0
  }

  return (
    <div className={cn("relative h-px w-[70vw]", className)} {...props}>
      <div
        onMouseEnter={manageMouseEnter}
        onMouseMove={manageMouseMove}
        onMouseLeave={manageMouseLeave}
        className="relative -top-5 z-10 h-10 w-full hover:-top-[150px] hover:h-[300px]"
      />
      <svg className="absolute -top-[100px] h-[300px] w-full">
        <path ref={path} className="fill-none stroke-current" strokeWidth={2} />
      </svg>
    </div>
  )
}


===== EXAMPLE: wave-path-demo =====
Title: Wave Path Demo

--- file: example/wave-path-demo.tsx ---
"use client"

import React from "react"

import { cn } from "@/lib/utils"
import WavePath from "@/registry/gammaui/wave-path"

export default function Demo() {
  return (
    <div className="relative flex w-full flex-col items-center justify-center">
      <div
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full",
          "bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]",
          "blur-[30px]"
        )}
      />

      <div className="flex w-full flex-col items-end">
        <WavePath className="mb-10" />
        <div className="flex w-full flex-col items-end">
          <div className="flex justify-end">
            <p className="text-muted-foreground mt-2 text-sm">World of Art</p>
            <p className="text-foreground/80 ml-8 w-3/4 text-2xl md:text-4xl">
              Experience the emotions of artists through their works. Let the
              beauty of art inspire you and fill your soul.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}



===== COMPONENT: wavy-text-block =====
Title: Wavy Text Block
Description: A scroll-triggered wavy text animation component that creates flowing motion effects using Framer Motion and scroll context.

--- file: gammaui/wavy-text-block.tsx ---
"use client"

import React from "react"
import {
  HTMLMotionProps,
  motion,
  MotionValue,
  SpringOptions,
  useMotionValue,
  useReducedMotion,
  useScroll,
  useSpring,
} from "motion/react"

interface WavyTextsConfig {
  baseOffsetFactor: number
  baseExtra: number
  baseAmplitude: number
  lengthEffect: number
  frequency: number
  progressScale: number
  phaseShiftDeg: number
  spring: SpringOptions
}
interface WavyBlockItemProps extends HTMLMotionProps<"div"> {
  index: number
  config?: WavyTextsConfig
}
interface WavyBlockContextValue {
  scrollYProgress: MotionValue<number>
  maxLen: number
}

const WavyBlockContext = React.createContext<WavyBlockContextValue | undefined>(
  undefined
)

function useWavyBlockContext() {
  const context = React.useContext(WavyBlockContext)
  if (context === undefined) {
    throw new Error("useWavyBlockContext must be used within a WavyBlock")
  }
  return context
}
const toRadian = (deg: number) => (deg * Math.PI) / 180

export function WavyBlockItem({
  index,
  config = {
    baseOffsetFactor: 0.1,
    baseExtra: 0,
    baseAmplitude: 160,
    lengthEffect: 0.6,
    frequency: 35,
    progressScale: 6,
    phaseShiftDeg: -180,
    spring: { damping: 22, stiffness: 300 },
  },
  style,
  ...props
}: WavyBlockItemProps) {
  const { scrollYProgress, maxLen } = useWavyBlockContext()
  const reducedMotion = useReducedMotion()
  const lengthFactor = Math.min(1, Math.max(0, maxLen / (maxLen || 1)))

  const [isMounted, setIsMounted] = React.useState<boolean>(false)

  const calculateX = React.useCallback(
    (p: number, windowWidth?: number) => {
      const phase = config.progressScale * p

      const width =
        windowWidth ??
        (typeof window !== "undefined" ? window.innerWidth : 1200)
      const baseOffset = config.baseOffsetFactor * width + config.baseExtra

      const amplitudeScale = 1 - config.lengthEffect * lengthFactor
      const amplitude = config.baseAmplitude * amplitudeScale

      const angle =
        toRadian(config.frequency * index) +
        phase +
        toRadian(config.phaseShiftDeg)

      return baseOffset + amplitude * Math.cos(angle)
    },
    [config, lengthFactor, index]
  )

  const initialX = calculateX(0, 1200)
  const rawX = useMotionValue(initialX)
  const springX = useSpring(rawX, config.spring)
  const x = reducedMotion ? rawX : springX

  React.useLayoutEffect(() => {
    setIsMounted(true)
  }, [])

  React.useEffect(() => {
    if (!scrollYProgress || !isMounted) return

    const unsub = scrollYProgress.onChange((p) => {
      const windowWidth =
        typeof window !== "undefined" ? window.innerWidth : 1200
      const newX = calculateX(p, windowWidth)
      rawX.set(newX)
    })

    return () => {
      if (unsub) unsub()
    }
  }, [scrollYProgress, rawX, calculateX, isMounted])

  return (
    <motion.div style={{ x, ...style }} suppressHydrationWarning {...props} />
  )
}

export function WavyBlock({
  offset = ["start end", "end start"],
  ...props
}: React.ComponentPropsWithRef<"div"> & { offset?: any }) {
  const containerRef = React.useRef<HTMLDivElement>(null)
  const { current } = containerRef

  const maxLen = React.useMemo(() => {
    if (!current?.children || current.children.length === 0) return 1
    const childrenArray = Array.from(current.children)
    return Math.max(
      ...childrenArray.map((child) => (child ? String(child).length : 0))
    )
  }, [current?.children])

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: offset,
  })
  return (
    <WavyBlockContext.Provider value={{ scrollYProgress, maxLen }}>
      <div ref={containerRef} {...props} />
    </WavyBlockContext.Provider>
  )
}


===== EXAMPLE: wavy-text-block-demo =====
Title: Wavy Text Block Demo

--- file: example/wavy-text-block-demo.tsx ---
import { WavyBlock, WavyBlockItem } from "@/registry/gammaui/wavy-text-block"

const titles = [
  "Flexible",
  "Animated",
  "Customizable",
  "Optimized",
  "Lightweight",
  "Responsive",
  "UI Blocks",
]

export default function DemoOne() {
  return (
    <main className="h-screen pt-60">
      <div className="w-full max-w-6xl">
        <WavyBlock className="flex flex-col items-start justify-start gap-6">
          {titles.map((title, index) => (
            <WavyBlockItem key={title} index={index}>
              <h2 className="text-[4rem] leading-none font-bold tracking-tighter whitespace-nowrap uppercase">
                {title}
              </h2>
            </WavyBlockItem>
          ))}
        </WavyBlock>
      </div>
    </main>
  )
}