Stop Rebuilding UI
Previous: Single Marquee Monogram Chips
Next: Single Marquee Slow Sixty Second

Logos Single Marquee Reverse Direction

A right-scrolling single row marquee logo wall for React and Next.js with reversed keyframe direction, gradient edge masks, monochrome-to-color hover promotion, and a fifty second loop built with shadcn/ui and Tailwind CSS

Scroll to load preview

Flip the marquee direction and scroll logos right-to-left across a single row for React and Next.js. Features twelve placeholder icon and wordmark pairs scrolling continuously to the right at a calm fifty second pace via a reversed keyframe that animates translateX from minus fifty percent back to zero, gradient edge masks on both sides of the row container, monochrome-to-color hover promotion, and a prefers-reduced-motion media query that disables the animation. 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 landing pages that already have a left-scrolling marquee elsewhere on the page, as the second row of a paired layout, or any design where direction variance keeps the eye engaged.

React Logos Single Row Marquee Block

A single row infinite marquee logo wall

React Logos Single Marquee Slow Sixty Second Block

A calm sixty second single row marquee

React Logos Single Marquee With Pipe Dividers Block

A single row marquee with hairline pipe dividers

React Logos Dual Row Marquee Block

A dual row opposing marquee logo wall

React Logos Dual Marquee Fast Slow Speeds Block

A dual row marquee with fast and slow paces

React Logos Triple Row Marquee Block

A triple row opposing marquee logo wall

FAQ

Last updated on April 11, 2026

Was this page helpful?

Sign in to leave feedback.

Single Marquee Monogram Chips

A single row marquee of bordered monogram chips for React and Next.js with square monogram badges, wordmark labels, gradient edge masks, and a prefers-reduced-motion CSS guard built with shadcn/ui and Tailwind CSS

Single Marquee Slow Sixty Second

A calm single row logo marquee for React and Next.js with a slow sixty second loop duration, fourteen placeholder brand marks, subdued muted-foreground default color, gradient edge masks, and a prefers-reduced-motion CSS guard built with shadcn/ui and Tailwind CSS