Parallax cards

1"use client";
2 
3import React from "react";
4import {
5  useScroll,
6  useTransform,
7  motion,
8  type MotionValue,
9  useMotionValueEvent,
10} from "motion/react";
11 
12import { cn } from "@/lib/utils";
13 
14export interface ParallaxCardsProps extends React.ComponentPropsWithoutRef<"div"> {
15  children: React.ReactElement[];
16  maxStackedCards?: number;
17  top?: React.CSSProperties["top"];
18  forceParallax?: boolean;
19}
20 
21export function ParallaxCards({
22  maxStackedCards = 3,
23  top = "50px",
24  forceParallax = false,
25  className,
26  style,
27  children,
28  ...rest
29}: ParallaxCardsProps) {
30  const totalCards = children.length;
31  const topMagnitude = parseFloat(String(top));
32  const topUnit = String(top).slice(String(topMagnitude).length) || "px";
33 
34  if (topUnit === "%")
35    throw new Error(
36      "Invalid `top` value: percentages (%) are not supported by <ParallaxCards/>."
37    );
38  const containerRef = React.useRef<HTMLDivElement>(null);
39  const [isSticky, setIsSticky] = React.useState(true);
40 
41  const { scrollYProgress } = useScroll({
42    target: containerRef,
43    offset: ["start start", "end start"],
44  });
45 
46  React.useEffect(() => {
47    if (forceParallax) return;
48 
49    const element = containerRef.current;
50    if (!element) return;
51 
52    const handleResize = () => {
53      const cardHeight = element.getBoundingClientRect().height / totalCards;
54      const viewportHeight =
55        window.visualViewport?.height ?? window.innerHeight;
56      setIsSticky(viewportHeight >= cardHeight);
57    };
58 
59    handleResize();
60    window.visualViewport?.addEventListener("resize", handleResize);
61    window.addEventListener("resize", handleResize);
62 
63    return () => {
64      window.removeEventListener("resize", handleResize);
65      window.visualViewport?.removeEventListener("resize", handleResize);
66    };
67  }, [totalCards, forceParallax]);
68 
69  return (
70    <>
71      <style>{`
72        html {
73          scroll-behavior: smooth;
74        }
75      `}</style>
76 
77      <div
78        ref={containerRef}
79        className={cn("w-full", className, "!relative !grid !py-0")}
80        style={{
81          ...style,
82          gridTemplateRows: `repeat(${totalCards}, 1fr)`,
83        }}
84        {...rest}
85      >
86        {children.map((child, index) => (
87          <ParallaxCard
88            key={`cards[${index}]`}
89            index={index}
90            scrollYProgress={scrollYProgress}
91            scrollRatio={1 / totalCards}
92            maxStackedCards={maxStackedCards}
93            top={{
94              magnitude: topMagnitude,
95// … truncated