Display
Text Scramble Reveal
A headline that decrypts character-by-character from random glyphs into readable text.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a large headline with a text scramble/decrypt reveal effect. On load or scroll into view, each character should cycle through random symbols (e.g., !@#$%) before locking into the final letter. Use a monospace or compressed sans-serif font in white on a dark background. The reveal should progress left-to-right with a short stagger per character. Use JavaScript to update the text content and Tailwind CSS for styling. Keep the glyph set short and the animation fast enough to feel snappy.
Chinese Prompt
创建一个大标题,带有文字乱码/解密显现效果。加载或滚动进入视口时,每个字符应先随机循环符号(如 !@#$%),然后锁定为最终字母。使用深色背景上的等宽或压缩无衬线白色字体。揭示应按从左到右顺序,每个字符有短暂错开。使用 JavaScript 更新文本内容,Tailwind CSS 设置样式。符号集保持简短,动画速度要够快以显得利落。

Overview
A terminal-style text reveal that turns a headline into a small moment of discovery. Great for tech, security, or AI-themed interfaces.
Features
- Character-by-character scramble
- Random glyph cycling
- Left-to-right reveal with stagger
- Monospace/compressed sans-serif
- Dark background
- JavaScript-driven text updates
Usage
Use for hero headlines, loading states, or section titles on tech-forward sites.
Customization
Modify the prompt to:
- Trigger on hover instead of load
- Add a blinking cursor after reveal
- Use only binary glyphs (0 and 1) for a Matrix feel
- Reveal words instead of characters