Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrDecryptText } from 'ngwr/decrypt-text';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 | — (required) |
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. | 'hover' | 'click' | 'view' | 'inViewHover' | 'hover' |
clickMode | Click behaviour: 'once' decrypts then stops; 'toggle' flips state on each click. | 'once' | 'toggle' | 'once' |