Stop Rebuilding UI

Logos Single Marquee With Pipe Dividers

A single row marquee logo wall with thin vertical pipe dividers between each mark for React and Next.js with gradient edge masks, reduced-motion guards, and a calm forty-five second loop built with shadcn/ui and Tailwind CSS

Scroll to load preview

Separate each logo in a single row marquee with a thin vertical pipe divider for React and Next.js. Features twelve placeholder brand marks scrolling continuously left at forty-five seconds, hairline vertical dividers rendered as h-4 w-px bg-border between every logo, gradient edge masks on both sides, and a prefers-reduced-motion media query that disables motion for vestibular-sensitive users. Built with TypeScript, motion/react parent entrance with useReducedMotion, Lucide React icon marks, a module-scope doubled array for seamless looping, and Tailwind CSS theme variables. Perfect for mid-page trust bands where pipe dividers add typographic rhythm, between-features social proof, and landing pages that want more visible structure than a bare marquee.

FAQ

Last updated on April 11, 2026

Was this page helpful?

Sign in to leave feedback.