# Circular Text

> Text laid out around a circle, with the whole circle spinning on a keyframe. Hover behaviour swaps the spin rate (or pauses) without resetting the rotation angle. Pure CSS port — no JS animation loop.

Source: https://ngwr.dev/animations/circular-text  
Kind: Animation

## Import

```angular-ts
import { WrCircularText } from 'ngwr/circular-text';
```

## Playground

```html
<wr-circular-text
  text="HELLO * NGWR * "
  [spinDuration]="20"
  onHover="speedUp"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to lay out around the circle. | `string` | `— (required)` |
| `spinDuration` | Seconds per full revolution at rest. | `number` | `20` |
| `onHover` | Hover behaviour. `null` disables hover reactivity. | `'speedUp' \| 'slowDown' \| 'pause' \| 'goBonkers' \| null` | `'speedUp'` |