Name: ascii-animation
Author: iart-ai/web-animation-skills

1实现原理 · 为什么它能做到

整个实现的地基是亮度坡道：把 sRGB 感知亮度（0..1）映射到墨量匹配的字符索引

skills/ascii-animation/SKILL.md

Map luminance (0..1) to a character whose ink density matches. Order characters dark-to-light.

注：给 10 级 / 16 级 / 70 级（Paul Bourke）三套坡道与 sRGB 权重公式，字符画的像不像由这一步决定。

把字符单元宽高比约 0.5 列为第一号坑：采样行数必须少于列数，否则图像纵向拉伸

skills/ascii-animation/SKILL.md

Correct by sampling **fewer rows than columns**: for a target of `cols` characters wide, use `rows = Math.round(cols * (imgH / imgW) * fontAspect)` where `fontAspect ≈ 0.5`.

注：与浏览器或终端无关，是字符网格的几何前提；SKILL.md、references 与 Node 脚本各给一份同名公式或常量。

渲染通道按成本分级：<pre>+textContent（简单）、canvas fillText（逐字上色/大网格/60fps）、Three.js AsciiEffect（整场景 ASCII 化）

skills/ascii-animation/SKILL.md

**Canvas `fillText`**: needed for per-character color, larger grids, or 60fps.

注：读图走 offscreen canvas（cols×rows）加 getImageData；视频逐帧重复同一流程。

终端侧改用 ANSI 转义码自绘帧循环：隐藏光标、回原点、12–24fps 节流、退出时恢复，并说明回原点比清屏便宜

skills/ascii-animation/SKILL.md

Use `ESC + '2J'` to clear the whole screen, `ESC + 'H'` for home (cheaper per frame than clearing).

注：浏览器与终端两套交付分开处理，终端件靠 stdout 或终端截图验收，而不是 HTML 冻结帧。

可复现性：帧由可注入时间加固定种子驱动，?t=N 只渲一帧，从而让截图成为确定性证据

skills/ascii-animation/SKILL.md

Drive frames from an **injectable time** (not `Date.now()`/`performance.now()` directly) and seed any randomness, so a frame is reproducible.

注：配套要求等宽字体加载完成再截图（字体决定单元度量，未加载会 FOUC 或拉伸）。

2核心能力

01生成式 ASCII 场（正弦或噪声映射到坡道，含完整可跑的 plasma 帧循环）

02图像与视频转 ASCII（offscreen canvas 加 getImageData 逐帧取样）

03Three.js AsciiEffect 后置（渲染须走 effect.render 而非 renderer.render）

04终端/CLI 动画（ANSI 帧循环、隐藏与恢复光标、truecolor 上色）

05冻结帧 seek harness（?t=N 单帧加固定种子，并给 window.__ready 就绪信号）

06自带 Node CLI：图片转 ASCII 文本（--cols / --invert / --ramp）

07坡道表与采样数学（10 级 / 70 级 / 16 级 extended、Unicode 块字符、单元宽高比实测）

08零 build 交付（单 HTML 内联坡道与 rAF 循环，明确不要 bundler）

3外部依赖

类型	依赖
package	sharp（自带脚本的依赖：解码 PNG/JPG/WebP 并缩放到字符网格）
package	three（可选：AsciiEffect 走 three/addons，交付页可从 CDN 取）
api	浏览器与终端原语：canvas 2D getImageData、requestAnimationFrame、ANSI 转义序列、process.stdout
cli	npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范）
cli	scripts/seek-shot.sh + scripts/contact-sheet.sh + ffmpeg（仓库根打包助手，被 SKILL.md 的 Packaged helper 段点名）

4风险提醒风险提醒：蓝色 · 知晓即可

风险提醒：蓝色 · 知晓即可

自带脚本依赖第三方 npm 包 sharp（安装期取包，含原生二进制） — 脚本要跑必须先 npm i sharp；离线或受限网络环境会失败，且引入一个原生扩展依赖，供应面比纯 JS 大。
SKILL.md 的坡道指引指向错位（见 second_pass） — 16 级坡道被标注为 see table below 但同页无表，需翻 references 才能拿到完整字符串。
交付页若用 Three.js 需从 CDN 取包（产物期引用） — SKILL.md 允许 Three.js from CDN if used；浏览器端执行的第三方代码属产物期供应链，需自判可信来源。
ASCII 可读性与对比度不受本 skill 约束 — 正文只要求 prefers-reduced-motion 与坡道方向正确，未对前景/背景对比度（WCAG）提要求；深色终端或浅底页面下需自行保证可读。

风险提醒：蓝色，知晓即可。判级只依据 skill 自身目录：skills/ascii-animation/ 含 SKILL.md、0 字节 README.md、references/rendering.md 与 scripts/img-to-ascii.mjs——本仓 9 个 skill 里唯二自带可执行入口者之一（有 shebang、有 usage，并被 SKILL.md 的 Reference files 段点名执行）。落蓝档（仅本地脚本/CLI 与本地读写）依据：该脚本是纯本地只读工具（sharp 解码 → 像素映射字符 → stdout），全文无 fetch/http/child_process/eval，不读环境变量或凭证，不写盘，也不执行上游输入；唯一第三方面是 npm 依赖 sharp（安装期取包）。交付页可选的 three CDN 属产物期引用，不判级。

5第二遍独立确认

[ok] 自带脚本是否真的没有网络、凭证与写盘面 — img-to-ascii.mjs 全文 64 行逐行读过：import 只有 sharp；用 process.argv 解析参数；sharp(file).metadata() 与 .resize().removeAlpha().raw().toBuffer() 读像素；结果只经 process.stdout.write 输出。无 fetch、无 http 模块、无 fs 写、无 process.env，也无 shell 调用。
[discrepancy] 坡道「16 级中等坡道被截断」的指引是否自洽 — SKILL.md 的 Common ramps 段在 Medium (16) 之后写 truncated — see table below，但该段下方最近的表是 Quick reference（无坡道表）；完整 16 级坡道实际在 references/rendering.md 的 ### 16-level extended (balance)。指向错位，照抄 SKILL.md 拿不到完整坡道。
[discrepancy] Packaged helper 的路径基准与适用性 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 实际在仓库根；且本 skill 的终端形态本就不适用 ?t=N 冻结（SKILL.md 自己注明终端件需另法验收），该 helper 只覆盖浏览器形态。
[ok] willReadFrequently 与 AsciiEffect 的取舍是否与参考文件一致 — SKILL.md 的 <pre> 与 canvas 取舍、willReadFrequently 用法、AsciiEffect 必须 effect.render 的注意事项，在 references/rendering.md 的 #### <pre> vs canvas 与 Three.js AsciiEffect 两节均可定位，前后无矛盾。

6结论

唯一带可运行 CLI 的 skill，图片转 ASCII 可离线一次跑通，不依赖浏览器

把最容易翻车的几何约束（字符单元宽高比）写成三处硬性公式

三套坡道加 sRGB 感知权重，照片级保真与紧凑生成式两种取向都给到

浏览器与终端两条交付路线各有对应的冻结或取证方式

适合：适合：① 终端或 CLI 的开场、loader、banner 等复古黑客风界面；② 把图片、视频帧或 3D 场景做成 ASCII 后效（canvas 或 Three.js AsciiEffect）；③ 需要极轻量、无图形库依赖的生成式字符动效；④ 想要可离线跑的命令行图片转 ASCII 工具。

不适合：不适合：① 需要照片级细节保真的图像呈现（字符网格天然低分辨率）；② 需要精确排版与文字可读性的正式界面（ASCII 是风格化手段）；③ 无 Node、无法安装 sharp 且不想用浏览器的纯离线环境（自带脚本跑不起来）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-28

方式 A · 人下载镜像包下载 ascii-animation.tar.gz

sha256: b1d5e8b21e57db26…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit b6dba3eb75；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/web-animation-skills

原始 GitHubiart-ai/web-animation-skills ↗

Stars28

最近推送2026-06-22

本 skill commitb6dba3eb75

本站信息

收录日期2026-09-06

分类设计

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

ascii-animation

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：蓝色 · 知晓即可

5第二遍独立确认

6结论

4风险提醒风险提醒：蓝色 · 知晓即可