{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drift-card",
  "type": "registry:ui",
  "title": "Drift Card",
  "description": "An interactive card with a drift hover effect that visually highlights content.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/drift-card.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DriftCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\nexport default function DriftCard({\n  children,\n  className,\n  style,\n  ...props\n}: DriftCardProps) {\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const card = e.currentTarget;\n    const rect = card.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n    const offsetX = ((x - centerX) / centerX) * 12;\n    const offsetY = ((y - centerY) / centerY) * 12;\n    setPosition({ x: offsetX, y: offsetY });\n  };\n\n  const handleMouseLeave = () => {\n    setPosition({ x: 0, y: 0 });\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border shadow-2xl p-3 bg-card\",\n        className\n      )}\n      style={style}\n      {...props}\n    >\n      <div\n        className=\"relative flex-1 rounded-2xl border border-border p-2 h-full w-full\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        style={{\n          background:\n            \"repeating-linear-gradient(45deg, hsl(var(--muted) / 0.3) 0px, hsl(var(--muted) / 0.3) 10px, hsl(var(--border) / 1) 10px, hsl(var(--border) / 1) 11px)\",\n        }}\n      >\n        <div\n          className=\"absolute inset-2 opacity-10 rounded-2xl pointer-events-none\"\n          style={{\n            backgroundImage:\n              \"repeating-linear-gradient(315deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 0, transparent 50%)\",\n            backgroundSize: \"10px 10px\",\n          }}\n        />\n\n        <div\n          className=\"absolute inset-2 rounded-2xl bg-card shadow-lg flex items-center justify-center transition-all duration-300 ease-out\"\n          style={{\n            transform: `translate(${position.x}px, ${position.y}px)`,\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}