Browse components
Orbit Images
Photos circle a tilted ellipse in pseudo-3D, scaling and dimming with depth, and glide to a stop on hover.
Installation
npx shadcn@latest add @glint-ui/orbit-imagesFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/orbit-images.json
Usage
import { OrbitImages } from "@/components/ui/orbit-images";
<OrbitImages images={photos} className="h-96 w-full">
<h2>Our community</h2>
</OrbitImages>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | — | Image URLs placed evenly around the orbit. |
| children | ReactNode | — | Content in the middle of the orbit. |
| radius | number | 320 | Horizontal orbit radius in px. |
| tilt | number | 64 | Orbit plane tilt in degrees. |
| duration | number | 28 | Seconds per revolution; negative reverses. |
| size | number | 110 | Image width in px. |
| pauseOnHover | boolean | true | Ease to a stop while hovered. |
| className | string | — | Extra classes for the root element. |