Stacking Cards

1// author: Khoa Phan <https://www.pldkhoa.dev>
2 
3"use client"
4 
5import {
6  createContext,
7  useContext,
8  useRef,
9  type HTMLAttributes,
10  type PropsWithChildren,
11} from "react"
12import {
13  motion,
14  useScroll,
15  useTransform,
16  type MotionValue,
17  type UseScrollOptions,
18} from "motion/react"
19 
20import { cn } from "@/lib/utils"
21 
22interface StackingCardsProps
23  extends PropsWithChildren,
24    HTMLAttributes<HTMLDivElement> {
25  scrollOptions?: UseScrollOptions
26  scaleMultiplier?: number
27  totalCards: number
28}
29 
30interface StackingCardItemProps
31  extends HTMLAttributes<HTMLDivElement>,
32    PropsWithChildren {
33  index: number
34  topPosition?: string
35}
36 
37export default function StackingCards({
38  children,
39  className,
40  scrollOptions,
41  scaleMultiplier,
42  totalCards,
43  ...props
44}: StackingCardsProps) {
45  const targetRef = useRef<HTMLDivElement>(null)
46  const { scrollYProgress } = useScroll({
47    offset: ["start start", "end end"],
48    ...scrollOptions,
49    target: targetRef,
50  })
51 
52  return (
53    <StackingCardsContext.Provider
54      value={{ progress: scrollYProgress, scaleMultiplier, totalCards }}
55    >
56      <div className={cn(className)} ref={targetRef} {...props}>
57        {children}
58      </div>
59    </StackingCardsContext.Provider>
60  )
61}
62 
63const StackingCardItem = ({
64  index,
65  topPosition,
66  className,
67  children,
68  ...props
69}: StackingCardItemProps) => {
70  const {
71    progress,
72    scaleMultiplier,
73    totalCards = 0,
74  } = useStackingCardsContext() // Get from Context
75  const scaleTo = 1 - (totalCards - index) * (scaleMultiplier ?? 0.03)
76  const rangeScale = [index * (1 / totalCards), 1]
77  const scale = useTransform(progress, rangeScale, [1, scaleTo])
78  const top = topPosition ?? `${5 + index * 3}%`
79 
80  return (
81    <div className={cn("h-full sticky top-0", className)} {...props}>
82      <motion.div
83        className={"origin-top relative h-full"}
84        style={{ top, scale }}
85      >
86        {children}
87      </motion.div>
88    </div>
89  )
90}
91 
92const StackingCardsContext = createContext<{
93  progress: MotionValue<number>
94  scaleMultiplier?: number
95  totalCards?: number
96} | null>(null)
97 
98export const useStackingCardsContext = () => {
99  const context = useContext(StackingCardsContext)
100  if (!context)
101    throw new Error("StackingCardItem must be used within StackingCards")
102  return context
103}
104 
105export { StackingCardItem }