Logo Cloud With Swap Animation
A logo cloud with automatic rotation. Displays 10 logos in a 5x2 grid that swap every 3 seconds with horizontal motion and blur effects.
Trusted by modern operators across industries.
From pilot to scale without chaos.
Logos are displayed in a 5-column grid using Tailwind CSS, forming two rows of 5 logos each. Every 3 seconds, all 10 visible logos swap out for a new set from the pool of 20 total logos.
The animation uses horizontal motion: logos enter from the right (x: 40) and exit to the left (x: -40) with a blur effect that clears during the transition. A staggered delay of 0.05 seconds per logo creates a wave effect across the grid.
AnimatePresence with popLayout mode handles the enter/exit choreography. Each logo maintains consistent height with auto width for proper aspect ratios. Dark mode support is built in with invert filters.
Works well for "trusted by" sections where you want to showcase more partners than screen space allows, or anywhere you want logo visibility to rotate automatically without user interaction.
More from Logo Clouds
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
Logos are displayed in a 5-column grid using Tailwind CSS, forming two rows of 5 logos each. Every 3 seconds, all 10 visible logos swap out for a new set from the pool of 20 total logos.
The animation uses horizontal motion: logos enter from the right (x: 40) and exit to the left (x: -40) with a blur effect that clears during the transition. A staggered delay of 0.05 seconds per logo creates a wave effect across the grid.
AnimatePresence with popLayout mode handles the enter/exit choreography. Each logo maintains consistent height with auto width for proper aspect ratios. Dark mode support is built in with invert filters.
Works well for "trusted by" sections where you want to showcase more partners than screen space allows, or anywhere you want logo visibility to rotate automatically without user interaction.