Text Halo
A ring of text orbiting your content in 3D, like a planet's ring. The far side passes behind, dimmed. Pure CSS.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/text-haloOther Examples
Compact Halo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | - | Text on the ring, repeated to fill it. Also the accessible name. |
separator | string | " • " | Placed between repeats. |
children | React.ReactNode | - | Content inside the ring, e.g. a logo or an orb. |
radius | number | 170 | Ring radius in px. |
tilt | number | 16 | Ring tilt toward the viewer, in degrees. |
duration | number | 18 | Seconds per revolution. |
reverse | boolean | false | Spin the other way. |
fontSize | number | 16 | Letter size in px. |
pauseOnHover | boolean | true | Pause while hovered. |
textClassName | string | - | Classes for the ring's letters, e.g. a colour or font. |
className | string | - | Extra classes for the root element. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element. |