Container Scroll Animation

"use client";
import React, { useRef } from "react";
import { ContainerScroll } from "@/lab/aceternity/ui/container-scroll-animation";
import { Fit } from "./_fit";

export default function HeroScrollDemo() {
  const scrollRef = useRef<HTMLDivElement>(null);
  return (
    <Fit width={1100} height={720} max={1}>
      <div
        ref={scrollRef}
        className="relative h-full w-full overflow-y-auto overflow-x-hidden overscroll-contain [scrollbar-width:thin]"
      >
        <div className="flex flex-col overflow-hidden">
          <ContainerScroll
            scrollContainer={scrollRef}
            titleComponent={
              <>
                <h1 className="text-4xl font-semibold text-black dark:text-white">
                  Unleash the power of <br />
                  <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
                    Scroll Animations
                  </span>
                </h1>
              </>
            }
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="https://ui.aceternity.com/linear.webp"
              alt="hero"
              height={720}
              width={1400}
              className="mx-auto rounded-2xl object-cover h-full object-left-top"
              draggable={false}
            />
          </ContainerScroll>
        </div>
      </div>
    </Fit>
  );
}