How to use

import { StickyCard_001 } from "@/components/v1/skiper16";

const projects = [
  {
    title: "Your Project 1",
    src: "/path/to/your/image1.png",
  },
  {
    title: "Your Project 2",
    src: "/path/to/your/image2.png",
  },
  // Add more projects as needed
];

const DemoSkiper16 = () => {
  const container = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: container,
    offset: ["start start", "end end"],
  });

  return (
      <main
        ref={container}
        className="relative flex w-full flex-col items-center justify-center  py-[50vh]"
      >
        {projects.map((project, i) => {
          const targetScale = Math.max(
            0.5,
            1 - (projects.length - i - 1) * 0.1,
          );
          return (
            <StickyCard_001
              key={`p_${i}`}
              i={i}
              {...project}
              progress={scrollYProgress}
              range={[i * 0.25, 1]}
              targetScale={targetScale}
            />
          );
        })}
      </main>
  );
};

<PropsTable
  props={[
    {
      name: "i",
      description: "Index of the card in the stack",
      default: "0",
    },
    {
      name: "title",
      description: "Title of the project",
      default: "Project",
    },
    {
      name: "src",
      description: "Image source path for the project card",
      default: "/images/lummi/img8.png",
    },
    {
      name: "progress",
      description: "Scroll progress value from framer-motion useScroll hook",
      default: "MotionValue",
    },
    {
      name: "range",
      description: "Scroll range for animation [start, end]",
      default: "[0, 1]",
    },
    {
      name: "targetScale",
      description: "Target scale value for the card transformation",
      default: "0.5",
    },
  ]}
/>

### Attribution

illustrations are from [lummi.ai](https://www.lummi.ai/)