Browse components
Magic Rings
Concentric glowing rings spin at their own pace, breathe, and bend toward the cursor.
Installation
npx shadcn@latest add @glint-ui/magic-ringsFirst 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/magic-rings.json
Usage
import { MagicRings } from "@/components/ui/magic-rings";
<div className="relative h-96">
<MagicRings rings={7} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rings | number | 7 | Number of rings. |
| colorFrom | string | "#22d3ee" | Innermost ring color. |
| colorTo | string | "#a855f7" | Outermost ring color. |
| speed | number | 1 | Rotation speed multiplier. |
| pull | number | 34 | Px the rings bend toward the cursor. |
| lineWidth | number | 2 | Stroke width in px. |
| className | string | — | Extra classes for the root element. |