xlibs-components/dist/components/aceternity/google-gemini-effect-demo.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useScroll, useTransform } from "framer-motion";
import { GoogleGeminiEffect } from "./google-gemini-effect";
export const GoogleGeminiEffectDemo = () => {
    const ref = React.useRef(null);
    const { scrollYProgress } = useScroll({
        target: ref,
        offset: ["start start", "end start"],
    });
    const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.0]);
    const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.0]);
    const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.0]);
    const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.0]);
    const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.0]);
    return (_jsxs("div", { className: "h-[400vh] bg-black w-full dark:border-white/[0.1] border-black/[0.1] pt-10 overflow-hidden", children: [_jsxs("div", { className: "h-[60vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: [_jsx("div", { className: "absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" }), _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Scroll Down" })] }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Keep Scrolling" }) }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Almost There" }) }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Watch the Magic" }) }), _jsx("div", { className: "h-[60vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", ref: ref, children: _jsx(GoogleGeminiEffect, { pathLengths: [
                        pathLengthFirst,
                        pathLengthSecond,
                        pathLengthThird,
                        pathLengthFourth,
                        pathLengthFifth,
                    ], title: "Build with Aceternity UI", description: "Scroll this component and see the bottom SVG come to life wow this works!" }) }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Amazing Right?" }) }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "Scroll Back Up" }) }), _jsx("div", { className: "h-[20vh] w-full dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center", children: _jsx("p", { className: "text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8", children: "To See It Again" }) })] }));
};