❍Encrypted Text Reveal
07 / 08text

Encrypted Text Reveal

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

textscrollanimation
Hello, from Mellow.

trigger = “mount”

Installation

▸ Run the following command

npx shadcn@latest add https://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.
durationnumber1500Total animation duration in milliseconds.
staggernumber30Per-character stagger delay in milliseconds.
glyphsstring"ABCDEFGHIJKLMNOPQRSTUVWXYZ..."Pool of characters used during the scramble phase.
classNamestring—Additional CSS classes.