1  "use client";
 2  import { useScroll, useTransform } from "framer-motion";
 3  import React from "react";
 4  import { Landing } from "./ui/landing";
 5  
 6  export function GoogleGeminiEffectDemo() {
 7    const ref = React.useRef(null);
 8    const { scrollYProgress } = useScroll({
 9      target: ref,
10      offset: ["start start", "end start"],
11    });
12  
13    const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.2]);
14    const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.2]);
15    const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.2]);
16    const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.2]);
17    const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.2]);
18  
19    return (
20      <div
21        className="min-h-[100vh] bg-black w-full dark:border dark:border-white/[0.1] relative pt-40 overflow-clip"
22        ref={ref}
23      >
24        {/* // @ts-ignore */}
25        <Landing
26          pathLengths={[
27            pathLengthFirst,
28            pathLengthSecond,
29            pathLengthThird,
30            pathLengthFourth,
31            pathLengthFifth,
32          ]}
33          title="Some Title"
34          description="Some Description"
35          className="Some Class Name"
36        />
37      </div>
38    );
39  }