Decrypted Text

Overview

DecryptedText creates a hacker/matrix-style effect where text appears to be decrypted character by character. Characters scramble randomly before settling into their final form. Supports hover, viewport, or combined triggers.

Features

• Character scrambling — random character cycling before reveal
• Sequential or random reveal — from start, end, or center
• Multiple triggers — hover, viewport, or both
• Custom character sets — use original chars or custom alphabet
• Encrypted styling — separate class for scrambled characters

Usage

import DecryptedText from '@/components/decrypted-text'

<DecryptedText
  text="ACCESS GRANTED"
  speed={50}
  sequential
  animateOn="view"
  className="font-mono text-2xl"
/>