Logo Cloud With Swap Animation

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.