Logo Timeline

A visually stunning animated logo timeline component that displays logos in horizontal scrolling rows with smooth infinite animations, perfect for showcasing partners, technologies, or integrations.

Installation


pnpm dlx shadcn@latest add @gammaui/logo-timeline

global.css

@keyframes move-x {
from {
  transform: translateX(var(--move-x-from));
}
to {
  transform: translateX(var(--move-x-to));
}
}

Examples

With Hover Animation

Usage

import { LogoTimeline, type LogoItem } from "@/components/gammaui/logo-timeline"

<LogoTimeline
  items={logos}
  height="h-[500px] sm:h-[600px]"
  iconSize={18}
  showRowSeparator={true}
/>

Hover Animation Example

Animate logos only on hover for an interactive experience:

<LogoTimeline
  items={logos}
  height="h-[400px]"
  animateOnHover={true}
  iconSize={20}
/>

With Title

Add a centered title overlay for additional context:

<LogoTimeline
  items={logos}
  title="Trusted by Industry Leaders"
  height="h-[600px]"
  iconSize={18}
  showRowSeparator={true}
/>

Props

Prop	Type	Default	Description
`items`	`LogoItem[]`	`-`	Array of logo items to display on the timeline (required)
`title`	`string`	`-`	Optional title text displayed in the center of the timeline
`height`	`string`	`"h-[400px] sm:h-[800px]"`	Height of the timeline container (e.g., "h-[400px]", "h-screen")
`className`	`string`	`-`	Additional CSS classes for the container
`iconSize`	`number`	`16`	Size of icons in pixels
`showRowSeparator`	`boolean`	`true`	Whether to display separator lines between rows
`animateOnHover`	`boolean`	`false`	If true, animations only play when the component is hovered

LogoItem Interface

Prop	Type	Default	Description
`label`	`string`	`-`	Label text displayed next to the icon
`icon`	`keyof typeof Icons`	`-`	Icon key from the Icons object (e.g., "discord", "gitHub", "google")
`animationDelay`	`number`	`-`	Animation delay in seconds (typically negative, e.g., -23)
`animationDuration`	`number`	`-`	Animation duration in seconds (e.g., 30, 40, 45, 60)
`row`	`number`	`-`	Row index (1-based) to group logos on the same timeline row

Notes

Animation Timing: Use negative animationDelay values to stagger logo animations and create a natural flow. The delay determines when each logo starts its animation cycle.
Row Organization: Logos are grouped by their row property. Each row can have multiple logos with different animation timings to create a seamless, infinite scrolling effect.
Icon Selection: Icons must be valid keys from the Icons object exported from @/components/icons. Common icons include: react, ts, tailwind, gitHub, discord, openai, v0, radix, and more.
Animation Duration: Longer durations create slower, more elegant animations. Typical values range from 30-65 seconds. Logos on the same row should use the same duration for synchronized movement.
Responsive Design: The component is fully responsive and works well on mobile devices. Use Tailwind's responsive height utilities (e.g., h-[400px] sm:h-[600px]) for optimal viewing across screen sizes.
Performance: The component uses CSS animations for smooth, performant scrolling without JavaScript overhead.

Logo Loop MacBook Keyboard

On This Page

Installation Examples With Hover Animation Usage Hover Animation Example With Title Props LogoItem Interface Notes

Contribute