Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrCircularText } from 'ngwr/circular-text';Playground
<wr-circular-text
text="HELLO * NGWR * "
[spinDuration]="20"
onHover="speedUp"
/>Customize
Spin Duration (s)
On Hover
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to lay out around the circle. | string | — |
spinDuration | Seconds per full revolution at rest. | number | 20 |
onHover | Hover behaviour. null disables hover reactivity. | 'speedUp' | 'slowDown' | 'pause' | 'goBonkers' | null | 'speedUp' |
CSS variables
Custom properties ngwr/circular-text publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-circular-text-radius | calc(var(--wr-circular-text-size) / 2) | .wr-circular-text |
--wr-circular-text-size | 12rem | .wr-circular-text |