Shadcn.io is not affiliated with official shadcn/ui
Logos Dual Marquee Mixed Variants
A dual row infinite marquee logo wall for React and Next.js mixing icon-plus-wordmark cells in the top row with icon-only badge chips in the bottom row, opposing directions, gradient edge masks, and reduced-motion handling built with shadcn/ui and Tailwind CSS
Build visually layered social proof with a dual row infinite marquee logo wall for React and Next.js that mixes two distinct logo mark variants across its rows. Features a top row of full icon-plus-wordmark cells scrolling left and a bottom row of compact icon-only badge chips scrolling right, giving each row its own visual weight while keeping both tied together as proof, gradient edge masks on both sides of the container, monochrome-to-color hover promotion, and a prefers-reduced-motion media query that disables both animations and transforms. Built with TypeScript, motion/react parent entrance with useReducedMotion, Lucide React icon marks paired with twenty-six invented placeholder brands, module-scope doubled arrays for seamless looping, and Tailwind CSS theme variables. Perfect for pages where variety in logo presentation keeps the eye moving, hero-adjacent trust bands, and sections where compact badges balance heavier wordmark rows.
Related Components
React Logos Dual Row Marquee Block
A dual row infinite marquee logo wall
React Logos Triple Row Marquee Block
A triple row infinite marquee logo wall
React Logos Dual Marquee Fast Slow Speeds Block
A dual marquee with dramatic speed contrast
React Logos Dual Marquee With Row Labels Block
A dual marquee with per-row category labels
React Logos Single Row Marquee Block
A single row infinite marquee logo wall
React Logos Static Grid Wall Block
A static grid wall of monochrome logos
FAQ
Was this page helpful?
Sign in to leave feedback.
Dual Marquee Fast Slow Speeds
A dual row infinite marquee logo wall for React and Next.js with dramatic fast and slow row speed contrast, opposing directions, gradient edge masks, and reduced-motion handling built with shadcn/ui and Tailwind CSS
Dual Marquee Monogram Row
A dual row infinite marquee logo wall using two-letter monogram cells for React and Next.js with opposing scroll directions, bordered card tiles, compact cell density, and reduced-motion handling built with shadcn/ui and Tailwind CSS