Google Gemini Effect

"use client";
import { useScroll, useTransform } from "motion/react";
import React from "react";
import { GoogleGeminiEffect } from "@/lab/aceternity/ui/google-gemini-effect";
import { Fit } from "./_fit";

export default function GoogleGeminiEffectDemo() {
  const ref = React.useRef<HTMLDivElement>(null);
  const scrollRef = React.useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    container: scrollRef,
    offset: ["start start", "end start"],
  });

  const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.2]);
  const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.2]);
  const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.2]);
  const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.2]);
  const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.2]);

  return (
    <div className="h-full w-full bg-black">
      <Fit width={1280} height={760} max={1}>
        <div
          ref={scrollRef}
          className="relative h-full w-full overflow-y-auto overflow-x-hidden overscroll-contain [scrollbar-width:none]"
        >
          <div className="h-[400%] bg-black w-full relative pt-40 overflow-clip" ref={ref}>
            <GoogleGeminiEffect
              className="top-40"
              pathLengths={[
                pathLengthFirst,
                pathLengthSecond,
                pathLengthThird,
                pathLengthFourth,
                pathLengthFifth,
              ]}
            />
          </div>
        </div>
      </Fit>
    </div>
  );
}