Shadcn Logo Cloud Block Two
Shadcn Logo Cloud Block Two is the most minimal animated logo cloud in this set. The source defines five logo groups, places one animated logo slot for each group, and advances one slot at a time on a two-second interval.
There is no headline or paragraph in the component itself. The social proof moment is carried by the grid: demo marks for AI, hosting, payments, streaming, and other tools rotate inside fixed-height wrappers, keeping the section useful when the surrounding page already provides the message.
Slot-based animation
Each LogoWrapper is relative h-10, with the active logo rendered as an absolutely positioned motion.div. New logos enter with opacity, scale, upward movement, and blur; outgoing logos leave downward with the same blur treatment. Because only one wrapper updates at a time, the logo cloud feels active without turning into a full-width marquee.
The grid starts at two columns, grows to four columns on medium screens, and reaches five columns on large screens. The fifth slot is hidden below large breakpoints with max-lg:hidden, which avoids an awkward leftover logo on tablet layouts.
Where it fits
Use this shadcn UI block when a SaaS landing page needs a quiet logo cloud under a hero, pricing section, or customer quote. It gives motion to social proof without adding a heading, CTA, or extra copy that might compete with the main page narrative.
The implementation is React and Tailwind CSS, built for a Next.js environment that can run client components. The included brand marks are placeholders from local SVG components, so replace them with approved customer or integration logos before publishing.
Customization checklist
Keep the logo groups balanced so each slot has the same visual weight. If one category contains taller or wider artwork, tune the imported SVG heights before adjusting grid spacing. After replacing the placeholders, preview the two-column, four-column, and five-column states to make sure the hidden fifth slot still makes sense.
Related Shadcn UI blocks
Start from Tailark
Build with Tailark Pro
Tailark Pro brings together essential marketing pages, blocks, and illustrations — designed to help you launch faster without compromising design.
Get AccessLearn More