An endless customer logo loop on a gentle arc with faded edges, where the logo passing the center grows under a lens and takes the accent color. A caption under the lens names the customer and their result.
Trusted by product teams at
npx shadcn@latest add https://hyperblur.dev/r/motion-logo-lens.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-logo-lens.tsx.
import { MotionLogoLens } from "@/components/hyperblur/motion-logo-lens"
<MotionLogoLens logos={[{ name: "Acme", note: "Since 2024" }, { name: "Globex", note: "40 seats" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| logos | { name: string; note: string; glyph?: number }[] | 8 sample customers | Wordmarks with a short note for the caption. glyph picks one of 8 built-in marks. |
| label | string | "Trusted by product teams at" | Line above the loop. Empty string hides it. |
| speed | number | 46 | Speed in pixels per second. |
| arc | number | 18 | How far in pixels the edges dip below the center. |
| magnify | number | 0.6 | Extra scale of the logo under the lens. |
| pauseOnHover | boolean | true | Eases to a stop while hovered or focused. |
| accent | string | "#2f7bff" | Lens and focused logo color. |
| progress | number | undefined | Controlled position from 0 to 1 across one full loop. |
| autoPlay | boolean | true | Runs the loop on its own. When false, the loop moves with the page scroll. |
| onFocusChange | (index: number) => void | undefined | Called when a new logo enters the lens. |