Logo Ring
'Trusted by' logos riding a tilted 3D ring: back logos dim and blur, and you can drag it to spin with momentum.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Each logo sits on a cylinder (rotateY + translateZ); depth controls opacity and blur, so the ring reads as 3D without WebGL. Drag to fling it; it eases back to an idle spin.
Installation
$ npx shadcn@latest add https://guetix.com/r/logo-ring.json
Uses the shadcn CLI. It creates components/guetix/logo-ring.tsx and installs nothing else.
Usage
example.tsx
import { LogoRing } from "@/components/guetix/logo-ring";
export default function Example() {
return <LogoRing />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logos | { name; node? }[] | — | Logos (text or your SVGs). |
| title | string | — | Caption. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- A hidden list exposes every logo name; Regular renders a flat row.