Stop Rebuilding UI

Logos Dark Inset Dual Marquee

A dark inset dual row opposing marquee logo block for React and Next.js with a rounded bg-foreground inverted panel, two rows scrolling in opposite directions at 40 and 50 seconds, dark edge masks using from-foreground to transparent, and inverted logo hover states built with shadcn/ui and Tailwind CSS

Scroll to load preview

Layer opposing motion inside a dark panel with this dual marquee logo block for React and Next.js. Features a rounded-2xl bg-foreground inverted panel wrapping two infinite marquee rows that scroll in opposite directions at 40 and 50 seconds driven by unique block-prefixed CSS keyframe animations, dark gradient edge masks using from-foreground to transparent, twelve plus twelve placeholder brand marks doubled at module scope for seamless loops, and monochrome-to-color hover using text-background opacity tiers. Built with TypeScript, motion/react parent entrance with useReducedMotion and a native prefers-reduced-motion CSS media query guard on both rows, Lucide React icon marks paired with invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for dense social proof moments, mid-page visual breaks, and landing pages that want the logo wall to feel alive with activity.

FAQ

Last updated on April 11, 2026

Was this page helpful?

Sign in to leave feedback.