Logos With Blur Flip
An auto-rotating logo cloud where logos flip in with blur and fade animations. Logos cycle through sets on a 3-second interval.
Trusted by the best companies
Companies that have been using our product from the very start.
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.
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 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.