Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

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.

Open in

import { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        title="Built with the best tools"
        height="h-[400px] sm:h-[500px]"
        iconSize={18}
        showRowSeparator={true}
      />
    </div>
  )
}

Installation


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

Examples

With Hover Animation

Open in

import { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        height="h-[400px] sm:h-[500px]"
        iconSize={18}
        showRowSeparator={true}
        animateOnHover={true}
      />
    </div>
  )
}

Usage

import {
  LogoTimeline,
  type LogoItem,
} from "@/components/eldoraui/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.

LiveButton MacBook Pro

On This Page

Hover Animation Example

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers

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.

Open in

import { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        title="Built with the best tools"
        height="h-[400px] sm:h-[500px]"
        iconSize={18}
        showRowSeparator={true}
      />
    </div>
  )
}

Installation


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

Examples

With Hover Animation

Open in

import { LogoTimeline } from "@/registry/eldoraui/logo-timeline"
import type { LogoItem } from "@/registry/eldoraui/logo-timeline"

const logos: LogoItem[] = [
  // Row 1 - Communication & Social (2 logos, 50s duration, spaced 25s apart)
  {
    label: "Discord",
    icon: "discord",
    animationDelay: -50,
    animationDuration: 50,
    row: 1,
  },
  {
    label: "Twitter",
    icon: "twitter",
    animationDelay: -25,
    animationDuration: 50,
    row: 1,
  },
  // Row 2 - Development Tools (2 logos, 45s duration, spaced 22.5s apart)
  {
    label: "GitHub",
    icon: "gitHub",
    animationDelay: -45,
    animationDuration: 45,
    row: 2,
  },
  {
    label: "React",
    icon: "react",
    animationDelay: -22.5,
    animationDuration: 45,
    row: 2,
  },
  // Row 3 - Development Tools Continued (3 logos, 60s duration, spaced 20s apart)
  {
    label: "TypeScript",
    icon: "ts",
    animationDelay: -60,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Tailwind",
    icon: "tailwind",
    animationDelay: -40,
    animationDuration: 60,
    row: 3,
  },
  {
    label: "Radix UI",
    icon: "radix",
    animationDelay: -20,
    animationDuration: 60,
    row: 3,
  },
  // Row 4 - Productivity & Cloud (2 logos, 55s duration, spaced 27.5s apart)
  {
    label: "Google Drive",
    icon: "googleDrive",
    animationDelay: -55,
    animationDuration: 55,
    row: 4,
  },
  {
    label: "Notion",
    icon: "notion",
    animationDelay: -27.5,
    animationDuration: 55,
    row: 4,
  },
  // Row 5 - Messaging (2 logos, 50s duration, spaced 25s apart)
  {
    label: "WhatsApp",
    icon: "whatsapp",
    animationDelay: -50,
    animationDuration: 50,
    row: 5,
  },
  {
    label: "Messenger",
    icon: "messenger",
    animationDelay: -25,
    animationDuration: 50,
    row: 5,
  },
  // Row 6 - AI & Automation (3 logos, 65s duration, spaced ~21.5s apart)
  {
    label: "OpenAI",
    icon: "openai",
    animationDelay: -65,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "Zapier",
    icon: "zapier",
    animationDelay: -43,
    animationDuration: 65,
    row: 6,
  },
  {
    label: "v0",
    icon: "v0",
    animationDelay: -21.5,
    animationDuration: 65,
    row: 6,
  },
  // Row 7 - Payment & Services (2 logos, 50s duration, spaced 25s apart)
  {
    label: "PayPal",
    icon: "paypal",
    animationDelay: -50,
    animationDuration: 50,
    row: 7,
  },
  {
    label: "Apple Pay",
    icon: "applePay",
    animationDelay: -25,
    animationDuration: 50,
    row: 7,
  },
]

export function LogoTimelineDemo() {
  return (
    <div className="w-full overflow-hidden">
      <LogoTimeline
        items={logos}
        height="h-[400px] sm:h-[500px]"
        iconSize={18}
        showRowSeparator={true}
        animateOnHover={true}
      />
    </div>
  )
}

Usage

import {
  LogoTimeline,
  type LogoItem,
} from "@/components/eldoraui/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.