{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-animation",
  "title": "Cursor Animation",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 11 cursor animation variants: https://avaraui.com/view/cursor-animation. This item holds 11 of them as looks of one component (glow, pulse, sonar, ring, magnetic, crosshair, expand, spotlight, image-trail, trail, badge). Skip the question if the user already named one. A custom cursor with magnetic, glow, trail, spotlight and crosshair effects, scoped to its children. Use it on portfolio and agency sites.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/CursorAnimationBlock.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Sparkles,\n  MousePointer,\n  Target,\n  Zap,\n  Eye,\n  Maximize2,\n  Minimize2,\n  Crosshair,\n  CircleDot,\n  Radio,\n  Image as ImageIcon,\n} from \"lucide-react\";\n\nexport type CursorVariant =\n  | \"magnetic\"\n  | \"glow\"\n  | \"trail\"\n  | \"badge\"\n  | \"spotlight\"\n  | \"expand\"\n  | \"crosshair\"\n  | \"ring\"\n  | \"pulse\"\n  | \"sonar\"\n  | \"image-trail\";\n\nexport type CursorColor = \"indigo\" | \"rose\" | \"emerald\" | \"zinc\" | \"primary\" | (string & {});\n\nconst defaultTrailImages = [\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790146210/photo-1506744038136-46273834b3fb-1790146212208.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790148864/photo-1511884642898-4c92249e20b6-1790148865110.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790145140/photo-1426604966848-d7adac402bff-1790145143490.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790146210/photo-1472214103451-9374bd1c798e-1790146212205.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790148863/photo-1447752875215-b2761acb3c5d-1790148865109.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790146209/photo-1469474968028-56623f02e42e-1790146212205.jpg\",\n  \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_300,c_limit/v1790146210/photo-1501785888041-af3ef285b470-1790146212207.jpg\",\n];\n\nexport interface CursorAnimationProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: CursorVariant;\n  label?: string;\n  color?: CursorColor | string;\n  trailCount?: number;\n  images?: string[];\n  children?: React.ReactNode;\n}\n\nexport interface MainContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\nexport function MainContent({ children, className, ...props }: MainContentProps) {\n  return (\n    <div className={cn(\"relative z-10 w-full pointer-events-none\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nconst colorThemes: Record<string, { accent: string; rgb: string }> = {\n  primary: {\n    accent: \"#6366f1\",\n    rgb: \"99, 102, 241\",\n  },\n  indigo: {\n    accent: \"#6366f1\",\n    rgb: \"99, 102, 241\",\n  },\n  rose: {\n    accent: \"#f43f5e\",\n    rgb: \"244, 63, 94\",\n  },\n  emerald: {\n    accent: \"#10b981\",\n    rgb: \"16, 185, 129\",\n  },\n  zinc: {\n    accent: \"#a1a1aa\",\n    rgb: \"161, 161, 170\",\n  },\n};\n\nconst hexToRgb = (hex: string) => {\n  let cleanHex = hex.replace(/^#/, \"\");\n  if (cleanHex.length === 3)\n    cleanHex = cleanHex\n      .split(\"\")\n      .map((x) => x + x)\n      .join(\"\");\n  const result = /^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(cleanHex);\n  return result\n    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`\n    : \"99, 102, 241\";\n};\n\nexport function CursorAnimation({\n  variant = \"glow\",\n  label = \"Explore\",\n  color = \"primary\",\n  trailCount = 6,\n  images = defaultTrailImages,\n  children,\n  className,\n  ...props\n}: CursorAnimationProps) {\n  const isPrimary = color === \"primary\" || color === \"default\" || !color;\n  const activeColor = isPrimary\n    ? \"var(--primary)\"\n    : color?.startsWith(\"#\")\n      ? color\n      : colorThemes[color]?.accent || \"var(--primary)\";\n\n  const activeRgb = isPrimary\n    ? \"var(--primary)\"\n    : color?.startsWith(\"#\")\n      ? hexToRgb(color)\n      : colorThemes[color]?.rgb || \"99, 102, 241\";\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const targetPosRef = useRef({ x: -100, y: -100 });\n  const smoothPosRef = useRef({ x: -100, y: -100 });\n  const lastImgPosRef = useRef({ x: -100, y: -100 });\n  const imgIndexRef = useRef(0);\n\n  const [mousePos, setMousePos] = useState({ x: -100, y: -100 });\n  const [smoothPos, setSmoothPos] = useState({ x: -100, y: -100 });\n  const [isHovered, setIsHovered] = useState(false);\n  const [isClicking, setIsClicking] = useState(false);\n  const [trail, setTrail] = useState<{ x: number; y: number; id: number }[]>([]);\n  const [imageTrail, setImageTrail] = useState<\n    { x: number; y: number; id: number; url: string }[]\n  >([]);\n\n  // High-performance RAF loop for hyper-responsive, lag-free cursor tracking\n  useEffect(() => {\n    if (!isHovered) return;\n\n    let animId: number;\n    let lastTrailTime = 0;\n\n    const loop = (timestamp: number) => {\n      const target = targetPosRef.current;\n      const smooth = smoothPosRef.current;\n\n      // 0.65 LERP factor for ultra-fast, smooth trailing ring\n      const nextX = smooth.x + (target.x - smooth.x) * 0.65;\n      const nextY = smooth.y + (target.y - smooth.y) * 0.65;\n\n      smoothPosRef.current = { x: nextX, y: nextY };\n      setSmoothPos({ x: nextX, y: nextY });\n\n      // Dense 20ms trail update\n      if (variant === \"trail\" && timestamp - lastTrailTime > 20) {\n        lastTrailTime = timestamp;\n        setTrail((prev) => [\n          { x: target.x, y: target.y, id: timestamp },\n          ...prev.slice(0, trailCount - 1),\n        ]);\n      }\n\n      animId = requestAnimationFrame(loop);\n    };\n\n    animId = requestAnimationFrame(loop);\n    return () => cancelAnimationFrame(animId);\n  }, [isHovered, variant, trailCount]);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    targetPosRef.current = { x, y };\n    setMousePos({ x, y });\n\n    // For image-trail variant: spawn image when mouse moves > 45px from last spawned location\n    if (variant === \"image-trail\") {\n      const dist = Math.hypot(x - lastImgPosRef.current.x, y - lastImgPosRef.current.y);\n      if (dist > 45) {\n        lastImgPosRef.current = { x, y };\n        const imgUrl = images[imgIndexRef.current % images.length];\n        imgIndexRef.current += 1;\n        const newImg = { x, y, id: Date.now() + Math.random(), url: imgUrl };\n\n        setImageTrail((prev) => [...prev.slice(-6), newImg]);\n      }\n    }\n  };\n\n  const handleMouseEnter = () => setIsHovered(true);\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    targetPosRef.current = { x: -100, y: -100 };\n    smoothPosRef.current = { x: -100, y: -100 };\n    lastImgPosRef.current = { x: -100, y: -100 };\n    setMousePos({ x: -100, y: -100 });\n    setSmoothPos({ x: -100, y: -100 });\n    setTrail([]);\n    setImageTrail([]);\n  };\n\n  const getVariantIcon = () => {\n    switch (variant) {\n      case \"glow\":\n        return <Sparkles className=\"w-7 h-7\" />;\n      case \"magnetic\":\n        return <Target className=\"w-7 h-7\" />;\n      case \"trail\":\n        return <Zap className=\"w-7 h-7\" />;\n      case \"badge\":\n        return <MousePointer className=\"w-7 h-7\" />;\n      case \"spotlight\":\n        return <Eye className=\"w-7 h-7\" />;\n      case \"expand\":\n        return <Maximize2 className=\"w-7 h-7\" />;\n      case \"crosshair\":\n        return <Crosshair className=\"w-7 h-7\" />;\n      case \"ring\":\n        return <CircleDot className=\"w-7 h-7\" />;\n      case \"pulse\":\n        return <Radio className=\"w-7 h-7\" />;\n      case \"sonar\":\n        return <Minimize2 className=\"w-7 h-7\" />;\n      case \"image-trail\":\n        return <ImageIcon className=\"w-7 h-7\" />;\n      default:\n        return <Sparkles className=\"w-7 h-7\" />;\n    }\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onMouseDown={() => setIsClicking(true)}\n      onMouseUp={() => setIsClicking(false)}\n      className={cn(\n        \"relative w-full h-[480px] sm:h-[560px] rounded-2xl overflow-hidden select-none border transition-all duration-300\",\n        \"bg-background border-border\",\n        \"flex flex-col items-center justify-center p-6 text-center cursor-none\",\n        className\n      )}\n      {...props}\n    >\n      {/* Container Background Grid Pattern */}\n      <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none\" />\n\n      {/* Main Interactive Demo Area Content wrapped in MainContent */}\n      {children || (\n        <MainContent>\n          <div className=\"flex flex-col items-center gap-4 max-w-md mx-auto text-center\">\n            <div\n              className=\"w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm border mx-auto\"\n              style={{\n                backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 12%, transparent)\" : `rgba(${activeRgb}, 0.12)`,\n                borderColor: isPrimary ? \"color-mix(in oklab, var(--primary) 30%, transparent)\" : `rgba(${activeRgb}, 0.3)`,\n                color: activeColor,\n              }}\n            >\n              {getVariantIcon()}\n            </div>\n            <div>\n              <h3 className=\"text-xl font-semibold text-foreground tracking-tight\">\n                Hover & Move Cursor\n              </h3>\n              <p className=\"text-sm text-muted-foreground mt-1.5 leading-relaxed\">\n                Interactive custom cursor animation with fluid physics and custom theme styling.\n              </p>\n            </div>\n          </div>\n        </MainContent>\n      )}\n\n      {/* CUSTOM CURSOR RENDERERS */}\n      {isHovered && (\n        <>\n          {/* VARIANT 1: GLOW CURSOR */}\n          {variant === \"glow\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full blur-2xl transition-[width,height,opacity] duration-150\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: isClicking ? \"180px\" : \"140px\",\n                  height: isClicking ? \"180px\" : \"140px\",\n                  backgroundColor: activeColor,\n                  opacity: 0.35,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border backdrop-blur-xs transition-[width,height] duration-150\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  width: isClicking ? \"24px\" : \"36px\",\n                  height: isClicking ? \"24px\" : \"36px\",\n                  borderColor: isPrimary ? \"color-mix(in oklab, var(--primary) 50%, transparent)\" : `rgba(${activeRgb}, 0.5)`,\n                  backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 15%, transparent)\" : `rgba(${activeRgb}, 0.15)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-2.5 h-2.5 rounded-full shadow-sm\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 2: MAGNETIC TARGET CURSOR */}\n          {variant === \"magnetic\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed transition-[width,height] duration-150\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: isClicking ? \"32px\" : \"48px\",\n                  height: isClicking ? \"32px\" : \"48px\",\n                  borderColor: activeColor,\n                  transform: `translate(-50%, -50%) rotate(${\n                    smoothPos.x + smoothPos.y\n                  }deg)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-2.5 h-2.5 rounded-full shadow-md\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 3: PARTICLE TRAIL CURSOR */}\n          {variant === \"trail\" && (\n            <>\n              {trail.map((pt, i) => {\n                const size = Math.max(4, 16 - i * 2.2);\n                const opacity = (trail.length - i) / trail.length;\n                return (\n                  <div\n                    key={pt.id + i}\n                    className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full\"\n                    style={{\n                      left: `${pt.x}px`,\n                      top: `${pt.y}px`,\n                      width: `${size}px`,\n                      height: `${size}px`,\n                      backgroundColor: activeColor,\n                      opacity: opacity * 0.7,\n                    }}\n                  />\n                );\n              })}\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full shadow-lg\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 4: BADGE LABEL CURSOR */}\n          {variant === \"badge\" && (\n            <div\n              className=\"pointer-events-none absolute left-0 top-0 z-30\"\n              style={{\n                transform: `translate3d(${mousePos.x + 12}px, ${\n                  mousePos.y + 12\n                }px, 0)`,\n              }}\n            >\n              <div\n                className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-xl whitespace-nowrap\"\n                style={{ backgroundColor: activeColor }}\n              >\n                <span>{label}</span>\n                <MousePointer className=\"w-3.5 h-3.5 fill-current\" />\n              </div>\n            </div>\n          )}\n\n          {/* VARIANT 5: SPOTLIGHT MASK CURSOR */}\n          {variant === \"spotlight\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute inset-0 z-20\"\n                style={{\n                  background: `radial-gradient(circle 130px at ${mousePos.x}px ${mousePos.y}px, transparent 0%, rgba(0, 0, 0, 0.45) 100%)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full z-30\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                  boxShadow: `0 0 15px ${activeColor}`,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 6: EXPAND SCALING CURSOR */}\n          {variant === \"expand\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-[width,height] duration-150\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: isClicking ? \"64px\" : \"40px\",\n                  height: isClicking ? \"64px\" : \"40px\",\n                  borderColor: activeColor,\n                  backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 15%, transparent)\" : `rgba(${activeRgb}, 0.15)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 7: PRECISION CROSSHAIR CURSOR */}\n          {variant === \"crosshair\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute top-0 bottom-0 w-[1px]\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 40%, transparent)\" : `rgba(${activeRgb}, 0.4)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute left-0 right-0 h-[1px]\"\n                style={{\n                  top: `${mousePos.y}px`,\n                  backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 40%, transparent)\" : `rgba(${activeRgb}, 0.4)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full border flex items-center justify-center\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  borderColor: activeColor,\n                }}\n              >\n                <div\n                  className=\"w-1.5 h-1.5 rounded-full\"\n                  style={{ backgroundColor: activeColor }}\n                />\n              </div>\n            </>\n          )}\n\n          {/* VARIANT 8: SMOOTH RING CURSOR */}\n          {variant === \"ring\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border transition-[width,height] duration-150\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: isClicking ? \"24px\" : \"42px\",\n                  height: isClicking ? \"24px\" : \"42px\",\n                  borderColor: activeColor,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 9: RADIAL PULSE CURSOR */}\n          {variant === \"pulse\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  width: \"36px\",\n                  height: \"36px\",\n                  backgroundColor: isPrimary ? \"color-mix(in oklab, var(--primary) 25%, transparent)\" : `rgba(${activeRgb}, 0.25)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full shadow-md\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 10: SONAR WAVE CURSOR */}\n          {variant === \"sonar\" && (\n            <>\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: \"56px\",\n                  height: \"56px\",\n                  borderColor: isPrimary ? \"color-mix(in oklab, var(--primary) 60%, transparent)\" : `rgba(${activeRgb}, 0.6)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border\"\n                style={{\n                  left: `${smoothPos.x}px`,\n                  top: `${smoothPos.y}px`,\n                  width: \"32px\",\n                  height: \"32px\",\n                  borderColor: isPrimary ? \"color-mix(in oklab, var(--primary) 40%, transparent)\" : `rgba(${activeRgb}, 0.4)`,\n                }}\n              />\n              <div\n                className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full shadow-xs\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  backgroundColor: activeColor,\n                }}\n              />\n            </>\n          )}\n\n          {/* VARIANT 11: IMAGE TRAIL CURSOR */}\n          {variant === \"image-trail\" && (\n            <>\n              {imageTrail.map((img) => (\n                <div\n                  key={img.id}\n                  className=\"pointer-events-none absolute overflow-hidden rounded-xl shadow-xl border border-foreground/80 animate-[img-trail-pop_1.2s_cubic-bezier(0.16,1,0.3,1)_forwards]\"\n                  style={{\n                    left: `${img.x}px`,\n                    top: `${img.y}px`,\n                    width: \"140px\",\n                    height: \"180px\",\n                    transformOrigin: \"center center\",\n                  }}\n                >\n                  {/* eslint-disable-next-html-element-for-jsx */}\n                  <img\n                    src={img.url}\n                    alt=\"trail image\"\n                    className=\"w-full h-full object-cover rounded-lg transform scale-105\"\n                  />\n                </div>\n              ))}\n\n              {/* Plain <style> rather than styled-jsx, which only compiles\n                  under Next.js — everywhere else React rejects its unknown\n                  attribute and TypeScript fails the build. */}\n              <style\n                dangerouslySetInnerHTML={{\n                  __html: `@keyframes img-trail-pop {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }\n  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }\n}`,\n                }}\n              />\n\n              {/* Minimalist Precision Reticle Cursor Pointer Centered in the Image */}\n              <div\n                className=\"pointer-events-none absolute flex items-center justify-center rounded-full z-50 transition-transform duration-75 bg-background/30 backdrop-blur-xs border border-primary/30\"\n                style={{\n                  left: `${mousePos.x}px`,\n                  top: `${mousePos.y}px`,\n                  width: \"18px\",\n                  height: \"18px\",\n                  transform: \"translate(-50%, -50%)\",\n                  color: activeColor,\n                  boxShadow: `0 0 10px ${isPrimary ? \"color-mix(in oklab, var(--primary) 60%, transparent)\" : `rgba(${activeRgb}, 0.6)`}`,\n                }}\n              >\n                <div\n                  className=\"w-1.5 h-1.5 rounded-full\"\n                  style={{ backgroundColor: activeColor }}\n                />\n              </div>\n            </>\n          )}\n        </>\n      )}\n    </div>\n  );\n}",
      "type": "registry:component",
      "target": "components/custom/blocks/CursorAnimationBlock.tsx"
    }
  ],
  "docs": "Named export: CursorAnimation. `variant` is magnetic | glow | trail | badge | spotlight | expand | crosshair; `trailCount` sets trail length and `label` fills the badge variant. Wrap a region rather than the page so normal cursors survive elsewhere. Pointer-only — no effect on touch.",
  "categories": [
    "utilities",
    "marketing"
  ],
  "type": "registry:component"
}