{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor",
  "title": "Cursor",
  "description": "An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@unlumen-ui/cursor-primitive"
  ],
  "files": [
    {
      "path": "registry/components/unlumen/cursor/index.tsx",
      "content": "import * as React from \"react\";\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useVelocity,\n  useTransform,\n} from \"motion/react\";\n\nimport {\n  CursorProvider as CursorProviderPrimitive,\n  Cursor as CursorPrimitive,\n  CursorFollow as CursorFollowPrimitive,\n  CursorContainer as CursorContainerPrimitive,\n  useCursor,\n  type CursorProviderProps as CursorProviderPropsPrimitive,\n  type CursorContainerProps as CursorContainerPropsPrimitive,\n  type CursorProps as CursorPropsPrimitive,\n  type CursorFollowProps as CursorFollowPropsPrimitive,\n} from \"@/components/unlumen-ui/primitives/cursor-primitive\";\nimport { cn } from \"@/lib/utils\";\n\ntype CursorProviderProps = Omit<CursorProviderPropsPrimitive, \"children\"> &\n  CursorContainerPropsPrimitive;\n\nfunction CursorProvider({ global, ...props }: CursorProviderProps) {\n  return (\n    <CursorProviderPrimitive global={global}>\n      <CursorContainerPrimitive {...props} />\n    </CursorProviderPrimitive>\n  );\n}\n\ntype CursorProps = Omit<CursorPropsPrimitive, \"children\" | \"asChild\">;\n\nfunction Cursor({ className, ...props }: CursorProps) {\n  const { cursorPos } = useCursor();\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  React.useEffect(() => {\n    x.set(cursorPos.x);\n    y.set(cursorPos.y);\n  }, [cursorPos, x, y]);\n\n  const springConfig = { damping: 25, stiffness: 300 };\n  const smoothX = useSpring(x, springConfig);\n  const smoothY = useSpring(y, springConfig);\n\n  const velocityX = useVelocity(smoothX);\n  const velocityY = useVelocity(smoothY);\n\n  // tilt the cursor based on velocity for a gravity feel\n  const rotateVelocity = useTransform([velocityX, velocityY], ([vx, vy]) => {\n    const rx = ((vx as number) / 1000) * 30;\n    const ry = ((vy as number) / 1000) * 30;\n    return Math.max(-45, Math.min(45, rx + ry));\n  });\n  const rotate = useSpring(rotateVelocity, { damping: 15, stiffness: 200 });\n\n  const scale = useTransform([velocityX, velocityY], ([vx, vy]) => {\n    const velocity = Math.sqrt((vx as number) ** 2 + (vy as number) ** 2);\n    return 1 - Math.min(velocity / 2000, 0.1);\n  });\n\n  return (\n    <CursorPrimitive\n      style={{\n        top: smoothY,\n        left: smoothX,\n        transform: \"translate(-4.5%, -11%)\", // Override default centering to align tip\n      }}\n      {...props}\n    >\n      <motion.svg\n        className={cn(\"size-6 text-foreground\", className)}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 40 40\"\n        style={{\n          rotate,\n          scale,\n          transformOrigin: \"4.5% 11%\", // Tip of the SVG path\n        }}\n      >\n        <path\n          fill=\"currentColor\"\n          d=\"M1.8 4.4 7 36.2c.3 1.8 2.6 2.3 3.6.8l3.9-5.7c1.7-2.5 4.5-4.1 7.5-4.3l6.9-.5c1.8-.1 2.5-2.4 1.1-3.5L5 2.5c-1.4-1.1-3.5 0-3.3 1.9Z\"\n        />\n      </motion.svg>\n    </CursorPrimitive>\n  );\n}\n\ntype CursorFollowProps = Omit<CursorFollowPropsPrimitive, \"asChild\">;\n\nfunction CursorFollow({\n  className,\n  children,\n  sideOffset = 15,\n  alignOffset = 5,\n  ...props\n}: CursorFollowProps) {\n  const { cursorPos } = useCursor();\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  React.useEffect(() => {\n    x.set(cursorPos.x);\n    y.set(cursorPos.y);\n  }, [cursorPos, x, y]);\n\n  const springConfig = { damping: 25, stiffness: 300 };\n  const smoothX = useSpring(x, springConfig);\n  const smoothY = useSpring(y, springConfig);\n\n  const velocityX = useVelocity(smoothX);\n  const velocityY = useVelocity(smoothY);\n\n  const scaleX = useTransform(velocityX, [-1000, 0, 1000], [0.9, 1, 1.15]);\n  const scaleY = useTransform(velocityY, [-1000, 0, 1000], [1.15, 1, 0.9]);\n\n  const skewX = useTransform(velocityX, [-1000, 0, 1000], [-3, 0, 3]);\n  const skewY = useTransform(velocityY, [-1000, 0, 1000], [-3, 0, 3]);\n\n  return (\n    <CursorFollowPrimitive\n      sideOffset={sideOffset}\n      alignOffset={alignOffset}\n      {...props}\n    >\n      <motion.div\n        className={cn(\n          \"bg-foreground rounded-md text-background px-2 py-1 text-sm\",\n          className,\n        )}\n        style={{\n          scaleX,\n          scaleY,\n          skewX,\n          skewY,\n        }}\n      >\n        {children}\n      </motion.div>\n    </CursorFollowPrimitive>\n  );\n}\n\nexport {\n  CursorProvider,\n  Cursor,\n  CursorFollow,\n  type CursorProviderProps,\n  type CursorProps,\n  type CursorFollowProps,\n};\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/cursor.tsx"
    }
  ],
  "type": "registry:ui"
}