Halo Ring wraps any React content in a continuously rotating conic-gradient border with a soft internal glow that pulses as it moves. Rotation speed, hue range, and glow intensity are props you can tweak per card. Built with Framer Motion and Tailwind CSS. Common on AI SaaS landing pages, pricing cards, and dashboards where you want a premium "live border" look without a heavy brand mark.
Installation
Usage
import { HaloRing } from "@/components/ui/halo-ring";<HaloRing className="rounded-3xl">
<div className="rounded-3xl bg-neutral-900 p-6">Card content</div>
</HaloRing>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Card content rendered inside the bordered pane. |
speed | number | 3 | Seconds per full rotation. |
colors | string[] | rainbow | CSS colors for the sweep, spread evenly with alpha fades at the ends. |
gradient | string? | — | Full conic-gradient(from ${turn}turn, …) string. Overrides colors. |
haloRange | [number, number] | [62, 96] | Mask fade as [innerStart, outerEnd] % — lower pulls the glow tighter. |
haloBlur | number | 24 | Halo blur radius in px. |
haloOpacity | number | 0.6 | Halo opacity (0–1). |
className | string? | — | Outer wrapper: radius, max width, shadow ring, etc. |
innerClassName | string? | — | Inner pane classes (adds bg color + padding around children). |