diff --git a/src/app/page.js b/src/app/page.js index 4ccd60c..5a7887d 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,4 +1,5 @@ import { AnimatedTooltipPreview } from "@/components/AnimatedTooltipPreview"; +import { GoogleGeminiEffectDemo } from "@/components/GoogleGeminiEffectDemo"; import LampDemo from "@/components/LampDemo"; import TeamCard from "@/components/TeamCard"; import Image from "next/image"; @@ -7,6 +8,7 @@ export default function Home() { return ( <> + diff --git a/src/components/GoogleGeminiEffectDemo.jsx b/src/components/GoogleGeminiEffectDemo.jsx new file mode 100644 index 0000000..49226f3 --- /dev/null +++ b/src/components/GoogleGeminiEffectDemo.jsx @@ -0,0 +1,35 @@ +"use client"; +import { useScroll, useTransform } from "framer-motion"; +import React from "react"; +import { GoogleGeminiEffect } from "./ui/google-gemini-effect"; + +export function 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.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 ( +
+ +
+ ); +} diff --git a/src/components/ui/google-gemini-effect.tsx b/src/components/ui/google-gemini-effect.tsx new file mode 100644 index 0000000..267b115 --- /dev/null +++ b/src/components/ui/google-gemini-effect.tsx @@ -0,0 +1,161 @@ +"use client"; +import { cn } from "@/utils/cn"; +import { motion, MotionValue } from "framer-motion"; +import React from "react"; + +const transition = { + duration: 0, + ease: "linear", +}; + +export const GoogleGeminiEffect = ({ + pathLengths, + title, + description, + className, +}: { + pathLengths: MotionValue[]; + title?: string; + description?: string; + className?: string; +}) => { + return ( +
+

+ {title || `We are Ready to Protect Your Data!`} +

+

+ {description || + `Scroll this component and see the bottom SVG come to life wow this + works!`} +

+
+ +
+ + + + + + + + {/* Gaussian blur for the background paths */} + + + + + + + + + + + + + +
+ ); +};