Tween UITween UI
7

Components

Logo Cycle

A logo row that swaps groups with a staggered blur-slide.

Logos sit in a row of visibleCount. When there are more marks than fit, GSAP cycles the extra groups: the current set staggers up and blurs out, the next set slides in from below. Hover pauses the loop by default (pauseOnHover). Driven by GSAP.

New tab
Figma
GSAP
Tailwind CSS
React
TypeScript
Discord
GitHub
Slack
Linear
Notion
Vercel
Next.js

Installation

pnpm dlx shadcn@latest add @tween-ui/logo-cycle

Usage

app/page.tsx
app/page.tsx
import LogoCycle from '@/components/tweenui/logo/logo-cycle';
 
const logos = [
  { src: '/logos/slack.svg', alt: 'Slack' },
  { src: '/logos/figma.svg', alt: 'Figma' },
  { src: '/logos/github.svg', alt: 'GitHub' },
  { src: '/logos/linear.svg', alt: 'Linear' },
  { src: '/logos/notion.svg', alt: 'Notion' },
  { src: '/logos/vercel.svg', alt: 'Vercel' },
  { src: '/logos/react.svg', alt: 'React' },
  { src: '/logos/tailwind.svg', alt: 'Tailwind CSS' },
];
 
export default function Page() {
  return <LogoCycle logos={logos} visibleCount={6} />;
}

Props

PropTypeDefaultDescription
logos{ src, srcDark?, alt }[]—Logos to cycle through in groups. srcDark swaps in under .dark.
visibleCountnumber6How many logos show in each group.
intervalnumber2.5Seconds between group swaps.
durationnumber0.6Swap tween duration in seconds.
staggernumber0.14Delay between items in a group, in seconds.
delaynumber0.5Seconds to wait before the first swap.
yOffsetnumber40Vertical travel of the stagger, in pixels.
blurnumber4Blur radius while swapping, in pixels.
easestring'power1.inOut'GSAP ease for the swap.
pauseOnHoverbooleantruePause the cycle while the pointer is over it.
itemClassNamestring—Extra classes for each logo slot.
renderLogo(logo: LogoCycleLogo, index: number) => ReactNode—Custom logo markup instead of a default <img>.

Extends native <div> attributes (className, style, …). If logos.length is at most visibleCount, the row stays static and does not animate.

Accessibility

Each logo keeps its alt text. The cycle is decorative; under prefers-reduced-motion: reduce the first group stays visible and the loop does not run.