Scroll Progress

"use client";

import { useRef } from "react";

import { ScrollProgress } from "@/lab/magicui/ui/scroll-progress";

export default function ScrollProgressDemo() {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div className="relative h-full w-full">
      <ScrollProgress container={ref} className="h-1" />
      <div ref={ref} className="h-full w-full overflow-y-auto px-[8%] py-8 text-neutral-800">
        <h2 className="pb-4 text-xl font-bold">Scroll inside this card.</h2>
        {Array.from({ length: 8 }, (_, i) => (
          <p key={i} className="mb-4 text-sm leading-relaxed text-neutral-600">
            The bar along the top edge tracks how far this panel has been scrolled. It is a single
            motion div whose scaleX follows scrollYProgress, bound here to the card&apos;s own scroll
            container rather than the page.
          </p>
        ))}
      </div>
    </div>
  );
}