import { Component } from '@angular/core';
import { WrCircularText } from 'ngwr/bits/circular-text';
@Component({ imports: [WrCircularText] })
export class MyComponent {}Circular Text
Text laid out on a spinning circle.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/circular-text's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-circular-text-char-line-height | var(--wr-leading-none) | .wr-circular-text |
--wr-circular-text-font-weight | var(--wr-font-weight-bold) | .wr-circular-text |
--wr-circular-text-radius | calc(var(--wr-circular-text-size) / 2) | .wr-circular-text |
--wr-circular-text-size | 12rem | .wr-circular-text |