import { Component } from '@angular/core';
import { WrDecryptText } from 'ngwr/bits/decrypt-text';
@Component({ imports: [WrDecryptText] })
export class MyComponent {}Decrypt Text
Text that scrambles, then resolves into the real string.
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-decrypt-text
text="Hover to decrypt!"
[speed]="50"
[sequential]="false"
revealDirection="start"
animateOn="hover"
[useOriginalCharsOnly]="false"
/>Customize
Animate On
Speed (ms)
Sequential
Reveal Direction
Original Chars Only
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | 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
Animation Glitch TextText with a colour-split glitch, on hover or all the time.Animation TypewriterTypes and deletes strings with a blinking cursor.Animation Fuzzy TextText drawn on a canvas with a TV-static jitter.Animation Split TextReveals text piece by piece when it scrolls into view.Animation Rotating TextCycles through a list of words in one place.