Tween UITween UI
7

Components

Logo Wave

An infinite logo strip whose center mark rises and scales into an arc.

Logos scroll in an endless strip (direction="left" by default, right-to-left). Pass direction="right" to scroll the other way. The mark closest to the midpoint rises and scales up; the next few on each side step down into a wave. Hover pauses the marquee by default (pauseOnHover). Driven by GSAP.

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

Installation

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

Usage

app/page.tsx
app/page.tsx
import LogoWave from '@/components/tweenui/logo/logo-wave';
 
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' },
];
 
export default function Page() {
  return <LogoWave logos={logos} duration={30} />;
}

Props

PropTypeDefaultDescription
logos{ src, srcDark?, alt }[]—Logos duplicated along the marquee. srcDark swaps in under .dark.
durationnumber60Seconds for one set to travel its own width.
gapnumber70Space between items, in pixels.
direction'left' | 'right''left'Scroll direction (left = right-to-left).
pauseOnHoverbooleantruePause the marquee while the pointer is over it.
itemClassNamestring—Extra classes for each logo chip.
renderLogo(logo: LogoWaveLogo, index: number) => ReactNode—Custom logo markup instead of a default <img>.
wave{ scale: number; y: number }[]peak at 2.6 / -110pxSteps from the center mark outward.

Extends native <div> attributes (className, style, …). Default wave is [{ scale: 2.6, y: -110 }, { 1.8, -70 }, { 1.5, -50 }, { 1.3, -35 }, { 1.2, -20 }].

Accessibility

Each logo keeps its alt text. The marquee is decorative; under prefers-reduced-motion: reduce the strip holds still with the center-most mark still highlighted.