Getting Started
Components
Text Animations
Backgrounds
Installation
pnpm dlx shadcn@latest add @gammaui/logo-loop
Usage
import { LogoLoop } from "@/components/gammaui/logo-loop"Basic Horizontal Loop
const logos = [
{ node: <IconBrandReact />, title: "React" },
{ node: <IconBrandNextjs />, title: "Next.js" },
{ node: <IconBrandTypescript />, title: "TypeScript" },
{ node: <IconBrandTailwind />, title: "TailwindCSS" },
]
<LogoLoop
logos={logos}
speed={120}
direction="left"
logoHeight={48}
gap={40}
scaleOnHover
fadeOut
/>Vertical Loop with Hover Deceleration
<LogoLoop
logos={logos}
speed={80}
direction="up"
hoverSpeed={20}
fadeOut
logoHeight={48}
gap={40}
/>Two Loops Stacked Together
<div className="relative h-[200px] overflow-hidden">
<LogoLoop
logos={logos}
speed={120}
direction="left"
logoHeight={48}
gap={40}
fadeOut
scaleOnHover
/>
<LogoLoop
logos={logos}
speed={80}
direction="up"
logoHeight={48}
gap={40}
hoverSpeed={20}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
logos | { node: ReactNode; title?: string; href?: string }[] | [] | Array of logo items |
speed | number | 100 | Loop speed (higher = faster) |
direction | "left" | "right" | "up" | "down" | "left" | Motion direction |
logoHeight | number | 48 | Height of each logo |
gap | number | 32 | Space between logos |
hoverSpeed | number | speed | Speed when hovered |
fadeOut | boolean | false | Enable edge fading gradient |
fadeOutColor | string | "#ffffff" | Color used for fade mask |
scaleOnHover | boolean | false | Slight zoom on hover |
className | string | - | Custom classes |
Features
- Infinite Looping (horizontal & vertical)
- Two-Speed Motion (normal + hover speed)
- Fade-Out Edges for aesthetic masking
- Responsive at any container size
- Hover Interactions (scale + deceleration)
- Highly Customizable spacing, speed, direction
- Smooth Animations powered by CSS transforms
Use Cases
- Tech stacks & partner logo strips
- Auto-scrolling logo carousels
- Feature sections in landing pages
- Vertical marquee-style logo columns
- Sponsor grids
- Tooling & ecosystem highlights