Sora UI

Logo Carousel Swapper

Staggered logo columns that swap with fade, vertical shift, and motion blur. A React component.

Made by Axyl

Staggered logo columns cycling between sets with fade, vertical shift, and motion blur.

Loading...

Installation

File Structure

logo-carousel-swapper.tsx

Usage

import {
  LogoCarouselSwapper,
  type LogoCarouselSwapperRow,
} from '@/components/sora-ui/effects/logo-carousel-swapper';

const rows: LogoCarouselSwapperRow[] = [
  [
    { src: 'https://sora.axyl.io.vn/logos/partners/nvidia-wordmark.svg', alt: 'Nvidia' },
    { src: 'https://sora.axyl.io.vn/logos/partners/supabase-wordmark.svg', alt: 'Supabase' },
    { src: 'https://sora.axyl.io.vn/logos/partners/github-wordmark.svg', alt: 'GitHub' },
    { src: 'https://sora.axyl.io.vn/logos/partners/openai-wordmark.svg', alt: 'OpenAI' },
  ],
  [
    { src: 'https://sora.axyl.io.vn/logos/partners/turso-wordmark.svg', alt: 'Turso' },
    { src: 'https://sora.axyl.io.vn/logos/partners/clerk-wordmark.svg', alt: 'Clerk' },
    { src: 'https://sora.axyl.io.vn/logos/partners/claude-wordmark.svg', alt: 'Claude' },
    { src: 'https://sora.axyl.io.vn/logos/partners/vercel-wordmark.svg', alt: 'Vercel' },
  ],
];

export default function Page() {
  return (
    <LogoCarouselSwapper
      aria-label="Partner logos"
      rows={rows}
      interval={3000}
      stagger={0.12}
      monochrome
    />
  );
}

Props

PropTypeDefault
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
-

LogoCarouselSwapperItem

PropTypeDefault
src?
string
-
alt?
string
-

When to Use

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.

Accessibility

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.

Built by Axyl. A motion-first component registry for React.

Last updated: 7/26/2026