SCROLL EFFECT
文字乱码解密Text Scramble
一串随机字符飞速跳动，逐位"解密"成真实文字，赛博感十足。
效果预览
#>@$%*!
N0V4_2#
NOVA.EXE
字符逐位解码 · 等宽字体防抖
适合用在哪
科技产品 Hero、终端风官网、作品集的姓名标题。
容易踩的坑
- 没用等宽字体，随机字符宽度不一，整行文字在解密过程中剧烈抖动。
- 动画期间读屏会读到一串乱码，需要给容器 aria-label 写入真实文字。
- 中文标题直接套用英文符号字符集，乱码与汉字宽度不符，效果割裂。
设计提示词 · Prompt
文字乱码解密（Text Scramble）：进入视口时启动——每个字符位循环显示随机字符（从 !<>-_\/[]{}—=+*^?# 字符集取），被"解密"的位停在自己的目标字符上，解密顺序从左到右逐位推进，每 30-50ms 刷新一帧。实现：每个字符两个 span（当前随机字 + 目标字）交叉淡入淡出。等宽字体（monospace）必备，否则字符宽度跳动会抖。总时长控制在 1-1.5s，太长会烦。Hover 重新播放一次是常见彩蛋。
Text Scramble: starts when entering the viewport — each character position cycles through random characters (taken from the charset !<>-_\/[]{}—=+*^?#), and "decoded" positions settle on their target character; decoding advances from left to right one position at a time, refreshing a frame every 30-50ms. Implementation: two spans per character (current random char + target char) crossfading. A monospace font is required, otherwise varying character widths cause jitter. Keep total duration within 1-1.5s; longer gets annoying. Replaying once on hover is a common easter egg.
常见搭配
同一页面里经常和「文字乱码解密」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-scramble">
<div class="d-scramble__word">
<span>#>@$%*!</span>
<span>N0V4_2#</span>
<span>NOVA.EXE</span>
</div>
<div class="d-scramble__bar"></div>
<span class="d-tiny">字符逐位解码 · 等宽字体防抖</span>
</div>