{
  "name": "macbook-scroll",
  "type": "registry:ui",
  "dependencies": [
    "@tabler/icons-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/macbook-scroll.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { MotionValue, motion, useScroll, useTransform } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  IconBrightnessDown,\n  IconBrightnessUp,\n  IconCaretRightFilled,\n  IconCaretUpFilled,\n  IconChevronUp,\n  IconMicrophone,\n  IconMoon,\n  IconPlayerSkipForward,\n  IconPlayerTrackNext,\n  IconPlayerTrackPrev,\n  IconTable,\n  IconVolume,\n  IconVolume2,\n  IconVolume3,\n} from \"@tabler/icons-react\";\nimport { IconSearch } from \"@tabler/icons-react\";\nimport { IconWorld } from \"@tabler/icons-react\";\nimport { IconCommand } from \"@tabler/icons-react\";\nimport { IconCaretLeftFilled } from \"@tabler/icons-react\";\nimport { IconCaretDownFilled } from \"@tabler/icons-react\";\n\n\nexport const MacbookScroll = ({\n  src,\n  showGradient,\n  title,\n  badge,\n}: {\n  src?: string;\n  showGradient?: boolean;\n  title?: string | React.ReactNode;\n  badge?: React.ReactNode;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start start\", \"end start\"],\n  });\n\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    if (window && window.innerWidth < 768) {\n      setIsMobile(true);\n    }\n  }, []);\n\n  const scaleX = useTransform(\n    scrollYProgress,\n    [0, 0.3],\n    [1.2, isMobile ? 1 : 1.5],\n  );\n  const scaleY = useTransform(\n    scrollYProgress,\n    [0, 0.3],\n    [0.6, isMobile ? 1 : 1.5],\n  );\n  const translate = useTransform(scrollYProgress, [0, 1], [0, 1500]);\n  const rotate = useTransform(scrollYProgress, [0.1, 0.12, 0.3], [-28, -28, 0]);\n  const textTransform = useTransform(scrollYProgress, [0, 0.3], [0, 100]);\n  const textOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);\n\n  return (\n    <div\n      ref={ref}\n      className=\"flex min-h-[200vh] shrink-0 scale-[0.35] transform flex-col items-center justify-start py-0 [perspective:800px] sm:scale-50 md:scale-100 md:py-80\"\n    >\n      <motion.h2\n        style={{\n          translateY: textTransform,\n          opacity: textOpacity,\n        }}\n        className=\"mb-20 text-center text-3xl font-bold text-neutral-800 dark:text-white\"\n      >\n        {title || (\n          <span>\n            This Macbook is built with Tailwindcss. <br /> No kidding.\n          </span>\n        )}\n      </motion.h2>\n      {/* Lid */}\n      <Lid\n        src={src}\n        scaleX={scaleX}\n        scaleY={scaleY}\n        rotate={rotate}\n        translate={translate}\n      />\n      {/* Base area */}\n      <div className=\"relative -z-10 h-[22rem] w-[32rem] overflow-hidden rounded-2xl bg-gray-200 dark:bg-[#272729]\">\n        {/* above keyboard bar */}\n        <div className=\"relative h-10 w-full\">\n          <div className=\"absolute inset-x-0 mx-auto h-4 w-[80%] bg-[#050505]\" />\n        </div>\n        <div className=\"relative flex\">\n          <div className=\"mx-auto h-full w-[10%] overflow-hidden\">\n            <SpeakerGrid />\n          </div>\n          <div className=\"mx-auto h-full w-[80%]\">\n            <Keypad />\n          </div>\n          <div className=\"mx-auto h-full w-[10%] overflow-hidden\">\n            <SpeakerGrid />\n          </div>\n        </div>\n        <Trackpad />\n        <div className=\"absolute inset-x-0 bottom-0 mx-auto h-2 w-20 rounded-tl-3xl rounded-tr-3xl bg-gradient-to-t from-[#272729] to-[#050505]\" />\n        {showGradient && (\n          <div className=\"absolute inset-x-0 bottom-0 z-50 h-40 w-full bg-gradient-to-t from-white via-white to-transparent dark:from-black dark:via-black\"></div>\n        )}\n        {badge && <div className=\"absolute bottom-4 left-4\">{badge}</div>}\n      </div>\n    </div>\n  );\n};\n\nexport const Lid = ({\n  scaleX,\n  scaleY,\n  rotate,\n  translate,\n  src,\n}: {\n  scaleX: MotionValue<number>;\n  scaleY: MotionValue<number>;\n  rotate: MotionValue<number>;\n  translate: MotionValue<number>;\n  src?: string;\n}) => {\n  return (\n    <div className=\"relative [perspective:800px]\">\n      <div\n        style={{\n          transform: \"perspective(800px) rotateX(-25deg) translateZ(0px)\",\n          transformOrigin: \"bottom\",\n          transformStyle: \"preserve-3d\",\n        }}\n        className=\"relative h-[12rem] w-[32rem] rounded-2xl bg-[#010101] p-2\"\n      >\n        <div\n          style={{\n            boxShadow: \"0px 2px 0px 2px #171717 inset\",\n          }}\n          className=\"absolute inset-0 flex items-center justify-center rounded-lg bg-[#010101]\"\n        >\n          <span className=\"text-white\">\n            <AceternityLogo />\n          </span>\n        </div>\n      </div>\n      <motion.div\n        style={{\n          scaleX: scaleX,\n          scaleY: scaleY,\n          rotateX: rotate,\n          translateY: translate,\n          transformStyle: \"preserve-3d\",\n          transformOrigin: \"top\",\n        }}\n        className=\"absolute inset-0 h-96 w-[32rem] rounded-2xl bg-[#010101] p-2\"\n      >\n        <div className=\"absolute inset-0 rounded-lg bg-[#272729]\" />\n        <img\n          src={src as string}\n          alt=\"aceternity logo\"\n          className=\"absolute inset-0 h-full w-full rounded-lg object-cover object-left-top\"\n        />\n      </motion.div>\n    </div>\n  );\n};\n\nexport const Trackpad = () => {\n  return (\n    <div\n      className=\"mx-auto my-1 h-32 w-[40%] rounded-xl\"\n      style={{\n        boxShadow: \"0px 0px 1px 1px #00000020 inset\",\n      }}\n    ></div>\n  );\n};\n\nexport const Keypad = () => {\n  return (\n    <div className=\"mx-1 h-full [transform:translateZ(0)] rounded-md bg-[#050505] p-1 [will-change:transform]\">\n      {/* First Row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn\n          className=\"w-10 items-end justify-start pb-[2px] pl-[4px]\"\n          childrenClassName=\"items-start\"\n        >\n          esc\n        </KBtn>\n        <KBtn>\n          <IconBrightnessDown className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F1</span>\n        </KBtn>\n        <KBtn>\n          <IconBrightnessUp className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F2</span>\n        </KBtn>\n        <KBtn>\n          <IconTable className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F3</span>\n        </KBtn>\n        <KBtn>\n          <IconSearch className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F4</span>\n        </KBtn>\n        <KBtn>\n          <IconMicrophone className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F5</span>\n        </KBtn>\n        <KBtn>\n          <IconMoon className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F6</span>\n        </KBtn>\n        <KBtn>\n          <IconPlayerTrackPrev className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F7</span>\n        </KBtn>\n        <KBtn>\n          <IconPlayerSkipForward className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F8</span>\n        </KBtn>\n        <KBtn>\n          <IconPlayerTrackNext className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F8</span>\n        </KBtn>\n        <KBtn>\n          <IconVolume3 className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F10</span>\n        </KBtn>\n        <KBtn>\n          <IconVolume2 className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F11</span>\n        </KBtn>\n        <KBtn>\n          <IconVolume className=\"h-[6px] w-[6px]\" />\n          <span className=\"mt-1 inline-block\">F12</span>\n        </KBtn>\n        <KBtn>\n          <div className=\"h-4 w-4 rounded-full bg-gradient-to-b from-neutral-900 from-20% via-black via-50% to-neutral-900 to-95% p-px\">\n            <div className=\"h-full w-full rounded-full bg-black\" />\n          </div>\n        </KBtn>\n      </div>\n\n      {/* Second row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn>\n          <span className=\"block\">~</span>\n          <span className=\"mt-1 block\">`</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">!</span>\n          <span className=\"block\">1</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">@</span>\n          <span className=\"block\">2</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">#</span>\n          <span className=\"block\">3</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">$</span>\n          <span className=\"block\">4</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">%</span>\n          <span className=\"block\">5</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">^</span>\n          <span className=\"block\">6</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">&</span>\n          <span className=\"block\">7</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">*</span>\n          <span className=\"block\">8</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">(</span>\n          <span className=\"block\">9</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">)</span>\n          <span className=\"block\">0</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">&mdash;</span>\n          <span className=\"block\">_</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">+</span>\n          <span className=\"block\"> = </span>\n        </KBtn>\n        <KBtn\n          className=\"w-10 items-end justify-end pr-[4px] pb-[2px]\"\n          childrenClassName=\"items-end\"\n        >\n          delete\n        </KBtn>\n      </div>\n\n      {/* Third row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn\n          className=\"w-10 items-end justify-start pb-[2px] pl-[4px]\"\n          childrenClassName=\"items-start\"\n        >\n          tab\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">Q</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">W</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">E</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">R</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">T</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">Y</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">U</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">I</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">O</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">P</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`{`}</span>\n          <span className=\"block\">{`[`}</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`}`}</span>\n          <span className=\"block\">{`]`}</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`|`}</span>\n          <span className=\"block\">{`\\\\`}</span>\n        </KBtn>\n      </div>\n\n      {/* Fourth Row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn\n          className=\"w-[2.8rem] items-end justify-start pb-[2px] pl-[4px]\"\n          childrenClassName=\"items-start\"\n        >\n          caps lock\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">A</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">S</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">D</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">F</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">G</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">H</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">J</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">K</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">L</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`:`}</span>\n          <span className=\"block\">{`;`}</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`\"`}</span>\n          <span className=\"block\">{`'`}</span>\n        </KBtn>\n        <KBtn\n          className=\"w-[2.85rem] items-end justify-end pr-[4px] pb-[2px]\"\n          childrenClassName=\"items-end\"\n        >\n          return\n        </KBtn>\n      </div>\n\n      {/* Fifth Row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn\n          className=\"w-[3.65rem] items-end justify-start pb-[2px] pl-[4px]\"\n          childrenClassName=\"items-start\"\n        >\n          shift\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">Z</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">X</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">C</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">V</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">B</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">N</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">M</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`<`}</span>\n          <span className=\"block\">{`,`}</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`>`}</span>\n          <span className=\"block\">{`.`}</span>\n        </KBtn>\n        <KBtn>\n          <span className=\"block\">{`?`}</span>\n          <span className=\"block\">{`/`}</span>\n        </KBtn>\n        <KBtn\n          className=\"w-[3.65rem] items-end justify-end pr-[4px] pb-[2px]\"\n          childrenClassName=\"items-end\"\n        >\n          shift\n        </KBtn>\n      </div>\n\n      {/* sixth Row */}\n      <div className=\"mb-[2px] flex w-full shrink-0 gap-[2px]\">\n        <KBtn className=\"\" childrenClassName=\"h-full justify-between py-[4px]\">\n          <div className=\"flex w-full justify-end pr-1\">\n            <span className=\"block\">fn</span>\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <IconWorld className=\"h-[6px] w-[6px]\" />\n          </div>\n        </KBtn>\n        <KBtn className=\"\" childrenClassName=\"h-full justify-between py-[4px]\">\n          <div className=\"flex w-full justify-end pr-1\">\n            <IconChevronUp className=\"h-[6px] w-[6px]\" />\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <span className=\"block\">control</span>\n          </div>\n        </KBtn>\n        <KBtn className=\"\" childrenClassName=\"h-full justify-between py-[4px]\">\n          <div className=\"flex w-full justify-end pr-1\">\n            <OptionKey className=\"h-[6px] w-[6px]\" />\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <span className=\"block\">option</span>\n          </div>\n        </KBtn>\n        <KBtn\n          className=\"w-8\"\n          childrenClassName=\"h-full justify-between py-[4px]\"\n        >\n          <div className=\"flex w-full justify-end pr-1\">\n            <IconCommand className=\"h-[6px] w-[6px]\" />\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <span className=\"block\">command</span>\n          </div>\n        </KBtn>\n        <KBtn className=\"w-[8.2rem]\"></KBtn>\n        <KBtn\n          className=\"w-8\"\n          childrenClassName=\"h-full justify-between py-[4px]\"\n        >\n          <div className=\"flex w-full justify-start pl-1\">\n            <IconCommand className=\"h-[6px] w-[6px]\" />\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <span className=\"block\">command</span>\n          </div>\n        </KBtn>\n        <KBtn className=\"\" childrenClassName=\"h-full justify-between py-[4px]\">\n          <div className=\"flex w-full justify-start pl-1\">\n            <OptionKey className=\"h-[6px] w-[6px]\" />\n          </div>\n          <div className=\"flex w-full justify-start pl-1\">\n            <span className=\"block\">option</span>\n          </div>\n        </KBtn>\n        <div className=\"mt-[2px] flex h-6 w-[4.9rem] flex-col items-center justify-end rounded-[4px] p-[0.5px]\">\n          <KBtn className=\"h-3 w-6\">\n            <IconCaretUpFilled className=\"h-[6px] w-[6px]\" />\n          </KBtn>\n          <div className=\"flex\">\n            <KBtn className=\"h-3 w-6\">\n              <IconCaretLeftFilled className=\"h-[6px] w-[6px]\" />\n            </KBtn>\n            <KBtn className=\"h-3 w-6\">\n              <IconCaretDownFilled className=\"h-[6px] w-[6px]\" />\n            </KBtn>\n            <KBtn className=\"h-3 w-6\">\n              <IconCaretRightFilled className=\"h-[6px] w-[6px]\" />\n            </KBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const KBtn = ({\n  className,\n  children,\n  childrenClassName,\n  backlit = true,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n  childrenClassName?: string;\n  backlit?: boolean;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"[transform:translateZ(0)] rounded-[4px] p-[0.5px] [will-change:transform]\",\n        backlit && \"bg-white/[0.2] shadow-xl shadow-white\",\n      )}\n    >\n      <div\n        className={cn(\n          \"flex h-6 w-6 items-center justify-center rounded-[3.5px] bg-[#0A090D]\",\n          className,\n        )}\n        style={{\n          boxShadow:\n            \"0px -0.5px 2px 0 #0D0D0F inset, -0.5px 0px 2px 0 #0D0D0F inset\",\n        }}\n      >\n        <div\n          className={cn(\n            \"flex w-full flex-col items-center justify-center text-[5px] text-neutral-200\",\n            childrenClassName,\n            backlit && \"text-white\",\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const SpeakerGrid = () => {\n  return (\n    <div\n      className=\"mt-2 flex h-40 gap-[2px] px-[0.5px]\"\n      style={{\n        backgroundImage:\n          \"radial-gradient(circle, #08080A 0.5px, transparent 0.5px)\",\n        backgroundSize: \"3px 3px\",\n      }}\n    ></div>\n  );\n};\n\nexport const OptionKey = ({ className }: { className: string }) => {\n  return (\n    <svg\n      fill=\"none\"\n      version=\"1.1\"\n      id=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 32 32\"\n      className={className}\n    >\n      <rect\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        x=\"18\"\n        y=\"5\"\n        width=\"10\"\n        height=\"2\"\n      />\n      <polygon\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        points=\"10.6,5 4,5 4,7 9.4,7 18.4,27 28,27 28,25 19.6,25 \"\n      />\n      <rect\n        id=\"_Transparent_Rectangle_\"\n        className=\"st0\"\n        width=\"32\"\n        height=\"32\"\n        stroke=\"none\"\n      />\n    </svg>\n  );\n};\n\nconst AceternityLogo = () => {\n  return (\n    <svg\n      width=\"66\"\n      height=\"65\"\n      viewBox=\"0 0 66 65\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"h-3 w-3 text-white\"\n    >\n      <path\n        d=\"M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696\"\n        stroke=\"currentColor\"\n        strokeWidth=\"15\"\n        strokeMiterlimit=\"3.86874\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/macbook-scroll.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Macbook Scroll"
}