# Circular Text

> Text laid out on a spinning circle.

Source: https://ngwr.dev/bits/circular-text  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrCircularText } from 'ngwr/bits/circular-text';

@Component({ imports: [WrCircularText] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/circular-text';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrCircularText } from 'ngwr/bits/circular-text';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrCircularText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | 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` |

## See also

- [Rotating Text](https://ngwr.dev/bits/rotating-text) — Cycles through a list of words in one place.