Display
文字乱码显现
标题从随机符号逐字解密为可读文字。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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.
中文提示词
创建一个大标题,带有文字乱码/解密显现效果。加载或滚动进入视口时,每个字符应先随机循环符号(如 !@#$%),然后锁定为最终字母。使用深色背景上的等宽或压缩无衬线白色字体。揭示应按从左到右顺序,每个字符有短暂错开。使用 JavaScript 更新文本内容,Tailwind CSS 设置样式。符号集保持简短,动画速度要够快以显得利落。

Overview
终端风格的文字显现,将标题变成一次小小的发现时刻。适合科技、安全或 AI 主题界面。
Features
- 逐字符乱码
- 随机符号循环
- 从左到右错开显现
- 等宽/压缩无衬线字体
- 深色背景
- JavaScript 驱动文本更新
Usage
用于科技前沿网站的 hero 标题、加载状态或区域标题。
Customization
修改 prompt 以:
- 改为悬停触发而非加载触发
- 显现后添加闪烁光标
- 仅使用二进制符号(0 和 1)营造 Matrix 感
- 按词而非按字符显现