{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnified-bento",
  "title": "Magnified Bento",
  "description": "A bento card component with a draggable magnifying lens effect over scrolling chips.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/magnified-bento.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n  Search01Icon,\n  UserGroupIcon,\n  HierarchyIcon,\n  UserIcon,\n  RotateLeftIcon,\n  Settings02Icon,\n  CpuIcon,\n  CodeIcon,\n  Chart01Icon,\n  FlashIcon,\n  Link01Icon,\n  SmartPhone01Icon,\n  CloudIcon,\n  DatabaseIcon,\n  LockIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { motion, useMotionValue, useMotionTemplate } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n// change here\nconst TAG_ROWS = [\n  [\n    { id: \"discovery\", icon: Search01Icon, label: \"Discovery\" },\n    { id: \"client-review\", icon: UserGroupIcon, label: \"Client Review\" },\n    { id: \"system-design\", icon: HierarchyIcon, label: \"System Design\" },\n    { id: \"devops-integration\", icon: UserIcon, label: \"DevOps Integration\" },\n    { id: \"post-launch\", icon: RotateLeftIcon, label: \"Post-Launch Support\" },\n  ],\n  [\n    { id: \"qa-optimization\", icon: Settings02Icon, label: \"QA & Optimization\" },\n    { id: \"launch-deploy\", icon: CpuIcon, label: \"Launch & Deploy\" },\n    { id: \"full-stack\", icon: CodeIcon, label: \"Full-Stack Development\" },\n    { id: \"analytics\", icon: Chart01Icon, label: \"Analytics\" },\n    { id: \"mvp-engineering\", icon: FlashIcon, label: \"MVP Engineering\" },\n  ],\n  [\n    { id: \"api-backend\", icon: Link01Icon, label: \"API & Backend\" },\n    { id: \"mobile-dev\", icon: SmartPhone01Icon, label: \"Mobile Development\" },\n    {\n      id: \"cloud-infrastructure\",\n      icon: CloudIcon,\n      label: \"Cloud Infrastructure\",\n    },\n    { id: \"database-design\", icon: DatabaseIcon, label: \"Database Design\" },\n    { id: \"security\", icon: LockIcon, label: \"Security\" },\n  ],\n];\n\n// change here\nconst CONFIG = {\n  title: \"Intelligent Workflows\",\n  description:\n    \"Automatically categorize and search through your team's diverse skillsets and project phases with contextual awareness.\",\n  containerHeight: \"h-[200px] sm:h-[240px]\",\n  lensSize: 92,\n};\n\nconst MagnifiedBento = () => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const lensX = useMotionValue(0);\n  const lensY = useMotionValue(0);\n\n  const clipPath = useMotionTemplate`circle(30px at calc(50% + ${lensX}px - 10px) calc(50% + ${lensY}px - 10px))`;\n  const inverseMask = useMotionTemplate`radial-gradient(circle 30px at calc(50% + ${lensX}px - 10px) calc(50% + ${lensY}px - 10px), transparent 100%, black 100%)`;\n\n  return (\n    <div className=\"flex items-center justify-center p-4 sm:p-6 w-full not-prose\">\n      <div className=\"group relative w-full max-w-[420px] overflow-hidden rounded-[2rem] sm:rounded-[2.5rem] border bg-card p-1.5 sm:p-2 shadow-2xl shadow-primary/5 transition-all duration-500 hover:shadow-primary/10 hover:-translate-y-1\">\n        <div\n          ref={containerRef}\n          className={cn(\n            \"relative w-full overflow-hidden rounded-[1.6rem] sm:rounded-[2rem] bg-muted/30\",\n            CONFIG.containerHeight\n          )}\n        >\n          <div className=\"relative h-full w-full flex flex-col items-center justify-center\">\n            {/* base layer */}\n            <motion.div\n              style={{ WebkitMaskImage: inverseMask, maskImage: inverseMask }}\n              className=\"flex flex-col gap-4 w-full h-full justify-center\"\n            >\n              {TAG_ROWS.map((row, rowIndex) => (\n                <motion.div\n                  key={`row-${rowIndex}`}\n                  className=\"flex gap-4 w-max\"\n                  animate={{\n                    x:\n                      rowIndex % 2 === 0\n                        ? [\"0%\", \"-33.333%\"]\n                        : [\"-33.333%\", \"0%\"],\n                  }}\n                  transition={{\n                    duration: 25,\n                    ease: \"linear\",\n                    repeat: Infinity,\n                  }}\n                >\n                  {[...row, ...row, ...row].map((item, idx) => (\n                    <div\n                      key={`${item.id}-${idx}`}\n                      className=\"flex gap-2 bg-background/50 backdrop-blur-sm whitespace-nowrap w-fit text-muted-foreground p-2 px-3 items-center border border-border/50 rounded-full text-xs\"\n                    >\n                      <HugeiconsIcon icon={item.icon} size={14} />\n                      <span>{item.label}</span>\n                    </div>\n                  ))}\n                </motion.div>\n              ))}\n            </motion.div>\n\n            {/* reveal layer */}\n            <motion.div\n              className=\"absolute inset-0 flex flex-col gap-4 justify-center pointer-events-none select-none z-10\"\n              style={{\n                clipPath,\n              }}\n            >\n              {TAG_ROWS.map((row, rowIndex) => (\n                <motion.div\n                  key={`row-reveal-${rowIndex}`}\n                  className=\"flex gap-4 w-max\"\n                  animate={{\n                    x:\n                      rowIndex % 2 === 0\n                        ? [\"0%\", \"-33.333%\"]\n                        : [\"-33.333%\", \"0%\"],\n                  }}\n                  transition={{\n                    duration: 25,\n                    ease: \"linear\",\n                    repeat: Infinity,\n                  }}\n                >\n                  {[...row, ...row, ...row].map((item, idx) => (\n                    <div\n                      key={`${item.id}-${idx}-reveal`}\n                      className=\"flex gap-2 bg-background whitespace-nowrap w-fit text-foreground p-2 px-3 items-center border border-primary/20 shadow-sm rounded-full text-xs scale-125 ml-6\"\n                    >\n                      <HugeiconsIcon\n                        icon={item.icon}\n                        size={14}\n                        className=\"text-primary\"\n                      />\n                      <span className=\"font-medium text-primary\">\n                        {item.label}\n                      </span>\n                    </div>\n                  ))}\n                </motion.div>\n              ))}\n            </motion.div>\n\n            {/* lens */}\n            <motion.div\n              className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40 cursor-grab active:cursor-grabbing drop-shadow-xl\"\n              drag\n              dragMomentum={false}\n              dragConstraints={containerRef}\n              style={{ x: lensX, y: lensY }}\n            >\n              <div className=\"relative\">\n                <MagnifyingLens size={CONFIG.lensSize} />\n                <div className=\"absolute top-[6px] left-[6px] w-[60px] h-[60px] rounded-full bg-white/10 pointer-events-none\" />\n              </div>\n            </motion.div>\n          </div>\n\n          <div className=\"pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r from-background to-transparent z-20\"></div>\n          <div className=\"pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l from-background to-transparent z-20\"></div>\n        </div>\n\n        <div className=\"p-4 sm:p-6 px-4 pb-6 sm:pb-8\">\n          <h3 className=\"text-xl font-medium tracking-tight text-foreground\">\n            {CONFIG.title}\n          </h3>\n          <p className=\"mt-2 text-sm leading-relaxed text-muted-foreground\">\n            {CONFIG.description}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default MagnifiedBento;\n\nconst MagnifyingLens = ({ size = 92 }: { size?: number }) => {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 512 512\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M365.424 335.392L342.24 312.192L311.68 342.736L334.88 365.936L365.424 335.392Z\"\n        fill=\"#B0BDC6\"\n      />\n      <path\n        d=\"M358.08 342.736L334.88 319.552L319.04 335.392L342.24 358.584L358.08 342.736Z\"\n        fill=\"#DFE9EF\"\n      />\n      <path\n        d=\"M352.368 321.808L342.752 312.192L312.208 342.752L321.824 352.36L352.368 321.808Z\"\n        fill=\"#B0BDC6\"\n      />\n      <path\n        d=\"M332 332C260 404 142.4 404 69.6001 332C-2.3999 260 -2.3999 142.4 69.6001 69.6C141.6 -3.20003 259.2 -2.40002 332 69.6C404.8 142.4 404.8 260 332 332ZM315.2 87.2C252 24 150.4 24 88.0001 87.2C24.8001 150.4 24.8001 252 88.0001 314.4C151.2 377.6 252.8 377.6 315.2 314.4C377.6 252 377.6 150.4 315.2 87.2Z\"\n        fill=\"#DFE9EF\"\n      />\n      <path\n        d=\"M319.2 319.2C254.4 384 148.8 384 83.2001 319.2C18.4001 254.4 18.4001 148.8 83.2001 83.2C148 18.4 253.6 18.4 319.2 83.2C384 148.8 384 254.4 319.2 319.2ZM310.4 92C250.4 32 152 32 92.0001 92C32.0001 152 32.0001 250.4 92.0001 310.4C152 370.4 250.4 370.4 310.4 310.4C370.4 250.4 370.4 152 310.4 92Z\"\n        fill=\"#7A858C\"\n      />\n      <path\n        d=\"M484.104 428.784L373.8 318.472L318.36 373.912L428.672 484.216L484.104 428.784Z\"\n        fill=\"#333333\"\n      />\n      <path\n        d=\"M471.664 441.224L361.344 330.928L330.8 361.48L441.12 471.76L471.664 441.224Z\"\n        fill=\"#575B5E\"\n      />\n      <path\n        d=\"M495.2 423.2C504 432 432.8 504 423.2 495.2L417.6 489.6C408.8 480.8 480 408.8 489.6 417.6L495.2 423.2Z\"\n        fill=\"#B0BDC6\"\n      />\n      <path\n        d=\"M483.2 435.2C492 444 444.8 492 435.2 483.2L429.6 477.6C420.8 468.8 468 420.8 477.6 429.6L483.2 435.2Z\"\n        fill=\"#DFE9EF\"\n      />\n    </svg>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}