Browse components
Infinite Spiral
Cards wound around an endless 3D helix that keeps turning, and spins faster when you scroll or drag.
Installation
npx shadcn@latest add @glint-ui/infinite-spiralFirst 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/infinite-spiral.json
Usage
import { InfiniteSpiral } from "@/components/ui/infinite-spiral";
<div className="h-[32rem]">
<InfiniteSpiral images={photos} radius={300} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | ReactNode | — | Array of image URLs. |
| count | number | 30 | Cards on the spiral; images repeat. |
| radius | number | 300 | Spiral radius in px. |
| step | number | 30 | Degrees between neighbouring cards. |
| pitch | number | 30 | Vertical px between neighbouring cards. |
| cardWidth | number | 150 | Card width in px. |
| speed | number | 0.8 | Idle rotation in cards per second. |
| className | string | — | Extra classes for the root element. |