線画アニメーション
アニメーションするイラストコンポーネント：すべてが紙の上で一本の細いペンで描かれ、TypeScriptからSVGとしてライブで構築されるため、どんなサイズでも鮮明で、ポインターに応答し、フレームごとにステップして確認したり動画出力したりできます。
このスキルには小さなライブラリ（lib/）、2つのサンプル（examples/walker：約150行の単一フィギュア、examples/village：完全なシーン）およびツール（scripts/）が含まれています。何かを書く前に、リクエストに最も近いサンプルを読んでください。
この作品の評価方法
評価者はアニメーターのように見ます：フレームごとに、拡大して、実物または参考映像と比較して。これらは実践で全て却下されたもので、それぞれに以下のルールがあります。
- 正弦波で上下する歩行、足が滑る動き、タイムラプスに合わせて速められた歩調
- 閉じた管として描かれた四肢；定規で引いたような直線；脚を無視した硬い服
- 一度に全て作られた一式のコンポーネントで、どれも似たり寄ったり（「AIスロップ」）
- 世界の反応ではなくUIのように感じられるインタラクション
- シーンに合わせて背景が変わるページ（「コンポーネントではなくビデオのように見える」）
- 新しいものが求められたときの参考クリップからのキャラクターの流用
- 誰も頼んでいない小道具の残骸（洗濯物を取り除くように依頼された）
ワークフロー
- 何かを動かす前にルックを固定する。
references/style.mdを読んでください。ペンの太さ、紙の色、フィギュアのプロポーション、1つまたは2つのフラットなアクセントカラーを決めます。 - プロジェクトをセットアップする。
lib/をプロジェクトにコピーします（これは依存関係のない4つの.tsファイルです）。Vite + TypeScriptを使用します（このリポジトリのpackage.json、tsconfig.json、vite.config.tsがセットアップを示しています）。コンポーネントはプレーンなDOM/SVGです — フレームワークは不要です。 - 最初に1つのフィギュアまたは1つのコーナーをビルドして表示します（スクリーンショットまたは短いクリップ。参考があればそれと並べて）。残りをビルドする前に承認を得てください。一度に全て作られた一式は凡庸になります；良い作品は基準を示します。
- **
references/motion.mdで動きをつける：**歩行や走行にはgait()、取り付けられたものや吊り下げられたものにはspring()/pendulum()、ジェスチャーにはcurve()またはsequence()を使ったキー付きポーズ。決して自由な正弦波でフィギュアをアニメーションさせないでください。 - **
references/scenes.mdでシーンを構成する：**固定されたページ背景上の自己完結型カード、レイヤー、lib/daynight.tsの時間帯パレット、灯り、風、スケジュールで到着する人々、反応としてのインタラクション。 - **
references/verify.mdで確認する：**何かを表示する前に：型チェック、?debugステッピング、すべての動くものの拡大フレームストリップ、インタラクションをトリガーしてステップ実行、実際のタブで60fpsを確認。 - 一致させるべき参考クリップがある場合は、
references/matching.mdに従ってください — 推測ではなく、クリップからタイミングとポーズを測定し、オーバーレイで確認します。 - 動画が必要な場合は、
references/video.mdに従ってください（scripts/capture.tsを使った決定論的ヘッドレスキャプチャ、その後ffmpeg）。
機能するためのルール
- 四肢は2本の開いたストローク。
limb()は、遠端で互いにわずかに離れて止まる2本のペン線の間に紙で満たされた帯を描きます。これがスタイルの特徴です。 - **線は曲線。**関節は丸みを帯び、エッジはわずかにたわみ、定規のように真っ直ぐなものはありません。
- 各フィギュアを独自の空間に描く — 約95単位の高さ、足はy = 120、+x方向を向き、x = 40に立つ — そして
place(g, x, y, dir, scale)で配置します。プロポーション、ペンの太さ、歩行プリセットはすべてこの空間を前提としています。 - **服は骨格の周りに描く。**脚を解決し（隠れていても）、次に前側の膝と足首からコートや着物の裾を描き、布が歩幅に応じて開閉するようにします。袖、スカーフ、バッグはバネで揺れます。
- **足は地面に固定。**歩行者を正確に
gait.speed × scale/秒で移動させると、支持足は地面に静止します。圧縮された時計に合わせて歩調を速めないでください；代わりに到着を圧縮してください。 - インクは
currentColor、紙は.pp。applyPalette()で描画全体の色を変更します（昼：温かい紙に濃いインク；夜：藍色に淡いインク、温かい窓）。単色の四肢の塗りつぶしにはsolid()を使用する必要があります。そうしないと紙のCSSが優先されます。 - **コンポーネントはカード。**その周りのページの色は決して変わりません。
- **インタラクションは世界の反応：**人がお辞儀をしたり帽子を傾けたり、猫が目を覚まして伸びをしたり、ランタンが揺れたり、鳥が散ったり、魚が跳ねたり。ポインターの動きは風になります。シーン内にボタンはありません；単一のかすかなヒント線で十分です。
- **新しいものは新しい。**要件が「これに似ているが新しい」の場合、媒体、ペン、プロポーション、タイミングの感覚は維持し；キャラクター、活動、小道具は発明してください。
ライブラリ概要
| モジュール | 提供するもの |
|---|---|
lib/ink.ts | pen shape blot paint limb solid joint hang curve shoe place toScene inkDefs run |
lib/gait.ts | `gait({ kind: 'walk' |
lib/motion.ts | spring pendulum pointerWind sequence seeded wobble ease minJerk … |
lib/daynight.ts | palette(τ) → 空、紙、インク、lamp、night、sunset；applyPalette nightTint |
run(draw)がすべてを駆動し、draw(t, dt)を呼び出します。確認用に2つのURLフラグが重要です：?t=1.25は時間を停止；?debugはrAFを無効にし、window.__step(秒)を公開して正確なステッピングを可能にします（バックグラウンドやヘッドレスタブはrAFを抑制するため、常にデバッグモードで確認してください）。
スクリプト
scripts/capture.ts <url?debug> <outDir> <frames> <fps> [w] [h] [setupJs] [frameJs]— ヘッドレスChromeからの決定論的PNGフレームscripts/clip.ts period|blobs …— 領域のループ長；フレームごとの暗いブロブ追跡scripts/frames.sh <clip> x y w h outDir— クリップからポーズを読み取るためのグリッドオーバーレイフレーム
すべてNode ≥ 22.18（TypeScriptはネイティブで除去）とffmpegが必要です；capture.tsはローカルのChrome/Chromiumを見つけるか、$CHROMEを使用します。