Logo Carousel

Visual Effects

A wall of N columns whose tiles flip through a shared pool of logos with a staggered vertical rotateX + y + fade swap — a single clock advances exactly one column per tick so two tiles never swap at once. Logos sit grayscale at 70% opacity and bloom to full colour on hover; under prefers-reduced-motion it collapses to a static grid of the first N logos with no cycling.

Inspired by Cult UI — Logo Carousel (free, MIT) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/logo-carousel.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/logo-carousel.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-xl px-4">
    <LogoCarousel
      columns={4}
      interval={2200}
      logos={[
        { label: "Hexly", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Hexagon className="h-5 w-5 text-violet-400" /><span className="font-mono text-sm font-semibold tracking-tight">Hexly</span></div>) },
        { label: "Delta", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Triangle className="h-5 w-5 text-fuchsia-400" /><span className="font-mono text-sm font-semibold tracking-tight">Delta</span></div>) },
        { label: "Cmdr", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Command className="h-5 w-5 text-cyan-400" /><span className="font-mono text-sm font-semibold tracking-tight">Cmdr</span></div>) },
        { label: "Nimbus", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Cloud className="h-5 w-5 text-amber-400" /><span className="font-mono text-sm font-semibold tracking-tight">Nimbus</span></div>) },
        { label: "Volt", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Zap className="h-5 w-5 text-violet-400" /><span className="font-mono text-sm font-semibold tracking-tight">Volt</span></div>) },
        { label: "Orbit", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Orbit className="h-5 w-5 text-cyan-400" /><span className="font-mono text-sm font-semibold tracking-tight">Orbit</span></div>) },
        { label: "Lens", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Aperture className="h-5 w-5 text-fuchsia-400" /><span className="font-mono text-sm font-semibold tracking-tight">Lens</span></div>) },
        { label: "Crate", node: (<div className="flex items-center gap-1.5 text-neutral-100"><Boxes className="h-5 w-5 text-amber-400" /><span className="font-mono text-sm font-semibold tracking-tight">Crate</span></div>) },
      ]}
    />
  </div>

Props

LogoCarouselProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
logos*	LogoItem[]	—	The logos to cycle through, distributed round-robin across columns.
columns	number	4	Number of columns (tiles) shown in the wall.
interval	number	2600	Milliseconds between swaps. One column swaps per tick, so any given column re-swaps every `interval * columns` ms.

npm dependencies

motion