perplexcity

"use client"; import { AnimatePresence, motion } from "framer-motion"; import { useState } from "react"; import { useInterval } from "usehooks-ts"; export default function ClientLogoBlur() { const [batch, setBatch] = useState(0); useInterval(() => { setBatch((b) => (b + 1) % 2); }, 3000); return (

{LOGOS.map((_, groupIndex) => ( ))}

); } function LogoContainer(props: { groupIndex: number; batch: number }) { return (

{LOGOS[props.groupIndex]?.[props.batch]?.({ className: "w-[156px]" })}

); } const LOGOS = [ [Logo1, Logo2], [Logo3, Logo4], [Logo5, Logo6], [Logo7, Logo8], [Logo9, Logo10], [Logo11, Logo12], ]; function Logo1(props: { className: string }) { return ( ); } function Logo2(props: { className: string }) { return ( ); } function Logo3(props: { className: string }) { return ( ); } function Logo4(props: { className: string }) { return ( ); } function Logo5(props: { className: string }) { return ( ); } function Logo6(props: { className: string }) { return ( ); } function Logo7(props: { className: string }) { return ( ); } function Logo8(props: { className: string }) { return ( ); } function Logo9(props: { className: string }) { return ( ); } function Logo10(props: { className: string }) { return ( ); } function Logo11(props: { className: string }) { return ( ); } function Logo12(props: { className: string }) { return ( ); }

Blur Logo

On this page