{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-book",
  "title": "3D Book",
  "description": "An interactive 3D book component with page flip animations.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/3d-book.tsx",
      "content": "\"use client\";\r\n\r\nimport { useRef, useState } from \"react\";\r\n\r\nexport default function InteractiveBook() {\r\n  const bookRef = useRef<HTMLDivElement>(null);\r\n  const [progress, setProgress] = useState(0);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n\r\n  // Linear interpolation function\r\n  const lerp = (a: number, b: number, t: number) => a + (b - a) * t;\r\n\r\n  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\r\n    if (!bookRef.current) return;\r\n\r\n    const rect = bookRef.current.getBoundingClientRect();\r\n    const cursorX = e.clientX;\r\n    const bookCenterX = rect.left + rect.width / 2;\r\n\r\n    // Calculate how far cursor is from center (-1 to 1)\r\n    const distanceFromCenter = (cursorX - bookCenterX) / (rect.width / 2);\r\n\r\n    // Map cursor position to progress\r\n    // Left side (negative) = open (1), Right side (positive) = closed (0)\r\n    const targetProgress = lerp(1, 0, (distanceFromCenter + 1) / 2);\r\n\r\n    // Clamp between 0 and 1\r\n    setProgress(Math.max(0, Math.min(1, targetProgress)));\r\n  };\r\n\r\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\r\n    setIsDragging(true);\r\n    handlePointerMove(e);\r\n  };\r\n\r\n  const handlePointerUp = () => {\r\n    setIsDragging(false);\r\n    setProgress(0);\r\n  };\r\n\r\n  const handlePointerLeave = () => {\r\n    // Close book when cursor leaves (only if not dragging on mobile)\r\n    if (!isDragging) {\r\n      setProgress(0);\r\n    }\r\n  };\r\n\r\n  // Generate pages - all at same size and position\r\n  const totalPages = 15;\r\n  const pages = [];\r\n\r\n  // All pages same size, different rotation angles\r\n  for (let i = 1; i <= totalPages; i++) {\r\n    const rotationAngle = (i + 1) * 10; // -20, -30, -40... -160\r\n\r\n    pages.push(\r\n      <div\r\n        key={i}\r\n        className=\"absolute h-48 md:h-72 w-32 md:w-52 rounded-lg md:rounded-2xl border border-border bg-background\"\r\n        style={\r\n          {\r\n            transformStyle: \"preserve-3d\",\r\n            transformOrigin: \"left\",\r\n            transform: `rotateY(calc(var(--book-progress) * ${-rotationAngle}deg))`,\r\n            zIndex: 50 + i,\r\n            backfaceVisibility: \"visible\",\r\n            \"--book-progress\": progress,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"flex w-full h-full items-center justify-center  \">\r\n      <div\r\n        ref={bookRef}\r\n        className=\"w-32 md:w-52 h-48 md:h-72 will-change-transform translate-x-16 md:translate-x-24 touch-none\"\r\n        onPointerMove={handlePointerMove}\r\n        onPointerDown={handlePointerDown}\r\n        onPointerUp={handlePointerUp}\r\n        onPointerLeave={handlePointerLeave}\r\n        style={\r\n          {\r\n            perspective: \"1500px\",\r\n            transformStyle: \"preserve-3d\",\r\n            \"--book-progress\": progress,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        {/* Back Cover (underneath all pages) */}\r\n        <div\r\n          className=\"absolute h-48 md:h-72 w-32 md:w-52 rounded-lg md:rounded-2xl border-2 border-border\"\r\n          style={{\r\n            transformStyle: \"preserve-3d\",\r\n            transformOrigin: \"left\",\r\n            background:\r\n              \"radial-gradient(hsl(var(--muted)) 0 1px, hsl(var(--background)) 1px 100%) 0 0 / 4px 4px\",\r\n            boxShadow: \"0 5px 15px rgba(0,0,0,0.1)\",\r\n            zIndex: 1,\r\n          }}\r\n        />\r\n\r\n        {/* Pages - all same size, different rotations */}\r\n        {pages}\r\n\r\n        {/* Front Cover */}\r\n        <div\r\n          className=\"absolute h-48 md:h-72 w-32 md:w-52 bg-muted overflow-hidden\"\r\n          style={\r\n            {\r\n              transformStyle: \"preserve-3d\",\r\n              transformOrigin: \"left center\",\r\n              transform: `rotateY(calc(var(--book-progress) * -165deg))`,\r\n              boxShadow: \"0 4px 8px rgba(0, 0, 0, 0.1)\",\r\n              borderRadius: \"0 8px 8px 0\",\r\n              zIndex: 200,\r\n              \"--book-progress\": progress,\r\n            } as React.CSSProperties\r\n          }\r\n        >\r\n          {/* Cover shadow overlay */}\r\n          <div\r\n            className=\"absolute inset-0 pointer-events-none z-30\"\r\n            style={{\r\n              borderRadius: \"0 8px 8px 0\",\r\n              boxShadow:\r\n                \"0 0 0 0.85px rgba(0, 0, 0, 0.1) inset, 2px 0 1px 0 rgba(0, 0, 0, 0.1) inset, -1.5px 0 1px 0 rgba(0, 0, 0, 0.1) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 16px 0 rgba(0, 0, 0, 0.05)\",\r\n            }}\r\n          />\r\n\r\n          {/* Red top section */}\r\n          <div\r\n            className=\"absolute top-0 left-0 right-0 h-[40%] z-10 p-1.5 md:p-3 pl-2 md:pl-4\"\r\n            style={{\r\n              backgroundColor: \"rgb(187, 1, 58)\",\r\n            }}\r\n          />\r\n\r\n          {/* Spine edge */}\r\n          <div className=\"absolute top-0 left-0 bottom-0 w-2 md:w-3.5 z-30 flex flex-row justify-end\">\r\n            <div className=\"w-0.5 h-full bg-background/25\" />\r\n            <div className=\"w-0.5 h-full bg-foreground/15\" />\r\n          </div>\r\n\r\n          {/* Title */}\r\n          <div\r\n            className=\"absolute bottom-1.5 left-3 md:left-6 right-1.5 text-sm md:text-2xl font-medium pointer-events-none select-none z-20 text-muted-foreground/30\"\r\n            style={{\r\n              textShadow: \"0 0 2px hsl(var(--background))\",\r\n              backfaceVisibility: \"hidden\",\r\n            }}\r\n          >\r\n            Notebook\r\n          </div>\r\n\r\n          {/* Back label */}\r\n          <div\r\n            className=\"absolute top-1/2 right-1/2 text-xs md:text-base font-semibold text-center text-primary\"\r\n            style={{\r\n              transform: \"translate(50%, -50%) rotateY(180deg) scaleX(-1)\",\r\n              backfaceVisibility: \"hidden\",\r\n            }}\r\n          >\r\n            Back Page\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}