Integration 2 - Logo marquee with gradient fade

Pro

An auto-scrolling horizontal marquee of linked brand logos with gradient edge overlays and a centered discovery button.

Shadcn Integration 2 block

Component data

ID
integration2
Access
pro
Created
Jan 20, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Integration 2 block design & features

Integration2 is a centered section with a heading, subtitle, a continuous horizontal marquee of brand logos, and a Shadcn UI Button below. The marquee consists of two duplicated logo sets that animate in a loop, creating an infinite scroll effect. Each logo is a linked image that reduces opacity on hover. Gradient overlays on the left and right edges fade the logos into the background.

The layout uses a simple center-aligned structure with generous vertical spacing. Logos are evenly spaced and uniformly sized. The heading uses medium weight at a large size. The button is styled with rounded-full corners. The gradient overlays transition from the page background color to transparent, softening the marquee edges.

The aesthetic is modern and minimal with the marquee animation providing the only motion. The block relies on brand recognition from the logos rather than decorative flourishes. Moderate complexity due to the duplicated scroll animation technique.