{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "car-lock-drive-motion",
  "description": "Side-view car with a clean lock/drive pill switch that springs the car forward on drive.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/motion-framer/car-lock-drive-motion.tsx",
      "content": "\"use client\";\n\n/**\n * Car lock/drive — a side-view car sits inside a card with a pill switch\n * below it. Pressing \"drive\" springs the thumb right and runs a one-shot\n * driving animation: the car accelerates out the right edge, teleports\n * off-screen left, then decelerates back into its resting position.\n * The switch resets to \"locked\" once the animation finishes.\n */\n\nimport { motion, useAnimationControls } from \"framer-motion\";\nimport { Lock, Power } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst CAR_IMG =\n  \"https://a.storyblok.com/f/322327/2616x712/b2f39db28a/cz25w12ix0010-911-carrera-gts-side.png/m/2616x712/smart/filters:format(avif)?dpl=dpl_AHR3Thhn9JKV9Dr5mGEDexMkWjPU\";\n\nconst CarLockDriveMotion = () => {\n  const [driving, setDriving] = useState(false);\n  const carControls = useAnimationControls();\n\n  const handleDrive = async () => {\n    if (driving) return;\n    setDriving(true);\n\n    await carControls.start({\n      x: 420,\n      transition: { duration: 0.6, ease: [0.42, 0, 0.7, 0.2] },\n    });\n\n    carControls.set({ x: -420 });\n    await new Promise((r) => setTimeout(r, 120));\n\n    await carControls.start({\n      x: 0,\n      transition: { duration: 0.95, ease: [0.16, 1, 0.3, 1] },\n    });\n\n    setDriving(false);\n  };\n\n  const handleLock = () => {\n    if (driving) return;\n  };\n\n  return (\n    <div\n      className=\"relative w-[320px] h-[300px] overflow-hidden [--car-bg:#FAFAFA] [--car-hl:rgba(255,255,255,0.95)] [--car-ground:rgba(0,0,0,0.06)] [--car-track:#E4E4E7] [--car-thumb:#FFFFFF] [--car-icon-active:#171717] [--car-icon-idle:#A1A1AA] dark:[--car-bg:#1C1C1F] dark:[--car-hl:rgba(255,255,255,0.05)] dark:[--car-ground:rgba(255,255,255,0.08)] dark:[--car-track:#2E2E33] dark:[--car-thumb:#56565E] dark:[--car-icon-active:#FAFAFA] dark:[--car-icon-idle:#71717A]\"\n      style={{\n        background: \"var(--car-bg)\",\n        borderRadius: \"28px\",\n        boxShadow:\n          \"0 1px 0 var(--car-hl) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 24px 40px -16px rgba(0,0,0,0.30), 0 4px 12px -2px rgba(0,0,0,0.16)\",\n        fontFamily: \"ui-sans-serif, system-ui\",\n      }}\n    >\n      <div\n        className=\"pointer-events-none absolute left-0 right-0\"\n        style={{\n          top: \"60%\",\n          height: 1,\n          background:\n            \"linear-gradient(90deg, transparent 0%, var(--car-ground) 25%, var(--car-ground) 75%, transparent 100%)\",\n        }}\n      />\n\n      <motion.img\n        src={CAR_IMG}\n        alt=\"Car side view\"\n        draggable={false}\n        initial={{ x: 0 }}\n        animate={carControls}\n        className=\"pointer-events-none absolute select-none\"\n        style={{\n          top: \"30%\",\n          left: \"50%\",\n          width: 360,\n          marginLeft: -168,\n          filter: \"drop-shadow(0 10px 14px rgba(0,0,0,0.14))\",\n        }}\n      />\n\n      <div className=\"absolute bottom-6 left-1/2 -translate-x-1/2\">\n        <div\n          className=\"relative grid grid-cols-2 items-center rounded-full\"\n          style={{\n            background: \"var(--car-track)\",\n            boxShadow:\n              \"inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 0 var(--car-hl)\",\n            width: 116,\n            height: 40,\n            padding: 4,\n          }}\n        >\n          <motion.div\n            className=\"absolute rounded-full\"\n            style={{\n              width: 54,\n              top: 4,\n              bottom: 4,\n              left: 4,\n              background: \"var(--car-thumb)\",\n              boxShadow:\n                \"0 1px 2px rgba(0,0,0,0.18), 0 6px 14px -4px rgba(0,0,0,0.28), 0 1px 0 var(--car-hl) inset\",\n            }}\n            animate={{ x: driving ? 54 : 0 }}\n            transition={{ type: \"spring\", stiffness: 420, damping: 32 }}\n          />\n\n          <button\n            type=\"button\"\n            onClick={handleLock}\n            disabled={driving}\n            aria-pressed={!driving}\n            aria-label=\"Lock\"\n            className=\"relative z-10 grid h-full place-items-center disabled:cursor-not-allowed cursor-pointer\"\n          >\n            <motion.span\n              animate={{ scale: !driving ? 1 : 0.92 }}\n              transition={{ type: \"spring\", stiffness: 400, damping: 24 }}\n            >\n              <Lock\n                className=\"size-4\"\n                style={{\n                  color: !driving\n                    ? \"var(--car-icon-active)\"\n                    : \"var(--car-icon-idle)\",\n                }}\n                strokeWidth={2.2}\n              />\n            </motion.span>\n          </button>\n\n          <button\n            type=\"button\"\n            onClick={handleDrive}\n            disabled={driving}\n            aria-pressed={driving}\n            aria-label=\"Drive\"\n            className=\"relative z-10 grid h-full place-items-center disabled:cursor-not-allowed cursor-pointer\"\n          >\n            <motion.span\n              animate={{ scale: driving ? 1 : 0.92 }}\n              transition={{ type: \"spring\", stiffness: 400, damping: 24 }}\n            >\n              <Power\n                className=\"size-4\"\n                style={{\n                  color: driving\n                    ? \"var(--car-icon-active)\"\n                    : \"var(--car-icon-idle)\",\n                }}\n                strokeWidth={2.2}\n              />\n            </motion.span>\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CarLockDriveMotion;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/car-lock-drive-motion.tsx"
    }
  ],
  "type": "registry:block"
}