[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f1ajk8reqd6448":3},{"code":4,"message":5,"data":6,"timestamp":25},10000,"success",{"full_name":7,"position":8,"description":9,"language":10,"stars":11,"forks":12,"stars_gained":13,"age_days":14,"hn_threads":15,"one_liner":16,"summary_md":17,"topic":18,"github_topics":21,"license":22,"homepage":9,"updated_at":23,"history":24},"quanhoangindex\u002Fascii-reveal",13,null,"TypeScript",238,19,63,3,[],"一个 React 加载效果组件，让文字、图片和卡片通过 ASCII 字符网格逐步解码出现。","ascii-reveal 是一个 React 组件，把加载状态和挂载过渡做成 ASCII 解码效果，而不是灰色占位块。如果你要的正是这种视觉，它足够专注；如果你更在意首屏性能和等待时的 CPU，先看下面的取舍。\n\n## 解决什么问题\n\n团队有一批数据驱动的卡片、个人资料面板或标题，数据返回后内容会突然出现。常见做法是灰色骨架屏加一个生硬的替换，或者三行 CSS 透明度过渡。用 ascii-reveal 后，内容始终留在真实位置，效果绘制在它上方的一层，文字、图片、canvas 和 video 会在同一道波中解码出现。\n\n## 有什么不同\n\n关键在机制。内容不会被移出 DOM 再搬回来，乱码层画在真实布局之上，所以 README 可以声称没有布局偏移。包住一棵子树后，里面每个文本节点和媒体元素都会参与；`data-ascii` 属性可以标记 surface、fade、media，或直接跳过某个区域。`loading` 属性让同一个组件变成真实的加载状态：内容先乱码消失，数据落点处出现微光，新数据再解码进入。预设（`decode`、`dither`、`terminal`、`blueprint`）、时长和波的原点都可配置，ref 还提供重播和隐藏的调用。\n\n代价是它属于视觉层，不是性能优化手段。README 自己的基准测试（预渲染页面、无 GPU、Chromium）显示，与灰色占位块相比，`AsciiSkeleton` 的样式和布局耗时更高，等待期间浏览器 CPU 占用为 21% 对 15%，gzip 后 HTML 为 3.2 KB 对 0.5 KB；设置 `animate={false}` 后 CPU 降到 0%。这些数字来自作者自测，应看作方向性比较，而非独立基准。任何动画都需要无障碍退路，这一点项目有处理：屏幕阅读器始终读取真实文字，`prefers-reduced-motion` 会把揭示效果换成短暂淡入。\n\n## 谁值得试\n\n适合正在做 React 界面、且把加载瞬间当作产品气质一部分的开发者：作品集、发布页，或者希望卡片像从噪声中解析出来的仪表盘。若你的首要目标是尽量小的 HTML 和低端设备上尽量低的空闲 CPU，或者已有必须保持视觉一致的设计系统骨架屏，它就不合适。做服务端渲染的团队要注意：服务端返回的内容在 hydration 时不会被刻意隐藏，想在那里看到效果必须显式设置 `revealOnHydrate`。\n\n## 使用条件与边界\n\n对等依赖是 React 17 或更新版本。可以从 npm 安装，也可以直接从 GitHub 安装；README 说明 `dist\u002F` 中的构建产物已提交，所以 GitHub 安装无需构建步骤。效果包住的是你本来就要渲染的内容，它不替你请求或管理数据，`loading` 只是你需要与查询状态保持同步的属性。长期成本主要在调校：selector、`data-ascii` 标记和预设选择要落实到各个组件，工具栏这类不能受影响的区域必须标记跳过，才能保持可用。README 摘录没有覆盖所有属性和浏览器，广泛采用前请用[项目说明](https:\u002F\u002Fgithub.com\u002Fquanhoangindex\u002Fascii-reveal)核对你自己的技术栈。\n\n## HotRepo 点评\n\nHotRepo 在 2026-10-24 首次记录该仓库，当时它创建仅 3 天；2026-10-25 它以 231 总星标出现在 TypeScript 新项目榜第 14 名。这是新项目榜的排名，不是总榜或每日 Trending，且每日榜单历史不足，无法判断关注度是在上升还是消退。项目很年轻，样本也很薄，可以把它当成一个值得评估的效果组件，而不是已经定论的选择。决定前先看[在线演示](https:\u002F\u002Fquanhoangindex.github.io\u002Fascii-reveal\u002F)，并确认它在 `prefers-reduced-motion` 和服务端渲染下的实际表现。",{"slug":19,"name":20},"developer-tools","开发工具",[],"MIT","2026-10-25T02:50:38Z",[],1792922402]