Encryption Loader
Deterministic “hacker text” loader that reveals a string left-to-right while unrevealed cells keep scrambling. Supports optional loading dots, hover-to-restart, and timing controls for duration and glyphFps.
A seeded, per-character cipher that resolves into readable text. Unrevealed cells keep scrambling at a fixed cadence; once the whole string is revealed you can optionally show animated “Loading…” dots. Styling (colors/size) is controlled via className and fontSize.
Behavior
- Reveals characters left → right over the total
duration. - Unrevealed cells scramble at
glyphFps(Hz) so the row feels alive. - Optional “Loading…” dots fade in after the reveal and loop
. → .. → ... - Optional hover restart via
animateOnHover(good for demos).
Props
text— string to reveal.duration— total time (s) to fully decrypt (default3.8).glyphFps— scramble rate (Hz) for unrevealed cells (default16).fontSize— base font size (px) for the cipher row (default20).loader— show the “Loading…” dots row (defaulttrue).animateOnHover— restart the cycle on hover (defaultfalse).className— additional classes for color/typography.
Encryption Loader
Encryption text without Loading
Remove the loader row by setting loader={false}. You can also control the base text size with fontSize (in pixels).
Encryption on hover
Set animateOnHover to re-run the decryption each time you hover. This demo also shortens duration to 0.5s for a snappier effect.
Glowing Effect
A gradient glow border overlay that can wrap any card shape. Customize thickness, radius, colors, and control spinning with speed/duration options.
Cascading Hero Text
A cinematic, per-character slide-and-rise hero title- the first letter pops, there’s a brief pause, then the rest cascade while the whole word glides in from the right.