# Decrypt Text

> Text that scrambles, then resolves into the real string.

Source: https://ngwr.dev/bits/decrypt-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 { WrDecryptText } from 'ngwr/bits/decrypt-text';

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

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

## Playground

```angular-html
<wr-decrypt-text
  text="Hover to decrypt!"
  [speed]="50"
  [sequential]="false"
  revealDirection="start"
  animateOn="hover"
  [useOriginalCharsOnly]="false"
/>
```

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

import { WrDecryptText } from 'ngwr/bits/decrypt-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: [WrDecryptText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to reveal. | `string` | — |
| `speed` | Tick interval in ms. | `number` | `50` |
| `maxIterations` | Non-sequential mode only — total scramble ticks before snapping to plain. | `number` | `10` |
| `sequential` | Reveal one char per tick instead of scrambling all of them. | `boolean` | `false` |
| `revealDirection` | Order in which chars are revealed in sequential mode. | `'start' \| 'end' \| 'center'` | `'start'` |
| `useOriginalCharsOnly` | Scramble using only glyphs present in `text` (minus spaces). | `boolean` | `false` |
| `characters` | Pool of glyphs to scramble through. | `string` | `'ABC…!@#$…'` |
| `animateOn` | When to start the animation. `'click'` rests scrambled and makes the text a button: Tab reaches it, Enter or Space decrypts it. | `'hover' \| 'click' \| 'view' \| 'inViewHover'` | `'hover'` |
| `clickMode` | Click behaviour: `'once'` decrypts then stops; `'toggle'` flips state on each click. | `'once' \| 'toggle'` | `'once'` |

## See also

- [Glitch Text](https://ngwr.dev/bits/glitch-text) — Text with a colour-split glitch, on hover or all the time.
- [Typewriter](https://ngwr.dev/bits/typewriter) — Types and deletes strings with a blinking cursor.
- [Fuzzy Text](https://ngwr.dev/bits/fuzzy-text) — Text drawn on a canvas with a TV-static jitter.
- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [Rotating Text](https://ngwr.dev/bits/rotating-text) — Cycles through a list of words in one place.