Logos With Blur Flip

Logos are organized into multiple sets stored in state. The component cycles through sets every 3 seconds, triggering exit and enter animations using Framer Motion's AnimatePresence in popLayout mode.

Each logo animates from 40px below with full blur (10px) and fades in while moving to its natural position. Exit animations reverse this, moving up while blurring out. A staggered delay of 0.1 seconds between logos creates a wave effect.

The heading uses a gradient text effect with bg-clip-text. Logos display in a flexible row that wraps on smaller screens. The dark:invert filter ensures logos remain visible in dark mode.

Works well for "Trusted by" sections on landing pages, partner showcases, or anywhere you want to highlight brand relationships with subtle animation.