DecryptedText
decrypted-text乱码解码 · 字符翻滚后逐位解码到明文 + view/hover 触发(随机仅客户端 effect 避 hydration mismatch · 等宽 tabular-nums 防抖 · aria-label 明文)
用法
基础用法
滚入视口后字符乱码翻滚，逐位解码到明文。
tsx
<DecryptedText
text="Decrypting access..."
className="text-2xl font-semibold text-foreground"
/>悬停解码
animateOn="hover" 悬停时解码、移出复位为乱码。
tsx
<DecryptedText
text="Hover to decrypt"
animateOn="hover"
className="text-2xl font-semibold text-primary"
/>解码速度
speed 是每次乱码刷新间隔毫秒，越小翻滚越快。
tsx
<DecryptedText
text="Fast scramble"
speed={25}
className="text-2xl font-semibold text-foreground"
/>自定义字符集
characters 指定乱码取样字符集，例如只用 0/1 做二进制流观感。
tsx
<DecryptedText
text="BINARY MODE"
characters="01"
className="text-2xl font-semibold text-primary"
/>何时用
科技/安全/黑客感场景里让文本先翻滚乱码再逐位解码到明文，强调「解密揭示」的戏剧性。要做平滑的模糊对焦用 BlurText；要做 RGB 错位故障撕裂用 GlitchText；普通逐字进场用 SplitText。
导入
ts
import { DecryptedText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text * | string | — | 目标明文 |
| speed | number | 55 | 每次乱码刷新间隔毫秒 |
| animateOn | "view" | "hover" | "view" | 触发方式：view 滚入视口一次性解码 / hover 悬停解码、移出复位 |
| characters | string | 大小写字母+数字+符号 | 乱码取样字符集 |
其余 <span> 原生属性透传。
禁忌 / 坑
- 乱码取样是随机的，仅在客户端 effect 里跑，避免 SSR/hydration mismatch（服务端首帧呈明文）。
- 内部用等宽
tabular-nums防止翻滚时宽度抖动；自定义className别覆盖等宽设定，否则字符乱跳。 - 暂无其他已知坑。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<DecryptedText text="Decrypting the secret" animateOn="view" speed={55} />