❍Encrypted Text Reveal

Encrypted Text Reveal

Characters scramble through random glyphs then resolve to the final text on scroll.

Hello, from Mellow.

trigger = “mount”

Installation

▸ Run the following command

npx shadcn@latest add https://www.mellowui.com/r/encrypted-text.json

▸ Or install manually

  1. Install dependencies: pnpm add motion
  2. Copy the source from the Code tab above.
  3. Place it at components/mellow/encrypted-text.tsx
  4. Import and use.

API Reference

PropTypeDefaultDescription
textstring—The text to display and animate.
trigger"scroll" | "hover" | "mount""scroll"What triggers the reveal animation.
durationnumber1500How long each character scrambles before locking in, in milliseconds.
staggernumber30Delay before each subsequent character starts resolving, in milliseconds.
glyphsstring"ABCDEFGHIJKLMNOPQRSTUVWXYZ..."Pool of characters used during the scramble phase.
classNamestring—Additional CSS classes.