Staggered logo columns that swap with fade, vertical shift, and motion blur. A React component.
Made by AxylStaggered logo columns cycling between sets with fade, vertical shift, and motion blur.
| Prop | Type | Default |
|---|---|---|
rows? | LogoCarouselSwapperRow[] | - |
interval? | number | 3000 |
stagger? | number | 0.12 |
columns? | number | 4 |
align? | "center" | "start" | "end" | "center" |
size? | "sm" | "default" | "lg" | "default" |
monochrome? | boolean | false |
className? | string | - |
| Prop | Type | Default |
|---|---|---|
src? | string | - |
alt? | string | - |
Use LogoCarouselSwapper in social proof sections to showcase partner logos, client brands, or integration icons. The staggered swap animation draws the eye without being distracting, making it ideal for "As seen in" or "Trusted by" sections on landing pages.
Provide at least two full sets of logos to fill all columns on every cycle — otherwise vacant column slots during a swap look like a layout bug.
Each logo requires an alt text via the alt prop. The root element should receive an aria-label describing the section (e.g., "Partner logos"). When prefers-reduced-motion: reduce is set, useReducedMotion() keeps the row-swap interval running but replaces the per-column blur, vertical shift, and stagger with a single opacity crossfade between full rows — no extra configuration needed.
Magnetic Cards
A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest. React component.
Hero Carousel
Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls. A React + Motion component.
Built by Axyl. A motion-first component registry for React.
Last updated: 9/14/2026
Help keep SoraLabs moving.
Every contribution helps us build and maintain open-source tools for the community.
Sponsor on GitHub