An endless belt of wordmark chips with faded edges. It slows down or stops on hover and can run a second row in the opposite direction.
Trusted by 2,400 teams
npx shadcn@latest add https://hyperblur.dev/r/logo-loop-belt.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/logo-loop-belt.tsx.
import { LogoLoopBelt } from "@/components/hyperblur/logo-loop-belt"
<LogoLoopBelt logos={["Orbitly", "Kestrel", "Plinth", "Fathom"]} speed={40} secondRow />| Prop | Type | Default | Description |
|---|---|---|---|
| logos | string[] | 10 sample names | Wordmarks to show. Each one gets a small mark and its own type style. |
| speed | number | 40 | Belt speed in pixels per second. |
| direction | "left" | "right" | "left" | Direction of the first row. The second row runs the other way. |
| hoverSpeed | number | 0 | Speed multiplier while the pointer is over the belt. 0 stops it, 1 keeps it unchanged. |
| secondRow | boolean | false | Add a second row in the opposite direction with the names shifted. |
| fade | number | 64 | Width in pixels of the faded edges. |
| gap | number | 12 | Space between chips in pixels. |
| accent | string | "#7fb3ff" | Color of the marks and the hover highlight. |