{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-button",
  "type": "registry:ui",
  "title": "ThreeDButton",
  "description": "A minimal 3D button with a clean deck-style press and sliding click sheen.",
  "files": [
    {
      "path": "components/evil-buttons/3d-button.tsx",
      "type": "registry:ui",
      "target": "components/evil-buttons/3d-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type HTMLMotionProps } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ThreeDButtonProps = HTMLMotionProps<\"button\"> & {\n  children?: React.ReactNode;\n};\n\nconst pressTransition = {\n  type: \"spring\",\n  stiffness: 620,\n  damping: 32,\n  mass: 0.5,\n} as const;\n\nexport function ThreeDButton({\n  className,\n  children = \"Continue\",\n  ...props\n}: ThreeDButtonProps) {\n  return (\n    <motion.button\n      initial=\"rest\"\n      whileHover=\"hover\"\n      whileTap=\"tap\"\n      className={cn(\n        \"group relative isolate inline-flex min-w-38 cursor-pointer rounded-full pb-1.5 outline-none\",\n        \"focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2\",\n        \"dark:focus-visible:ring-white\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Deck (bottom layer / shadow block) */}\n      <motion.span\n        aria-hidden\n        variants={{\n          rest: { y: 0 },\n          hover: { y: 1 },\n          tap: { y: -1 },\n        }}\n        transition={pressTransition}\n        className=\"absolute inset-x-0 bottom-0 top-1.5 -z-10 rounded-full bg-zinc-950 shadow-[0_10px_18px_rgba(24,24,27,0.2)] dark:bg-white dark:shadow-[0_10px_18px_rgba(255,255,255,0.15)]\"\n      />\n      {/* Face (top layer / button surface) */}\n      <motion.span\n        variants={{\n          // Whole-pixel moves only: tilting or fractionally scaling the face makes\n          // Chrome drop anti-aliasing on its edge, which shows up as a dashed rim.\n          rest: { y: 0 },\n          hover: { y: -2 },\n          tap: { y: 6 },\n        }}\n        transition={pressTransition}\n        className={cn(\n          \"relative z-10 inline-flex w-full items-center justify-center overflow-hidden rounded-full px-7 py-3\",\n          \"bg-zinc-50 text-sm font-semibold text-zinc-950 dark:bg-zinc-900 dark:text-white\",\n          // The rim is an inset ring rather than a border so it stays smooth while the face moves.\n          \"shadow-[inset_0_0_0_1px_rgb(212_212_216),inset_0_2px_0_rgba(255,255,255,0.9),inset_0_-2px_0_rgba(24,24,27,0.06)]\",\n          \"dark:shadow-[inset_0_0_0_1px_rgb(255_255_255),inset_0_2px_0_rgba(255,255,255,0.15),inset_0_-2px_0_rgba(0,0,0,0.3)]\",\n          \"backface-hidden will-change-transform\",\n        )}\n      >\n        {/* Press spot (darkens on press) */}\n        <motion.span\n          aria-hidden\n          variants={{\n            rest: { opacity: 0, scaleX: 0.25 },\n            hover: { opacity: 0.3, scaleX: 0.45 },\n            tap: { opacity: 1, scaleX: 1 },\n          }}\n          transition={pressTransition}\n          className=\"pointer-events-none absolute inset-y-1 left-1/2 w-10 -translate-x-1/2 rounded-full bg-zinc-950/10 dark:bg-white/20 blur-sm\"\n        />\n        {/* Sheen / gloss stripe */}\n        <motion.span\n          aria-hidden\n          variants={{\n            // Parked fully off the left edge so no sliver of it shows at rest.\n            rest: { opacity: 0, x: \"-100%\" },\n            hover: { opacity: 0.75, x: \"-35%\" },\n            tap: { opacity: 0.9, x: \"82%\" },\n          }}\n          transition={pressTransition}\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-1/2 bg-linear-to-r from-transparent via-white to-transparent dark:via-white/20\"\n        />\n        {/* Label */}\n        <motion.span\n          variants={{\n            rest: { y: 0 },\n            hover: { y: -1 },\n            tap: { y: 1 },\n          }}\n          transition={pressTransition}\n          className=\"relative z-10\"\n        >\n          {children}\n        </motion.span>\n      </motion.span>\n    </motion.button>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "motion"
  ]
}