Gravity Scroll Cards for React

"use client";

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useLayoutEffect, useRef } from "react";
import { cn } from "@/lib/utils";

gsap.registerPlugin(ScrollTrigger);

interface GravityScrollCardsProps {
  children: React.ReactNode;
  className?: string;
  cardClassName?: string;
  cardWidth?: string | number;
  stackOffset?: number;
  stackRotation?: number;
  start?: string;
  end?: string;
}

export function GravityScrollCards({
  children,
  className,
  cardClassName,
  cardWidth = 256,
  stackOffset = 24,
  stackRotation = 3,
  start = "top 80%",
  end = "top 20%",
}: GravityScrollCardsProps) {
  const sectionRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const section = sectionRef.current;
    if (!section) {
      return;
    }

    const cardEls = section.querySelectorAll("[data-card]");
    const ctx = gsap.context(() => {
      cardEls.forEach((el, i) => {
        gsap.fromTo(
          el,
          { rotateZ: 0, y: 0 },
          {
            ease: "none",
            rotateZ: i * -stackRotation,
            scrollTrigger: {
              end,
              scrub: 1,
              start,
              trigger: section,
            },
            y: i * stackOffset,
            zIndex: cardEls.length - i,
          },
        );
      });
    }, section);
    return () => ctx.revert();
  }, [stackOffset, stackRotation, start, end]);

  const count = React.Children.count(children);

  return (
    <div
      ref={sectionRef}
      className={cn("relative min-h-[320px]", className)}
    >
      {React.Children.map(children, (child, i) =>
        child ? (
          <div
            key={
              React.isValidElement(child) &&
              child.key != null
                ? child.key
                : `card-${i}`
            }
            data-card={true}
            className={cn(
              "absolute top-4 left-1/2 -translate-x-1/2",
              cardClassName,
            )}
            style={{
              width:
                typeof cardWidth === "number"
                  ? `${cardWidth}px`
                  : cardWidth,
              zIndex: count - i,
            }}
          >
            {child}
          </div>
        ) : null,
      )}
    </div>
  );
}