===== COMPONENT: animated-badge =====
Title: animated-badge
Description: An animated badge component.

--- file: eldoraui/animated-badge.tsx ---
"use client"

import Link from "next/link"
import { ChevronRight } from "lucide-react"
import { motion } from "motion/react"

type AnimatedBadgeProps = {
  text?: string
  color?: string // hex or css color value
  href?: string // optional redirect link
}

function hexToRgba(hexColor: string, alpha: number): string {
  const hex = hexColor.replace("#", "")
  if (hex.length === 3) {
    const r = parseInt(hex[0] + hex[0], 16)
    const g = parseInt(hex[1] + hex[1], 16)
    const b = parseInt(hex[2] + hex[2], 16)
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
  if (hex.length === 6) {
    const r = parseInt(hex.substring(0, 2), 16)
    const g = parseInt(hex.substring(2, 4), 16)
    const b = parseInt(hex.substring(4, 6), 16)
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
  return hexColor
}

const AnimatedBadge = ({
  text = "Introducing Eldoraui",
  color = "#22d3ee",
  href,
}: AnimatedBadgeProps) => {
  const content = (
    <motion.div
      initial={false}
      whileInView={{
        opacity: 1,
        y: 0,
        filter: "blur(0px)",
      }}
      transition={{
        duration: 0.3,
        delay: 0.1,
        ease: "easeInOut",
      }}
      viewport={{ once: true }}
      className="group relative flex max-w-fit items-center justify-center gap-3 rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700 transition-colors dark:border-neutral-700/80 dark:bg-black dark:text-zinc-300"
    >
      <div className="pointer-events-none absolute inset-x-0 bottom-full h-20 w-[165px]">
        <svg
          className="h-full w-full"
          width="100%"
          height="100%"
          viewBox="0 0 50 50"
          fill="none"
        >
          {/* <g stroke="#fff" strokeWidth="0.4">
              <path d="M 69 49.8 h -30 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -30" />
            </g> */}
          <g mask="url(#ml-mask-1)">
            <circle
              className="multiline ml-light-1"
              cx="0"
              cy="0"
              r="20"
              fill="url(#ml-white-grad)"
            />
          </g>
          <defs>
            <mask id="ml-mask-1">
              <path
                d="M 69 49.8 h -30 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -30"
                strokeWidth="0.6"
                stroke="white"
              />
            </mask>
            <radialGradient id="ml-white-grad" fx="1">
              <stop offset="0%" stopColor={color} />
              <stop offset="20%" stopColor={color} />
              <stop offset="100%" stopColor="transparent" />
            </radialGradient>
          </defs>
        </svg>
      </div>
      <div
        className="relative flex h-1 w-1 items-center justify-center rounded-full"
        style={{ backgroundColor: hexToRgba(color, 0.4) }}
      >
        <div
          className="flex h-2 w-2 animate-ping items-center justify-center rounded-full"
          style={{ backgroundColor: color }}
        >
          <div
            className="flex h-2 w-2 animate-ping items-center justify-center rounded-full"
            style={{ backgroundColor: color }}
          ></div>
        </div>
        <div
          className="absolute top-1/2 left-1/2 flex h-1 w-1 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full"
          style={{ backgroundColor: hexToRgba(color, 0.8) }}
        ></div>
      </div>
      <div className="mx-2 h-4 w-px bg-neutral-300 dark:bg-neutral-600/80" />
      <span className="bg-clip-text text-xs font-medium">{text}</span>
      <ChevronRight className="ml-1 h-3.5 w-3.5 text-neutral-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-neutral-500" />
    </motion.div>
  )
  return (
    <>
      {href ? (
        <Link href={href} className="inline-block">
          {content}
        </Link>
      ) : (
        content
      )}
      <style>
        {`    
.multiline {
  offset-anchor: 10px 0px;
  animation: multiline-animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 3s;
}

.ml-light-1 {
  offset-path: path(
    "M 69 49.8 h -30 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -50"
  );
}

@keyframes multiline-animation-path {
  0% {
    offset-distance: 0%;
  }
  50% {
    offset-distance: 100%;
  }
  100% {
    offset-distance: 100%;
  }
}`}
      </style>
    </>
  )
}

export default AnimatedBadge


===== EXAMPLE: animated-badge-demo =====
Title: animated-badge-demo

--- file: example/animated-badge-demo.tsx ---
import AnimatedBadge from "@/registry/eldoraui/animated-badge"

export function AnimatedBadgeDemo() {
  return (
    <div className="relative" suppressHydrationWarning>
      <AnimatedBadge
        text="Introducing Eldora ui"
        color="#22d3ee"
        href="/docs/components/animated-badge"
      />
    </div>
  )
}



===== COMPONENT: animated-frameworks =====
Title: animated-frameworks
Description: An animated frameworks component.

--- file: eldoraui/animated-frameworks.tsx ---
"use client"

import { useEffect, useState } from "react"

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

type AnimatedFrameworksProps = {
  cardTitle?: string
  cardDescription?: string
}

const AnimatedFrameworks = ({
  cardTitle = "Universal Compatibility",
  cardDescription = "Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere.",
}: AnimatedFrameworksProps) => {
  return (
    <div
      className={cn(
        "relative",
        "flex flex-col justify-between",
        "h-[20rem] space-y-4",
        "rounded-md border bg-white shadow-sm",
        "dark:border-neutral-800/50 dark:bg-[#171717]",
        "border-neutral-200"
      )}
    >
      <FrameworkCard />
      <div className="px-4 pb-4">
        <div className="text-sm font-semibold text-neutral-900 dark:text-white">
          {cardTitle}
        </div>
        <div className="mt-2 text-xs text-neutral-600 dark:text-neutral-400">
          {cardDescription}
        </div>
      </div>
    </div>
  )
}

export default AnimatedFrameworks

const FrameworkCard = () => {
  const [nextJsTransform, setNextJsTransform] = useState("none")
  const [reactTransform, setReactTransform] = useState("none")
  const [htmlTransform, setHtmlTransform] = useState("none")

  useEffect(() => {
    const cycleAnimations = async () => {
      const upStyle = "translateY(-3.71px) rotateX(10.71deg) translateZ(20px)"
      const downStyle = "none"

      const transitionDuration = 1100

      const durationOfUpState = 1200
      const delayBetweenCards = 600

      while (true) {
        setReactTransform(upStyle)
        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
        setReactTransform(downStyle)
        await new Promise((resolve) =>
          setTimeout(resolve, transitionDuration + delayBetweenCards)
        )

        setNextJsTransform(upStyle)
        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
        setNextJsTransform(downStyle)
        await new Promise((resolve) =>
          setTimeout(resolve, transitionDuration + delayBetweenCards)
        )

        setHtmlTransform(upStyle)
        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
        setHtmlTransform(downStyle)
        await new Promise((resolve) =>
          setTimeout(resolve, transitionDuration + delayBetweenCards)
        )
      }
    }

    cycleAnimations()
  }, [])

  const cardClasses =
    "flex aspect-square items-center justify-center rounded-md border bg-gradient-to-b from-neutral-50 to-neutral-100 p-4 " +
    "dark:border-neutral-800 dark:from-[#272727] dark:to-[#3d3d3d] " +
    "border-neutral-300 shadow-[0_8px_30px_rgb(0,0,0,0.12)] " +
    "[@media(min-width:320px)]:h-20 [@media(min-width:500px)]:h-36 " +
    "transition-transform duration-1000 ease-out will-change-transform"

  return (
    <>
      <div
        className={cn(
          "relative",
          "flex flex-col items-center justify-center gap-1",
          "h-[14.5rem] w-full"
        )}
      >
        <div className="absolute flex h-full w-full items-center justify-center">
          <div className="h-full w-[15rem]">
            <svg
              className="h-full w-full"
              width="100%"
              height="100%"
              viewBox="0 0 100 100"
              fill="none"
            >
              <g
                stroke="currentColor"
                strokeWidth="0.1"
                className="text-neutral-400 dark:text-neutral-600"
              >
                <path d="M 1 0 v 5 q 0 5 5 5 h 39 q 5 0 5 5 v 71 q 0 5 5 5 h 39 q 5 0 5 5 v 5" />
              </g>
              <g mask="url(#framework-mask)">
                <circle
                  className="frameworkline framework-line"
                  cx="0"
                  cy="0"
                  r="12"
                  fill="url(#framework-blue-grad)"
                />
              </g>
              <defs>
                <mask id="framework-mask">
                  <path
                    d="M 1 0 v 5 q 0 5 5 5 h 39 q 5 0 5 5 v 71 q 0 5 5 5 h 39 q 5 0 5 5 v 5"
                    strokeWidth="0.3"
                    stroke="white"
                  />
                </mask>
                <radialGradient id="framework-blue-grad" fx="1">
                  <stop offset="0%" stopColor={"#3b82f6"} />
                  <stop offset="100%" stopColor="transparent" />
                </radialGradient>
              </defs>
            </svg>
          </div>
        </div>
        <div
          className={cn(
            "flex items-center justify-center gap-4",
            "[perspective:1000px] [transform-style:preserve-3d]"
          )}
        >
          <div className={cardClasses} style={{ transform: reactTransform }}>
            <Icons.apple className="size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9" />
          </div>
          <div className={cardClasses} style={{ transform: nextJsTransform }}>
            <Icons.gitHub className="size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9" />
          </div>
          <div className={cardClasses} style={{ transform: htmlTransform }}>
            <Icons.openai className="size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9" />
          </div>
        </div>

        <div className="absolute bottom-0 left-0 h-3 w-full bg-gradient-to-t from-white to-transparent dark:from-[#171717]" />
      </div>
    </>
  )
}


===== EXAMPLE: animated-frameworks-demo =====
Title: animated-frameworks-demo

--- file: example/animated-frameworks-demo.tsx ---
import AnimatedFrameworks from "@/registry/eldoraui/animated-frameworks"

export function AnimatedFrameworksExample() {
  return (
    <AnimatedFrameworks
      cardTitle="Universal Compatibility"
      cardDescription="Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere."
    />
  )
}



===== COMPONENT: animated-grid-pattern =====
Title: animated-grid-pattern
Description: An animated grid pattern component.

--- file: eldoraui/animated-grid-pattern.tsx ---
"use client"

import React, { useEffect, useMemo, useRef, useState } from "react"
import { Canvas, useFrame, useThree } from "@react-three/fiber"
import { useTheme } from "next-themes"
import { ExtrudeGeometry, Shape } from "three"
import * as THREE from "three"

interface GridProps {
  position: [number, number, number]
  width?: number
  length?: number
  cornerRadius?: number
  gridPosition: [number, number]
  hoveredGrid: [number, number] | null
  rippleScale?: number
  rippleRadius?: number
}

const Grid = ({
  position,
  width = 4,
  length = 4,
  cornerRadius = 2,
  gridPosition,
  hoveredGrid,
  rippleScale = 0.3,
  rippleRadius = 3,
}: GridProps) => {
  const meshRef = useRef<THREE.Mesh>(null)
  const [currentScale, setCurrentScale] = useState(1)
  const { theme } = useTheme()

  const gridColor = theme === "dark" ? "#232323" : "#e5e7eb"

  const geometry = useMemo(() => {
    const shape = new Shape()
    const angleStep = Math.PI * 0.5
    const radius = cornerRadius

    const halfWidth = width / 2
    const halfLength = length / 2

    shape.absarc(
      halfWidth - radius,
      halfLength - radius,
      radius,
      angleStep * 0,
      angleStep * 1
    )
    shape.absarc(
      -halfWidth + radius,
      halfLength - radius,
      radius,
      angleStep * 1,
      angleStep * 2
    )
    shape.absarc(
      -halfWidth + radius,
      -halfLength + radius,
      radius,
      angleStep * 2,
      angleStep * 3
    )
    shape.absarc(
      halfWidth - radius,
      -halfLength + radius,
      radius,
      angleStep * 3,
      angleStep * 4
    )

    const extrudeSettings = {
      depth: 0.3,
      bevelEnabled: true,
      bevelThickness: 0.05,
      bevelSize: 0.05,
      bevelSegments: 20,
      curveSegments: 20,
    }

    const geometry = new ExtrudeGeometry(shape, extrudeSettings)
    geometry.center()

    return geometry
  }, [width, length, cornerRadius])

  useEffect(() => {
    return () => {
      geometry.dispose()
    }
  }, [geometry])

  useFrame(() => {
    if (meshRef.current) {
      let targetScale = 1

      const isThisGridHovered =
        hoveredGrid &&
        gridPosition[0] === hoveredGrid[0] &&
        gridPosition[1] === hoveredGrid[1]

      if (isThisGridHovered) {
        targetScale = 5
      } else if (hoveredGrid) {
        const dx = gridPosition[0] - hoveredGrid[0]
        const dz = gridPosition[1] - hoveredGrid[1]
        const distance = Math.sqrt(dx * dx + dz * dz)

        if (distance <= rippleRadius && distance > 0) {
          const falloff = Math.max(0, 1 - distance / rippleRadius)
          const rippleEffect = falloff * rippleScale
          targetScale = 1 + rippleEffect * 3
        }
      }

      const lerpFactor = 0.1
      const newScale = currentScale + (targetScale - currentScale) * lerpFactor
      setCurrentScale(newScale)

      meshRef.current.scale.z = newScale
    }
  })

  useEffect(() => {
    if (meshRef.current) {
      meshRef.current.userData.gridPosition = gridPosition
    }
  }, [gridPosition])

  return (
    <mesh
      ref={meshRef}
      geometry={geometry}
      position={position}
      rotation={[Math.PI / 2, 0, 0]}
    >
      <meshPhysicalMaterial
        color={gridColor}
        roughness={0.5}
        metalness={1}
        clearcoat={1}
        clearcoatRoughness={0}
        clearcoatNormalScale={1}
        clearcoatNormalMap={null}
      />
    </mesh>
  )
}

function HoverDetector({
  onHoverChange,
}: {
  gridSize: number
  spacingX: number
  spacingZ: number
  onHoverChange: (hoveredGrid: [number, number] | null) => void
}) {
  const { camera, raycaster, pointer, scene } = useThree()

  useFrame(() => {
    raycaster.setFromCamera(pointer, camera)

    const intersects = raycaster.intersectObjects(scene.children, true)

    if (intersects.length > 0) {
      for (const intersect of intersects) {
        const mesh = intersect.object
        if (mesh.userData && mesh.userData.gridPosition) {
          const gridPos = mesh.userData.gridPosition as [number, number]
          onHoverChange(gridPos)
          return
        }
      }
    }

    onHoverChange(null)
  })

  return null
}

interface GridOfGridesProps {
  gridSize: number
  gridWidth: number
  gridLength: number
  gap: number
  rippleScale: number
  rippleRadius: number
  cornerRadius: number
}

function GridOfGrides({
  gridSize,
  gridWidth,
  gridLength,
  gap,
  rippleScale,
  rippleRadius,
  cornerRadius,
}: GridOfGridesProps) {
  const spacingX = gridWidth + gap
  const spacingZ = gridLength + gap

  const [hoveredGrid, setHoveredGrid] = useState<[number, number] | null>(null)

  const Grides = []

  for (let x = 0; x < gridSize; x++) {
    for (let z = 0; z < gridSize; z++) {
      const posX = (x - (gridSize - 1) / 2) * spacingX
      const posZ = (z - (gridSize - 1) / 2) * spacingZ

      Grides.push(
        <Grid
          key={`${x}-${z}`}
          position={[posX, -0.85, posZ]}
          width={gridWidth}
          length={gridLength}
          cornerRadius={cornerRadius}
          gridPosition={[x, z]}
          hoveredGrid={hoveredGrid}
          rippleScale={rippleScale}
          rippleRadius={rippleRadius}
        />
      )
    }
  }

  return (
    <>
      <HoverDetector
        gridSize={gridSize}
        spacingX={spacingX}
        spacingZ={spacingZ}
        onHoverChange={setHoveredGrid}
      />
      {Grides}
    </>
  )
}

interface AnimatedGridPatternProps {
  gridSize?: number
  gridWidth?: number
  gridLength?: number
  gap?: number
  rippleScale?: number
  rippleRadius?: number
  cornerRadius?: number
  cameraPosition?: [number, number, number]
  cameraRotation?: [number, number, number]
  fov?: number
}

export function AnimatedGridPattern({
  gridSize = 10,
  gridWidth = 4,
  gridLength = 4,
  gap = 0.05,
  rippleScale = 2.5,
  rippleRadius = 2,
  cornerRadius = 0.8,
  cameraPosition = [-9.31, 12, 24.72],
  cameraRotation = [-0.65, -0.2, -0.13],
  fov = 35,
}: AnimatedGridPatternProps) {
  return (
    <div className="relative z-0 h-full w-full bg-gray-50 dark:bg-black">
      <Canvas
        camera={{
          position: cameraPosition,
          rotation: cameraRotation,
          fov: fov,
        }}
      >
        <ambientLight intensity={1} />

        <directionalLight position={[10, 15, 10]} intensity={10} castShadow />

        <directionalLight
          position={[-10, 10, -5]}
          intensity={10}
          color="#ffffff"
        />

        <directionalLight
          position={[5, -10, 15]}
          intensity={5}
          color="#f0f8ff"
        />

        <pointLight position={[0, 20, 3]} intensity={2} distance={50} />

        <pointLight
          position={[15, 5, 15]}
          intensity={1.5}
          distance={40}
          color="#ffffff"
        />

        <GridOfGrides
          gridSize={gridSize}
          gridWidth={gridWidth}
          gridLength={gridLength}
          gap={gap}
          rippleScale={rippleScale}
          rippleRadius={rippleRadius}
          cornerRadius={cornerRadius}
        />
      </Canvas>
    </div>
  )
}


===== EXAMPLE: animated-grid-pattern-demo =====
Title: animated-grid-pattern-demo

--- file: example/animated-grid-pattern-demo.tsx ---
import { AnimatedGridPattern } from "@/registry/eldoraui/animated-grid-pattern"

export function AnimatedGridPatternDemo() {
  return (
    <div className="bg-background relative mx-auto h-[500px] w-full overflow-hidden rounded-lg border">
      <AnimatedGridPattern
        gridSize={10}
        gridWidth={4}
        gridLength={4}
        gap={0.05}
        rippleScale={2.5}
        rippleRadius={2}
        cornerRadius={0.8}
        cameraPosition={[-9.31, 12, 11.5]}
        cameraRotation={[-0.65, -0.2, -0.13]}
        fov={60}
      />
    </div>
  )
}



===== COMPONENT: animated-list =====
Title: animated-list
Description: An animated list component.

--- file: eldoraui/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"

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

type 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

  const itemVariants = {
    initial: {
      scale: 1 + index * scaleFactor,
      y: reverseIndex * stackGap,
      opacity: isVisible ? 1 : 0,
    },
    column: {
      scale: 1,
      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/eldoraui/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={85}
        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-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: animated-shiny-button =====
Title: animated-shiny-button
Description: An animated shiny button component.

--- file: eldoraui/animated-shiny-button.tsx ---
"use client"

import type React from "react"
import { ChevronRight } from "lucide-react"

interface AnimatedShinyButtonProps {
  children: React.ReactNode
  className?: string
  url?: string
}

export function AnimatedShinyButton({
  children,
  className = "",
  url,
}: AnimatedShinyButtonProps) {
  return (
    <>
      <style jsx>{`
        @import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap");

        @property --gradient-angle {
          syntax: "<angle>";
          initial-value: 0deg;
          inherits: false;
        }

        @property --gradient-angle-offset {
          syntax: "<angle>";
          initial-value: 0deg;
          inherits: false;
        }

        @property --gradient-percent {
          syntax: "<percentage>";
          initial-value: 5%;
          inherits: false;
        }

        @property --gradient-shine {
          syntax: "<color>";
          initial-value: white;
          inherits: false;
        }

        .shiny-cta,
        .shiny-cta-link {
          --shiny-cta-bg: #000000;
          --shiny-cta-bg-subtle: #1a1818;
          --shiny-cta-fg: #ffffff;
          --shiny-cta-highlight: #67e8f9;
          --shiny-cta-highlight-subtle: #06b6d4;
          --animation: gradient-angle linear infinite;
          --duration: 3s;
          --shadow-size: 2px;
          --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

          isolation: isolate;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          outline-offset: 4px;
          padding: 0.75rem 1.5rem;
          font-family: "Inter", sans-serif;
          font-size: 1rem;
          line-height: 1.2;
          font-weight: 500;
          border: 1px solid transparent;
          border-radius: 0.5rem;
          color: var(--shiny-cta-fg);
          background:
            linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
              padding-box,
            conic-gradient(
                from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                transparent,
                var(--shiny-cta-highlight) var(--gradient-percent),
                var(--gradient-shine) calc(var(--gradient-percent) * 2),
                var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
                transparent calc(var(--gradient-percent) * 4)
              )
              border-box;
          box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
          transition: var(--transition);
          transition-property:
            --gradient-angle-offset, --gradient-percent, --gradient-shine;
        }

        /* Link-specific styles */
        .shiny-cta-link {
          display: inline-block;
          text-decoration: none;
        }

        .shiny-cta::before,
        .shiny-cta::after,
        .shiny-cta span::before,
        .shiny-cta-link::before,
        .shiny-cta-link::after,
        .shiny-cta-link span::before {
          content: "";
          pointer-events: none;
          position: absolute;
          inset-inline-start: 50%;
          inset-block-start: 50%;
          translate: -50% -50%;
          z-index: -1;
        }

        .shiny-cta:active,
        .shiny-cta-link:active {
          translate: 0 1px;
        }

        /* Dots pattern */
        .shiny-cta::before,
        .shiny-cta-link::before {
          --size: calc(100% - var(--shadow-size) * 3);
          --position: 2px;
          --space: calc(var(--position) * 2);
          width: var(--size);
          height: var(--size);
          background: radial-gradient(
              circle at var(--position) var(--position),
              white calc(var(--position) / 4),
              transparent 0
            )
            padding-box;
          background-size: var(--space) var(--space);
          background-repeat: space;
          mask-image: conic-gradient(
            from calc(var(--gradient-angle) + 45deg),
            black,
            transparent 10% 90%,
            black
          );
          border-radius: 0.5rem;
          opacity: 0.4;
          z-index: -1;
        }

        /* Inner shimmer */
        .shiny-cta::after,
        .shiny-cta-link::after {
          --animation: shimmer linear infinite;
          width: 100%;
          aspect-ratio: 1;
          background: linear-gradient(
            -50deg,
            transparent,
            var(--shiny-cta-highlight),
            transparent
          );
          mask-image: radial-gradient(circle at bottom, transparent 40%, black);
          opacity: 0.6;
        }

        .shiny-cta span,
        .shiny-cta-link span {
          z-index: 1;
        }

        .shiny-cta span::before,
        .shiny-cta-link span::before {
          --size: calc(100% + 1rem);
          width: var(--size);
          height: var(--size);
          box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
          opacity: 0;
          transition: opacity var(--transition);
          animation: calc(var(--duration) * 1.5) breathe linear infinite;
        }

        /* Animate */
        .shiny-cta,
        .shiny-cta::before,
        .shiny-cta::after,
        .shiny-cta-link,
        .shiny-cta-link::before,
        .shiny-cta-link::after {
          animation:
            var(--animation) var(--duration),
            var(--animation) calc(var(--duration) / 0.4) reverse paused;
          animation-composition: add;
        }

        .shiny-cta:is(:hover, :focus-visible),
        .shiny-cta-link:is(:hover, :focus-visible) {
          --gradient-percent: 20%;
          --gradient-angle-offset: 95deg;
          --gradient-shine: var(--shiny-cta-highlight-subtle);
        }

        .shiny-cta:is(:hover, :focus-visible),
        .shiny-cta:is(:hover, :focus-visible)::before,
        .shiny-cta:is(:hover, :focus-visible)::after,
        .shiny-cta-link:is(:hover, :focus-visible),
        .shiny-cta-link:is(:hover, :focus-visible)::before,
        .shiny-cta-link:is(:hover, :focus-visible)::after {
          animation-play-state: running;
        }

        .shiny-cta:is(:hover, :focus-visible) span::before,
        .shiny-cta-link:is(:hover, :focus-visible) span::before {
          opacity: 1;
        }

        @keyframes gradient-angle {
          to {
            --gradient-angle: 360deg;
          }
        }

        @keyframes shimmer {
          to {
            rotate: 360deg;
          }
        }

        @keyframes breathe {
          from,
          to {
            scale: 1;
          }
          50% {
            scale: 1.2;
          }
        }

        /* Light theme overrides */
        @media (prefers-color-scheme: light) {
          .shiny-cta,
          .shiny-cta-link {
            --shiny-cta-bg: #ffffff;
            --shiny-cta-bg-subtle: #f0f0f0;
            --shiny-cta-fg: #000000;
            --shiny-cta-highlight: #06b6d4;
            --shiny-cta-highlight-subtle: #0891b2;
          }
        }
      `}</style>

      {url ? (
        <a href={url} className={`shiny-cta-link group ${className}`}>
          <span className="flex items-center">
            {children}
            <ChevronRight className="ml-1 size-4 shrink-0 transition-all duration-300 ease-out group-hover:translate-x-1" />
          </span>
        </a>
      ) : (
        <button className={`shiny-cta group ${className}`}>
          <span className="flex items-center">
            {children}
            <ChevronRight className="ml-1 size-4 shrink-0 transition-all duration-300 ease-out group-hover:translate-x-1" />
          </span>
        </button>
      )}
    </>
  )
}


===== EXAMPLE: animated-shiny-button-demo =====
Title: animated-shiny-button-demo

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

import { AnimatedShinyButton } from "@/registry/eldoraui/animated-shiny-button"

export function AnimatedShinyButtonDemo() {
  return (
    <AnimatedShinyButton url="/docs/components/animated-shiny-button">
      Get Started
    </AnimatedShinyButton>
  )
}



===== COMPONENT: blur-in-text =====
Title: blur-in-text
Description: A blur in text component.

--- file: eldoraui/blur-in-text.tsx ---
"use client"

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

interface BlurInTextProps {
  text?: string
  className?: string
}

export const BlurInText: React.FC<BlurInTextProps> = ({
  text = "",
  className = "",
}) => {
  const variants1 = {
    hidden: { filter: "blur(10px)", opacity: 0 },
    visible: { filter: "blur(0px)", opacity: 1 },
  }

  return (
    <motion.h1
      initial="hidden"
      animate="visible"
      transition={{ duration: 1 }}
      variants={variants1}
      className={clsx(
        "font-display text-center font-bold drop-shadow-sm",
        "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
        "tracking-[-0.02em]",
        "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
        className
      )}
    >
      {text}
    </motion.h1>
  )
}


===== EXAMPLE: blur-in-text-demo =====
Title: blur-in-text-demo

--- file: example/blur-in-text-demo.tsx ---
import { BlurInText } from "@/registry/eldoraui/blur-in-text"

export function BlurInTextDemo() {
  return (
    <BlurInText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Blur In"
    />
  )
}



===== COMPONENT: browser =====
Title: browser
Description: A browser SVG component.

--- file: eldoraui/browser.tsx ---
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import Image from "next/image"
import {
  Battery,
  BookmarkIcon,
  ChevronLeft,
  ChevronRight,
  Download,
  Globe,
  History,
  Home,
  Lock,
  Maximize2,
  Minimize2,
  MoreHorizontal,
  Plus,
  RotateCcw,
  Search,
  Settings,
  Shield,
  Square,
  Star,
  StarOff,
  Volume2,
  Wifi,
  X,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

interface Tab {
  id: string
  title: string
  url: string
  favicon?: string
  isActive: boolean
  isLoading: boolean
}

interface Bookmark {
  id: string
  title: string
  url: string
  favicon?: string
}

interface HistoryItem {
  id: string
  title: string
  url: string
  timestamp: Date
  favicon?: string
}

interface BrowserProps {
  image?: string
  initialUrl?: string
  initialTabs?: Partial<Tab>[]
  theme?: "light" | "dark" | "system"
  showWindowControls?: boolean
  showBookmarksBar?: boolean
  showStatusBar?: boolean
  className?: string
  enableTabManagement?: boolean
  enableBookmarks?: boolean
  enableHistory?: boolean
  enableDownloads?: boolean
  enableSettings?: boolean
  maxTabs?: number
  customBookmarks?: Bookmark[]
  customHistory?: HistoryItem[]
  onNavigate?: (url: string, tabId: string) => void
  onTabCreate?: (tab: Tab) => void
  onTabClose?: (tabId: string) => void
  onTabSwitch?: (tabId: string) => void
  onBookmarkToggle?: (url: string, isBookmarked: boolean) => void
  onDownload?: (url: string) => void
  renderContent?: (url: string, isLoading: boolean) => React.ReactNode
  customFavicons?: Record<string, string>
  openLinksInNewTab?: boolean
  autoFocusAddressBar?: boolean
  simulateLoading?: boolean
  loadingDuration?: number
}

export function Browser({
  image = "/placeholder.svg",
  initialUrl = "https://eldoraui.site",
  initialTabs,
  showWindowControls = false,
  showBookmarksBar = false,
  showStatusBar = true,
  className,
  enableTabManagement = false,
  enableBookmarks = true,
  enableHistory = true,
  enableDownloads = true,
  enableSettings = true,
  maxTabs = 10,
  customBookmarks,
  customHistory,
  onNavigate,
  onTabCreate,
  onTabClose,
  onTabSwitch,
  onBookmarkToggle,
  onDownload,
  renderContent,
  autoFocusAddressBar = false,
  simulateLoading = true,
  loadingDuration = 1000,
}: BrowserProps = {}) {
  const [tabs, setTabs] = useState<Tab[]>(() => {
    if (initialTabs && initialTabs.length > 0) {
      return initialTabs.map((tab, index) => ({
        id: tab.id || Date.now().toString() + index,
        title: tab.title || "New Tab",
        url: tab.url || initialUrl,
        favicon: tab.favicon,
        isActive: index === 0,
        isLoading: false,
      }))
    }
    return [
      {
        id: "1",
        title: "New Tab",
        url: initialUrl,
        isActive: true,
        isLoading: false,
      },
    ]
  })

  const [currentUrl, setCurrentUrl] = useState(initialUrl)
  const [inputUrl, setInputUrl] = useState(initialUrl)
  const [isSecure, setIsSecure] = useState(true)
  const [canGoBack, setCanGoBack] = useState(false)
  const [canGoForward, setCanGoForward] = useState(false)
  const [isBookmarked, setIsBookmarked] = useState(false)
  const [showBookmarks, setShowBookmarks] = useState(false)
  const [showHistory, setShowHistory] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [downloadProgress, setDownloadProgress] = useState(0)
  const [isDownloading, setIsDownloading] = useState(false)

  const [bookmarks] = useState<Bookmark[]>(
    customBookmarks || [
      {
        id: "1",
        title: "Google",
        url: "https://www.google.com",
        favicon: "🔍",
      },
      { id: "2", title: "GitHub", url: "https://github.com", favicon: "🐙" },
      {
        id: "3",
        title: "Stack Overflow",
        url: "https://stackoverflow.com",
        favicon: "📚",
      },
      {
        id: "4",
        title: "MDN Web Docs",
        url: "https://developer.mozilla.org",
        favicon: "📖",
      },
    ]
  )

  const [history] = useState<HistoryItem[]>(
    customHistory || [
      {
        id: "1",
        title: "Google",
        url: "https://www.google.com",
        timestamp: new Date(Date.now() - 3600000),
        favicon: "🔍",
      },
      {
        id: "2",
        title: "GitHub",
        url: "https://github.com",
        timestamp: new Date(Date.now() - 7200000),
        favicon: "🐙",
      },
      {
        id: "3",
        title: "Stack Overflow",
        url: "https://stackoverflow.com",
        timestamp: new Date(Date.now() - 10800000),
        favicon: "📚",
      },
    ]
  )

  const activeTab = tabs.find((tab) => tab.isActive)

  useEffect(() => {
    if (autoFocusAddressBar) {
      const addressBar = document.querySelector(
        'input[placeholder*="Search or enter address"]'
      ) as HTMLInputElement
      if (addressBar) {
        addressBar.focus()
      }
    }
  }, [autoFocusAddressBar])

  const createNewTab = () => {
    if (tabs.length >= maxTabs) return

    const newTab: Tab = {
      id: Date.now().toString(),
      title: "New Tab",
      url: "about:blank",
      isActive: true,
      isLoading: false,
    }

    setTabs((prev) =>
      prev.map((tab) => ({ ...tab, isActive: false })).concat(newTab)
    )
    setCurrentUrl("about:blank")
    setInputUrl("")

    onTabCreate?.(newTab)
  }

  const closeTab = (tabId: string) => {
    if (tabs.length === 1) return

    const tabIndex = tabs.findIndex((tab) => tab.id === tabId)
    const wasActive = tabs[tabIndex].isActive

    const newTabs = tabs.filter((tab) => tab.id !== tabId)

    if (wasActive && newTabs.length > 0) {
      const nextActiveIndex = Math.min(tabIndex, newTabs.length - 1)
      newTabs[nextActiveIndex].isActive = true
      setCurrentUrl(newTabs[nextActiveIndex].url)
      setInputUrl(newTabs[nextActiveIndex].url)
    }

    setTabs(newTabs)

    onTabClose?.(tabId)
  }

  const switchTab = (tabId: string) => {
    const newTabs = tabs.map((tab) => ({
      ...tab,
      isActive: tab.id === tabId,
    }))

    const activeTab = newTabs.find((tab) => tab.isActive)
    if (activeTab) {
      setCurrentUrl(activeTab.url)
      setInputUrl(activeTab.url)
    }

    setTabs(newTabs)

    onTabSwitch?.(tabId)
  }

  const navigateToUrl = (url: string) => {
    if (
      !url.startsWith("http://") &&
      !url.startsWith("https://") &&
      !url.startsWith("about:")
    ) {
      url = `https://www.google.com/search?q=${encodeURIComponent(url)}`
    }

    setCurrentUrl(url)
    setInputUrl(url)
    setIsSecure(url.startsWith("https://"))

    setTabs((prev) =>
      prev.map((tab) =>
        tab.isActive
          ? {
              ...tab,
              url,
              title: new URL(url).hostname || "New Tab",
              isLoading: simulateLoading,
            }
          : tab
      )
    )

    const activeTabId = tabs.find((tab) => tab.isActive)?.id || ""
    onNavigate?.(url, activeTabId)

    if (simulateLoading) {
      setTimeout(() => {
        setTabs((prev) =>
          prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab))
        )
      }, loadingDuration)
    }
  }

  const handleUrlSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    navigateToUrl(inputUrl)
  }

  const goBack = () => {
    setCanGoForward(true)
  }

  const goForward = () => {
    setCanGoBack(true)
  }

  const refresh = () => {
    setTabs((prev) =>
      prev.map((tab) => (tab.isActive ? { ...tab, isLoading: true } : tab))
    )

    setTimeout(() => {
      setTabs((prev) =>
        prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab))
      )
    }, 1000)
  }

  const toggleBookmark = () => {
    const newBookmarkedState = !isBookmarked
    setIsBookmarked(newBookmarkedState)

    onBookmarkToggle?.(currentUrl, newBookmarkedState)
  }

  const simulateDownload = () => {
    onDownload?.(currentUrl)

    if (!enableDownloads) return

    setIsDownloading(true)
    setDownloadProgress(0)

    const interval = setInterval(() => {
      setDownloadProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          setIsDownloading(false)
          return 0
        }
        return prev + 10
      })
    }, 200)
  }

  return (
    <div
      className={cn(
        "bg-background border-border flex h-full flex-col overflow-hidden rounded-lg border",
        isFullscreen && "fixed inset-0 z-50 rounded-none border-0",
        className
      )}
    >
      {showWindowControls && (
        <div className="bg-muted/50 border-border flex items-center justify-between border-b px-4 py-2">
          <div className="flex items-center gap-2">
            <div className="flex gap-2">
              <div className="h-3 w-3 rounded-full bg-red-500"></div>
              <div className="h-3 w-3 rounded-full bg-yellow-500"></div>
              <div className="h-3 w-3 rounded-full bg-green-500"></div>
            </div>
          </div>

          <div className="text-muted-foreground flex items-center gap-2 text-sm">
            <Wifi className="h-4 w-4" />
            <Volume2 className="h-4 w-4" />
            <Battery className="h-4 w-4" />
            <span>
              {new Date().toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit",
              })}
            </span>
          </div>

          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsFullscreen(!isFullscreen)}
            >
              {isFullscreen ? (
                <Minimize2 className="h-4 w-4" />
              ) : (
                <Maximize2 className="h-4 w-4" />
              )}
            </Button>
            <Button variant="ghost" size="sm">
              <Square className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="sm">
              <X className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      {enableTabManagement && (
        <div className="bg-muted/30 border-border flex items-center border-b">
          <div className="flex flex-1 items-center overflow-x-auto">
            {tabs.map((tab) => (
              <div
                key={tab.id}
                className={cn(
                  "border-border flex max-w-64 min-w-0 cursor-pointer items-center gap-2 border-r px-4 py-2",
                  tab.isActive ? "bg-background" : "hover:bg-muted/50"
                )}
                onClick={() => switchTab(tab.id)}
              >
                <div className="flex min-w-0 flex-1 items-center gap-2">
                  {tab.isLoading ? (
                    <div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" />
                  ) : (
                    <Globe className="text-muted-foreground h-4 w-4 flex-shrink-0" />
                  )}
                  <span className="truncate text-sm">{tab.title}</span>
                </div>
                {tabs.length > 1 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="hover:bg-muted h-4 w-4 p-0"
                    onClick={(e) => {
                      e.stopPropagation()
                      closeTab(tab.id)
                    }}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                )}
              </div>
            ))}
          </div>

          <Button
            variant="ghost"
            size="sm"
            onClick={createNewTab}
            className="border-border border-l px-3 py-2"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      )}

      <div className="bg-background border-border flex items-center gap-2 border-b p-2">
        <div className="flex items-center gap-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={goBack}
            disabled={!canGoBack}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={goForward}
            disabled={!canGoForward}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm" onClick={refresh}>
            <RotateCcw className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => navigateToUrl("about:home")}
          >
            <Home className="h-4 w-4" />
          </Button>
        </div>

        <form onSubmit={handleUrlSubmit} className="flex flex-1 items-center">
          <div className="relative flex flex-1 items-center">
            <div className="absolute left-3 flex items-center gap-2">
              {isSecure ? (
                <Lock className="h-4 w-4 text-green-600" />
              ) : (
                <Shield className="text-muted-foreground h-4 w-4" />
              )}
            </div>
            <Input
              value={inputUrl}
              onChange={(e) => setInputUrl(e.target.value)}
              placeholder="Search or enter address"
              className="pr-4 pl-10"
            />
          </div>
        </form>

        <div className="flex items-center gap-1">
          {enableBookmarks && (
            <Button variant="ghost" size="sm" onClick={toggleBookmark}>
              {isBookmarked ? (
                <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
              ) : (
                <StarOff className="h-4 w-4" />
              )}
            </Button>
          )}
          {enableDownloads && (
            <Button variant="ghost" size="sm" onClick={simulateDownload}>
              <Download className="h-4 w-4" />
            </Button>
          )}
          {enableSettings && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setShowSettings(!showSettings)}
            >
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          )}
        </div>
      </div>

      {showBookmarksBar && enableBookmarks && (
        <div className="bg-muted/20 border-border flex items-center gap-2 border-b px-4 py-1 text-sm">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setShowBookmarks(!showBookmarks)}
            className="text-xs"
          >
            <BookmarkIcon className="mr-1 h-3 w-3" />
            Bookmarks
          </Button>
          {enableHistory && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setShowHistory(!showHistory)}
              className="text-xs"
            >
              <History className="mr-1 h-3 w-3" />
              History
            </Button>
          )}
          <Separator orientation="vertical" className="h-4" />
          {bookmarks.slice(0, 4).map((bookmark) => (
            <Button
              key={bookmark.id}
              variant="ghost"
              size="sm"
              onClick={() => navigateToUrl(bookmark.url)}
              className="text-xs"
            >
              <span className="mr-1">{bookmark.favicon}</span>
              {bookmark.title}
            </Button>
          ))}
        </div>
      )}

      {isDownloading && enableDownloads && (
        <div className="border-border border-b bg-blue-50 px-4 py-2 dark:bg-blue-950">
          <div className="flex items-center gap-2 text-sm">
            <Download className="h-4 w-4" />
            <span>Downloading file...</span>
            <div className="bg-muted h-2 flex-1 rounded-full">
              <div
                className="h-2 rounded-full bg-blue-600 transition-all duration-200"
                style={{ width: `${downloadProgress}%` }}
              />
            </div>
            <span>{downloadProgress}%</span>
          </div>
        </div>
      )}

      <div className="flex flex-1 overflow-hidden">
        {showBookmarks && enableBookmarks && (
          <Card className="m-2 mr-0 w-80 overflow-y-auto p-4">
            <h3 className="mb-4 flex items-center gap-2 font-semibold">
              <BookmarkIcon className="h-4 w-4" />
              Bookmarks
            </h3>
            <div className="space-y-2">
              {bookmarks.map((bookmark) => (
                <div
                  key={bookmark.id}
                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded p-2"
                  onClick={() => navigateToUrl(bookmark.url)}
                >
                  <span>{bookmark.favicon}</span>
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-medium">
                      {bookmark.title}
                    </div>
                    <div className="text-muted-foreground truncate text-xs">
                      {bookmark.url}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {showHistory && enableHistory && (
          <Card className="m-2 mr-0 w-80 overflow-y-auto p-4">
            <h3 className="mb-4 flex items-center gap-2 font-semibold">
              <History className="h-4 w-4" />
              History
            </h3>
            <div className="space-y-2">
              {history.map((item) => (
                <div
                  key={item.id}
                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded p-2"
                  onClick={() => navigateToUrl(item.url)}
                >
                  <span>{item.favicon}</span>
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-medium">
                      {item.title}
                    </div>
                    <div className="text-muted-foreground truncate text-xs">
                      {item.url}
                    </div>
                    <div className="text-muted-foreground text-xs">
                      {item.timestamp.toLocaleTimeString()}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {showSettings && enableSettings && (
          <Card className="m-2 mr-0 w-80 overflow-y-auto p-4">
            <h3 className="mb-4 flex items-center gap-2 font-semibold">
              <Settings className="h-4 w-4" />
              Settings
            </h3>
            <div className="space-y-4">
              <div>
                <h4 className="mb-2 font-medium">Privacy & Security</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center justify-between">
                    <span>Block pop-ups</span>
                    <Badge variant="secondary">On</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Safe browsing</span>
                    <Badge variant="secondary">Enhanced</Badge>
                  </div>
                </div>
              </div>
              <Separator />
              <div>
                <h4 className="mb-2 font-medium">Appearance</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center justify-between">
                    <span>Theme</span>
                    <Badge variant="outline">System</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Zoom</span>
                    <Badge variant="outline">100%</Badge>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        )}

        <div className="dark:bg-muted/20 border-border m-2 flex flex-1 flex-col overflow-hidden rounded-md border bg-white">
          {renderContent ? (
            renderContent(currentUrl, activeTab?.isLoading || false)
          ) : currentUrl === "about:blank" || currentUrl === "" ? (
            <div className="flex flex-1 items-center justify-center">
              <div className="space-y-4 text-center">
                <Search className="text-muted-foreground mx-auto h-16 w-16" />
                <h2 className="text-2xl font-semibold">New Tab</h2>
                <p className="text-muted-foreground">
                  Start by searching or entering a web address
                </p>
                <div className="mt-8 grid grid-cols-2 gap-4">
                  {bookmarks.slice(0, 4).map((bookmark) => (
                    <Card
                      key={bookmark.id}
                      className="hover:bg-muted/50 cursor-pointer p-4 transition-colors"
                      onClick={() => navigateToUrl(bookmark.url)}
                    >
                      <div className="space-y-2 text-center">
                        <div className="text-2xl">{bookmark.favicon}</div>
                        <div className="text-sm font-medium">
                          {bookmark.title}
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            <div className="flex h-full items-center justify-center">
              <Image
                src={image}
                alt={image}
                width={320}
                height={320}
                className="h-full w-full rounded-md object-cover"
              />
            </div>
          )}
        </div>
      </div>

      {showStatusBar && (
        <div className="bg-muted/30 border-border text-muted-foreground flex items-center justify-between border-t px-4 py-1 text-xs">
          <div className="flex items-center gap-4">
            <span>Ready</span>
            {isSecure && (
              <span className="flex items-center gap-1">
                <Lock className="h-3 w-3" /> Secure
              </span>
            )}
          </div>
          <div className="flex items-center gap-4">
            <span>Zoom: 100%</span>
            <span>
              {tabs.length} tab{tabs.length !== 1 ? "s" : ""}
            </span>
          </div>
        </div>
      )}
    </div>
  )
}


===== EXAMPLE: browser-demo =====
Title: browser-demo

--- file: example/browser-demo.tsx ---
import { Browser } from "@/registry/eldoraui/browser"

export function BrowserDemo() {
  return (
    <div className="h-full">
      <Browser initialUrl="https://www.eldoraui.site" loadingDuration={1500} />
    </div>
  )
}


===== EXAMPLE: browser-demo-2 =====
Title: browser-demo-2

--- file: example/browser-demo-2.tsx ---
import { Browser } from "@/registry/eldoraui/browser"

export function BrowserDemo2() {
  return (
    <div className="mx-auto h-[620px]">
      <Browser
        initialUrl="https://www.eldoraui.site"
        showWindowControls={true}
        showBookmarksBar={true}
        showStatusBar={true}
        enableTabManagement={true}
        enableBookmarks={true}
        enableHistory={true}
        enableDownloads={true}
        enableSettings={true}
        maxTabs={8}
        simulateLoading={true}
        loadingDuration={1500}
      />
    </div>
  )
}



===== COMPONENT: card-flip-hover =====
Title: card-flip-hover
Description: A card flip hover component.

--- file: eldoraui/card-flip-hover.tsx ---
"use client"

import React, { useState } from "react"

interface CardFlipHoverProps {
  imageUrl: string
}

export const CardFlipHover = ({ imageUrl }: CardFlipHoverProps) => {
  const [isFlipped, setIsFlipped] = useState(false)

  const handleHover = () => {
    if (!isFlipped) {
      setIsFlipped(true)
      setTimeout(() => setIsFlipped(false), 700)
    }
  }

  return (
    <div className="h-60 w-44 [perspective:1000px]" onMouseEnter={handleHover}>
      <div
        className={`relative h-full w-full transition-all duration-700 [transform-style:preserve-3d] ${
          isFlipped
            ? "[transform:rotateY(180deg)_translateY(-40px)]"
            : "[transform:rotateY(0deg)_translateY(0px)]"
        }`}
      >
        {/* Front Side */}
        <div className="absolute h-full w-full overflow-hidden rounded-xl shadow-xl [backface-visibility:hidden]">
          <img
            src={imageUrl}
            alt="Front"
            className="h-full w-full object-cover"
          />
        </div>

        {/* Back Side */}
        <div className="absolute flex h-full w-full [transform:rotateY(180deg)] items-center justify-center overflow-hidden rounded-xl bg-cyan-600 text-xl font-bold text-white shadow-xl [backface-visibility:hidden]">
          <img
            src={imageUrl}
            alt="Back"
            className="h-full w-full object-cover"
          />
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: card-flip-hover-demo =====
Title: card-flip-hover-demo

--- file: example/card-flip-hover-demo.tsx ---
import { CardFlipHover } from "@/registry/eldoraui/card-flip-hover"

export default function DemoOne() {
  return (
    <div className="flex items-center justify-center">
      <CardFlipHover imageUrl="https://avatar.vercel.sh/karthik" />
    </div>
  )
}



===== COMPONENT: clerk-otp =====
Title: clerk-otp
Description: A clerk OTP component.

--- file: eldoraui/clerk-otp.tsx ---
"use client"

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

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

const generateRandomDigits = () => {
  return Array.from({ length: 6 }, () =>
    Math.floor(Math.random() * 10).toString()
  )
}

type AnimatedOTPProps = {
  delay?: number
  cardTitle?: string
  cardDescription?: string
  whileHover?: boolean
}

const AnimatedOTP = ({
  delay = 3500,
  cardTitle = "Multifactor Authentication",
  cardDescription = "Each user's self-serve multifactor settings are enforced automatically during sign-in.",
  whileHover = false,
}: AnimatedOTPProps) => {
  const [animationKey, setAnimationKey] = useState(0)
  const delayTime = Math.max(delay, 3500)
  useEffect(() => {
    const interval = setInterval(() => {
      setAnimationKey((prev) => prev + 1)
    }, delayTime)

    return () => clearInterval(interval)
  }, [delayTime])

  return (
    <OTPinput
      key={animationKey}
      cardTitle={cardTitle}
      cardDescription={cardDescription}
      whileHover={whileHover}
    />
  )
}

export default AnimatedOTP

const OTPinput = ({
  cardTitle,
  cardDescription,
  whileHover,
}: AnimatedOTPProps) => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [fadeOut, setFadeOut] = useState(false)
  const [digits] = useState(() => generateRandomDigits())
  const [isCardHovered, setIsCardHovered] = useState(false)

  useEffect(() => {
    if (activeIndex > digits.length - 1) return

    const shouldAnimate = !whileHover || (whileHover && isCardHovered)

    if (!shouldAnimate) return

    const interval = setInterval(() => {
      setActiveIndex((prev) => prev + 1)
    }, 400)

    if (activeIndex === digits.length - 1) {
      setTimeout(() => {
        setFadeOut(true)
      }, 450)
    }

    return () => clearInterval(interval)
  }, [activeIndex, digits.length, whileHover, isCardHovered])

  return (
    <motion.div
      initial={{ opacity: 1 }}
      onHoverStart={() => setIsCardHovered(true)}
      onHoverEnd={() => setIsCardHovered(false)}
      className={cn(
        "relative",
        "flex items-center justify-center",
        "h-[14rem] w-full max-w-[350px]",
        "rounded-md border bg-neutral-50 dark:bg-neutral-900",
        "shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
      )}
    >
      <div className="absolute top-[25%] left-1/2 -translate-x-1/2">
        <div className="flex w-full items-center justify-center gap-3">
          {digits.map((digit, idx) => (
            <div
              key={idx}
              className={cn(
                "text-primary relative flex h-10 w-8 cursor-default items-center justify-center rounded-md bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-800",
                "shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
              )}
            >
              {(!whileHover || (whileHover && isCardHovered)) && (
                <motion.div
                  className="absolute inset-0 rounded-md border border-cyan-400"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: [0, 1, 0] }}
                  transition={{
                    duration: 0.5,
                    ease: "easeInOut",
                    delay: 2.25,
                  }}
                  style={{
                    boxShadow: "inset 0 0 12px rgba(34, 211, 238, 0.5)",
                  }}
                />
              )}
              {activeIndex === idx &&
                (!whileHover || (whileHover && isCardHovered)) && (
                  <motion.div
                    key={idx}
                    className="absolute inset-0 rounded-md border border-cyan-400"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{
                      duration: 0.3,
                      ease: "easeInOut",
                    }}
                    style={{
                      boxShadow: "inset 0 0 12px rgba(34, 211, 238, 0.6)",
                    }}
                  >
                    <svg
                      viewBox="0 0 20 20"
                      className="absolute inset-0 h-full w-full"
                      strokeWidth="0.4"
                    >
                      <path
                        d="M 3 19 h 14"
                        className="stroke-cyan-400 dark:stroke-cyan-500"
                      />
                    </svg>
                  </motion.div>
                )}
              <motion.span
                initial={{ opacity: 0 }}
                animate={{
                  opacity: whileHover
                    ? isCardHovered
                      ? fadeOut
                        ? 0
                        : 1
                      : 0
                    : fadeOut
                      ? 0
                      : 1,
                }}
                transition={{
                  duration: fadeOut ? 0.1 : 0.2,
                  ease: "easeInOut",
                  delay: fadeOut ? 0 : idx * 0.43,
                }}
                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
              >
                {digit}
              </motion.span>
            </div>
          ))}
        </div>
      </div>
      <div className="absolute bottom-4 left-0 w-full px-3">
        <h3 className="text-primary text-sm font-semibold">{cardTitle}</h3>
        <p className="mt-2 text-xs text-neutral-600 dark:text-neutral-400">
          {cardDescription}
        </p>
      </div>
    </motion.div>
  )
}


===== EXAMPLE: clerk-otp-demo =====
Title: clerk-otp-demo

--- file: example/clerk-otp-demo.tsx ---
import ClerkOTP from "@/registry/eldoraui/clerk-otp"

export function ClerkOTPDemo() {
  return (
    <ClerkOTP
      delay={3500}
      cardTitle="Hover to Animate"
      cardDescription="Animation only triggers when hovering over the card. Random digits generated each time."
      whileHover={true} // Animation only on hover
    />
  )
}


===== EXAMPLE: clerk-otp-demo-2 =====
Title: clerk-otp-demo-2

--- file: example/clerk-otp-demo-2.tsx ---
import ClerkOTP from "@/registry/eldoraui/clerk-otp"

export function ClerkOTPDemo2() {
  return (
    <ClerkOTP
      delay={3500} // Time interval (in ms) after which the OTP animation resets.
      cardTitle="Multifactor Authentication"
      cardDescription="Each user's self-serve multifactor settings are enforced automatically during sign-in."
      whileHover={false} // Normal animation behavior
    />
  )
}



===== COMPONENT: cobe-globe =====
Title: cobe-globe
Description: A cobe globe component.

--- file: eldoraui/cobe-globe.tsx ---
"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import createGlobe from "cobe"
import { useSpring } from "react-spring"

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

type CobeVariant =
  | "default"
  | "draggable"
  | "auto-draggable"
  | "auto-rotation"
  | "rotate-to-location"
  | "scaled"

interface Location {
  name: string
  lat?: number
  long?: number
  emoji?: string
}

interface GeocodeResult {
  lat: number
  lng: number
  display_name: string
}

interface CobeProps {
  variant?: CobeVariant
  className?: string
  style?: React.CSSProperties
  locations?: Location[]
  // Globe configuration settings
  phi?: number
  theta?: number
  mapSamples?: number
  mapBrightness?: number
  mapBaseBrightness?: number
  diffuse?: number
  dark?: number
  baseColor?: string
  markerColor?: string
  markerSize?: number
  glowColor?: string
  scale?: number
  offsetX?: number
  offsetY?: number
  opacity?: number
}

type CobeState = Record<string, unknown>

export function Cobe({
  variant = "default",
  className,
  style,
  locations = [
    { name: "San Francisco", emoji: "📍" },
    { name: "Berlin", emoji: "📍" },
    { name: "Tokyo", emoji: "📍" },
    { name: "Buenos Aires", emoji: "📍" },
  ],
  // Default values based on the original JSX version
  phi = 0,
  theta = 0.2,
  mapSamples = 16000,
  mapBrightness = 1.8,
  mapBaseBrightness = 0.05,
  diffuse = 3,
  dark = 1.0,
  baseColor = "#ffffff",
  markerColor = "#fb6415",
  markerSize = 0.05,
  glowColor = "#ffffff",
  scale = 1.0,
  offsetX = 0.0,
  offsetY = 0.0,
  opacity = 0.7,
}: CobeProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const pointerInteracting = useRef<number | null>(null)
  const pointerInteractionMovement = useRef<number>(0)
  const focusRef = useRef<[number, number]>([0, 0])
  const [customLocations, setCustomLocations] = useState<Location[]>([])
  const [isInitializing, setIsInitializing] = useState(true)

  const [{ r }, api] = useSpring<{ r: number }>(() => ({
    r: 0,
    config: {
      mass: 1,
      tension: 280,
      friction: 40,
      precision: 0.001,
    },
  }))

  const locationToAngles = (lat: number, long: number): [number, number] => {
    return [
      Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),
      (lat * Math.PI) / 180,
    ] as [number, number]
  }

  const hexToRgb = (hex: string): [number, number, number] => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
      ? [
          parseInt(result[1], 16) / 255,
          parseInt(result[2], 16) / 255,
          parseInt(result[3], 16) / 255,
        ]
      : [0, 0, 0]
  }

  const geocodeLocation = async (
    query: string
  ): Promise<GeocodeResult | null> => {
    try {
      const response = await fetch(
        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1`
      )
      const data = await response.json()

      if (data && data.length > 0) {
        return {
          lat: parseFloat(data[0].lat),
          lng: parseFloat(data[0].lon),
          display_name: data[0].display_name,
        }
      }
      return null
    } catch (error) {
      console.error("Geocoding error:", error)
      return null
    }
  }

  const geocodeLocationList = useCallback(async (locationList: Location[]) => {
    const geocodedLocations: Location[] = []

    for (const location of locationList) {
      if (location.lat && location.long) {
        // Already has coordinates
        geocodedLocations.push(location)
      } else {
        // Need to geocode
        const result = await geocodeLocation(location.name)
        if (result) {
          geocodedLocations.push({
            ...location,
            lat: result.lat,
            long: result.lng,
          })
        }
      }
    }

    return geocodedLocations
  }, [])

  // Initialize locations on component mount
  useEffect(() => {
    const initializeLocations = async () => {
      if (variant === "rotate-to-location" && locations.length > 0) {
        setIsInitializing(true)
        const geocoded = await geocodeLocationList(locations)
        setCustomLocations(geocoded)
        setIsInitializing(false)
      }
    }

    initializeLocations()
  }, [variant, locations, geocodeLocationList])

  useEffect(() => {
    let phi = 0
    let width = 0
    let currentPhi = 0
    let currentTheta = 0
    const doublePi = Math.PI * 2

    const onResize = () => {
      if (canvasRef.current) {
        width = canvasRef.current.offsetWidth
      }
    }

    window.addEventListener("resize", onResize)
    onResize()

    if (!canvasRef.current) return

    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: width * 2,
      height: variant === "scaled" ? width * 2 * 0.4 : width * 2,
      phi: phi,
      theta: theta,
      dark: dark,
      diffuse: diffuse,
      mapSamples: mapSamples,
      mapBrightness: mapBrightness,
      mapBaseBrightness: mapBaseBrightness,
      baseColor: hexToRgb(baseColor),
      markerColor: hexToRgb(markerColor),
      glowColor: hexToRgb(glowColor),
      markers:
        variant === "default" ||
        variant === "draggable" ||
        variant === "auto-draggable" ||
        variant === "auto-rotation" ||
        variant === "scaled"
          ? [
              // San Francisco, default color
              { location: [37.7595, -122.4367], size: markerSize },
              // New York, red color
              {
                location: [40.7128, -74.006],
                size: markerSize,
                color: [1, 0, 0],
              },
              // Tokyo, blue color
              {
                location: [35.6895, 139.6917],
                size: markerSize,
                color: [0, 0.5, 1],
              },
              // Sydney, green color
              {
                location: [-33.8688, 151.2093],
                size: markerSize,
                color: [0, 1, 0],
              },
              // Rio de Janeiro, purple color
              {
                location: [-22.9068, -43.1729],
                size: markerSize,
                color: [0.8, 0, 0.8],
              },
              // Paris, yellow color
              {
                location: [48.8566, 2.3522],
                size: markerSize,
                color: [1, 1, 0],
              },
              // Porto, orange color
              {
                location: [41.1579, -8.6291],
                size: markerSize,
                color: [1, 0.5, 0],
              },
              // Athens, pink color
              {
                location: [37.9838, 23.7275],
                size: markerSize,
                color: [1, 0.5, 1],
              },
              // Rome, brown color
              {
                location: [41.9028, 12.4964],
                size: markerSize,
                color: [0.5, 0.3, 0],
              },
              // Kathmandu, blue color
              {
                location: [27.7172, 85.324],
                size: markerSize,
                color: [0, 0.5, 1],
              },
              // Tarbes, green color
              {
                location: [43.4643, -0.5167],
                size: markerSize,
                color: [0, 1, 0],
              },
              // Bamako, yellow color
              {
                location: [12.6683, -8.0076],
                size: markerSize,
                color: [1, 1, 0],
              },
              // Djibouti, purple color
              {
                location: [11.55, 43.1667],
                size: markerSize,
                color: [0.8, 0, 0.8],
              },
            ]
          : variant === "rotate-to-location"
            ? customLocations
                .filter((loc) => loc.lat && loc.long)
                .map((loc) => ({
                  location: [loc.lat!, loc.long!],
                  size: markerSize,
                }))
            : [],
      scale: variant === "scaled" ? 2.5 : undefined,
      offset: variant === "scaled" ? [0, width * 2 * 0.4 * 0.6] : undefined,
      opacity: opacity,
      onRender: (state: CobeState) => {
        switch (variant) {
          case "default":
            state.phi = phi + r.get()
            phi += 0.005
            break
          case "draggable":
            state.phi = r.get()
            break
          case "auto-draggable":
            if (!pointerInteracting.current) {
              phi += 0.005
            }
            state.phi = phi + r.get()
            break
          case "auto-rotation":
            state.phi = phi
            phi += 0.005
            break
          case "rotate-to-location":
            state.phi = currentPhi
            state.theta = currentTheta
            const [focusPhi, focusTheta] = focusRef.current
            const distPositive = (focusPhi - currentPhi + doublePi) % doublePi
            const distNegative = (currentPhi - focusPhi + doublePi) % doublePi
            if (distPositive < distNegative) {
              currentPhi += distPositive * 0.08
            } else {
              currentPhi -= distNegative * 0.08
            }
            currentTheta = currentTheta * 0.92 + focusTheta * 0.08
            break
          case "scaled":
            // No rotation for scaled variant
            break
        }

        state.width = width * 2
        state.height = variant === "scaled" ? width * 2 * 0.4 : width * 2
      },
    })

    if (canvasRef.current) {
      setTimeout(() => {
        if (canvasRef.current) {
          canvasRef.current.style.opacity = opacity.toString()
        }
      })
    }

    return () => {
      globe.destroy()
      window.removeEventListener("resize", onResize)
    }
  }, [
    variant,
    r,
    customLocations,
    phi,
    theta,
    mapSamples,
    mapBrightness,
    mapBaseBrightness,
    diffuse,
    dark,
    baseColor,
    markerColor,
    markerSize,
    glowColor,
    scale,
    offsetX,
    offsetY,
    opacity,
  ])

  const handlePointerDown = (e: React.PointerEvent) => {
    if (
      variant === "draggable" ||
      variant === "auto-draggable" ||
      variant === "default"
    ) {
      pointerInteracting.current =
        e.clientX - pointerInteractionMovement.current
      if (canvasRef.current) canvasRef.current.style.cursor = "grabbing"
    }
  }

  const handlePointerUp = () => {
    if (
      variant === "draggable" ||
      variant === "auto-draggable" ||
      variant === "default"
    ) {
      pointerInteracting.current = null
      if (canvasRef.current) canvasRef.current.style.cursor = "grab"
    }
  }

  const handlePointerOut = () => {
    if (
      variant === "draggable" ||
      variant === "auto-draggable" ||
      variant === "default"
    ) {
      pointerInteracting.current = null
      if (canvasRef.current) canvasRef.current.style.cursor = "grab"
    }
  }

  const handleMouseMove = (e: React.MouseEvent) => {
    if (
      (variant === "draggable" ||
        variant === "auto-draggable" ||
        variant === "default") &&
      pointerInteracting.current !== null
    ) {
      const delta = e.clientX - pointerInteracting.current
      pointerInteractionMovement.current = delta
      api.start({
        r: delta / 200,
      })
    }
  }

  const handleTouchMove = (e: React.TouchEvent) => {
    if (
      (variant === "draggable" ||
        variant === "auto-draggable" ||
        variant === "default") &&
      pointerInteracting.current !== null &&
      e.touches[0]
    ) {
      const delta = e.touches[0].clientX - pointerInteracting.current
      pointerInteractionMovement.current = delta
      api.start({
        r: delta / 100,
      })
    }
  }

  const handleLocationClick = (lat: number, long: number) => {
    if (variant === "rotate-to-location") {
      focusRef.current = locationToAngles(lat, long)
    }
  }

  const containerStyle = {
    width: "100%",
    maxWidth: variant === "scaled" ? 800 : 600,
    aspectRatio: variant === "scaled" ? 2.5 : 1,
    margin: "auto",
    position: "relative" as const,
    ...style,
  }

  const canvasStyle = {
    width: "100%",
    height: "100%",
    contain: "layout paint size" as const,
    opacity: 0,
    transition: "opacity 1s ease",
    cursor:
      variant === "draggable" ||
      variant === "auto-draggable" ||
      variant === "default"
        ? "grab"
        : undefined,
    borderRadius:
      variant === "default" ||
      variant === "draggable" ||
      variant === "auto-draggable" ||
      variant === "auto-rotation"
        ? "50%"
        : variant === "scaled"
          ? "8px"
          : undefined,
  }

  return (
    <div className={cn("", className)} style={containerStyle}>
      <canvas
        ref={canvasRef}
        onPointerDown={handlePointerDown}
        onPointerUp={handlePointerUp}
        onPointerOut={handlePointerOut}
        onMouseMove={handleMouseMove}
        onTouchMove={handleTouchMove}
        style={canvasStyle}
      />
      {variant === "rotate-to-location" && (
        <>
          <div
            className="control-buttons flex flex-col items-center justify-center md:flex-row"
            style={{ gap: ".5rem" }}
          >
            {isInitializing ? "Loading locations..." : ""}
            {customLocations
              .filter((loc) => loc.lat && loc.long)
              .map((location, index) => (
                <Button
                  key={index}
                  onClick={() =>
                    handleLocationClick(location.lat!, location.long!)
                  }
                  className="bg-background/80 text-foreground hover:bg-background/90 border-border transition-all duration-200 hover:scale-105"
                >
                  {location.emoji || "📍"} {location.name}
                </Button>
              ))}
          </div>
        </>
      )}
    </div>
  )
}


===== EXAMPLE: cobe-globe-demo =====
Title: cobe-globe-demo

--- file: example/cobe-globe-demo.tsx ---
"use client"

import { Cobe } from "@/registry/eldoraui/cobe-globe"

export function CobeGlobeDemo() {
  return (
    <div className="bg-background relative z-10 h-[300px] w-full overflow-hidden rounded-lg border sm:h-[550px] md:h-[600px]">
      <Cobe
        variant="default"
        phi={0}
        theta={0.2}
        mapSamples={16000}
        mapBrightness={1.8}
        mapBaseBrightness={0.05}
        diffuse={3}
        dark={1.1}
        baseColor="#ffffff"
        markerColor="#fb6415"
        markerSize={0.05}
        glowColor="#ffffff"
        scale={1.0}
        offsetX={0.0}
        offsetY={0.0}
        opacity={0.7}
      />
    </div>
  )
}


===== EXAMPLE: cobe-globe-demo-2 =====
Title: cobe-globe-demo-2

--- file: example/cobe-globe-demo-2.tsx ---
"use client"

import { Cobe } from "@/registry/eldoraui/cobe-globe"

export function CobeGlobeDemo2() {
  return (
    <div className="bg-background relative z-10 h-[300px] w-full overflow-hidden rounded-lg border sm:h-[550px] md:h-[600px]">
      <Cobe variant="auto-rotation" />
    </div>
  )
}


===== EXAMPLE: cobe-globe-demo-3 =====
Title: cobe-globe-demo-3

--- file: example/cobe-globe-demo-3.tsx ---
"use client"

import { Cobe } from "@/registry/eldoraui/cobe-globe"

export function CobeGlobeDemo3() {
  return (
    <div className="bg-background relative z-10 h-[300px] w-full overflow-hidden rounded-lg border sm:h-[550px] md:h-[600px]">
      <Cobe variant="auto-draggable" />
    </div>
  )
}


===== EXAMPLE: cobe-globe-demo-4 =====
Title: cobe-globe-demo-4

--- file: example/cobe-globe-demo-4.tsx ---
"use client"

import { Cobe } from "@/registry/eldoraui/cobe-globe"

export function CobeGlobeDemo4() {
  const customLocations = [
    { name: "Hyderabad,India", emoji: "🇮🇳" },
    { name: "New York,USA", emoji: "🇺🇸" },
    { name: "California", emoji: "🇺🇸" },
    { name: "Paris", emoji: "🇫🇷" },
    { name: "London", emoji: "🇬🇧" },
  ]

  return (
    <div className="bg-background relative z-10 h-[400px] w-full overflow-hidden rounded-lg border sm:h-[600px] md:h-[650px]">
      <Cobe variant="rotate-to-location" locations={customLocations} />
    </div>
  )
}


===== EXAMPLE: cobe-globe-demo-5 =====
Title: cobe-globe-demo-5

--- file: example/cobe-globe-demo-5.tsx ---
"use client"

import { Cobe } from "@/registry/eldoraui/cobe-globe"

export function CobeGlobeDemo5() {
  return (
    <div className="bg-background relative z-10 h-[200px] w-full overflow-hidden rounded-lg border sm:h-[300px] md:h-[400px]">
      <Cobe variant="scaled" />
    </div>
  )
}



===== COMPONENT: dock-text =====
Title: dock-text
Description: A dock text component with interactive hover effects.

--- file: eldoraui/dock-text.tsx ---
"use client"

import React, { useRef, useState } from "react"
import { motion } from "motion/react"

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

interface DockTextProps {
  text: string
  down?: boolean
  className?: string
}

export default function DockText({
  text,
  down = false,
  className,
}: DockTextProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  const containerRef = useRef<HTMLHeadingElement>(null)

  const handleMouseMove = (e: React.MouseEvent<HTMLHeadingElement>) => {
    const container = containerRef.current
    if (!container) return

    const letters = container.children
    const containerRect = container.getBoundingClientRect()
    const mouseX = e.clientX - containerRect.left

    Array.from(letters).forEach((letter, index) => {
      const letterRect = letter.getBoundingClientRect()
      const letterCenterX =
        letterRect.left + letterRect.width / 2 - containerRect.left
      const distance = Math.abs(mouseX - letterCenterX)

      if (distance <= 10) {
        setHoveredIndex(index)
      }
    })
  }

  const handleMouseLeave = () => {
    setHoveredIndex(null)
  }

  return (
    <motion.h1
      ref={containerRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn(
        "my-8 flex cursor-pointer items-center text-6xl font-bold text-gray-900 uppercase md:text-7xl lg:text-8xl dark:text-white",
        className
      )}
    >
      {text.split("").map((letter, index) => (
        <motion.span
          key={index}
          animate={{
            scaleY:
              hoveredIndex === null
                ? 1
                : Math.max(1, 1.3638 - Math.abs(index - hoveredIndex) * 0.1),
          }}
          transition={{
            type: "spring",
            stiffness: 150,
            damping: 20,
            mass: 0.5,
          }}
          style={{
            display: "inline-block",
            transformOrigin: down ? "top" : "bottom",
          }}
        >
          {letter}
        </motion.span>
      ))}
    </motion.h1>
  )
}


===== EXAMPLE: dock-text-demo =====
Title: dock-text-demo

--- file: example/dock-text-demo.tsx ---
"use client"

import DockText from "@/registry/eldoraui/dock-text"

export default function DockTextDemo() {
  return <DockText text={"Eldoraui"} />
}


===== EXAMPLE: dock-text-demo-2 =====
Title: dock-text-demo-2

--- file: example/dock-text-demo-2.tsx ---
"use client"

import DockText from "@/registry/eldoraui/dock-text"

export default function DockTextDemo2() {
  return <DockText text={"Dock Text"} down={true} />
}



===== COMPONENT: fade-text =====
Title: fade-text
Description: A combined fade text component with support for in, up, and down directions.

--- file: eldoraui/fade-text.tsx ---
"use client"

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

type FadeDirection = "in" | "up" | "down"

interface FadeTextProps {
  text?: string
  className?: string
  direction?: FadeDirection
  staggerDelay?: number
  wordDelay?: number
}

export const FadeText: React.FC<FadeTextProps> = ({
  text = "",
  className = "",
  direction = "in",
  staggerDelay = 0.15,
  wordDelay = 0.1,
}) => {
  // For "in" direction, we animate word by word
  if (direction === "in") {
    const words = text.split(" ")

    return (
      <motion.div
        initial="hidden"
        animate="visible"
        viewport={{ once: true }}
        variants={{
          hidden: {},
          visible: {
            transition: {
              staggerChildren: wordDelay,
            },
          },
        }}
      >
        <motion.h1
          className={clsx(
            "font-display text-center font-bold drop-shadow-sm",
            "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
            "tracking-[-0.02em]",
            "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
            className
          )}
        >
          {words.map((word, i) => (
            <motion.span
              key={`${word}-${i}`}
              variants={{
                hidden: { opacity: 0 },
                visible: { opacity: 1 },
              }}
            >
              {word}{" "}
            </motion.span>
          ))}
        </motion.h1>
      </motion.div>
    )
  }

  // For "up" and "down" directions, we animate the entire text
  const animationVariants =
    direction === "up"
      ? {
          hidden: { opacity: 0, y: 20 },
          show: {
            opacity: 1,
            y: 0,
            transition: {
              type: "spring" as const,
              stiffness: 100,
              damping: 12,
              duration: 0.8,
            },
          },
        }
      : {
          hidden: { opacity: 0, y: -20 },
          show: {
            opacity: 1,
            y: 0,
            transition: {
              type: "spring" as const,
              stiffness: 100,
              damping: 12,
              duration: 0.8,
            },
          },
        }

  return (
    <motion.div
      initial="hidden"
      animate="show"
      viewport={{ once: true }}
      transition={{ delay: staggerDelay }}
    >
      <motion.h1
        className={clsx(
          "font-display text-center font-bold drop-shadow-sm",
          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
          "tracking-[-0.02em]",
          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
          className
        )}
        variants={animationVariants}
      >
        {text}
      </motion.h1>
    </motion.div>
  )
}


===== EXAMPLE: fade-text-demo =====
Title: fade-text-demo

--- file: example/fade-text-demo.tsx ---
import { FadeText } from "@/registry/eldoraui/fade-text"

export default function FadeTextDemo() {
  return (
    <FadeText text="Welcome to the future" direction="in" wordDelay={0.2} />
  )
}


===== EXAMPLE: fade-text-demo-2 =====
Title: fade-text-demo-2

--- file: example/fade-text-demo-2.tsx ---
import { FadeText } from "@/registry/eldoraui/fade-text"

export default function FadeTextDemo2() {
  return (
    <FadeText text="Rising to new heights" direction="up" staggerDelay={0.3} />
  )
}


===== EXAMPLE: fade-text-demo-3 =====
Title: fade-text-demo-3

--- file: example/fade-text-demo-3.tsx ---
import { FadeText } from "@/registry/eldoraui/fade-text"

export default function FadeTextDemo3() {
  return (
    <FadeText
      text="Gracefully descending"
      direction="down"
      staggerDelay={0.3}
    />
  )
}



===== COMPONENT: font-weight-text =====
Title: font-weight-text
Description: A font weight text component.

--- file: eldoraui/font-weight-text.tsx ---
"use client"

import { useEffect, useRef } from "react"

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

interface FontWeightTextProps {
  text: string
  className?: string
  fontSize?: number
  minWeight?: number
  maxWeight?: number
  animationDuration?: number
  delayMultiplier?: number
}

export function FontWeightText({
  text,
  className = "",
  fontSize = 150,
  minWeight = 0,
  maxWeight = 840,
  animationDuration = 1.5,
  delayMultiplier = 0.25,
}: FontWeightTextProps) {
  const containerRef = useRef<HTMLParagraphElement>(null)

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

    const spans = containerRef.current.querySelectorAll("span")
    const numLetters = spans.length

    spans.forEach((span, i) => {
      const mappedIndex = i - numLetters / 2
      span.style.animationDelay = mappedIndex * delayMultiplier + "s"
    })
  }, [text, delayMultiplier])

  const characters = text.split("").map((char, index) => (
    <span
      key={index}
      aria-hidden="true"
      style={{
        animation: `breath ${animationDuration}s alternate cubic-bezier(0.37, 0, 0.63, 1) infinite`,
        animationFillMode: "both",
        fontVariationSettings: `"wght" ${minWeight}`,
      }}
    >
      {char}
    </span>
  ))

  return (
    <div className="flex items-center justify-center">
      <p
        className={cn("m-0 font-sans", className)}
        ref={containerRef}
        aria-label={text}
        style={{
          fontSize: `${fontSize}px`,
          fontFeatureSettings: '"wght"',
        }}
      >
        {characters}
        <style jsx>{`
          @keyframes breath {
            0% {
              font-variation-settings: "wght" ${minWeight};
            }
            100% {
              font-variation-settings: "wght" ${maxWeight};
            }
          }
        `}</style>
      </p>
    </div>
  )
}


===== EXAMPLE: font-weight-text-demo =====
Title: font-weight-text-demo

--- file: example/font-weight-text-demo.tsx ---
import { FontWeightText } from "@/registry/eldoraui/font-weight-text"

export function FontWeightTextDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <FontWeightText
        text="Get Started"
        fontSize={60}
        className="text-cyan-200"
      />
    </div>
  )
}



===== COMPONENT: github-inline-comments =====
Title: github-inline-comments
Description: A github inline comments component.

--- file: eldoraui/github-inline-comments.tsx ---
"use client"

import { useEffect, useRef, useState } from "react"
import { CheckCircle2, MessageSquarePlus, X } from "lucide-react"

import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

type Line =
  | { kind: "hunk"; content: string }
  | { kind: "context"; old: number | null; new: number | null; content: string }
  | { kind: "add"; old: number | null; new: number | null; content: string }
  | { kind: "del"; old: number | null; new: number | null; content: string }

export default function GithubInlineComments({
  diff,
  fileName,
}: {
  diff: readonly Line[]
  fileName: string
}) {
  return <DiffList diff={diff} fileName={fileName} />
}

function DiffList({
  diff,
  fileName,
}: {
  diff: readonly Line[]
  fileName: string
}) {
  const rows = diff ?? []

  // Tracks which line index currently has an open thread
  const [openThreadAt, setOpenThreadAt] = useState<number | null>(null)
  // Tracks thread status per line
  const [resolvedMap, setResolvedMap] = useState<Record<number, boolean>>({})

  function toggleResolve(idx: number) {
    setResolvedMap((m) => ({ ...m, [idx]: !m[idx] }))
  }

  return (
    <TooltipProvider delayDuration={150}>
      <div
        role="table"
        aria-label={`Diff of ${fileName}`}
        className="bg-card rounded-md border dark:border-white/10"
      >
        <div className="flex items-center justify-between border-b px-2 py-1 dark:border-white/10">
          <div className="flex items-center gap-2">
            <span className="text-[13px] font-medium">{fileName}</span>
            <Badge
              variant="secondary"
              aria-label="File status"
              className="h-5 px-1.5 text-[11px]"
            >
              modified
            </Badge>
          </div>
        </div>

        <ol role="rowgroup" className="divide-y dark:divide-white/10">
          {rows.map((line, idx) => {
            const isChange = line.kind === "add" || line.kind === "del"
            const isOpen = openThreadAt === idx
            const isResolved = !!resolvedMap[idx]

            return (
              <li
                key={idx}
                role="row"
                className={cn(
                  "group relative flex items-stretch text-[13px]",
                  line.kind === "hunk" && "bg-muted/50 text-muted-foreground",
                  line.kind === "add" &&
                    "bg-emerald-50/60 dark:bg-emerald-950/20",
                  line.kind === "del" && "bg-rose-50/60 dark:bg-rose-950/20"
                )}
              >
                <div className="absolute top-1/2 -left-4 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
                  {line.kind !== "hunk" && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          size="icon"
                          variant="secondary"
                          aria-label="Add inline comment"
                          className="h-5 w-5 rounded-full shadow-sm"
                          onClick={() => setOpenThreadAt(isOpen ? null : idx)}
                        >
                          <MessageSquarePlus className="h-3 w-3" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent side="left">Add comment</TooltipContent>
                    </Tooltip>
                  )}
                </div>

                <div
                  role="cell"
                  className={cn(
                    "text-muted-foreground grid w-16 shrink-0 grid-cols-2 border-r text-[11px] dark:border-white/10"
                  )}
                >
                  <span className="px-2 py-1 text-right tabular-nums">
                    {line.kind === "add"
                      ? ""
                      : line.kind === "hunk"
                        ? ""
                        : (line.old ?? "")}
                  </span>
                  <span className="px-2 py-1 text-right tabular-nums">
                    {line.kind === "del"
                      ? ""
                      : line.kind === "hunk"
                        ? ""
                        : (line.new ?? "")}
                  </span>
                </div>

                <div role="cell" className="flex-1">
                  <pre
                    className={cn(
                      "px-2 py-1 font-mono text-[12px] leading-5 whitespace-pre-wrap",
                      isChange && "pl-5"
                    )}
                    aria-label={`${line.kind} line`}
                  >
                    <span
                      aria-hidden
                      className={cn(
                        "mr-1 inline-block w-2 text-center font-semibold",
                        line.kind === "add" && "text-emerald-600",
                        line.kind === "del" && "text-rose-600"
                      )}
                    >
                      {line.kind === "add"
                        ? "+"
                        : line.kind === "del"
                          ? "-"
                          : " "}
                    </span>
                    {line.content}
                  </pre>

                  {openThreadAt === idx && line.kind !== "hunk" && (
                    <div className="bg-background border-t px-2 py-1.5 dark:border-white/10">
                      <InlineThread
                        resolved={isResolved}
                        onToggleResolve={() => toggleResolve(idx)}
                        onClose={() => setOpenThreadAt(null)}
                      />
                    </div>
                  )}
                </div>
              </li>
            )
          })}
        </ol>
      </div>
    </TooltipProvider>
  )
}

type Comment = {
  id: string
  author: string
  initials: string
  body: string
  createdAt: string
}

function InlineThread({
  resolved,
  onToggleResolve,
  onClose,
}: {
  resolved: boolean
  onToggleResolve: () => void
  onClose: () => void
}) {
  const [comments, setComments] = useState<Comment[]>([
    {
      id: "c1",
      author: "Reviewer",
      initials: "RV",
      body: "Consider handling the undefined case explicitly.",
      createdAt: "just now",
    },
  ])
  const [draft, setDraft] = useState("")
  const textRef = useRef<HTMLTextAreaElement | null>(null)

  function addComment() {
    const text = draft.trim()
    if (!text) return
    setComments((c) => [
      ...c,
      {
        id: crypto.randomUUID(),
        author: "You",
        initials: "YO",
        body: text,
        createdAt: "now",
      },
    ])
    setDraft("")
    // focus back for fast sequences
    requestAnimationFrame(() => textRef.current?.focus())
  }

  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") {
        onClose()
      }
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [onClose])

  return (
    <div className="bg-card rounded-md border dark:border-white/10">
      {/* Header with status chip */}
      <div className="flex items-center justify-between gap-2 px-2 py-1">
        <div className="flex items-center gap-2">
          <Badge
            className={cn(
              "h-5 gap-1 px-1.5 text-[11px]",
              resolved
                ? "bg-emerald-600 text-white hover:bg-emerald-600/90 dark:bg-emerald-500 dark:hover:bg-emerald-500/90"
                : "bg-secondary text-foreground dark:bg-neutral-800 dark:text-neutral-100"
            )}
          >
            {resolved ? <CheckCircle2 className="h-3.5 w-3.5" /> : null}
            {resolved ? "Resolved" : "Open"}
          </Badge>
        </div>

        <div className="flex items-center gap-1.5">
          <Button
            variant={resolved ? "secondary" : "default"}
            size="sm"
            onClick={onToggleResolve}
            aria-pressed={resolved}
            className="h-7 px-2 text-[12px]"
          >
            {resolved ? "Reopen" : "Resolve"}
          </Button>
          <Button
            variant="ghost"
            size="icon"
            aria-label="Close thread"
            onClick={onClose}
            className="h-7 w-7"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Comments list */}
      <ul className="space-y-1 px-2 py-1.5">
        {comments.map((c) => (
          <li key={c.id} className="flex items-start gap-2">
            <Avatar className="h-5 w-5">
              <AvatarFallback className="text-[9px]">
                {c.initials}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <div className="flex items-center justify-between gap-2">
                <p className="truncate text-[12px] font-medium">{c.author}</p>
                <span className="text-muted-foreground ml-2 shrink-0 text-[10px]">
                  {c.createdAt}
                </span>
              </div>
              <p className="mt-0.5 text-[13px] leading-5">{c.body}</p>
            </div>
          </li>
        ))}
      </ul>

      <Separator />

      {/* Editor */}
      <div className="flex flex-col gap-2 px-2 py-1.5">
        <label htmlFor="inline-comment" className="sr-only">
          Add a comment
        </label>
        <Textarea
          id="inline-comment"
          ref={textRef}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Comment"
          rows={2}
          className="min-h-[40px] py-1.5 text-[13px]"
        />
        <div className="flex items-center justify-end gap-1.5">
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="h-7 px-2 text-[12px]"
          >
            Cancel
          </Button>
          <Button
            size="sm"
            onClick={addComment}
            disabled={!draft.trim()}
            className="h-7 px-2 text-[12px]"
          >
            Comment
          </Button>
        </div>
      </div>
    </div>
  )
}


===== EXAMPLE: github-inline-comments-demo =====
Title: github-inline-comments-demo

--- file: example/github-inline-comments-demo.tsx ---
"use client"

import GithubInlineComments from "@/registry/eldoraui/github-inline-comments"

export default function GithubInlineCommentsDemo() {
  return (
    <div className="mx-auto max-w-4xl p-4">
      <p className="text-muted-foreground mb-4 text-sm">
        This is a GitHub-style inline diff comments component. Hover over a line
        in the diff to reveal the &quot;Add comment&quot; button, then click to
        open a compact inline thread for discussion—just like reviewing code on
        GitHub.
      </p>
      <GithubInlineComments
        fileName="src/server.ts"
        diff={[
          { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
          {
            kind: "context",
            old: 10,
            new: 10,
            content: "export async function getUserName(id: string) {",
          },
          {
            kind: "context",
            old: 11,
            new: 11,
            content: "  // Fetch user from cache or database",
          },
          {
            kind: "del",
            old: 12,
            new: null,
            content: "  const user = cache.get(id)",
          },
          {
            kind: "add",
            old: null,
            new: 12,
            content: "  let user = cache.get(id)",
          },
          { kind: "context", old: 13, new: 13, content: "  if (!user) {" },
          {
            kind: "add",
            old: null,
            new: 14,
            content: "    user = await db.users.findById(id)",
          },
          {
            kind: "add",
            old: null,
            new: 15,
            content: "    if (user) cache.set(id, user)",
          },
          { kind: "context", old: 14, new: 16, content: "  }" },
          { kind: "del", old: 15, new: null, content: "  return user?.name" },
          {
            kind: "add",
            old: null,
            new: 17,
            content: "  return user?.name ?? '(unknown)'",
          },
          { kind: "context", old: 16, new: 18, content: "}" },
        ]}
      />
    </div>
  )
}



===== COMPONENT: gradual-spacing-text =====
Title: gradual-spacing-text
Description: A gradual spacing text component.

--- file: eldoraui/gradual-spacing-text.tsx ---
"use client"

import clsx from "clsx"
import { AnimatePresence, motion } from "motion/react"

interface GradualSpacingTextProps {
  text?: string
  className?: string
}

export const GradualSpacingText: React.FC<GradualSpacingTextProps> = ({
  text = "",
  className = "",
}) => {
  const gradual = {
    hidden: { opacity: 0, x: -20 },
    visible: { opacity: 1, x: 0 },
  }

  return (
    <div className={clsx("flex justify-center space-x-1", className)}>
      <AnimatePresence>
        {text.split("").map((char, i) => (
          <motion.h1
            key={i}
            initial="hidden"
            animate="visible"
            exit="hidden"
            variants={gradual}
            transition={{ duration: 0.5, delay: i * 0.1 }}
            className={clsx(
              "font-display text-center font-bold drop-shadow-sm",
              "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
              "tracking-[-0.02em]",
              "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
            )}
          >
            {char === " " ? <span>&nbsp;</span> : char}
          </motion.h1>
        ))}
      </AnimatePresence>
    </div>
  )
}


===== EXAMPLE: gradual-spacing-text-demo =====
Title: gradual-spacing-text-demo

--- file: example/gradual-spacing-text-demo.tsx ---
import { GradualSpacingText } from "@/registry/eldoraui/gradual-spacing-text"

export function GradualSpacingTextDemo() {
  return (
    <GradualSpacingText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Gradual Spacing"
    />
  )
}



===== COMPONENT: grid =====
Title: grid
Description: A grid component.

--- file: eldoraui/grid.tsx ---
"use client"

import { ReactNode, SVGProps } from "react"

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

interface GridProps {
  /** Number of columns in the grid */
  columns?: number
  /** Number of rows in the grid */
  rows?: number
  /** Height of the grid container */
  height?: string
  /** Width of the grid container */
  width?: string
  /** Whether to show the plus icons at corners */
  showPlusIcons?: boolean
  /** Custom className for the grid container */
  className?: string
  /** Children to render inside the grid */
  children?: ReactNode
  /** ARIA label for accessibility */
  "aria-label"?: string
}

interface PlusIconProps extends SVGProps<SVGSVGElement> {
  className?: string
}

/**
 * A flexible grid component with customizable columns, rows, and optional decorative plus icons.
 *
 * @param columns - Number of columns in the grid (default: 9)
 * @param rows - Number of rows in the grid (default: 2)
 * @param height - Height of the grid container (default: "h-24")
 * @param width - Width of the grid container (default: "w-full")
 * @param showPlusIcons - Whether to show decorative plus icons at corners (default: true)
 * @param className - Additional CSS classes for the grid container
 * @param children - Content to render inside the grid
 * @param aria-label - ARIA label for accessibility
 */
export function Grid({
  columns = 9,
  rows = 2,
  height = "h-24",
  width = "w-full",
  showPlusIcons = true,
  className,
  children,
  "aria-label": ariaLabel,
}: GridProps) {
  const PlusIcon = ({ className: iconClassName, ...rest }: PlusIconProps) => {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        width={24}
        height={24}
        strokeWidth="1"
        stroke="currentColor"
        aria-hidden="true"
        {...rest}
        className={cn(
          "absolute size-6 text-black dark:text-white",
          iconClassName
        )}
      >
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
      </svg>
    )
  }

  const totalItems = columns * rows

  // Generate grid items if no children provided
  const gridItems =
    children ||
    Array.from({ length: totalItems }, (_, i) => {
      const isLastInRow = (i + 1) % columns === 0
      const isLastRow = i >= totalItems - columns

      return (
        <span
          key={i}
          className={cn(
            "h-full w-full",
            !isLastInRow && "border-r",
            !isLastRow && "border-b"
          )}
        />
      )
    })

  return (
    <div
      className={cn("relative grid border", height, width, className)}
      style={{
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gridTemplateRows: `repeat(${rows}, 1fr)`,
      }}
      role="grid"
      aria-label={ariaLabel || `Grid with ${columns} columns and ${rows} rows`}
    >
      {showPlusIcons && (
        <>
          <PlusIcon className="absolute -top-5 -left-5 h-10 w-10" />
          <PlusIcon className="absolute -right-5 -bottom-5 h-10 w-10" />
        </>
      )}
      {gridItems}
    </div>
  )
}

// Legacy component for backward compatibility
export function GridDemo() {
  return <Grid />
}

export default Grid


===== EXAMPLE: grid-demo =====
Title: grid-demo

--- file: example/grid-demo.tsx ---
"use client"

import { Grid } from "@/registry/eldoraui/grid"

export default function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}


===== EXAMPLE: grid-demo-2 =====
Title: grid-demo-2

--- file: example/grid-demo-2.tsx ---
"use client"

import { Grid } from "@/registry/eldoraui/grid"

export default function GridDemo2() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Custom Grid with Different Dimensions */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Custom Grid (6x3)</h3>
        <Grid columns={6} rows={3} height="h-32" />
      </div>
    </div>
  )
}


===== EXAMPLE: grid-demo-3 =====
Title: grid-demo-3

--- file: example/grid-demo-3.tsx ---
"use client"

import { Grid } from "@/registry/eldoraui/grid"

export default function GridDemo3() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid without Plus Icons */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid without Plus Icons</h3>
        <Grid columns={8} rows={2} height="h-20" showPlusIcons={false} />
      </div>
    </div>
  )
}


===== EXAMPLE: grid-demo-4 =====
Title: grid-demo-4

--- file: example/grid-demo-4.tsx ---
"use client"

import { Grid } from "@/registry/eldoraui/grid"

export default function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Large Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Large Grid (12x4)</h3>
        <Grid columns={12} rows={4} height="h-40" />
      </div>
    </div>
  )
}


===== EXAMPLE: grid-demo-5 =====
Title: grid-demo-5

--- file: example/grid-demo-5.tsx ---
"use client"

import { Grid } from "@/registry/eldoraui/grid"

export default function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid with Custom Content */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid with Custom Content</h3>
        <Grid columns={4} rows={2} height="h-32" className="bg-muted/20">
          {Array.from({ length: 8 }).map((_, i) => (
            <div
              key={i}
              className="text-muted-foreground flex items-center justify-center border-r border-b text-sm font-medium"
            >
              {i + 1}
            </div>
          ))}
        </Grid>
      </div>
    </div>
  )
}



===== COMPONENT: hacker-background =====
Title: hacker-background
Description: A hacker background component.

--- file: eldoraui/hacker-background.tsx ---
"use client"

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

interface HackerBackgroundProps {
  color?: string
  fontSize?: number
  className?: string
  speed?: number
}

export const HackerBackground: React.FC<HackerBackgroundProps> = ({
  color = "#0F0",
  fontSize = 14,
  className = "",
  speed = 1,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)

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

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

    const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

    resizeCanvas()
    window.addEventListener("resize", resizeCanvas)

    let animationFrameId: number

    const columns = Math.floor(canvas.width / fontSize)
    const drops: number[] = new Array(columns).fill(1)

    const chars =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+"

    let lastTime = 0
    const interval = 33 // ~30 fps

    const draw = (currentTime: number) => {
      animationFrameId = requestAnimationFrame(draw)

      if (currentTime - lastTime < interval) return
      lastTime = currentTime

      ctx.fillStyle = "rgba(0, 0, 0, 0.05)"
      ctx.fillRect(0, 0, canvas.width, canvas.height)

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

      for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)]
        ctx.fillText(text, i * fontSize, drops[i] * fontSize)

        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
          drops[i] = 0
        }
        drops[i] += speed // Use the speed prop to control fall rate
      }
    }

    animationFrameId = requestAnimationFrame(draw)

    return () => {
      window.removeEventListener("resize", resizeCanvas)
      cancelAnimationFrame(animationFrameId)
    }
  }, [color, fontSize, speed])

  return (
    <canvas
      ref={canvasRef}
      className={`pointer-events-none ${className}`}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
      }}
    />
  )
}


===== EXAMPLE: hacker-background-demo =====
Title: hacker-background-demo

--- file: example/hacker-background-demo.tsx ---
import { HackerBackground } from "@/registry/eldoraui/hacker-background"

export default function HackerBackgroundDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <HackerBackground />
    </div>
  )
}


===== EXAMPLE: hacker-background-demo-2 =====
Title: hacker-background-demo-2

--- file: example/hacker-background-demo-2.tsx ---
"use client"

import { HackerBackground } from "@/registry/eldoraui/hacker-background"

export default function HackerBackgroundDemo2() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <HackerBackground
        color="#22d3ee"
        fontSize={8}
        speed={1.5}
        className="opacity-80"
      />
    </div>
  )
}



===== COMPONENT: holographic-card =====
Title: holographic-card
Description: An interactive card with a holographic gradient and mouse‑reactive tilt effect.

--- file: eldoraui/holographic-card.tsx ---
"use client"

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

// ==========================================
// ==== Component Interface ================
// ==========================================
export interface HolographicCardProps {
  id?: string
  width?: number
  height?: number
  imageSrc: string
  // -- Hover Image --
  hoverImageSrc?: string
  hoverImageEase?: string
  // -- Content Strings --
  topText?: React.ReactNode
  bottomText?: React.ReactNode
  // -- Text Layout / Global --
  mirrorBottomText?: boolean
  isRTL?: boolean
  textOverlayPadding?: string
  // -- Top Text Config --
  topTextVertical?: boolean
  topTextWeight?: number | string
  topTextFontSize?: string | number
  topTextLetterSpacing?: string | number
  topTextColor?: string
  topTextHoverColor?: string
  topTextClassName?: string
  // -- Bottom Text Config --
  bottomTextVertical?: boolean
  bottomTextWeight?: number | string
  bottomTextFontSize?: string | number
  bottomTextLetterSpacing?: string | number
  bottomTextColor?: string
  bottomTextHoverColor?: string
  bottomTextClassName?: string
  // -- Base Visuals --
  borderRadius?: number
  borderWidth?: number
  borderColor?: string
  backgroundColor?: string
  imageOpacity?: number
  maxImageWidthPct?: number
  // -- Pattern Props --
  patternColor?: string
  patternOpacity?: number
  patternSize?: number
  patternDotSize?: number
  // -- Hologram --
  enableHologram?: boolean
  hologramOpacity?: number
  holographicGradient?: string
  // -- Interaction --
  enableTilt?: boolean
  enableDrag?: boolean
  dragConstraints?: React.RefObject<Element>
  className?: string
  style?: React.CSSProperties
}

// ==========================================
// ==== Component Implementation ===========
// ==========================================
const HolographicCard: React.FC<HolographicCardProps> = ({
  id = "namer-ui-holographic-card",
  width = 320,
  height = 480,
  imageSrc,
  hoverImageSrc,
  hoverImageEase = "0.3s",
  // Content
  topText,
  bottomText,
  // Layout
  mirrorBottomText = true,
  isRTL = false,
  textOverlayPadding = "1.375rem 1.325rem",
  // Top Text Defaults
  topTextVertical = true,
  topTextWeight = 700,
  topTextFontSize = "1.5rem",
  topTextLetterSpacing = "0.1em",
  topTextColor = "#fff",
  topTextHoverColor = "#FBE75F",
  topTextClassName = "",
  // Bottom Text Defaults
  bottomTextVertical = true,
  bottomTextWeight = 700,
  bottomTextFontSize = "1.5rem",
  bottomTextLetterSpacing = "0.1em",
  bottomTextColor = "#fff",
  bottomTextHoverColor = "#FBE75F",
  bottomTextClassName = "",
  // Base Visuals
  borderRadius = 24,
  borderWidth = 1,
  borderColor = "rgba(255,255,255,0.1)",
  backgroundColor = "#000",
  imageOpacity = 0.9,
  maxImageWidthPct = 1,
  // Pattern
  patternColor = "#000",
  patternOpacity = 0.15,
  patternSize = 3,
  patternDotSize = 1,
  // Hologram / Interaction
  enableHologram = true,
  hologramOpacity = 0.4,
  holographicGradient = "linear-gradient(135deg, transparent 35%, rgba(255,0,128,0.4) 45%, rgba(0,255,255,0.4) 55%, transparent 65%)",
  enableTilt = true,
  enableDrag = false,
  dragConstraints,
  className = "",
  style,
}) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isHovered, setIsHovered] = useState(false)

  // === Tilt Logic ===
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const mouseX = useSpring(x, { stiffness: 200, damping: 25 })
  const mouseY = useSpring(y, { stiffness: 200, damping: 25 })
  const rotateX = useTransform(
    mouseY,
    [-0.5, 0.5],
    enableTilt ? [12, -12] : [0, 0]
  )
  const rotateY = useTransform(
    mouseX,
    [-0.5, 0.5],
    enableTilt ? [-12, 12] : [0, 0]
  )

  // Hologram gradients - EXACTLY like original
  const bgX = useTransform(mouseX, [-0.5, 0.5], ["0%", "100%"])
  const bgY = useTransform(mouseY, [-0.5, 0.5], ["0%", "100%"])
  const shineX = useTransform(mouseX, [-0.5, 0.5], ["0%", "100%"])
  const shineY = useTransform(mouseY, [-0.5, 0.5], ["0%", "100%"])

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current || !enableTilt) return
    const rect = containerRef.current.getBoundingClientRect()
    const xPct = (e.clientX - rect.left) / rect.width - 0.5
    const yPct = (e.clientY - rect.top) / rect.height - 0.5
    x.set(xPct)
    y.set(yPct)
  }

  const handleMouseLeave = () => {
    x.set(0)
    y.set(0)
    setIsHovered(false)
  }

  const handleDragStart = () => {
    if (typeof document !== "undefined") document.body.style.cursor = "grabbing"
  }

  const handleDragEnd = () => {
    if (typeof document !== "undefined") document.body.style.cursor = "default"
  }

  // === Hover Colors ===
  const topTextHoverColorFinal = topTextHoverColor || topTextColor
  const bottomTextHoverColorFinal = bottomTextHoverColor || bottomTextColor

  // === Alignment Logic ===
  const bottomJustify = isRTL !== mirrorBottomText ? "flex-start" : "flex-end"

  // === Scoped IDs ===
  const wrapperClass = `holo-card-wrapper-${id}`
  const cardBodyClass = `holo-card-body-${id}`
  const patternClass = `holo-pattern-${id}`

  return (
    <>
      <style>{`
        .${wrapperClass} {
          position: relative;
          width: ${width}px;
          height: ${height}px;
          perspective: 1200px;
          font-family: inherit;
          user-select: none;
          cursor: ${enableDrag ? "grab" : "default"};
        }
        .${cardBodyClass} {
          position: absolute;
          inset: 0;
          overflow: hidden;
          background-color: ${backgroundColor};
          border-radius: ${borderRadius}px;
          border: ${borderWidth}px solid ${borderColor};
          box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8);
        }
        .${patternClass} {
          position: absolute;
          inset: 0;
          z-index: 10;
          pointer-events: none;
          opacity: ${patternOpacity};
          background-image: radial-gradient(circle, ${patternColor} ${patternDotSize}px, transparent ${patternDotSize}px);
          background-size: ${patternSize}px ${patternSize}px;
        }
      `}</style>
      <motion.div
        drag={enableDrag}
        dragConstraints={dragConstraints}
        dragElastic={0.1}
        whileHover={enableDrag ? { scale: 1.02, cursor: "grab" } : undefined}
        whileTap={enableDrag ? { cursor: "grabbing" } : undefined}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        className={`${wrapperClass} ${className}`}
        style={style}
      >
        <motion.div
          ref={containerRef}
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
          onMouseEnter={() => setIsHovered(true)}
          style={{
            rotateX,
            rotateY,
            transformStyle: "preserve-3d",
            width: "100%",
            height: "100%",
          }}
          className="relative"
        >
          {/* CARD BODY - EXACT SAME LAYERING AS ORIGINAL */}
          <div className={cardBodyClass}>
            {/* Pattern */}
            <div className={patternClass} />

            {/* Background Image 1 (Base) - z-0 like original */}
            <div
              className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center"
              style={{ opacity: imageOpacity }}
            >
              <img
                src={imageSrc}
                alt=""
                draggable={false}
                className="h-full w-full object-cover"
                style={{
                  width: `${maxImageWidthPct * 100}%`,
                  height: "auto",
                  maxHeight: "100%",
                }}
              />
            </div>

            {/* Background Image 2 (Hover Reveal) - z-0 like original */}
            {hoverImageSrc && (
              <div
                className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center"
                style={{
                  opacity: isHovered ? imageOpacity : 0,
                  transition: `opacity ${hoverImageEase} ease`,
                }}
              >
                <img
                  src={hoverImageSrc}
                  alt=""
                  draggable={false}
                  className="h-full w-full object-cover"
                  style={{
                    width: `${maxImageWidthPct * 100}%`,
                    height: "auto",
                    maxHeight: "100%",
                  }}
                />
              </div>
            )}

            {/* Hologram Overlay - z-20 like original, mix-blend-color-dodge */}
            {enableHologram && (
              <motion.div
                className="pointer-events-none absolute inset-0 z-20 mix-blend-color-dodge"
                style={{
                  background: holographicGradient,
                  backgroundSize: "200% 200%",
                  backgroundPositionX: bgX,
                  backgroundPositionY: bgY,
                  opacity: hologramOpacity,
                }}
              />
            )}

            {/* TEXT CONTENT - z-30 like original */}
            <div className="pointer-events-none absolute inset-0 z-30">
              {/* --- TOP TEXT --- */}
              {topText && (
                <div
                  className={topTextClassName}
                  style={{
                    position: "absolute",
                    top: 0,
                    [isRTL ? "right" : "left"]: 0,
                    padding: textOverlayPadding,
                    color: isHovered ? topTextHoverColorFinal : topTextColor,
                    fontWeight: topTextWeight,
                    fontSize: topTextFontSize,
                    letterSpacing: topTextLetterSpacing,
                    writingMode: topTextVertical
                      ? "vertical-rl"
                      : "horizontal-tb",
                    textOrientation: topTextVertical ? "mixed" : undefined,
                    textShadow: isHovered
                      ? `0 0 15px ${topTextHoverColorFinal}`
                      : "none",
                    transition: "all 0.3s ease",
                  }}
                >
                  {topText}
                </div>
              )}

              {/* --- BOTTOM TEXT --- */}
              {bottomText && (
                <div
                  style={{
                    position: "absolute",
                    bottom: 0,
                    left: 0,
                    right: 0,
                    padding: textOverlayPadding,
                    display: "flex",
                    justifyContent: bottomJustify,
                    transform: mirrorBottomText ? "scale(-1, -1)" : "none",
                  }}
                >
                  <div
                    className={bottomTextClassName}
                    style={{
                      color: isHovered
                        ? bottomTextHoverColorFinal
                        : bottomTextColor,
                      fontWeight: bottomTextWeight,
                      fontSize: bottomTextFontSize,
                      letterSpacing: bottomTextLetterSpacing,
                      writingMode: bottomTextVertical
                        ? "vertical-rl"
                        : "horizontal-tb",
                      textOrientation: bottomTextVertical ? "mixed" : undefined,
                      textShadow: isHovered
                        ? `0 0 15px ${bottomTextHoverColorFinal}`
                        : "none",
                      transition: "all 0.3s ease",
                    }}
                  >
                    {bottomText}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* GLARE - z-40 like original, EXACTLY on top, NO image fading */}
          <motion.div
            className="pointer-events-none absolute inset-0 z-40"
            style={{
              borderRadius,
              background: useMotionTemplate`radial-gradient(circle at ${shineX} ${shineY}, rgba(255,255,255,0.2) 0%, transparent 60%)`,
              mixBlendMode: "overlay",
            }}
          />
        </motion.div>
      </motion.div>
    </>
  )
}

export default HolographicCard


===== EXAMPLE: holographic-card-demo =====
Title: holographic-card-demo

--- file: example/holographic-card-demo.tsx ---
import HolographicCard from "@/registry/eldoraui/holographic-card"

export default function HolographicCardDemo() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-12 overflow-hidden px-6 py-12">
      <div className="pointer-events-none absolute inset-0 z-[-1]" />

      {/* Card 1 - Default */}
      <HolographicCard
        width={316}
        height={448}
        imageSrc="https://github.com/Northstrix/my-portfolio/blob/main/public/fourth-playground-card-image.jpg?raw=true"
        topText="旅"
        bottomText="創世"
        borderWidth={1}
        borderColor="rgba(255,255,255,0.1)"
        topTextHoverColor="#FBE75F"
        bottomTextHoverColor="#FBE75F"
      />
    </div>
  )
}


===== EXAMPLE: holographic-card-demo-2 =====
Title: holographic-card-demo

--- file: example/holographic-card-demo-2.tsx ---
import HolographicCard from "@/registry/eldoraui/holographic-card"

export default function HolographicCardDemo2() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-12 overflow-hidden px-6 py-12">
      <div className="pointer-events-none absolute inset-0 z-[-1]" />

      <HolographicCard
        id="namer-ui-holographic-card-2"
        width={316}
        height={448}
        imageSrc="https://github.com/Northstrix/my-portfolio/blob/main/public/playground-card-image.webp?raw=true"
        topText="洪秀全"
        bottomText="洪秀全"
        topTextLetterSpacing="0.375rem"
        bottomTextLetterSpacing="0.375rem"
        maxImageWidthPct={0.64}
        topTextColor="#8E5BEE"
        topTextHoverColor="#E95FF6"
        bottomTextColor="#8E5BEE"
        bottomTextHoverColor="#E95FF6"
        borderWidth={2}
        borderColor="#8E5BEE"
        backgroundColor="#fff"
        patternSize={12.06}
        patternDotSize={1.75}
        patternColor="rgba(142, 91, 238, 0.1)"
      />
    </div>
  )
}


===== EXAMPLE: holographic-card-demo-3 =====
Title: holographic-card-demo

--- file: example/holographic-card-demo-3.tsx ---
import HolographicCard from "@/registry/eldoraui/holographic-card"

export default function HolographicCardDemo3() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-12 overflow-hidden px-6 py-12">
      <div className="pointer-events-none absolute inset-0 z-[-1]" />

      <HolographicCard
        id="namer-ui-holographic-card-3"
        width={316}
        height={448}
        imageSrc="https://github.com/Northstrix/my-portfolio/blob/main/public/third-playground-card-image.png?raw=true"
        topText="נמר"
        bottomText="I'm draggable!"
        topTextLetterSpacing="0.0175rem"
        bottomTextLetterSpacing="0.0175rem"
        textOverlayPadding="1.125rem 1.375rem"
        maxImageWidthPct={0.54}
        topTextColor="#5F73FB"
        topTextHoverColor="#5FA4FB"
        bottomTextColor="#5F73FB"
        bottomTextHoverColor="#5FA4FB"
        borderWidth={2}
        borderColor="#5F73FB"
        topTextVertical={false}
        bottomTextVertical={false}
        mirrorBottomText={false}
        enableDrag={true}
        isRTL
        patternColor="rgba(95, 115, 251, 0.15)"
      />
    </div>
  )
}



===== COMPONENT: integrations =====
Title: integrations
Description: An integrations component.

--- file: eldoraui/integrations.tsx ---
"use client"

import { useEffect, useId, useRef, useState } from "react"
import {
  BarChart,
  File,
  Globe,
  HeartHandshake,
  Rss,
  Shield,
} from "lucide-react"
import { motion, useAnimation, useInView } from "motion/react"

import { cn } from "@/lib/utils"
import { Marquee } from "@/registry/eldoraui/marquee"

const tiles = [
  {
    icon: <HeartHandshake className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
    ),
  },
  {
    icon: <Globe className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
    ),
  },
  {
    icon: <File className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
    ),
  },
  {
    icon: <Shield className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
    ),
  },
  {
    icon: <Rss className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
    ),
  },
  {
    icon: <BarChart className="size-full" />,
    bg: (
      <div className="pointer-events-none absolute top-1/2 left-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-600 via-cyan-500 to-teal-400 opacity-70 blur-[20px]"></div>
    ),
  },
]

function shuffleArray<T>(array: T[]): T[] {
  let currentIndex = array.length
  let randomIndex
  // While there remain elements to shuffle.
  while (currentIndex !== 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--
    // And swap it with the current element.
    ;[array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex],
    ]
  }
  return array
}

function Card(card: { icon: React.ReactNode; bg: React.ReactNode }) {
  const id = useId()
  const controls = useAnimation()
  const ref = useRef(null)
  const inView = useInView(ref, { once: true })

  useEffect(() => {
    if (inView) {
      controls.start({
        opacity: 1,
        transition: { delay: Math.random() * 2, ease: "easeOut", duration: 1 },
      })
    }
  }, [controls, inView])

  return (
    <motion.div
      key={id}
      ref={ref}
      initial={{ opacity: 0 }}
      animate={controls}
      className={cn(
        "relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4",
        // light styles
        "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
        // dark styles
        "transform-gpu dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]"
      )}
    >
      {card.icon}
      {card.bg}
    </motion.div>
  )
}

export default function Integrations() {
  const [randomTiles1, setRandomTiles1] = useState<typeof tiles>([])
  const [randomTiles2, setRandomTiles2] = useState<typeof tiles>([])
  const [randomTiles3, setRandomTiles3] = useState<typeof tiles>([])
  const [randomTiles4, setRandomTiles4] = useState<typeof tiles>([])

  useEffect(() => {
    if (typeof window !== "undefined") {
      // Ensures this runs client-side
      setRandomTiles1(shuffleArray([...tiles]))
      setRandomTiles2(shuffleArray([...tiles]))
      setRandomTiles3(shuffleArray([...tiles]))
      setRandomTiles4(shuffleArray([...tiles]))
    }
  }, [])

  return (
    <section id="cta">
      <div className="container mx-auto px-4 py-12 md:px-8">
        <div className="flex w-full flex-col items-center justify-center">
          <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
            <Marquee
              reverse
              className="-delay-[200ms] [--duration:10s]"
              repeat={5}
            >
              {randomTiles1.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <Marquee reverse className="[--duration:25s]" repeat={5}>
              {randomTiles2.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <Marquee
              reverse
              className="-delay-[200ms] [--duration:20s]"
              repeat={5}
            >
              {randomTiles1.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <Marquee reverse className="[--duration:30s]" repeat={5}>
              {randomTiles2.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <Marquee
              reverse
              className="-delay-[200ms] [--duration:20s]"
              repeat={5}
            >
              {randomTiles3.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <Marquee reverse className="[--duration:30s]" repeat={5}>
              {randomTiles4.map((review, idx) => (
                <Card key={idx} {...review} />
              ))}
            </Marquee>
            <div className="absolute">
              <div className="bg-backtround dark:bg-background absolute inset-0 -z-10 rounded-full opacity-40 blur-xl" />
            </div>
            <div className="to-backtround dark:to-background absolute inset-x-0 bottom-0 h-full bg-gradient-to-b from-transparent to-70%" />
          </div>
        </div>
      </div>
    </section>
  )
}


===== EXAMPLE: integrations-demo =====
Title: integrations-demo

--- file: example/integrations-demo.tsx ---
"use client"

import Integrations from "@/registry/eldoraui/integrations"

export function IntegrationsDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <Integrations />
    </div>
  )
}


===== EXAMPLE: integrations-demo-2 =====
Title: integrations-demo-2

--- file: example/integrations-demo-2.tsx ---
"use client"

import { motion } from "motion/react"

import Integrations from "@/registry/eldoraui/integrations"

export function IntegrationsDemo2() {
  return (
    <div className="bg-background relative h-[600px] w-full overflow-hidden rounded-lg border">
      {/* Background Integrations Component */}
      <div className="absolute inset-0 opacity-30">
        <Integrations />
      </div>

      {/* Fading Overlay */}
      <div className="from-background/80 via-background/60 to-background/90 absolute inset-0 bg-gradient-to-b" />

      {/* Main Content */}
      <div className="relative z-10 flex h-full flex-col items-center justify-center p-8 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="max-w-2xl space-y-6"
        >
          <h2 className="text-foreground text-4xl font-bold tracking-tight">
            Seamless Integrations
          </h2>
          <p className="text-muted-foreground text-lg">
            Connect with your favorite tools and services. Our platform
            integrates with over 100+ applications to streamline your workflow
            and boost productivity.
          </p>
          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-3 font-medium transition-colors"
            >
              Explore Integrations
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="border-border hover:bg-accent rounded-lg border px-6 py-3 font-medium transition-colors"
            >
              View Documentation
            </motion.button>
          </div>
        </motion.div>
      </div>
    </div>
  )
}



===== COMPONENT: ipad =====
Title: ipad
Description: An iPad SVG component.

--- file: eldoraui/ipad.tsx ---
import type { SVGProps } from "react"

export interface IpadProps extends SVGProps<SVGSVGElement> {
  width?: number
  height?: number
  src?: string
}

export function Ipad({ width = 520, height = 400, src, ...props }: IpadProps) {
  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#aaabac"
        d="M479.04,14.14H88.14v-.59c0-.16-.13-.3-.3-.3h-16.7c-.16,0-.3.13-.3.3v.59h-3.46v-.59c0-.16-.13-.3-.3-.3h-16.7c-.16,0-.3.13-.3.3v.59h-9.13c-13.4,0-24.27,10.78-24.45,24.14h-.48c-.16,0-.3.13-.3.3v20.07c0,.16.13.3.3.3h.47v303.38c0,13.51,10.95,24.45,24.45,24.45h438.08c13.51,0,24.45-10.95,24.45-24.45V38.6c0-13.51-10.95-24.45-24.45-24.45Z"
      />
      <rect
        fill="#000"
        x="18.58"
        y="15.94"
        width="482.84"
        height="368.91"
        rx="23.29"
        ry="23.29"
      />
      <rect
        fill="currentColor"
        x="31.37"
        y="28.47"
        width="457.25"
        height="342.87"
        rx="9.61"
        ry="9.61"
      />
      {src && (
        <image
          href={src}
          x="31.37"
          y="28.47"
          width="457.25"
          height="342.87"
          preserveAspectRatio="xMidYMid slice"
          clipPath="url(#roundedCorners)"
        />
      )}
      <circle fill="#0a1054" cx="245.1" cy="22.23" r="2.44" />
      <circle fill="#333" cx="274.98" cy="22.23" r=".88" />
      <defs>
        <clipPath id="roundedCorners">
          <rect
            fill="#ffffff"
            x="31.37"
            y="28.47"
            width="457.25"
            height="342.87"
            rx="9.61"
            ry="9.61"
          />
        </clipPath>
      </defs>
    </svg>
  )
}


===== EXAMPLE: ipad-demo =====
Title: ipad-demo

--- file: example/ipad-demo.tsx ---
import { Ipad } from "@/registry/eldoraui/ipad"

export function iPadDemo() {
  return (
    <div className="relative">
      <Ipad
        src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/ipados-14-ipad-air-2020-pink-light-stock-aesthetic-3840x2160-2917.jpg"
        className="size-full"
      />
    </div>
  )
}



===== COMPONENT: iphone-17-pro =====
Title: iphone-17-pro
Description: An iPhone 17 Pro SVG component.

--- file: eldoraui/iphone-17-pro.tsx ---
import type { SVGProps } from "react"

export interface Iphone17ProProps extends SVGProps<SVGSVGElement> {
  width?: number
  height?: number
  src?: string
}

export function Iphone17Pro({
  width = 200,
  height = 400,
  src,
  ...props
}: Iphone17ProProps) {
  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#303333"
        d="M196.11,128.09c0-.25-.2-.45-.45-.45-.11.04-.37.03-.69,0V36.69c0-17.84-14.46-32.31-32.31-32.31H37.48C19.63,4.39,5.17,18.85,5.17,36.69v48.99c-.3.02-.55.03-.66-.02-.25,0-.45.2-.45.45,0,0,0,17.29,0,17.29-.03.41.5.49,1.11.48v13.63c-.61,0-1.14.08-1.11.48,0,0,0,28.54,0,28.54-.03.42.5.49,1.11.48v7.95c-.61,0-1.14.08-1.11.48,0,0,0,28.54,0,28.54-.03.42.5.49,1.11.48v178.86c0,17.84,14.46,32.31,32.31,32.31h125.2c17.84,0,32.31-14.46,32.31-32.31v-188.87c.32-.02.58-.03.69.04,1.26.1.03-45.94.45-46.38ZM186.07,362.63c0,13.56-10.99,24.56-24.56,24.56H38.64c-13.56,0-24.56-10.99-24.56-24.56V37.37c0-13.56,10.99-24.56,24.56-24.56h122.87c13.56,0,24.56,10.99,24.56,24.56v325.26Z"
      />
      <path
        fill="#000000"
        d="M161.38,7.29H38.78c-16.54,0-29.95,13.41-29.95,29.95v325.52c0,16.54,13.41,29.95,29.95,29.95h122.6c16.54,0,29.95-13.41,29.95-29.95V37.24c0-16.54-13.41-29.95-29.95-29.95ZM186.07,362.57c0,13.6-11.02,24.62-24.62,24.62H38.7c-13.6,0-24.62-11.02-24.62-24.62V37.43c0-13.6,11.02-24.62,24.62-24.62h122.75c13.6,0,24.62,11.02,24.62,24.62v325.14Z"
      />

      <rect
        fill="currentColor"
        x="14.08"
        y="12.81"
        width="171.98"
        height="374.37"
        rx="24.62"
        ry="24.62"
      />
      {src && (
        <image
          href={src}
          x="14.08"
          y="12.81"
          width="171.98"
          height="374.37"
          rx="24.62"
          ry="24.62"
          preserveAspectRatio="xMidYMid slice"
          clipPath="url(#roundedCorners)"
        />
      )}
      <path
        fill="#000000"
        d="M119.61,33.86h-38.93c-10.48-.18-10.5-15.78,0-15.96,0,0,38.93,0,38.93,0,4.41,0,7.98,3.57,7.98,7.98,0,4.41-3.57,7.98-7.98,7.98Z"
      />
      <path
        fill="#080d4c"
        d="M118.78,29.21c-4.32.06-4.32-6.73,0-6.66,4.32-.06,4.32,6.73,0,6.66Z"
      />

      <defs>
        <clipPath id="roundedCorners">
          <rect
            fill="#ffffff"
            x="14.08"
            y="12.81"
            width="171.98"
            height="374.37"
            rx="24.62"
            ry="24.62"
          />
        </clipPath>
      </defs>
    </svg>
  )
}


===== EXAMPLE: iphone-17-pro-demo =====
Title: iphone-17-pro-demo

--- file: example/iphone-17-pro-demo.tsx ---
import { Iphone17Pro } from "@/registry/eldoraui/iphone-17-pro"

export function iPhone17ProDemo() {
  return (
    <div className="relative">
      <Iphone17Pro
        src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/iPhone17Pro_Orange.jpg"
        className="h-80 w-full"
      />
    </div>
  )
}



===== COMPONENT: letter-pull-up-text =====
Title: letter-pull-up-text
Description: A letter pull up text component.

--- file: eldoraui/letter-pull-up-text.tsx ---
"use client"

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

interface LetterPullUpTextProps {
  text?: string
  className?: string
}

export const LetterPullUpText: React.FC<LetterPullUpTextProps> = ({
  text = "",
  className = "",
}) => {
  const letters = text.split("")

  const pullupVariant = {
    initial: { y: 100, opacity: 0 },
    animate: (i: number) => ({
      y: 0,
      opacity: 1,
      transition: {
        delay: i * 0.05, // Delay each letter's animation by 0.05 seconds
        duration: 0.5, // Adjust duration for smoothness
      },
    }),
  }

  return (
    <div className={clsx("flex justify-center", className)}>
      {letters.map((letter, i) => (
        <motion.h1
          key={i}
          variants={pullupVariant}
          initial="initial"
          animate="animate"
          custom={i}
          className={clsx(
            "font-display text-center font-bold drop-shadow-sm",
            "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
            "tracking-[-0.02em]",
            "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
          )}
        >
          {letter === " " ? <span>&nbsp;</span> : letter}
        </motion.h1>
      ))}
    </div>
  )
}


===== EXAMPLE: letter-pull-up-text-demo =====
Title: letter-pull-up-text-demo

--- file: example/letter-pull-up-text-demo.tsx ---
import { LetterPullUpText } from "@/registry/eldoraui/letter-pull-up-text"

export function LetterPullUpTextDemo() {
  return (
    <LetterPullUpText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Letter Pull Up"
    />
  )
}



===== COMPONENT: live-button =====
Title: live-button
Description: A live button component.

--- file: eldoraui/live-button.tsx ---
"use client"

import React, { useState } from "react"

interface LiveButtonProps {
  text: string
  url: string
  className?: string
}

export default function LiveButton({
  text,
  url,
  className = "",
}: LiveButtonProps) {
  const [isHovered, setIsHovered] = useState(false)
  const [isPressed, setIsPressed] = useState(false)

  return (
    <button
      className={`group relative flex h-12 min-w-[9.3rem] items-center justify-center gap-3 overflow-hidden rounded-lg border border-gray-300 bg-white px-6 transition-all duration-500 ease-out before:absolute before:inset-0 before:translate-x-[-100%] before:bg-gradient-to-r before:from-transparent before:via-black/5 before:to-transparent before:transition-transform before:duration-700 hover:scale-105 hover:border-gray-400 hover:shadow-lg hover:shadow-black/20 hover:before:translate-x-[100%] active:scale-95 dark:border-gray-600 dark:bg-black dark:before:via-white/5 dark:hover:border-gray-500 dark:hover:shadow-white/20 ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false)
        setIsPressed(false)
      }}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      onClick={() => (window.location.href = url)}
    >
      {/* Subtle glow effect */}
      <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-cyan-200/0 via-cyan-200/10 to-cyan-200/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-cyan-200/0 dark:via-cyan-200/10 dark:to-cyan-200/0"></div>

      {/* Text */}
      <span className="relative z-10 text-sm font-medium tracking-wide whitespace-nowrap text-black transition-all duration-300 group-hover:text-cyan-600 dark:text-white dark:group-hover:text-cyan-50">
        {text}
      </span>

      {/* Animated dot */}
      <span
        className={`relative z-10 h-3 w-3 rounded-full bg-cyan-400 transition-all duration-500 ease-out ${isHovered ? "scale-125 bg-cyan-300 shadow-lg shadow-cyan-300/50" : ""} ${isPressed ? "scale-90" : ""} before:absolute before:inset-0 before:animate-pulse before:rounded-full before:bg-cyan-200 before:opacity-0 group-hover:before:opacity-50`}
      >
        {/* Ripple effect */}
        <div
          className="absolute inset-0 animate-ping rounded-full bg-cyan-400 opacity-0 group-hover:opacity-60"
          style={{ animationDuration: "2s" }}
        ></div>
      </span>

      {/* Hover state border animation */}
      <div className="absolute inset-0 animate-pulse rounded-lg border-2 border-cyan-200/0 opacity-0 transition-all duration-500 group-hover:border-cyan-500/30 group-hover:opacity-100 dark:group-hover:border-cyan-200/30"></div>
    </button>
  )
}


===== EXAMPLE: live-button-demo =====
Title: live-button-demo

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

import LiveButton from "@/registry/eldoraui/live-button"

export function LiveButtonDemo() {
  return <LiveButton text="Get Started" url="https://www.eldoraui.site/" />
}



===== COMPONENT: logo-timeline =====
Title: logo-timeline
Description: An animated logo timeline component with horizontal scrolling logos.

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

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

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

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: keyof typeof Icons
  /** 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"

  const getIconComponent = (iconName: keyof typeof Icons) => {
    const Icon = Icons[iconName]
    if (!Icon) {
      return null
    }
    return (
      <Icon
        className="shrink-0"
        style={{ width: iconSize, height: iconSize }}
        aria-hidden="true"
      />
    )
  }

  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-type:inline-size] 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-gradient-to-r from-[2px] to-[2px] bg-[length:12px_100%]" />
              {showRowSeparator && (
                <div className="from-foreground/5 dark:from-foreground/5 absolute inset-x-0 bottom-0 h-0.5 bg-gradient-to-r from-[2px] to-[2px] bg-[length:12px_100%] group-last:hidden" />
              )}
              {rowItems.map((logo) => {
                const IconComponent = getIconComponent(logo.icon)
                if (!IconComponent) {
                  return null
                }
                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",
                      "from-secondary/50 to-secondary/50 ring-background/10 dark:ring-foreground/10 rounded-full bg-gradient-to-t from-50% ring-1 backdrop-blur-sm ring-inset",
                      "[--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-iteration-count:infinite] [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,
                    }}
                  >
                    {IconComponent}
                    <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 { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

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


===== EXAMPLE: logo-timeline-demo-2 =====
Title: logo-timeline-demo-2

--- file: example/logo-timeline-demo-2.tsx ---
import { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    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-[500px]"
        iconSize={18}
        showRowSeparator={true}
        animateOnHover={true}
      />
    </div>
  )
}



===== COMPONENT: macbook-pro =====
Title: macbook-pro
Description: A MacBook Pro SVG component.

--- file: eldoraui/macbook-pro.tsx ---
import type { SVGProps } from "react"

export interface MacbookProProps extends SVGProps<SVGSVGElement> {
  width?: number
  height?: number
  src?: string
}

export function MacbookPro({
  width = 650,
  height = 400,
  src,
  ...props
}: MacbookProProps) {
  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#a4a5a7"
        d="M79.56,13.18h491.32c7.23,0,13.1,5.87,13.1,13.1v336.61H66.46V26.28c0-7.23,5.87-13.1,13.1-13.1Z"
      />

      <path
        fill="#222"
        d="M79.96,14.24h490.45c6.83,0,12.37,5.54,12.37,12.37v336.28H67.59V26.6c0-6.83,5.54-12.37,12.37-12.37Z"
      />

      <path
        fill="#000"
        d="M570.25,15.74H80.34c-6.12,0-11.08,4.96-11.08,11.08v336.07h512.08V26.82c0-6.12-4.96-11.08-11.08-11.08ZM575.74,345.17H74.52V27.31c0-3.31,2.68-5.99,5.99-5.99h489.24c3.31,0,5.99,2.68,5.99,5.99v317.86Z"
      />
      <rect
        fill="currentColor"
        x="74.52"
        y="21.32"
        width="501.22"
        rx="5"
        ry="5"
        height="323.85"
      />
      {src && (
        <image
          href={src}
          x="74.52"
          y="21.32"
          width="501.22"
          height="323.85"
          preserveAspectRatio="xMidYMid slice"
          clipPath="url(#roundedCorners)"
        />
      )}
      <rect fill="#1d1d1d" x="69.09" y="350.51" width="512.11" height="12.48" />

      <path
        fill="#000"
        d="M298.14,21.02h54.07v6.5c0,1.56-1.27,2.82-2.82,2.82h-48.42c-1.56,0-2.82-1.27-2.82-2.82v-6.5h0Z"
      />
      <path
        fill="#acadaf"
        d="M19.04,362.77h611.92v10.39c0,5.95-4.83,10.79-10.79,10.79H29.83c-5.95,0-10.79-4.83-10.79-10.79v-10.39h0Z"
      />

      <path
        fill="#080d4c"
        d="M325.11,25.14c-1.99.03-1.99-3.09,0-3.06,1.99-.03,1.99,3.09,0,3.06Z"
      />

      <polygon
        fill="#b9b9bb"
        points="600.06 385.39 567.29 385.39 565.84 383.95 601.82 383.95 600.06 385.39"
      />
      <polygon
        fill="#292929"
        points="598.73 386.82 568.64 386.82 567.32 385.39 600.35 385.39 598.73 386.82"
      />
      <polygon
        fill="#b9b9bb"
        points="82.64 385.39 49.87 385.39 48.43 383.95 84.41 383.95 82.64 385.39"
      />
      <polygon
        fill="#292929"
        points="81.31 386.82 51.23 386.82 49.9 385.39 82.93 385.39 81.31 386.82"
      />
      <path
        fill="#8f9091"
        d="M278.11,362.6h94.05c0,3.63-2.95,6.58-6.58,6.58h-80.89c-3.63,0-6.58-2.95-6.58-6.58h0Z"
      />

      <defs>
        <clipPath id="roundedCorners">
          <rect
            fill="#ffffff"
            x="74.52"
            y="21.32"
            width="501.22"
            height="323.85"
            rx="5"
            ry="5"
          />
        </clipPath>
      </defs>
    </svg>
  )
}


===== EXAMPLE: macbook-pro-demo =====
Title: macbook-pro-demo

--- file: example/macbook-pro-demo.tsx ---
import { MacbookPro } from "@/registry/eldoraui/macbook-pro"

export function MacbookProDemo() {
  return (
    <div className="relative">
      <MacbookPro
        src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/m.webp"
        className="size-full"
      />
    </div>
  )
}



===== COMPONENT: map =====
Title: map
Description: An animated map component with location markers.

--- file: eldoraui/map.tsx ---
"use client"

import { motion } from "motion/react"

function Marker({
  src,
  top,
  offset,
  delay,
}: {
  src: string
  top: number
  offset: number
  delay: number
}) {
  return (
    <motion.div
      variants={{
        idle: { scale: 0, opacity: 0, rotateX: 0, rotate: 0, y: 0 },
        active: { y: [-20, 0, 4, 0], scale: [0.75, 1], opacity: [0, 1] },
      }}
      transition={{ duration: 0.25, delay, ease: "easeOut" }}
      style={{ "--offset": `${offset}px`, top } as React.CSSProperties}
      className="absolute left-[calc(50%+var(--offset))] size-[38px] drop-shadow-[0_3px_1px_rgba(0,0,0,.15)]"
    >
      <svg fill="none" viewBox="0 0 38 38" className="absolute size-full">
        <path
          d="M29.607 5.193c5.858 5.857 5.858 15.355 0 21.213l-9.9 9.9-.707.706-.708-.708-9.899-9.898c-5.857-5.858-5.857-15.356 0-21.213 5.858-5.858 15.356-5.858 21.214 0Z"
          className="fill-black/5"
        />
        <path
          d="m28.9 25.698-9.9 9.9-9.9-9.9C3.634 20.232 3.634 11.367 9.1 5.9 14.569.432 23.433.432 28.9 5.9c5.467 5.468 5.467 14.332 0 19.8Z"
          className="fill-white"
        />
      </svg>
      <img
        alt=""
        src={src}
        className="absolute top-[4px] left-[7px] size-6 rounded-full"
      />
    </motion.div>
  )
}

export function Map() {
  return (
    <motion.div
      initial="idle"
      whileHover="active"
      variants={{ idle: {}, active: {} }}
      aria-hidden="true"
      className="relative size-full"
    >
      <div className="absolute inset-0 bg-[url(https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/map.png)] mask-[linear-gradient(to_bottom,black_50%,transparent)] bg-size-[530px_430px] bg-position-[center_-75px] bg-no-repeat dark:mask-[linear-gradient(to_bottom,black_50%,transparent)]" />
      <div className="absolute inset-0">
        <Marker
          src="https://avatar.vercel.sh/karthik"
          top={96}
          offset={-128}
          delay={0.15}
        />
        <Marker
          src="https://avatar.vercel.sh/varma"
          top={160}
          offset={-16}
          delay={0.4}
        />
        <Marker
          src="https://avatar.vercel.sh/pawan"
          top={144}
          offset={96}
          delay={0.3}
        />
        <Marker
          src="https://avatar.vercel.sh/mark"
          top={192}
          offset={64}
          delay={0.6}
        />
        <Marker
          src="https://avatar.vercel.sh/jeff"
          top={224}
          offset={-32}
          delay={0.8}
        />
      </div>
      <div className="absolute inset-0 bg-gradient-to-b from-white to-[50%] dark:from-neutral-950 dark:to-[70%]" />
    </motion.div>
  )
}


===== EXAMPLE: map-demo =====
Title: map-demo

--- file: example/map-demo.tsx ---
import { Map } from "@/registry/eldoraui/map"

export function MapDemo() {
  return (
    <div className="relative mx-auto h-[400px] w-full max-w-[600px]">
      <Map />
    </div>
  )
}



===== COMPONENT: marquee =====
Title: marquee
Description: A performant, customizable marquee (scrolling text/content) component.

--- file: eldoraui/marquee.tsx ---
import { cn } from "@/lib/utils"

interface MarqueeProps {
  className?: string
  reverse?: boolean
  pauseOnHover?: boolean
  children?: React.ReactNode
  vertical?: boolean
  repeat?: number
  [key: string]: unknown
}

export function Marquee({
  className,
  reverse,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
        {
          "flex-row": !vertical,
          "flex-col": vertical,
        },
        className
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
              "animate-marquee flex-row": !vertical,
              "animate-marquee-vertical flex-col": vertical,
              "group-hover:[animation-play-state:paused]": pauseOnHover,
              "[animation-direction:reverse]": reverse,
            })}
          >
            {children}
          </div>
        ))}
    </div>
  )
}



===== COMPONENT: multi-direction-slide-text =====
Title: multi-direction-slide-text
Description: A multi direction slide text component.

--- file: eldoraui/multi-direction-slide-text.tsx ---
"use client"

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

interface MultiDirectionSlideTextProps {
  textLeft?: string
  textRight?: string
  className?: string
}

export const MultiDirectionSlideText: React.FC<
  MultiDirectionSlideTextProps
> = ({ textLeft = "", textRight = "", className = "" }) => {
  const MULTIDIRECTION_SLIDE_VARIANTS = {
    hidden: { opacity: 0, x: "-25vw" },
    visible: { opacity: 1, x: 0 },
    right: { opacity: 0, x: "25vw" },
  }

  return (
    <div className={clsx("overflow-hidden", className)}>
      <motion.h1
        initial="hidden"
        animate="visible"
        variants={MULTIDIRECTION_SLIDE_VARIANTS}
        transition={{ duration: 1 }}
        className={clsx(
          "font-display text-center font-bold drop-shadow-sm",
          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
          "tracking-[-0.02em]",
          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
        )}
      >
        {textLeft}
      </motion.h1>

      <motion.h1
        initial="right"
        animate="visible"
        variants={MULTIDIRECTION_SLIDE_VARIANTS}
        transition={{ duration: 1 }}
        className={clsx(
          "font-display text-center font-bold drop-shadow-sm",
          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
          "tracking-[-0.02em]",
          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
        )}
      >
        {textRight}
      </motion.h1>
    </div>
  )
}


===== EXAMPLE: multi-direction-slide-text-demo =====
Title: multi-direction-slide-text-demo

--- file: example/multi-direction-slide-text-demo.tsx ---
import { MultiDirectionSlideText } from "@/registry/eldoraui/multi-direction-slide-text"

export function MultiDirectionSlideTextDemo() {
  return (
    <MultiDirectionSlideText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      textLeft="Multidirectional"
      textRight="Slide"
    />
  )
}



===== COMPONENT: novatrix-background =====
Title: novatrix-background
Description: A novatrix background component.

--- file: eldoraui/novatrix-background.tsx ---
"use client"

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

const vertexShader = `
attribute vec2 uv;
attribute vec2 position;

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = vec4(position, 0, 1);
}
`

const fragmentShader = `
precision highp float;

uniform float uTime;
uniform vec3 uColor;
uniform vec3 uResolution;
uniform vec2 uMouse;
uniform float uAmplitude;
uniform float uSpeed;

varying vec2 vUv;

void main() {
  float mr = min(uResolution.x, uResolution.y);
  vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;

  uv += (uMouse - vec2(0.5)) * uAmplitude;

  float d = -uTime * 0.5 * uSpeed;
  float a = 0.0;
  for (float i = 0.0; i < 8.0; ++i) {
    a += cos(i - d - a * uv.x);
    d += sin(uv.y * i + a);
  }
  d += uTime * 0.5 * uSpeed;
  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);
  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;
  gl_FragColor = vec4(col, 1.0);
}
`

interface NovatrixProps {
  color?: [number, number, number]
  speed?: number
  amplitude?: number
  mouseReact?: boolean
}

export default function Novatrix({
  color = [1, 1, 1],
  speed = 1.0,
  amplitude = 0.1,
  mouseReact = false,
  ...rest
}: NovatrixProps) {
  const ctnDom = useRef<HTMLDivElement>(null)
  const mousePos = useRef({ x: 0.5, y: 0.5 })

  useEffect(() => {
    if (!ctnDom.current) return
    const ctn = ctnDom.current
    const renderer = new Renderer()
    const gl = renderer.gl
    gl.clearColor(1, 1, 1, 1)

    // eslint-disable-next-line prefer-const
    let program: Program

    function resize() {
      const scale = 1
      renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale)
      if (program) {
        program.uniforms.uResolution.value = new Color(
          gl.canvas.width,
          gl.canvas.height,
          gl.canvas.width / gl.canvas.height
        )
      }
    }
    window.addEventListener("resize", resize, false)
    resize()

    const geometry = new Triangle(gl)
    program = new Program(gl, {
      vertex: vertexShader,
      fragment: fragmentShader,
      uniforms: {
        uTime: { value: 0 },
        uColor: { value: new Color(...color) },
        uResolution: {
          value: new Color(
            gl.canvas.width,
            gl.canvas.height,
            gl.canvas.width / gl.canvas.height
          ),
        },
        uMouse: {
          value: new Float32Array([mousePos.current.x, mousePos.current.y]),
        },
        uAmplitude: { value: amplitude },
        uSpeed: { value: speed },
      },
    })

    const mesh = new Mesh(gl, { geometry, program })
    let animateId: number

    function update(t: number) {
      animateId = requestAnimationFrame(update)
      program.uniforms.uTime.value = t * 0.001
      renderer.render({ scene: mesh })
    }
    animateId = requestAnimationFrame(update)
    ctn.appendChild(gl.canvas)

    function handleMouseMove(e: MouseEvent) {
      const rect = ctn.getBoundingClientRect()
      const x = (e.clientX - rect.left) / rect.width
      const y = 1.0 - (e.clientY - rect.top) / rect.height
      mousePos.current = { x, y }
      program.uniforms.uMouse.value[0] = x
      program.uniforms.uMouse.value[1] = y
    }
    if (mouseReact) {
      ctn.addEventListener("mousemove", handleMouseMove)
    }

    return () => {
      cancelAnimationFrame(animateId)
      window.removeEventListener("resize", resize)
      if (mouseReact) {
        ctn.removeEventListener("mousemove", handleMouseMove)
      }
      ctn.removeChild(gl.canvas)
      gl.getExtension("WEBGL_lose_context")?.loseContext()
    }
  }, [color, speed, amplitude, mouseReact])

  return <div ref={ctnDom} className="h-full w-full" {...rest} />
}


===== EXAMPLE: novatrix-background-demo =====
Title: novatrix-background-demo

--- file: example/novatrix-background-demo.tsx ---
"use client"

import Novatrix from "@/registry/eldoraui/novatrix-background"

export default function NovatrixbgDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <Novatrix color={[1, 1, 1]} amplitude={0.1} speed={1.0} />
    </div>
  )
}


===== EXAMPLE: novatrix-background-demo-2 =====
Title: novatrix-background-demo-2

--- file: example/novatrix-background-demo-2.tsx ---
"use client"

import Novatrix from "@/registry/eldoraui/novatrix-background"

export default function NovatrixbgDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <Novatrix
        color={[1, 1, 1]}
        amplitude={0.1}
        mouseReact={true}
        speed={1.0}
      />
    </div>
  )
}



===== COMPONENT: orbit-rotation =====
Title: orbit-rotation
Description: An orbit rotation component with customizable icons.

--- file: eldoraui/orbit-rotation.tsx ---
"use client"

import type React from "react"
import {
  FaApple,
  FaAws,
  FaDocker,
  FaGithub,
  FaGoogle,
  FaInstagram,
  FaLinkedin,
  FaNodeJs,
  FaReact,
  FaTwitter,
} from "react-icons/fa"
import {
  SiFacebook,
  SiNextdotjs,
  SiRedux,
  SiTypescript,
  SiVercel,
} from "react-icons/si"

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

interface OrbitIcon {
  Icon: React.ComponentType<{ className?: string }>
  name?: string
}

interface OrbitRotationProps {
  icons?: OrbitIcon[]
  orbitCount?: number
  orbitGap?: number
  centerIcon?: OrbitIcon
  className?: string
  size?: "sm" | "md" | "lg"
}

const defaultIcons: OrbitIcon[] = [
  { Icon: FaReact, name: "React" },
  { Icon: FaAws, name: "AWS" },
  { Icon: FaDocker, name: "Docker" },
  { Icon: FaNodeJs, name: "Node.js" },
  { Icon: SiNextdotjs, name: "Next.js" },
  { Icon: SiVercel, name: "Vercel" },
  { Icon: SiRedux, name: "Redux" },
  { Icon: SiTypescript, name: "TypeScript" },
  { Icon: FaGithub, name: "GitHub" },
  { Icon: FaTwitter, name: "Twitter" },
  { Icon: FaLinkedin, name: "LinkedIn" },
  { Icon: FaInstagram, name: "Instagram" },
  { Icon: FaGoogle, name: "Google" },
  { Icon: FaApple, name: "Apple" },
  { Icon: SiFacebook, name: "Facebook" },
]

const defaultCenterIcon: OrbitIcon = {
  Icon: FaReact,
  name: "React",
}

export function OrbitRotation({
  icons = defaultIcons,
  orbitCount = 3,
  orbitGap = 6,
  centerIcon = defaultCenterIcon,
  className,
  size = "md",
  ...props
}: OrbitRotationProps) {
  const iconsPerOrbit = Math.ceil(icons.length / orbitCount)

  const sizeClasses = {
    sm: "w-16 h-16",
    md: "w-24 h-24",
    lg: "w-32 h-32",
  }

  const iconSizeClasses = {
    sm: "w-6 h-6",
    md: "w-8 h-8",
    lg: "w-10 h-10",
  }

  return (
    <div
      className={cn("relative flex items-center justify-center", className)}
      {...props}
    >
      <div className="relative flex items-center justify-center">
        {/* Center Icon */}
        <div
          className={cn(
            "bg-background/90 border-border/50 flex items-center justify-center rounded-full border shadow-xl backdrop-blur-sm",
            sizeClasses[size]
          )}
        >
          <centerIcon.Icon className={cn(iconSizeClasses[size])} />
        </div>

        {/* Generate Orbits */}
        {[...Array(orbitCount)].map((_, orbitIdx) => {
          const orbitSize = `${8 + orbitGap * (orbitIdx + 1)}rem`
          const angleStep = (2 * Math.PI) / iconsPerOrbit
          const animationDuration = `${12 + orbitIdx * 6}s`

          return (
            <div
              key={orbitIdx}
              className="border-muted-foreground/30 absolute rounded-full border-2 border-dotted"
              style={{
                width: orbitSize,
                height: orbitSize,
                animation: `orbit-spin ${animationDuration} linear infinite`,
              }}
            >
              {icons
                .slice(
                  orbitIdx * iconsPerOrbit,
                  orbitIdx * iconsPerOrbit + iconsPerOrbit
                )
                .map((iconConfig, iconIdx) => {
                  const angle = iconIdx * angleStep
                  const x = 50 + 50 * Math.cos(angle)
                  const y = 50 + 50 * Math.sin(angle)

                  return (
                    <div
                      key={iconIdx}
                      className="bg-background/80 border-border/50 absolute rounded-full border p-1 shadow-lg backdrop-blur-sm"
                      style={{
                        left: `${x}%`,
                        top: `${y}%`,
                        transform: "translate(-50%, -50%)",
                      }}
                    >
                      <iconConfig.Icon className={cn(iconSizeClasses[size])} />
                    </div>
                  )
                })}
            </div>
          )
        })}
      </div>
    </div>
  )
}


===== EXAMPLE: orbit-rotation-demo =====
Title: orbit-rotation-demo

--- file: example/orbit-rotation-demo.tsx ---
"use client"

import {
  FaApple,
  FaAws,
  FaDocker,
  FaGithub,
  FaGoogle,
  FaInstagram,
  FaLinkedin,
  FaNodeJs,
  FaReact,
  FaTwitter,
} from "react-icons/fa"
import {
  SiFacebook,
  SiNextdotjs,
  SiRedux,
  SiTypescript,
  SiVercel,
} from "react-icons/si"

import { OGLogo } from "@/components/og-logo"
import { OrbitRotation } from "@/registry/eldoraui/orbit-rotation"

export function OrbitRotationDemo() {
  const techIcons = [
    { Icon: FaReact, name: "React" },
    { Icon: FaAws, name: "AWS" },
    { Icon: FaDocker, name: "Docker" },
    { Icon: FaNodeJs, name: "Node.js" },
    { Icon: SiNextdotjs, name: "Next.js" },
    { Icon: SiVercel, name: "Vercel" },
    { Icon: SiRedux, name: "Redux" },
    { Icon: SiTypescript, name: "TypeScript" },
    { Icon: FaGithub, name: "GitHub" },
    { Icon: FaTwitter, name: "Twitter" },
    { Icon: FaLinkedin, name: "LinkedIn" },
    { Icon: FaInstagram, name: "Instagram" },
    { Icon: FaGoogle, name: "Google" },
    { Icon: FaApple, name: "Apple" },
    { Icon: SiFacebook, name: "Facebook" },
  ]

  const centerIcon = {
    Icon: ({ className }: { className?: string }) => (
      <div className={className}>
        <OGLogo width={32} height={32} />
      </div>
    ),
    name: "EldoraUI",
  }

  return (
    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border p-8">
      <div className="flex h-full items-center justify-center">
        <OrbitRotation
          icons={techIcons}
          orbitCount={3}
          orbitGap={6}
          centerIcon={centerIcon}
          size="md"
        />
      </div>
    </div>
  )
}



===== COMPONENT: photon-beam =====
Title: photon-beam
Description: A photon beam background component with animated light trails.

--- file: eldoraui/photon-beam.tsx ---
"use client"

import { useEffect, useRef } from "react"
import * as THREE from "three"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"

interface Signal {
  mesh: THREE.Line
  laneIndex: number
  speed: number
  progress: number
  history: THREE.Vector3[]
  assignedColor: THREE.Color
}

interface Params {
  colorBg: string
  colorLine: string
  colorSignal: string
  useColor2: boolean
  colorSignal2: string
  useColor3: boolean
  colorSignal3: string
  lineCount: number
  globalRotation: number
  positionX: number
  positionY: number
  spreadHeight: number
  spreadDepth: number
  curveLength: number
  straightLength: number
  curvePower: number
  waveSpeed: number
  waveHeight: number
  lineOpacity: number
  signalCount: number
  speedGlobal: number
  trailLength: number
  bloomStrength: number
  bloomRadius: number
}

interface PhotonBeamProps {
  colorBg?: string
  colorLine?: string
  colorSignal?: string
  useColor2?: boolean
  colorSignal2?: string
  useColor3?: boolean
  colorSignal3?: string
  lineCount?: number
  spreadHeight?: number
  spreadDepth?: number
  curveLength?: number
  straightLength?: number
  curvePower?: number
  waveSpeed?: number
  waveHeight?: number
  lineOpacity?: number
  signalCount?: number
  speedGlobal?: number
  trailLength?: number
  bloomStrength?: number
  bloomRadius?: number
}

const CONSTANTS = {
  segmentCount: 150,
}

export default function PhotonBeam(props: PhotonBeamProps = {}) {
  const containerRef = useRef<HTMLDivElement>(null)

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

    let frameId: number
    let cancelled = false
    let renderer: THREE.WebGLRenderer | null = null
    let composer: InstanceType<typeof EffectComposer> | null = null
    let handleResize: (() => void) | null = null
    let backgroundLines: THREE.Line[] = []
    let signals: Signal[] = []

    const init = (): void => {
      if (cancelled) return

      const width = container.clientWidth
      const height = container.clientHeight
      if (width === 0 || height === 0) {
        frameId = requestAnimationFrame(init)
        return
      }

      // --- CONFIGURATION ---
      const params: Params = {
        colorBg: props.colorBg ?? "#080808",
        colorLine: props.colorLine ?? "#005f6f",
        colorSignal: props.colorSignal ?? "#00d9ff",
        useColor2: props.useColor2 ?? false,
        colorSignal2: props.colorSignal2 ?? "#00ffff",
        useColor3: props.useColor3 ?? false,
        colorSignal3: props.colorSignal3 ?? "#00b8d4",
        lineCount: props.lineCount ?? 80,
        globalRotation: 0,
        positionX: 0,
        positionY: 0,
        spreadHeight: props.spreadHeight ?? 30.33,
        spreadDepth: props.spreadDepth ?? 0,
        curveLength: props.curveLength ?? 50,
        straightLength: props.straightLength ?? 100,
        curvePower: props.curvePower ?? 0.8265,
        waveSpeed: props.waveSpeed ?? 2.48,
        waveHeight: props.waveHeight ?? 0.145,
        lineOpacity: props.lineOpacity ?? 0.557,
        signalCount: props.signalCount ?? 94,
        speedGlobal: props.speedGlobal ?? 0.345,
        trailLength: props.trailLength ?? 3,
        bloomStrength: props.bloomStrength ?? 3.0,
        bloomRadius: props.bloomRadius ?? 0.5,
      }

      params.positionX = (params.curveLength - params.straightLength) / 2

      // --- SCENE SETUP ---
      const scene = new THREE.Scene()
      scene.background = new THREE.Color(params.colorBg)
      scene.fog = new THREE.FogExp2(params.colorBg, 0.002)

      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
      camera.position.set(0, 0, 90)
      camera.lookAt(0, 0, 0)

      renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setSize(width, height)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      container.appendChild(renderer.domElement)

      const contentGroup = new THREE.Group()
      contentGroup.position.set(params.positionX, params.positionY, 0)
      scene.add(contentGroup)

      // --- POST-PROCESSING ---
      const renderScene = new RenderPass(scene, camera)
      const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(width, height),
        1.5,
        0.4,
        0.85
      )
      bloomPass.threshold = 0
      bloomPass.strength = params.bloomStrength
      bloomPass.radius = params.bloomRadius

      composer = new EffectComposer(renderer)
      composer.addPass(renderScene)
      composer.addPass(bloomPass)

      // --- MATH & PATH CALCULATION ---
      function getPathPoint(
        t: number,
        lineIndex: number,
        time: number
      ): THREE.Vector3 {
        const totalLen = params.curveLength + params.straightLength
        const currentX = -params.curveLength + t * totalLen

        let y = 0
        let z = 0
        const spreadFactor = (lineIndex / params.lineCount - 0.5) * 2

        if (currentX < 0) {
          const ratio = (currentX + params.curveLength) / params.curveLength
          let shapeFactor = (Math.cos(ratio * Math.PI) + 1) / 2
          shapeFactor = Math.pow(shapeFactor, params.curvePower)

          y = spreadFactor * params.spreadHeight * shapeFactor
          z = spreadFactor * params.spreadDepth * shapeFactor

          const waveFactor = shapeFactor
          const wave =
            Math.sin(time * params.waveSpeed + currentX * 0.1 + lineIndex) *
            params.waveHeight *
            waveFactor
          y += wave
        }

        return new THREE.Vector3(currentX, y, z)
      }

      // --- OBJECTS MANAGEMENT ---
      backgroundLines = []
      signals = []

      const bgMaterial = new THREE.LineBasicMaterial({
        color: params.colorLine,
        transparent: true,
        opacity: params.lineOpacity,
        depthWrite: false,
      })

      const signalMaterial = new THREE.LineBasicMaterial({
        vertexColors: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        depthTest: false,
        transparent: true,
      })

      const signalColorObj1 = new THREE.Color(params.colorSignal)
      const signalColorObj2 = new THREE.Color(params.colorSignal2)
      const signalColorObj3 = new THREE.Color(params.colorSignal3)

      function pickSignalColor(): THREE.Color {
        const choices: THREE.Color[] = [signalColorObj1]
        if (params.useColor2) choices.push(signalColorObj2)
        if (params.useColor3) choices.push(signalColorObj3)
        return choices[Math.floor(Math.random() * choices.length)]
      }

      function createSignal(): void {
        const maxTrail = 150
        const geometry = new THREE.BufferGeometry()
        const positions = new Float32Array(maxTrail * 3)
        const colors = new Float32Array(maxTrail * 3)

        geometry.setAttribute(
          "position",
          new THREE.BufferAttribute(positions, 3)
        )
        geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3))

        const mesh = new THREE.Line(geometry, signalMaterial)
        mesh.frustumCulled = false
        mesh.renderOrder = 1
        contentGroup.add(mesh)

        signals.push({
          mesh: mesh,
          laneIndex: Math.floor(Math.random() * params.lineCount),
          speed: 0.2 + Math.random() * 0.5,
          progress: Math.random(),
          history: [],
          assignedColor: pickSignalColor(),
        })
      }

      function rebuildSignals(): void {
        signals.forEach((s) => {
          contentGroup.remove(s.mesh)
          s.mesh.geometry.dispose()
        })
        signals = []
        for (let i = 0; i < params.signalCount; i++) {
          createSignal()
        }
      }

      function rebuildLines(): void {
        backgroundLines.forEach((l) => {
          contentGroup.remove(l)
          l.geometry.dispose()
        })
        backgroundLines = []

        for (let i = 0; i < params.lineCount; i++) {
          const geometry = new THREE.BufferGeometry()
          const positions = new Float32Array(CONSTANTS.segmentCount * 3)
          geometry.setAttribute(
            "position",
            new THREE.BufferAttribute(positions, 3)
          )

          const line = new THREE.Line(geometry, bgMaterial)
          line.userData = { id: i }
          line.renderOrder = 0
          contentGroup.add(line)
          backgroundLines.push(line)
        }
        rebuildSignals()
      }

      // Initial Build
      rebuildLines()

      // --- ANIMATION LOOP ---
      const clock = new THREE.Clock()

      function animate(): void {
        if (cancelled) return
        frameId = requestAnimationFrame(animate)

        const time = clock.getElapsedTime()

        // Update Lines
        backgroundLines.forEach((line) => {
          const positions = line.geometry.attributes.position
            .array as Float32Array
          const lineId = line.userData.id
          for (let j = 0; j < CONSTANTS.segmentCount; j++) {
            const t = j / (CONSTANTS.segmentCount - 1)
            const vec = getPathPoint(t, lineId, time)
            positions[j * 3] = vec.x
            positions[j * 3 + 1] = vec.y
            positions[j * 3 + 2] = vec.z
          }
          line.geometry.attributes.position.needsUpdate = true
        })

        // Update Signals
        signals.forEach((sig) => {
          sig.progress += sig.speed * 0.005 * params.speedGlobal

          if (sig.progress > 1.0) {
            sig.progress = 0
            sig.laneIndex = Math.floor(Math.random() * params.lineCount)
            sig.history = []
            sig.assignedColor = pickSignalColor()
          }

          const pos = getPathPoint(sig.progress, sig.laneIndex, time)
          sig.history.push(pos)

          if (sig.history.length > params.trailLength + 1) {
            sig.history.shift()
          }

          const positions = sig.mesh.geometry.attributes.position
            .array as Float32Array
          const colors = sig.mesh.geometry.attributes.color
            .array as Float32Array

          const drawCount = Math.max(1, params.trailLength)
          const currentLen = sig.history.length

          for (let i = 0; i < drawCount; i++) {
            let index = currentLen - 1 - i
            if (index < 0) index = 0

            const p = sig.history[index] || new THREE.Vector3()

            positions[i * 3] = p.x
            positions[i * 3 + 1] = p.y
            positions[i * 3 + 2] = p.z

            let alpha = 1
            if (params.trailLength > 0) {
              alpha = Math.max(0, 1 - i / params.trailLength)
            }

            colors[i * 3] = sig.assignedColor.r * alpha
            colors[i * 3 + 1] = sig.assignedColor.g * alpha
            colors[i * 3 + 2] = sig.assignedColor.b * alpha
          }

          sig.mesh.geometry.setDrawRange(0, drawCount)
          sig.mesh.geometry.attributes.position.needsUpdate = true
          sig.mesh.geometry.attributes.color.needsUpdate = true
        })

        if (composer) composer.render()
      }

      // Resize Handler
      handleResize = (): void => {
        if (!container || cancelled || !renderer || !composer) return
        const w = container.clientWidth
        const h = container.clientHeight
        if (w === 0 || h === 0) return

        camera.aspect = w / h
        camera.updateProjectionMatrix()
        renderer.setSize(w, h)
        composer.setSize(w, h)
      }

      window.addEventListener("resize", handleResize)
      animate()
    }

    frameId = requestAnimationFrame(init)

    return () => {
      cancelled = true
      cancelAnimationFrame(frameId)
      if (handleResize) {
        window.removeEventListener("resize", handleResize)
      }
      if (containerRef.current && renderer?.domElement) {
        try {
          containerRef.current.removeChild(renderer.domElement)
        } catch {
          /* element may already be removed */
        }
        renderer.dispose()
      }
      composer?.dispose()
      backgroundLines.forEach((l) => l.geometry.dispose())
      signals.forEach((s) => s.mesh.geometry.dispose())
    }
  }, [])

  return (
    <div ref={containerRef} className="h-full min-h-[200px] w-full bg-black" />
  )
}


===== EXAMPLE: photon-beam-demo =====
Title: photon-beam-demo

--- file: example/photon-beam-demo.tsx ---
"use client"

import PhotonBeam from "@/registry/eldoraui/photon-beam"

export default function PhotonBeamDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <PhotonBeam
        colorBg="#080808"
        colorLine="#005f6f"
        colorSignal="#00d9ff"
        colorSignal2="#00ffff"
        colorSignal3="#00b8d4"
        lineCount={80}
        spreadHeight={50}
        signalCount={94}
        speedGlobal={0.345}
        trailLength={3}
        bloomStrength={3.0}
        bloomRadius={0.5}
      />
    </div>
  )
}



===== COMPONENT: safari-browser =====
Title: safari-browser
Description: A safari browser component.

--- file: eldoraui/safari-browser.tsx ---
import type { SVGProps } from "react"

export interface SafariProps extends SVGProps<SVGSVGElement> {
  url?: string
  src?: string
  width?: number
  height?: number
}

export function Safari({
  src,
  url,
  width = 1203,
  height = 753,
  ...props
}: SafariProps) {
  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g clipPath="url(#path0)">
        <path
          d="M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z"
          className="fill-white dark:fill-[#262626]"
        />
        <circle
          cx="27"
          cy="25"
          r="6"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <circle
          cx="47"
          cy="25"
          r="6"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <circle
          cx="67"
          cy="25"
          r="6"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <path
          d="M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z"
          className="fill-[#E5E5E5] dark:fill-[#404040]"
        />
        <g className="mix-blend-luminosity">
          <path
            d="M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <text
            x="580"
            y="30"
            fill="#A3A3A3"
            fontSize="12"
            fontFamily="Arial, sans-serif"
          >
            {url}
          </text>
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z"
            fill="#A3A3A3"
          />
        </g>
        <g className="mix-blend-luminosity">
          <path
            d="M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z"
            fill="#A3A3A3"
          />
        </g>
        <image
          href={src}
          width="1200"
          height="700"
          x="1"
          y="52"
          preserveAspectRatio="xMidYMid slice"
          clipPath="url(#roundedBottom)"
        />
      </g>
      <defs>
        <clipPath id="path0">
          <rect width={width} height={height} fill="white" />
        </clipPath>
        <clipPath id="roundedBottom">
          <path
            d="M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z"
            fill="white"
          />
        </clipPath>
      </defs>
    </svg>
  )
}


===== EXAMPLE: safari-browser-demo =====
Title: safari-browser-demo

--- file: example/safari-browser-demo.tsx ---
import { Safari } from "@/registry/eldoraui/safari-browser"

export function SafariBrowserDemo() {
  return (
    <div className="relative">
      <Safari
        url="eldoraui.site"
        src="https://avatar.vercel.sh/karthik"
        className="size-full"
      />
    </div>
  )
}



===== COMPONENT: scale-letter-text =====
Title: scale-letter-text
Description: A scale letter text component.

--- file: eldoraui/scale-letter-text.tsx ---
"use client"

import React, { useState } from "react"

interface ScaleLetterTextProps {
  text: string
  className?: string
}

export default function ScaleLetterText({
  text,
  className = "",
}: ScaleLetterTextProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number>(-1)

  const getLetterStyle = (index: number) => {
    const isHovered = hoveredIndex === index
    const distance = hoveredIndex >= 0 ? Math.abs(index - hoveredIndex) : 0

    let scale = 1
    let translateY = 0
    let rotateX = 0
    let brightness = 1

    if (hoveredIndex >= 0) {
      if (isHovered) {
        scale = 1.4
        translateY = -20
        rotateX = -15
        brightness = 1.3
      } else if (distance === 1) {
        scale = 1.2
        translateY = -10
        rotateX = -8
        brightness = 1.15
      } else if (distance === 2) {
        scale = 1.1
        translateY = -5
        rotateX = -4
        brightness = 1.08
      }
    }

    return {
      transform: `
                perspective(1000px) 
                translateY(${translateY}px) 
                rotateX(${rotateX}deg) 
                scale(${scale})
                translateZ(${isHovered ? 30 : distance <= 2 ? 15 : 0}px)
            `,
      filter: `brightness(${brightness})`,
      textShadow:
        distance <= 2
          ? "0 2px 6px rgba(0,0,0,0.15)"
          : "0 1px 2px rgba(0,0,0,0.08)",
      transition: "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
      zIndex: isHovered ? 10 : distance <= 2 ? 5 : 1,
      marginRight: "0.1em",
    }
  }

  return (
    <div className={className}>
      {text.split("").map((letter, index) => (
        <span
          key={index}
          className="relative inline-block cursor-pointer"
          style={getLetterStyle(index)}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(-1)}
        >
          <span className="font-bold">
            {letter === " " ? "\u00A0" : letter}
          </span>
        </span>
      ))}
    </div>
  )
}


===== EXAMPLE: scale-letter-text-demo =====
Title: scale-letter-text-demo

--- file: example/scale-letter-text-demo.tsx ---
import ScaleLetterText from "@/registry/eldoraui/scale-letter-text"

export function ScaleLetterTextDemo() {
  return (
    <ScaleLetterText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Hover Me"
    />
  )
}



===== COMPONENT: seperate-away-text =====
Title: seperate-away-text
Description: A seperate away text component.

--- file: eldoraui/seperate-away-text.tsx ---
"use client"

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

interface SeparateAwayTextProps {
  textLeft?: string
  textRight?: string
  className?: string
}

export const SeparateAwayText: React.FC<SeparateAwayTextProps> = ({
  textLeft = "",
  textRight = "",
  className = "",
}) => {
  const separate = {
    hidden: { opacity: 0, y: 0 },
    visible: (custom: number) => ({
      opacity: 1,
      y: custom * 5,
      transition: { duration: 1.5 },
    }),
  }

  return (
    <div className={className}>
      <motion.h1
        custom={-1}
        variants={separate}
        initial="hidden"
        animate="visible"
        className={clsx(
          "font-display text-center font-bold drop-shadow-sm",
          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
          "tracking-[-0.02em]",
          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
        )}
      >
        {textLeft}
      </motion.h1>
      <motion.h1
        custom={1}
        variants={separate}
        initial="hidden"
        animate="visible"
        className={clsx(
          "font-display text-center font-bold drop-shadow-sm",
          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
          "tracking-[-0.02em]",
          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
        )}
      >
        {textRight}
      </motion.h1>
    </div>
  )
}


===== EXAMPLE: seperate-away-text-demo =====
Title: seperate-away-text-demo

--- file: example/seperate-away-text-demo.tsx ---
import { SeparateAwayText } from "@/registry/eldoraui/seperate-away-text"

export function SeparateAwayTextDemo() {
  return (
    <SeparateAwayText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      textLeft="Seperate"
      textRight="Away"
    />
  )
}



===== COMPONENT: svg-ripple-effect =====
Title: svg-ripple-effect
Description: An SVG ripple effect component.

--- file: eldoraui/svg-ripple-effect.tsx ---
"use client"

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

interface SvgRippleEffectProps {
  transition?: {
    duration?: number
    repeat?: number
    repeatDelay?: number
  }
  fade?: ("top" | "bottom")[]
  whileHover?: boolean
  image?: string
}

export default function SvgRippleEffect({
  transition = {
    duration: 0.75,
    repeat: Infinity,
    repeatDelay: 1.25,
  },
  fade = [],
  whileHover = false,
  image,
}: SvgRippleEffectProps) {
  return (
    <motion.div
      className="group bg-white dark:bg-black"
      initial="idle"
      animate={whileHover ? "idle" : "active"}
      whileHover={whileHover ? "active" : undefined}
      variants={{ idle: {}, active: {} }}
    >
      <svg
        viewBox="0 0 500 500"
        fill="none"
        className={clsx(
          "col-start-1 row-start-1 size-full",
          "mask-[linear-gradient(to_bottom,black_90%,transparent),radial-gradient(circle,rgba(0,0,0,1)_0%,rgba(0,0,0,0)_100%)] mask-intersect"
        )}
      >
        {Array.from(Array(42).keys()).map((n) => (
          <motion.circle
            variants={{
              idle: {
                scale: 1,
                strokeOpacity: 0.3,
              },
              active: {
                scale: [1, 1.08, 1],
                strokeOpacity: [0.3, 0.6, 0.3],
                transition: { ...transition, delay: n * 0.05 },
              },
            }}
            key={n}
            cx="250"
            cy="250"
            r={n * 14 + 4}
            className="stroke-gray-800 dark:stroke-gray-200"
          />
        ))}
      </svg>
      {fade.includes("top") && (
        <div className="absolute inset-0 bg-gradient-to-b from-white to-[50%] dark:from-neutral-950 dark:to-[70%]" />
      )}
      {fade.includes("bottom") && (
        <div className="absolute inset-0 bg-linear-to-t from-white to-[50%] dark:from-neutral-950 dark:to-[70%]" />
      )}
      {image && (
        <div className="absolute inset-0 flex items-center justify-center">
          <img
            src={image}
            alt=""
            className="h-6 w-6 rounded-full bg-white object-cover sm:h-8 sm:w-8 dark:bg-neutral-950"
          />
        </div>
      )}
    </motion.div>
  )
}


===== EXAMPLE: svg-ripple-effect-demo =====
Title: svg-ripple-effect-demo

--- file: example/svg-ripple-effect-demo.tsx ---
import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://avatar.vercel.sh/karthik"
      />
    </div>
  )
}


===== EXAMPLE: svg-ripple-effect-demo-2 =====
Title: svg-ripple-effect-demo-2

--- file: example/svg-ripple-effect-demo-2.tsx ---
import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo2() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://avatar.vercel.sh/karthik"
        whileHover={true}
      />
    </div>
  )
}



===== COMPONENT: terminal =====
Title: terminal
Description: A terminal component.

--- file: eldoraui/terminal.tsx ---
"use client"

import { useEffect, useMemo, useState, type ReactElement } from "react"
import { TerminalIcon } from "lucide-react"
import { GoTerminal } from "react-icons/go"

type TerminalStep = {
  text: string
  bold?: boolean
}

type TerminalProps = {
  command: string
  steps: TerminalStep[]
  pulseInterval?: number
  showLocalhost?: boolean
  hostBarTitle?: string
  hostMessage?: string
}

function MacControls() {
  return (
    <>
      <GoTerminal className="text-muted-foreground mr-1 size-4" />
      <div className="h-2 w-2 rounded-full bg-red-500" />
      <div className="h-2 w-2 rounded-full bg-yellow-500" />
      <div className="h-2 w-2 rounded-full bg-green-500" />
    </>
  )
}

function LocalHost({ title, message }: { title: string; message: string }) {
  return (
    <div className="bg-card animate-in fade-in slide-in-from-top-10 absolute right-4 bottom-5 z-10 overflow-hidden rounded-md border shadow-xl">
      <div className="bg-muted text-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
        <TerminalIcon className="absolute inset-2 size-3" />
        <p className="absolute inset-x-0 text-center">{title}</p>
      </div>
      <div className="text-card-foreground p-4 text-sm">{message}</div>
    </div>
  )
}

const Terminal = ({
  command,
  steps,
  pulseInterval = 100,
  showLocalhost = true,
  hostBarTitle = "localhost:3000",
  hostMessage = "New App Created!",
}: TerminalProps) => {
  const typingLen = useMemo(() => command.length, [command])
  const revealLen = useMemo(() => steps.length, [steps])
  const finalCount = typingLen + revealLen + 1

  const [counter, setCounter] = useState(finalCount)

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prev) => (prev >= finalCount ? prev : prev + 1))
    }, pulseInterval)
    return () => clearInterval(interval)
  }, [pulseInterval, finalCount])

  const elements: ReactElement[] = []

  const typedChars = Math.min(counter, typingLen)
  const isTyping = counter < typingLen

  elements.push(
    <span key="command" className="text-foreground">
      {command.substring(0, typedChars)}
      {isTyping && (
        <div className="bg-foreground inline-block h-3 w-1 animate-pulse" />
      )}
    </span>
  )

  if (!isTyping) {
    const shownSteps = Math.min(revealLen, counter - typingLen)
    if (shownSteps > 0) {
      elements.push(<span key="space"> </span>)
    }
    for (let i = 0; i < shownSteps; i++) {
      const step = steps[i]
      elements.push(
        <span
          key={`step-${i}`}
          className={
            step.bold ? "text-foreground font-bold" : "text-foreground"
          }
        >
          {step.text}
        </span>
      )
    }
  }

  const revealComplete = counter > typingLen + revealLen

  return (
    <div
      className="relative"
      onMouseEnter={() => {
        if (counter >= finalCount) {
          setCounter(0)
        }
      }}
    >
      {showLocalhost && revealComplete && (
        <LocalHost title={hostBarTitle} message={hostMessage} />
      )}

      <pre className="bg-card w-full min-w-[320px] overflow-hidden rounded-xl border text-[11px] shadow-lg sm:min-w-[480px] sm:text-[12px] md:min-w-[600px] md:text-[13px]">
        <div className="bg-muted flex flex-row items-center gap-2 border-b px-3 py-2 sm:px-4">
          <MacControls />
        </div>
        <div className="from-background to-muted min-h-[150px] bg-gradient-to-b sm:min-h-[180px] md:min-h-[200px]">
          <div className="grid p-3 whitespace-pre-wrap sm:p-4">{elements}</div>
        </div>
      </pre>
    </div>
  )
}

export default Terminal


===== EXAMPLE: terminal-demo =====
Title: terminal-demo

--- file: example/terminal-demo.tsx ---
import Terminal from "@/registry/eldoraui/terminal"

export default function TerminalDemo() {
  return (
    <main className="flex min-h-[60vh] items-center justify-center p-6">
      <div className="w-full max-w-3xl">
        <Terminal
          command="npx shadcn@latest add 'https://eldoraui.site/r/terminal'"
          steps={[
            { text: "~ Project name", bold: true },
            { text: " | terminal-demo" },
            { text: " | cd terminal-demo" },
            { text: "~ Installing UI components", bold: true },
            { text: " | ✓ eldoraui/terminal" },
          ]}
          pulseInterval={100}
          showLocalhost={true}
          hostBarTitle="localhost:3000"
          hostMessage="New App Created!"
        />
      </div>
    </main>
  )
}



===== COMPONENT: testimonal-slider =====
Title: testimonal-slider
Description: A testimonial slider component.

--- file: eldoraui/testimonal-slider.tsx ---
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import { Transition } from "@headlessui/react"

interface Testimonial {
  img: string
  quote: string
  name: string
  role: string
}

export default function FancyTestimonialsSlider({
  testimonials,
  autorotateTiming = 7000,
}: {
  testimonials: Testimonial[]
  autorotateTiming?: number
}) {
  const testimonialsRef = useRef<HTMLDivElement>(null)
  const [active, setActive] = useState<number>(0)
  const [autorotate, setAutorotate] = useState<boolean>(true)

  useEffect(() => {
    if (!autorotate) return
    const interval = setInterval(() => {
      setActive(active + 1 === testimonials.length ? 0 : (active) => active + 1)
    }, autorotateTiming)
    return () => clearInterval(interval)
  }, [active, autorotate])

  const heightFix = () => {
    if (testimonialsRef.current && testimonialsRef.current.parentElement)
      testimonialsRef.current.parentElement.style.height = `${testimonialsRef.current.clientHeight}px`
  }

  useEffect(() => {
    heightFix()
  }, [])

  return (
    <div className="mx-auto w-full max-w-3xl px-4 text-center sm:px-6">
      {/* Testimonial image */}
      <div className="relative h-24 sm:h-32">
        <div className="pointer-events-none absolute top-0 left-1/2 h-[320px] w-[320px] -translate-x-1/2 before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-gradient-to-b before:from-cyan-500/25 before:via-cyan-500/5 before:via-25% before:to-cyan-500/0 before:to-75% sm:h-[480px] sm:w-[480px]">
          <div className="h-24 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_20%,theme(colors.white))] sm:h-32">
            {testimonials.map((testimonial, index) => (
              <Transition
                as="div"
                key={index}
                show={active === index}
                className="absolute inset-0 -z-10 h-full"
                enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 order-first"
                enterFrom="opacity-0 -rotate-[60deg]"
                enterTo="opacity-100 rotate-0"
                leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700"
                leaveFrom="opacity-100 rotate-0"
                leaveTo="opacity-0 rotate-[60deg]"
                beforeEnter={() => heightFix()}
              >
                <Image
                  className="relative top-8 left-1/2 -translate-x-1/2 rounded-full sm:top-11"
                  src={testimonial.img}
                  width={48}
                  height={48}
                  alt={testimonial.name}
                />
              </Transition>
            ))}
          </div>
        </div>
      </div>
      {/* Text */}
      <div className="mb-6 transition-all delay-300 duration-150 ease-in-out sm:mb-9">
        <div className="relative flex flex-col" ref={testimonialsRef}>
          {testimonials.map((testimonial, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 -translate-x-4"
              enterTo="opacity-100 translate-x-0"
              leave="transition ease-out duration-300 delay-300 absolute"
              leaveFrom="opacity-100 translate-x-0"
              leaveTo="opacity-0 translate-x-4"
              beforeEnter={() => heightFix()}
            >
              <div className="px-2 text-lg font-bold text-cyan-900 before:content-['\201C'] after:content-['\201D'] sm:px-0 sm:text-xl lg:text-2xl">
                {testimonial.quote}
              </div>
            </Transition>
          ))}
        </div>
      </div>
      {/* Buttons */}
      <div className="-m-1 flex flex-wrap justify-center gap-1 sm:gap-1.5">
        {testimonials.map((testimonial, index) => (
          <button
            key={index}
            className={`m-1 inline-flex justify-center rounded-full px-2 py-1 text-xs whitespace-nowrap shadow-sm transition-colors duration-150 focus-visible:ring focus-visible:ring-cyan-300 focus-visible:outline-none sm:px-3 sm:py-1.5 sm:text-xs dark:focus-visible:ring-cyan-600 ${active === index ? "bg-cyan-500 text-white shadow-cyan-950/10" : "bg-white text-cyan-900 hover:bg-cyan-100"}`}
            onClick={() => {
              setActive(index)
              setAutorotate(false)
            }}
          >
            <span className="truncate">{testimonial.name}</span>{" "}
            <span
              className={`${active === index ? "text-cyan-200" : "text-cyan-300"}`}
            >
              -
            </span>{" "}
            <span className="truncate">{testimonial.role}</span>
          </button>
        ))}
      </div>
    </div>
  )
}


===== EXAMPLE: testimonal-slider-demo =====
Title: testimonal-slider-demo

--- file: example/testimonal-slider-demo.tsx ---
"use client"

import FancyTestimonialsSlider from "@/registry/eldoraui/testimonal-slider"

export function TestimonalSliderDemo() {
  const testimonials = [
    {
      img: "https://avatar.vercel.sh/karthik",
      quote: "EldoraUI's components make building UIs effortless great work!",
      name: "Karthik",
      role: "Developer",
    },
    {
      img: "https://avatar.vercel.sh/nick",
      quote:
        "EldoraUI simplifies complex designs with ready-to-use components.",
      name: "Nick",
      role: "Designer",
    },
    {
      img: "https://avatar.vercel.sh/amelia",
      quote: "With EldoraUI, creating responsive UIs is a breeze.",
      name: "Amelia",
      role: "Tester",
    },
  ]
  return (
    <div className="bg-background relative h-[400px] w-full overflow-hidden rounded-lg border sm:h-[500px]">
      <div className="mt-8 flex justify-center px-4 sm:mt-16 sm:px-12">
        <FancyTestimonialsSlider
          testimonials={testimonials}
          autorotateTiming={5000}
        />
      </div>
    </div>
  )
}



===== COMPONENT: wavy-text =====
Title: wavy-text
Description: A wavy text component.

--- file: eldoraui/wavy-text.tsx ---
"use client"

import clsx from "clsx"
import { AnimatePresence, motion } from "motion/react"

interface WavyTextProps {
  text?: string
  className?: string
}

export const WavyText: React.FC<WavyTextProps> = ({
  text = "",
  className = "",
}) => {
  const variants1 = {
    hidden: { y: 10 },
    visible: { y: -10 },
  }

  return (
    <div className={clsx("flex justify-center space-x-2", className)}>
      <AnimatePresence>
        {text.split("").map((char, i) => (
          <motion.h1
            key={i}
            initial="hidden"
            animate="visible"
            exit="hidden"
            variants={variants1}
            transition={{
              repeat: Infinity,
              repeatType: "reverse",
              duration: 0.5,
              delay: i * 0.2,
            }}
            className={clsx(
              "font-display text-center font-bold drop-shadow-sm",
              "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
              "tracking-[-0.02em]",
              "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
            )}
          >
            {char}
          </motion.h1>
        ))}
      </AnimatePresence>
    </div>
  )
}


===== EXAMPLE: wavy-text-demo =====
Title: wavy-text-demo

--- file: example/wavy-text-demo.tsx ---
import { WavyText } from "@/registry/eldoraui/wavy-text"

export function WavyTextDemo() {
  return (
    <WavyText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Wavy Text"
    />
  )
}



===== COMPONENT: word-pull-up-text =====
Title: word-pull-up-text
Description: A word pull up text component.

--- file: eldoraui/word-pull-up-text.tsx ---
"use client"

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

interface WordPullUpTextProps {
  text?: string
  className?: string
}

export const WordPullUpText: React.FC<WordPullUpTextProps> = ({
  text = "",
  className = "",
}) => {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

  const item = {
    hidden: { y: 20, opacity: 0 },
    show: { y: 0, opacity: 1 },
  }

  return (
    <motion.h1
      variants={container}
      initial="hidden"
      animate="show"
      className={clsx(
        "font-display text-center font-bold drop-shadow-sm",
        "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
        "tracking-[-0.02em]",
        "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
        className
      )}
    >
      {text.split(" ").map((word, i) => (
        <motion.span
          key={i}
          variants={item}
          style={{ display: "inline-block", paddingRight: "15px" }}
        >
          {word === "" ? <span>&nbsp;</span> : word}
        </motion.span>
      ))}
    </motion.h1>
  )
}


===== EXAMPLE: word-pull-up-text-demo =====
Title: word-pull-up-text-demo

--- file: example/word-pull-up-text-demo.tsx ---
import { WordPullUpText } from "@/registry/eldoraui/word-pull-up-text"

export function WordPullUpTextDemo() {
  return (
    <WordPullUpText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Word Pull Up"
    />
  )
}