{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stacking-cards",
  "type": "registry:block",
  "title": "Stacking cards",
  "description": "Stacking cards",
  "files": [
    {
      "path": "components/usages/stackingcardsusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport StackingCards, {\n\tStackingCardItem,\n} from \"@/registry/open-source/stacking-cards\";\nimport { cn } from \"@/registry/utilities/cn\";\n\nconst cards = [\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Guiding Light\",\n\t\tdescription:\n\t\t\t\"Lighthouses have stood as beacons of hope for centuries, guiding sailors safely through treacherous waters. Their glowing light and towering presence serve as a reminder of humanity’s connection to the sea.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"Life Beneath the Waves\",\n\t\tdescription:\n\t\t\t\"From shimmering schools of fish to solitary hunters, the ocean is home to an incredible variety of marine life. Each species plays a vital role in maintaining the balance of underwater ecosystems.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"Alone on the Open Sea\",\n\t\tdescription:\n\t\t\t\"Drifting across the endless horizon, traveling alone on the sea is a test of courage and resilience. With nothing but the waves and the sky, solitude becomes both a challenge and a source of deep reflection.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Art of Sailing\",\n\t\tdescription:\n\t\t\t\"Harnessing the power of the wind, sailing is both a skill and an adventure. Whether racing across the waves or leisurely cruising, it’s a timeless way to explore the vast blue expanse.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Era of Whaling\",\n\t\tdescription:\n\t\t\t\"Once a thriving industry, whale hunting shaped economies and cultures across the world. Today, efforts to protect these majestic creatures highlight the shift toward conservation and respect for marine life.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n];\n\nexport default function StackingCardsDemo() {\n\tconst [container, setContainer] = useState<HTMLElement | null>(null);\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"h-[620px] bg-background overflow-auto text-secondary\"\n\t\t\tref={(node) => setContainer(node)}\n\t\t>\n\t\t\t<StackingCards\n\t\t\t\ttotalCards={cards.length}\n\t\t\t\tscrollOptons={{ container: { current: container } }}\n\t\t\t>\n\t\t\t\t<div className=\"relative font-calendas h-[620px] w-full z-10 text-2xl md:text-7xl font-bold uppercase flex justify-center items-center text-secondary whitespace-pre\">\n\t\t\t\t\tScroll down ↓\n\t\t\t\t</div>\n\t\t\t\t{cards.map(({ bgColor, description, image, title }, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<StackingCardItem\n\t\t\t\t\t\t\tkey={index + \"stacking-cards\"}\n\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\tclassName=\"h-[620px]\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\t\t\t\"h-[80%] sm:h-[70%] flex-col sm:flex-row aspect-video px-8 py-10 flex w-11/12 rounded-3xl mx-auto relative\"\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"flex-1 flex flex-col justify-center\">\n\t\t\t\t\t\t\t\t\t<h3 className=\"font-bold text-2xl mb-5\">{title}</h3>\n\t\t\t\t\t\t\t\t\t<p>{description}</p>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"w-full sm:w-1/2 rounded-xl aspect-video relative overflow-hidden\">\n\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\t\talt={title}\n\t\t\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\t\t\tclassName=\"object-cover\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</StackingCardItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\n\t\t\t\t<div className=\"w-full h-80 relative overflow-hidden\">\n\t\t\t\t\t<h2 className=\"absolute bottom-0 left-0 translate-y-1/3 sm:text-[192px] text-[80px] text-secondary font-calendas\">\n\t\t\t\t\t\tfancy\n\t\t\t\t\t</h2>\n\t\t\t\t</div>\n\t\t\t</StackingCards>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/stackingcardsusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport StackingCards, {\n\tStackingCardItem,\n} from \"@/registry/open-source/stacking-cards\";\nimport { cn } from \"@/registry/utilities/cn\";\n\nconst cards = [\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Guiding Light\",\n\t\tdescription:\n\t\t\t\"Lighthouses have stood as beacons of hope for centuries, guiding sailors safely through treacherous waters. Their glowing light and towering presence serve as a reminder of humanity’s connection to the sea.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"Life Beneath the Waves\",\n\t\tdescription:\n\t\t\t\"From shimmering schools of fish to solitary hunters, the ocean is home to an incredible variety of marine life. Each species plays a vital role in maintaining the balance of underwater ecosystems.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"Alone on the Open Sea\",\n\t\tdescription:\n\t\t\t\"Drifting across the endless horizon, traveling alone on the sea is a test of courage and resilience. With nothing but the waves and the sky, solitude becomes both a challenge and a source of deep reflection.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Art of Sailing\",\n\t\tdescription:\n\t\t\t\"Harnessing the power of the wind, sailing is both a skill and an adventure. Whether racing across the waves or leisurely cruising, it’s a timeless way to explore the vast blue expanse.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tbgColor: \"bg-background\",\n\t\ttitle: \"The Era of Whaling\",\n\t\tdescription:\n\t\t\t\"Once a thriving industry, whale hunting shaped economies and cultures across the world. Today, efforts to protect these majestic creatures highlight the shift toward conservation and respect for marine life.\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n];\n\nexport default function StackingCardsDemo() {\n\tconst [container, setContainer] = useState<HTMLElement | null>(null);\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"h-[620px] bg-background overflow-auto text-secondary\"\n\t\t\tref={(node) => setContainer(node)}\n\t\t>\n\t\t\t<StackingCards\n\t\t\t\ttotalCards={cards.length}\n\t\t\t\tscrollOptons={{ container: { current: container } }}\n\t\t\t>\n\t\t\t\t<div className=\"relative font-calendas h-[620px] w-full z-10 text-2xl md:text-7xl font-bold uppercase flex justify-center items-center text-secondary whitespace-pre\">\n\t\t\t\t\tScroll down ↓\n\t\t\t\t</div>\n\t\t\t\t{cards.map(({ bgColor, description, image, title }, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<StackingCardItem\n\t\t\t\t\t\t\tkey={index + \"stacking-cards\"}\n\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\tclassName=\"h-[620px]\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\t\t\t\"h-[80%] sm:h-[70%] flex-col sm:flex-row aspect-video px-8 py-10 flex w-11/12 rounded-3xl mx-auto relative\"\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"flex-1 flex flex-col justify-center\">\n\t\t\t\t\t\t\t\t\t<h3 className=\"font-bold text-2xl mb-5\">{title}</h3>\n\t\t\t\t\t\t\t\t\t<p>{description}</p>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"w-full sm:w-1/2 rounded-xl aspect-video relative overflow-hidden\">\n\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\t\talt={title}\n\t\t\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\t\t\tclassName=\"object-cover\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</StackingCardItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\n\t\t\t\t<div className=\"w-full h-80 relative overflow-hidden\">\n\t\t\t\t\t<h2 className=\"absolute bottom-0 left-0 translate-y-1/3 sm:text-[192px] text-[80px] text-secondary font-calendas\">\n\t\t\t\t\t\tfancy\n\t\t\t\t\t</h2>\n\t\t\t\t</div>\n\t\t\t</StackingCards>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/stacking-cards.tsx",
      "content": "\"use client\";\n\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\ttype HTMLAttributes,\n\ttype PropsWithChildren,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport {\n\tmotion,\n\tuseScroll,\n\tuseTransform,\n\ttype MotionValue,\n} from \"motion/react\";\n\n// Credit\n// https://www.fancycomponents.dev/docs/components/blocks/stacking-cards\n\ninterface StackingCardsProps\n\textends PropsWithChildren,\n\t\tHTMLAttributes<HTMLDivElement> {\n\tscrollOptons?: any;\n\tscaleMultiplier?: number;\n\ttotalCards: number;\n}\n\ninterface StackingCardItemProps\n\textends HTMLAttributes<HTMLDivElement>,\n\t\tPropsWithChildren {\n\tindex: number;\n\ttopPosition?: string;\n}\n\nexport default function StackingCards({\n\tchildren,\n\tclassName,\n\tscrollOptons,\n\tscaleMultiplier,\n\ttotalCards,\n\t...props\n}: StackingCardsProps) {\n\tconst targetRef = useRef<HTMLDivElement>(null);\n\tconst { scrollYProgress } = useScroll({\n\t\toffset: [\"start start\", \"end end\"],\n\t\t...scrollOptons,\n\t\ttarget: targetRef,\n\t});\n\n\treturn (\n\t\t<StackingCardsContext.Provider\n\t\t\tvalue={{ progress: scrollYProgress, scaleMultiplier, totalCards }}\n\t\t>\n\t\t\t<div className={cn(className)} ref={targetRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StackingCardsContext.Provider>\n\t);\n}\n\nconst StackingCardItem = ({\n\tindex,\n\ttopPosition,\n\tclassName,\n\tchildren,\n\t...props\n}: StackingCardItemProps) => {\n\tconst {\n\t\tprogress,\n\t\tscaleMultiplier,\n\t\ttotalCards = 0,\n\t} = useStackingCardsContext(); // Get from Context\n\tconst scaleTo = 1 - (totalCards - index) * (scaleMultiplier ?? 0.03);\n\tconst rangeScale = [index * (1 / totalCards), 1];\n\tconst scale = useTransform(progress, rangeScale, [1, scaleTo]);\n\tconst top = topPosition ?? `${5 + index * 3}%`;\n\n\treturn (\n\t\t<div className={cn(\"h-full sticky top-0\", className)} {...props}>\n\t\t\t<motion.div\n\t\t\t\tclassName={\"origin-top relative h-full\"}\n\t\t\t\tstyle={{ top, scale }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nconst StackingCardsContext = createContext<{\n\tprogress: MotionValue<number>;\n\tscaleMultiplier?: number;\n\ttotalCards?: number;\n} | null>(null);\n\nexport const useStackingCardsContext = () => {\n\tconst context = useContext(StackingCardsContext);\n\tif (!context)\n\t\tthrow new Error(\"StackingCardItem must be used within StackingCards\");\n\treturn context;\n};\n\nexport { StackingCardItem };\n",
      "type": "registry:ui"
    }
  ]
}