デザイン&モーション · iart-ai/web-animation-skills

ascii-animation

This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT(仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 的 license 字段同为 MIT)Commit b6dba3eb75
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

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)の3系統のランプと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(1文字ずつの着色/大型グリッド/60fps)、Three.js AsciiEffect(シーン全体のアスキーアート化)

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).
ブラウザ向けと端末向けの2つの成果物は個別に処理され、端末向け成果物はHTMLのフリーズフレームではなくstdoutまたは端末のスクリーンショットで検証します。

再現性の担保:注入可能な時間パラメータと固定シード値でフレームを駆動し、?t=Nで1フレームのみ描画することで、スクリーンショットを確定的なエビデンスとする

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フィールド(正弦波やノイズをランプにマッピング、完全動作するプラズマフレームループを含む)
02画像および動画のASCII変換(offscreen canvasとgetImageDataによるフレーム単位のサンプリング)
03Three.js AsciiEffectポストエフェクト(レンダリングはrenderer.renderではなくeffect.renderを経由する必要あり)
04ターミナル/CLIアニメーション(ANSIフレームループ、カーソルの非表示/復元、truecolor着色)
05フリーズフレームシークハーネス(?t=Nによる固定シード単一フレーム描画とwindow.__ready完了通知)
06同梱のNode CLI:画像からASCIIテキストへの変換(--cols / --invert / --ramp)
07ランプテーブルとサンプリング計算式(10段階 / 70段階 / 16段階extended、Unicodeブロック文字、セルアスペクト比の実測値)
08ビルド不要(ゼロビルド)納品(ランプとrAFループをインライン化した単一HTML、バンドラー不使用を明記)

3外部依存関係

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

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: node skills/ascii-animation/scripts/img-to-ascii.mjs <image> [--cols N] [--
  • 网络端点: 外部ネットワークアクセスの宣言: スクリプト自体による外部送信はゼロ。npm i sharp(インストール時のnpmレジストリ取得)および成果物ページでの任意のthree CDN読み込みはホスト環境または成果物実行時のものであり、判定対象外。
  • 本地工作目录: ファイル読み書きと成果物出力: 同梱スクリプトは一切のファイル書き込みを行わない(stdoutのみ)。
監査ノート: 判定はスキル自身のディレクトリのみに基づきます:skills/ascii-animation/ には SKILL.md、0バイトの README.md、references/rendering.md、および scripts/img-to-ascii.mjs が含まれています。本リポジトリの9スキル中、実行可能なエントリーポイントを持つ2つのうちの1つです(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を備えた唯一のスキルであり、ブラウザに依存せずオフラインで一発で画像からASCIIへの変換を実行可能
  • 最も破綻しやすい幾何学的制約(文字セルのアスペクト比)を3箇所で厳密な計算式として明記
  • 3系統のランプとsRGB知覚輝度ウェイトを備え、写真的な忠実度重視とコンパクトなジェネラティブ用途の双方に対応
  • ブラウザとターミナルの両方の提供パスに対して、それぞれに適したフリーズおよび証跡取得手段を用意
  • 最適な用途: 適用場面:① ターミナルやCLIのオープニング、ローダー、バナーなどのレトロ・ハッカー調UI;② 画像、動画フレーム、または3Dシーンのアスキーアート後処理(canvasまたはThree.js AsciiEffect);③ グラフィックスライブラリに依存しない極めて軽量なジェネラティブ文字アニメーション;④ オフラインで動作可能なコマンドラインの画像→ASCII変換ツールを求める場合。
    不向きな用途: 非推奨場面:① 写真レベルの詳細な忠実度が要求される画像表現(文字グリッドは本質的に低解像度であるため);② 正確なタイポグラフィと文字の可読性が不可欠な正式UI(ASCIIはスタイライズ表現であるため);③ Node環境がなく、sharpをインストールできず、ブラウザも使いたくない完全オフライン環境(同梱スクリプトが動作しないため)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload ascii-animation.tar.gz
    sha256: b1d5e8b21e57db26…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit b6dba3eb75.