51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T939,"use client"; // Blur Hover Reveal: logos start faded and slightly blurred. // Hovering any one logo sharpens it at full opacity while the rest // fade further — directing focus with depth-of-field contrast. import * as React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; const SPRING = { type: "spring" as const, stiffness: 300, damping: 22 }; type Props = { className?: string }; export default function LogoCloudBlur({ className }: Props) { const [hovered, setHovered] = React.useState(null); return (

Trusted by the best in the industry

Hover any logo to bring it into focus.

{LOGOS.map((logo, i) => ( setHovered(i)} onHoverEnd={() => setHovered(null)} animate={{ opacity: hovered === null ? 0.6 : hovered === i ? 1 : 0.2, filter: hovered === null ? "blur(1.5px)" : hovered === i ? "blur(0px)" : "blur(2.5px)", scale: hovered === i ? 1.18 : 1, y: hovered === i ? -4 : 0, }} transition={SPRING} className="flex cursor-pointer flex-col items-center gap-1.5" > ))}

); } 54:Tb4e,"use client"; // Infinite Marquee: two rows scroll in opposite directions (left & right) // at constant speed with gradient fade masks on both edges that blend // seamlessly into the page background, creating a looping trust band. import * as React from "react"; import Marquee from "react-fast-marquee"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; const SPEED = 38; const ROW_ONE = LOGOS.slice(0, 6); const ROW_TWO = LOGOS.slice(6, 12); type Props = { className?: string }; function LogoItem({ name, Icon, color }: { name: string; Icon: (typeof LOGOS)[number]["Icon"]; color: string }) { return (

); } export default function LogoCloudMarquee({ className }: Props) { return (

Trusted by the best in the industry

Pause a row to get a closer look.

{/* Left fade mask */}

{/* Right fade mask */}

{ROW_ONE.map((logo) => ( ))} {ROW_ONE.map((logo) => ( ))} {ROW_TWO.map((logo) => ( ))} {ROW_TWO.map((logo) => ( ))}

); } 55:Tca0,"use client"; // Single Row with Hover Lift: the most restrained variant. // One horizontal row of logos fades in with a light stagger. // Hovering a logo lifts and sharpens it; all others dim — creating // a spotlight of attention across the row without any auto-animation. import * as React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; const ROW_LOGOS = LOGOS.slice(0, 8); const STAGGER = 0.06; type Props = { className?: string }; function LogoItem({ logo, index, isHovered, anyHovered, onHoverStart, onHoverEnd, }: { logo: (typeof ROW_LOGOS)[number]; index: number; isHovered: boolean; anyHovered: boolean; onHoverStart: () => void; onHoverEnd: () => void; }) { return ( // Outer wrapper handles mount stagger — separate from hover state to avoid conflicts ); } export default function LogoCloudSingleRow({ className }: Props) { const [hovered, setHovered] = React.useState(null); return (

Backed by industry leaders

{ROW_LOGOS.map((logo, i) => ( setHovered(i)} onHoverEnd={() => setHovered(null)} /> ))}

); } 56:Tb82,"use client"; // Cursor Spotlight: logos are dimmed on a dark background. A radial // "flashlight" follows the cursor via CSS mask-image on a bright layer, // revealing fully-lit logos only where the cursor points — no re-renders // because motion values drive the mask directly via useMotionTemplate. import * as React from "react"; import { motion, useMotionTemplate, useMotionValue } from "framer-motion"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; const SPOTLIGHT_RADIUS = 260; type Props = { className?: string }; function LogoGrid({ dim }: { dim: boolean }) { return (

{LOGOS.map((logo) => (

))}

); } export default function LogoCloudSpotlight({ className }: Props) { const mouseX = useMotionValue(-9999); const mouseY = useMotionValue(-9999); const maskImage = useMotionTemplate`radial-gradient(circle ${SPOTLIGHT_RADIUS}px at ${mouseX}px ${mouseY}px, black 0%, transparent 75%)`; function handleMouseMove(e: React.MouseEvent) { const rect = e.currentTarget.getBoundingClientRect(); mouseX.set(e.clientX - rect.left); mouseY.set(e.clientY - rect.top); } function handleMouseLeave() { mouseX.set(-9999); mouseY.set(-9999); } return (

Trusted by the best in the industry

Move your cursor across the grid to reveal our partners.

{/* Base dim layer */} {/* Spotlight bright layer — masked to cursor position */}

); } 57:T13a2,"use client"; // Per-Icon Left-to-Right Reveal: each icon blurs out, then the sharp version // sweeps back in from its left edge to its right edge using clipPath. // This per-icon wipe cascades sequentially across the row left → right. import * as React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; export type LogoEntry = { icon: React.ReactNode; name?: string; id?: string; }; export type LogoCloudSwapProps = { logos?: LogoEntry[]; title?: string; subtitle?: string; interval?: number; stagger?: number; className?: string; }; const WIPE_DURATION = 0.92; const WIPE_TIMES = [0, 0.4, 1]; const DEFAULT_LOGOS: LogoEntry[] = LOGOS.map((l) => ({ icon: , name: l.name, id: l.name, })); function LogoItem({ logo, index, isWaving, stagger, totalCount, onDone, }: { logo: LogoEntry; index: number; isWaving: boolean; stagger: number; totalCount: number; onDone: () => void; }) { return ( { if (isWaving && index === totalCount - 1) onDone(); }} whileHover={{ scale: 1.07, opacity: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 340, damping: 24 }, }} className="flex w-18 shrink-0 cursor-default flex-col items-center gap-2 sm:w-22.5" > {logo.icon} {logo.name && ( {logo.name} )} ); } export default function LogoCloudSwap({ logos = DEFAULT_LOGOS, title = "Trusted by the best companies", subtitle = "The world's most ambitious teams build with our platform.", interval = 3200, stagger = 0.11, className, }: LogoCloudSwapProps) { const [waving, setWaving] = React.useState(false); React.useEffect(() => { const id = setInterval(() => setWaving(true), interval); return () => clearInterval(id); }, [interval]); return (

{title}

{subtitle && (

{subtitle}

)}

{/* Desktop: single flex row */}

{logos.map((logo, i) => ( setWaving(false)} /> ))}

{/* Mobile: 3-col grid */}

{logos.map((logo, i) => ( setWaving(false)} /> ))}

); } 58:T1541,"use client"; // Periodic Blur-Flip: logos sit in a stationary row. Every `interval` ms, // all logos play a blur-flip-in-place sequence simultaneously — they drift // up, blur out, rotateX-flip, then snap back sharp — while holding their // positions. No scroll, no marquee. GPU-only transforms for zero layout shift. import * as React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; import { LOGOS } from "./logos"; // ─── Types ──────────────────────────────────────────────────────────────────── export type LogoEntry = { icon: React.ReactNode; name?: string; id?: string; }; export type LogosBlurFlipProps = { logos?: LogoEntry[]; title?: string; subtitle?: string; interval?: number; className?: string; }; // ─── Animation config ───────────────────────────────────────────────────────── const FLIP_DURATION = 0.72; const FLIP_TIMES = [0, 0.38, 1]; const STAGGER = 0.05; // ─── Default logos ──────────────────────────────────────────────────────────── const DEFAULT_LOGOS: LogoEntry[] = LOGOS.map((l) => ({ icon: , name: l.name, id: l.name, })); // ─── Logo Item ──────────────────────────────────────────────────────────────── function LogoItem({ logo, index, isFlipping, onFlipDone, }: { logo: LogoEntry; index: number; isFlipping: boolean; onFlipDone: () => void; }) { return ( { if (isFlipping && index === 0) onFlipDone(); }} whileHover={{ scale: 1.05, y: -3 }} className={cn( "flex w-18 shrink-0 cursor-default flex-col items-center gap-2 rounded-xl sm:w-22.5", )} > {logo.icon} {logo.name && ( {logo.name} )} ); } // ─── Main component ─────────────────────────────────────────────────────────── export default function LogosBlurFlip({ logos = DEFAULT_LOGOS, title = "Trusted by the best companies", subtitle = "The world's most ambitious teams build with our platform.", interval = 2600, className, }: LogosBlurFlipProps) { const [flipping, setFlipping] = React.useState(false); React.useEffect(() => { const id = setInterval(() => setFlipping(true), interval); return () => clearInterval(id); }, [interval]); function handleFlipDone() { setFlipping(false); } return (

{title}

{subtitle && (

{subtitle}

)}

{/* Desktop: single flex row */}

{logos.map((logo, i) => ( ))}

{/* Mobile: 3-col grid */}

{logos.map((logo, i) => ( ))}

); } 59:T487,import * as React from "react"; import { FaAmazon, FaMicrosoft } from "react-icons/fa"; import { SiAirbnb, SiApple, SiGithub, SiGoogle, SiMeta, SiNetflix, SiNvidia, SiSpotify, SiTesla, SiVercel, } from "react-icons/si"; export type Logo = { name: string; Icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>; color: string; }; export const LOGOS: Logo[] = [ { name: "Google", Icon: SiGoogle, color: "#4285F4" }, { name: "Apple", Icon: SiApple, color: "#A8A8A8" }, { name: "Amazon", Icon: FaAmazon, color: "#FF9900" }, { name: "Meta", Icon: SiMeta, color: "#1877F2" }, { name: "Microsoft", Icon: FaMicrosoft, color: "#00A4EF" }, { name: "Nvidia", Icon: SiNvidia, color: "#76B900" }, { name: "Netflix", Icon: SiNetflix, color: "#E50914" }, { name: "Spotify", Icon: SiSpotify, color: "#1DB954" }, { name: "Tesla", Icon: SiTesla, color: "#CC0000" }, { name: "Airbnb", Icon: SiAirbnb, color: "#FF5A5F" }, { name: "GitHub", Icon: SiGithub, color: "#8B949E" }, { name: "Vercel", Icon: SiVercel, color: "#888888" }, ]; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}],["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","react-fast-marquee",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-fast-marquee","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-fast-marquee"}]]}]}],["$","li","react-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-icons"}]]}]}]]}],["$","$L51",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"next-ui/blocks/logo-clouds/logo-cloud-blur.tsx","content":"$53","type":"registry:component","target":"components/blocks/logo-clouds/logo-cloud-blur.tsx"},{"path":"next-ui/blocks/logo-clouds/logo-cloud-marquee.tsx","content":"$54","type":"registry:component","target":"components/blocks/logo-clouds/logo-cloud-marquee.tsx"},{"path":"next-ui/blocks/logo-clouds/logo-cloud-single-row.tsx","content":"$55","type":"registry:component","target":"components/blocks/logo-clouds/logo-cloud-single-row.tsx"},{"path":"next-ui/blocks/logo-clouds/logo-cloud-spotlight.tsx","content":"$56","type":"registry:component","target":"components/blocks/logo-clouds/logo-cloud-spotlight.tsx"},{"path":"next-ui/blocks/logo-clouds/logo-cloud-swap.tsx","content":"$57","type":"registry:component","target":"components/blocks/logo-clouds/logo-cloud-swap.tsx"},{"path":"next-ui/blocks/logo-clouds/logos-blur-flip.tsx","content":"$58","type":"registry:component","target":"components/blocks/logo-clouds/logos-blur-flip.tsx"},{"path":"next-ui/blocks/logo-clouds/logos.tsx","content":"$59","type":"registry:component","target":"components/blocks/logo-clouds/logos.tsx"}],"className":"h-[70svh] min-h-80"}]]}]