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