4f: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"] 50: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"] 51:T8a5e,'use client' import { type ReactNode, useRef } from 'react' import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, } from 'motion/react' import { cn } from '@/lib/utils' type Company = { name: string icon: ReactNode } const companies: Company[] = [ { name: 'Cursor', icon: ( ), }, { name: 'Better Auth', icon: ( ), }, { name: 'Framer', icon: ( ), }, { name: 'Vercel', icon: ( ), }, { name: 'OpenAI', icon: ( ), }, { name: 'GitHub', icon: ( ), }, { name: 'Shopify', icon: ( ), }, { name: 'sheekl', icon: ( ), }, ] const springConfig = { stiffness: 220, damping: 28, mass: 0.7, } function seededRandom(index: number, offset = 0) { const value = Math.sin((index + 1) * 999 + offset) * 10000 return value - Math.floor(value) } function randomBetween(index: number, min: number, max: number, offset = 0) { return min + seededRandom(index, offset) * (max - min) } export default function LogoCloudFour() { const shouldReduceMotion = Boolean(useReducedMotion()) return (

Built with the tools teams already trust

From design and code to auth, deployment, and AI, these are the platforms behind fast-moving product teams.

{companies.map((company, index) => ( ))}

) } function LogoCell({ company, index, shouldReduceMotion, }: { company: Company index: number shouldReduceMotion: boolean }) { const cellRef = useRef(null) const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const glowOpacity = useMotionValue(0) const smoothX = useSpring(mouseX, springConfig) const smoothY = useSpring(mouseY, springConfig) const smoothOpacity = useSpring(glowOpacity, springConfig) const blinkDuration = randomBetween(index, 5.5, 10, 1) const blinkDelay = randomBetween(index, 0, 3.8, 2) const softCardGlow = useMotionTemplate` radial-gradient( 220px circle at ${smoothX}px ${smoothY}px, rgb(var(--glow-card) / 0.10), rgb(var(--glow-card) / 0.04) 34%, transparent 70% ) ` const borderGlow = useMotionTemplate` radial-gradient( 180px circle at ${smoothX}px ${smoothY}px, rgb(var(--glow-border) / 0.9), rgb(var(--glow-border) / 0.45) 38%, transparent 72% ) ` function handlePointerMove(event: React.PointerEvent) { const hasFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches if (shouldReduceMotion || !hasFinePointer) return const rect = cellRef.current?.getBoundingClientRect() if (!rect) return mouseX.set(event.clientX - rect.left) mouseY.set(event.clientY - rect.top) } function handlePointerEnter(event: React.PointerEvent) { if (shouldReduceMotion) return handlePointerMove(event) glowOpacity.set(1) } function handlePointerLeave() { glowOpacity.set(0) } return (

{/* soft background glow */}

) } function FadedCellLines() { return ( ) } function CornerDots({ index, shouldReduceMotion }: { index: number; shouldReduceMotion: boolean }) { const duration = randomBetween(index, 2.5, 4.8, 3) const delay = randomBetween(index, 0, 2.2, 4) const dots = ['left-0 top-0', 'right-0 top-0', 'bottom-0 left-0', 'bottom-0 right-0'] return ( <> {dots.map((position, dotIndex) => ( ))} ) } 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@navui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/logo-cloud/logo-cloud-four/logo-cloud-four.tsx","content":"$51","type":"registry:component","target":"@components/blocks/logo-cloud/logo-cloud-four.tsx"}],"className":"h-[70svh] min-h-80"}]]}]