quanhoangindex/ascii-reveal

ascii-reveal 是一个 React 组件，把加载状态和挂载过渡做成 ASCII 解码效果，而不是灰色占位块。如果你要的正是这种视觉，它足够专注；如果你更在意首屏性能和等待时的 CPU，先看下面的取舍。

解决什么问题

团队有一批数据驱动的卡片、个人资料面板或标题，数据返回后内容会突然出现。常见做法是灰色骨架屏加一个生硬的替换，或者三行 CSS 透明度过渡。用 ascii-reveal 后，内容始终留在真实位置，效果绘制在它上方的一层，文字、图片、canvas 和 video 会在同一道波中解码出现。

有什么不同

关键在机制。内容不会被移出 DOM 再搬回来，乱码层画在真实布局之上，所以 README 可以声称没有布局偏移。包住一棵子树后，里面每个文本节点和媒体元素都会参与；data-ascii 属性可以标记 surface、fade、media，或直接跳过某个区域。loading 属性让同一个组件变成真实的加载状态：内容先乱码消失，数据落点处出现微光，新数据再解码进入。预设（decode、dither、terminal、blueprint）、时长和波的原点都可配置，ref 还提供重播和隐藏的调用。

代价是它属于视觉层，不是性能优化手段。README 自己的基准测试（预渲染页面、无 GPU、Chromium）显示，与灰色占位块相比，AsciiSkeleton 的样式和布局耗时更高，等待期间浏览器 CPU 占用为 21% 对 15%，gzip 后 HTML 为 3.2 KB 对 0.5 KB；设置 animate={false} 后 CPU 降到 0%。这些数字来自作者自测，应看作方向性比较，而非独立基准。任何动画都需要无障碍退路，这一点项目有处理：屏幕阅读器始终读取真实文字，prefers-reduced-motion 会把揭示效果换成短暂淡入。

谁值得试

适合正在做 React 界面、且把加载瞬间当作产品气质一部分的开发者：作品集、发布页，或者希望卡片像从噪声中解析出来的仪表盘。若你的首要目标是尽量小的 HTML 和低端设备上尽量低的空闲 CPU，或者已有必须保持视觉一致的设计系统骨架屏，它就不合适。做服务端渲染的团队要注意：服务端返回的内容在 hydration 时不会被刻意隐藏，想在那里看到效果必须显式设置 revealOnHydrate。

使用条件与边界

对等依赖是 React 17 或更新版本。可以从 npm 安装，也可以直接从 GitHub 安装；README 说明 dist/ 中的构建产物已提交，所以 GitHub 安装无需构建步骤。效果包住的是你本来就要渲染的内容，它不替你请求或管理数据，loading 只是你需要与查询状态保持同步的属性。长期成本主要在调校：selector、data-ascii 标记和预设选择要落实到各个组件，工具栏这类不能受影响的区域必须标记跳过，才能保持可用。README 摘录没有覆盖所有属性和浏览器，广泛采用前请用项目说明核对你自己的技术栈。

HotRepo 点评

HotRepo 在 2026-10-24 首次记录该仓库，当时它创建仅 3 天；2026-10-25 它以 231 总星标出现在 TypeScript 新项目榜第 14 名。这是新项目榜的排名，不是总榜或每日 Trending，且每日榜单历史不足，无法判断关注度是在上升还是消退。项目很年轻，样本也很薄，可以把它当成一个值得评估的效果组件，而不是已经定论的选择。决定前先看在线演示，并确认它在 prefers-reduced-motion 和服务端渲染下的实际表现。