{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-demo",
  "type": "registry:example",
  "title": "Bento Demo",
  "description": "Example showing a bento grid layout for showcasing features.",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "registryDependencies": [
    "button",
    "calendar",
    "@magicui/marquee",
    "@magicui/bento-grid",
    "@magicui/animated-beam",
    "@magicui/animated-list",
    "@magicui/animated-beam-multiple-outputs",
    "@magicui/animated-list-demo"
  ],
  "files": [
    {
      "path": "registry/example/bento-demo.tsx",
      "content": "import { CalendarIcon, FileTextIcon } from \"@radix-ui/react-icons\"\nimport { BellIcon, Share2Icon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport AnimatedBeamMultipleOutputDemo from \"@/registry/example/animated-beam-multiple-outputs\"\nimport AnimatedListDemo from \"@/registry/example/animated-list-demo\"\nimport { BentoCard, BentoGrid } from \"@/registry/magicui/bento-grid\"\nimport { Marquee } from \"@/registry/magicui/marquee\"\n\nconst files = [\n  {\n    name: \"bitcoin.pdf\",\n    body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n  },\n  {\n    name: \"finances.xlsx\",\n    body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n  },\n  {\n    name: \"logo.svg\",\n    body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n  },\n  {\n    name: \"keys.gpg\",\n    body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n  },\n  {\n    name: \"seed.txt\",\n    body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n  },\n]\n\nconst features = [\n  {\n    Icon: FileTextIcon,\n    name: \"Save your files\",\n    description: \"We automatically save your files as you type.\",\n    href: \"#\",\n    cta: \"Learn more\",\n    className: \"col-span-3 lg:col-span-1\",\n    background: (\n      <Marquee\n        pauseOnHover\n        className=\"absolute top-10 [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] [--duration:20s]\"\n      >\n        {files.map((f, idx) => (\n          <figure\n            key={idx}\n            className={cn(\n              \"relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4\",\n              \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n              \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n              \"transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none\"\n            )}\n          >\n            <div className=\"flex flex-row items-center gap-2\">\n              <div className=\"flex flex-col\">\n                <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {f.name}\n                </figcaption>\n              </div>\n            </div>\n            <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n          </figure>\n        ))}\n      </Marquee>\n    ),\n  },\n  {\n    Icon: BellIcon,\n    name: \"Notifications\",\n    description: \"Get notified when something happens.\",\n    href: \"#\",\n    cta: \"Learn more\",\n    className: \"col-span-3 lg:col-span-2\",\n    background: (\n      <AnimatedListDemo className=\"absolute top-4 right-2 h-[300px] w-full scale-75 border-none [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] transition-all duration-300 ease-out group-hover:scale-90\" />\n    ),\n  },\n  {\n    Icon: Share2Icon,\n    name: \"Integrations\",\n    description: \"Supports 100+ integrations and counting.\",\n    href: \"#\",\n    cta: \"Learn more\",\n    className: \"col-span-3 lg:col-span-2\",\n    background: (\n      <AnimatedBeamMultipleOutputDemo className=\"absolute top-4 right-2 h-[300px] border-none [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] transition-all duration-300 ease-out group-hover:scale-105\" />\n    ),\n  },\n  {\n    Icon: CalendarIcon,\n    name: \"Calendar\",\n    description: \"Use the calendar to filter your files by date.\",\n    className: \"col-span-3 lg:col-span-1\",\n    href: \"#\",\n    cta: \"Learn more\",\n    background: (\n      <Calendar\n        mode=\"single\"\n        selected={new Date(2022, 4, 11, 0, 0, 0)}\n        className=\"absolute top-10 right-0 origin-top scale-75 rounded-md border [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] transition-all duration-300 ease-out group-hover:scale-90\"\n      />\n    ),\n  },\n]\n\nexport default function BentoDemo() {\n  return (\n    <BentoGrid>\n      {features.map((feature, idx) => (\n        <BentoCard key={idx} {...feature} />\n      ))}\n    </BentoGrid>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}