{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-collection",
  "title": "Animated Collection",
  "description": "A collection of items with smooth layout transitions and animations.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/animated-collection.tsx",
      "content": "\"use client\";\n\nimport {\n  motion,\n  LayoutGroup,\n  AnimatePresence,\n  type Transition,\n} from \"motion/react\";\nimport {\n  Playlist01Icon,\n  GridViewIcon,\n  Layers01Icon,\n  StarIcon,\n  Ticket01Icon,\n  Camera01Icon,\n  BrushIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"@/lib/utils\";\nimport React, { useState } from \"react\";\n\ninterface CollectionItem {\n  id: string;\n  title: string;\n  subtitle: string;\n  idNumber: string;\n  image: string;\n  icon: any;\n}\n\n// Change Here\nconst ITEMS: CollectionItem[] = [\n  {\n    id: \"1\",\n    title: \"Cinematic Horizons\",\n    subtitle: \"Photography\",\n    idNumber: \"209\",\n    image:\n      \"https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=400&h=400&auto=format&fit=crop\",\n    icon: Camera01Icon,\n  },\n  {\n    id: \"2\",\n    title: \"Abstract Dreams\",\n    subtitle: \"Digital Art\",\n    idNumber: \"808\",\n    image:\n      \"https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=400&h=400&auto=format&fit=crop\",\n    icon: BrushIcon,\n  },\n];\ntype ViewMode = \"list\" | \"card\" | \"pack\";\n\nconst snappySpring: Transition = {\n  type: \"spring\",\n  stiffness: 350,\n  damping: 30,\n  mass: 1,\n};\n\nconst fastFade: Transition = {\n  duration: 0.1,\n  ease: \"linear\",\n};\n\nexport default function LayoutSwitcher() {\n  const [view, setView] = useState<ViewMode>(\"list\");\n  return (\n    <div className=\"w-full max-w-xl mx-auto p-4 md:p-8 font-sans selection:bg-primary/10\">\n      <div className=\"flex flex-col gap-6\">\n        <div className=\"flex flex-col gap-5\">\n          <h2 className=\"text-xl font-medium text-foreground \">\n            My Collection\n          </h2>\n\n          <div className=\"flex p-1 bg-muted rounded-full w-fit border border-border\">\n            <Tab\n              active={view === \"list\"}\n              onClick={() => setView(\"list\")}\n              icon={Playlist01Icon}\n              label=\"List view\"\n            />\n            <Tab\n              active={view === \"card\"}\n              onClick={() => setView(\"card\")}\n              icon={GridViewIcon}\n              label=\"Card view\"\n            />\n            <Tab\n              active={view === \"pack\"}\n              onClick={() => setView(\"pack\")}\n              icon={Layers01Icon}\n              label=\"Pack view\"\n            />\n          </div>\n        </div>\n        <div className=\"h-px bg-border w-full\" />\n        {/* Content Section */}\n        <div className=\"relative min-h-[350px] flex flex-col items-center\">\n          <LayoutGroup>\n            <motion.div\n              layout\n              transition={snappySpring}\n              className={cn(\n                \"w-full relative\",\n                view === \"list\" && \"flex flex-col gap-4\",\n                view === \"card\" && \"grid grid-cols-2 gap-4\",\n                view === \"pack\" && \"h-64 flex items-center justify-center mt-8\"\n              )}\n            >\n              {ITEMS.map((item, index) => (\n                <motion.div\n                  key={item.id}\n                  layout\n                  transition={snappySpring}\n                  className={cn(\n                    \"relative flex items-center z-10\",\n                    view === \"list\" && \"flex-row gap-4 w-full\",\n                    view === \"card\" && \"flex-col gap-3 w-full items-start\",\n                    view === \"pack\" &&\n                      \"absolute w-56 h-56 items-center justify-center\"\n                  )}\n                  style={{\n                    zIndex: view === \"pack\" ? ITEMS.length - index : 1,\n                  }}\n                  animate={\n                    view === \"pack\"\n                      ? {\n                          rotate: index === 0 ? -12 : 6,\n                          x: index === 0 ? -25 : 25,\n                          y: index === 0 ? -5 : 5,\n                        }\n                      : {\n                          rotate: 0,\n                          x: 0,\n                          y: 0,\n                        }\n                  }\n                >\n                  <motion.div\n                    layout\n                    transition={snappySpring}\n                    className={cn(\n                      \"relative overflow-hidden shrink-0 bg-background\",\n                      view === \"list\" &&\n                        \"w-16 h-16 rounded-2xl border border-border/50 \",\n                      view === \"card\" &&\n                        \"w-full aspect-square rounded-[1.8rem] border border-border/50 shadow-sm\",\n                      view === \"pack\" &&\n                        \"w-full h-full rounded-[2rem] border border-border/50  shadow-xl\"\n                    )}\n                  >\n                    <motion.img\n                      layout\n                      transition={snappySpring}\n                      src={item.image}\n                      alt={item.title}\n                      className={cn(\n                        \"w-full h-full object-cover m-0! p-0! block\",\n                        view === \"list\" && \"rounded-2xl\",\n                        view === \"card\" && \"rounded-[1.8rem]\",\n                        view === \"pack\" && \"rounded-[2rem]\"\n                      )}\n                    />\n                  </motion.div>\n\n                  <AnimatePresence mode=\"popLayout\" initial={false}>\n                    {view !== \"pack\" && (\n                      <motion.div\n                        key={`${item.id}-info`}\n                        layout\n                        initial={{\n                          opacity: 0,\n                          scale: 0.9,\n                          filter: \"blur(4px)\",\n                        }}\n                        animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n                        exit={{ opacity: 0, scale: 0.9, filter: \"blur(4px)\" }}\n                        transition={fastFade}\n                        className={cn(\n                          \"flex flex-1 justify-between items-center min-w-0\",\n                          view === \"card\" ? \"w-full px-1\" : \"px-0\"\n                        )}\n                      >\n                        <div className=\"flex flex-col gap-0.5 min-w-0\">\n                          <motion.h3\n                            layout\n                            className=\"font-medium text-[15px] text-foreground leading-tight truncate\"\n                          >\n                            {item.title}\n                          </motion.h3>\n                          <motion.div\n                            layout\n                            className=\"text-muted-foreground font-medium text-xs flex items-center gap-1.5\"\n                          >\n                            <HugeiconsIcon\n                              icon={item.icon}\n                              size={12}\n                              className=\"text-primary/70\"\n                            />\n                            <span className=\"truncate\">{item.subtitle}</span>\n                          </motion.div>\n                        </div>\n\n                        <motion.div\n                          layout\n                          className=\"flex items-center gap-1 px-2 py-1 rounded-full bg-primary/5 text-primary text-[10px] font-bold shrink-0 ml-2\"\n                        >\n                          <HugeiconsIcon\n                            icon={StarIcon}\n                            size={10}\n                            className=\"text-yellow-500 fill-yellow-500\"\n                          />\n                          <span>#{item.idNumber}</span>\n                        </motion.div>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n\n                  {view === \"list\" && (\n                    <motion.div\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"absolute -bottom-2 left-18 right-0 h-px bg-border/40\"\n                    />\n                  )}\n                </motion.div>\n              ))}\n            </motion.div>\n\n            <AnimatePresence>\n              {view === \"pack\" && (\n                <motion.div\n                  layout\n                  initial={{ opacity: 0, y: 10, filter: \"blur(5px)\" }}\n                  animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n                  exit={{ opacity: 0, y: 5, filter: \"blur(5px)\" }}\n                  transition={{ duration: 0.3, delay: 0.1 }}\n                  className=\"mt-16 text-center space-y-3 px-4 relative z-0\"\n                >\n                  <div className=\"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 text-primary text-[11px] font-bold uppercase tracking-wide\">\n                    <HugeiconsIcon icon={Ticket01Icon} size={12} />\n                    <span>Bundle unlocked</span>\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </LayoutGroup>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Tab({\n  active,\n  onClick,\n  icon,\n  label,\n}: {\n  active: boolean;\n  onClick: () => void;\n  icon: any;\n  label: string;\n}) {\n  return (\n    <button\n      onClick={onClick}\n      className={cn(\n        \"relative flex items-center gap-2 px-4 py-2 text-sm font-normal  uppercase transition-all rounded-full outline-none\",\n        active\n          ? \"text-primary-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n      )}\n    >\n      {active && (\n        <motion.div\n          layoutId=\"active-tab\"\n          className=\"absolute inset-0 bg-primary rounded-full shadow-md\"\n          transition={snappySpring}\n        />\n      )}\n      <span className=\"relative z-10 flex items-center gap-2\">\n        <HugeiconsIcon\n          icon={icon}\n          size={16}\n          className={cn(\n            \"transition-transform duration-300\",\n            active && \"scale-110\"\n          )}\n        />\n        {label}\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}