用途
skeleton-dither 用于制作 ASCII 或抖动风格的加载骨架与内容/图片揭示效果。加载阶段显示带阴影的字形条（░▒▓█），其中一条更密的带状区域扫过；数据返回后，每个字符打乱并逐个归位，图片则从粗粒度字形单元解析为真实像素，两部分作为同一个径向波运动。
主要能力
骨架：纯 HTML 与 CSS，首帧即完成绘制，运行时不需要 JS。每行由 3 个堆叠的 white-space:pre span 组成：一条透明度 .22 的基底行，以及两条使用更密字形、每 120ms 交替的波行，通过 mask-image 渐变带在 1.8 秒内从 -120% 扫到 220%，每行延迟 0.09 秒形成对角扫过效果；字形行由 (index, seed) 的确定性整数哈希生成，SSR 与客户端输出一致。
揭示：一个 canvas 覆盖层位于真实 DOM 之上。真实内容留在 DOM 原位置，不发生位移，屏幕阅读器全程可读；文字通过 -webkit-text-fill-color:transparent 隐藏，图片与标记 [data-sd="fade"] 的淡入元素通过 opacity 变量隐藏。文字按字素测量并打乱归位，数字只通过数字打乱；图片按 mono 单元网格由粗到细逐级绘制，并以有机径向填充的方式出现，最后与真实图片交叉淡入。
预设与变体：提供 decode、dither、terminal、blueprint 四种预设（分别在 ramp、scramble 字符集、图片颜色、网格单元、tick 上有所不同），以及 dither、scan、braille、terminal 四种骨架变体；时长有 fast（数据/UI，约 400ms 可读）与 cinematic（主视觉）两档。
使用方式
将技能文件夹中的 skeleton-dither.js（约 300 行、无依赖）复制进项目，调用一次 injectSkeletonCSS()；加载时对文本块用 skeletonHTML({ variant:'dither', lines:2, widths:['55%','40%'], seed }) 渲染骨架，图片框内用 skeletonHTML({ rows: 26 })，头像用 circle:true，并为相邻骨架设置不同 seed；数据到达后替换为真实标记，再 await createReveal(container, { preset:'decode', duration:'fast', origin:'center' }).reveal()；按钮和标签标记 data-sd="fade"，必须保持可用的 UI 标记 data-sd="skip"；通过 --sd-font、--sd-color、--sd-accent 定制主题。也可用原始 ascii-reveal 包（npm i github:quanhoangindex/ascii-reveal，含 ascii-reveal/core 供非 React 使用）。
适用场景
卡片、个人资料、仪表盘与统计数据的加载状态；主视觉、图片或卡片在挂载、路由切换或滚动进入视口时的揭示；科技、编辑或终端风格的品牌。不适合密集表单、需要平静感的场景（如医疗、金融错误提示），以及必须在 0 毫秒内可读的内容。
限制与注意事项
字形对齐需要覆盖完整方块与盲文字符的等宽字体（如 Geist Mono、JetBrains Mono、SF Mono）；不要对服务端渲染并在 hydration 时已可读的内容做动画；跨域且无 CORS 的图片回退为中性噪声纹理。性能上每个揭示使用一个 canvas、DPR 上限为 2，字形约以 30fps 重绘，动画结束后停止循环并移除 canvas。无障碍方面，prefers-reduced-motion: reduce 时移除骨架扫过、将揭示改为 220ms 透明度淡入；骨架与覆盖层设为 aria-hidden="true"，加载区域设置 aria-busy，真实文字始终保留在 DOM 与无障碍树中。项目附带 demo/index.html 与 demo/verify.py（Playwright）用于验证。
来源与许可
效果源 ascii-reveal by Quan Hoang，来自仓库 quanhoangindex/ascii-reveal（v0.3.0），MIT 许可，复制或改编需保留版权声明；技能文件夹中的 skeleton-dither.js 是更小更整洁的重写版本，并在头部注明出处。
其他事实
收费、价格与支持平台：暂未提供。