sprite-animation

スプライトアニメーションスキル

教育用解説動画のアニメーションフレームを1枚作成します。縦型動画に画面録画するようなイメージです。ピクセルアートのマスコット、大きく表示された年号、ループするCSSアニメーション、日本語／英語の躍動感あるディスプレイ文字を使います。

ワークフロー

1. 有効な DESIGN.md を読む（上で挿入されています）。年号には最も目を引くセリフ体のトークン、見出しにはどっしりしたサンセリフ体、タイムライン／インデックスラベルにはモノスペースのトークンを選びます。
2. 概要からトピックを選ぶ（例：「Nintendo・1889 — 花札」）。必ず必要な要素は、年号、1行の見出し、アニメーションする被写体（ピクセルスプライト——キャラクター、オブジェクト、またはアイコン）、短いキャプションです。
3. 画面を構成する — 全面にクリーム色／オフホワイト（#f5efe2）の背景を敷き、控えめな紙の質感を加えます。余白は広めにとります。これは動画のワンシーンです。
4. トップバー — 小さなモノスペースの行を配置します。
   • 左：「名次の/番組」または「EP. 01 / NINTENDO」のようなタイトルスラッグ
   • 右：進捗ドット（「01 / 12」）と「REC」スタンプ
5. 被写体のアニメーション — ページ上に、独立してループするアニメーションを少なくとも3つ配置します。
   • 大きな年号：見出しとなる年号（例：「1889年」）を左下に大きく表示し、セリフ体のディスプレイ用ウェイトを使います。控えめな上下方向のグリッチ／走査線アニメーション（clip-path のキーフレーム）を加え、ループごとに1フレームの「ポップ」を入れます。
   • ピクセルスプライトカード：96×128のピクセルアートカードまたはキャラクターを配置します（shape-rendering: crispEdges を指定したインライン SVG の矩形、または box-shadow のピクセルグリッドを使用）。控えめに上下に揺らすアニメーション（±4px、1.6s）を加えます。
   • 躍動するかな文字：1〜2文字の日本語／漢字を、揺れに合わせてフェードとスライドで表示します（例：「花」— hana — flower）。
   • 目盛りリボン：画面下部に年号の目盛りが付いたテープ／リボンを配置し、ゆっくりと一定の速度で左へ流します（1889・1907・1949・1977・1985・2006・2017）。
6. キャプションブロック — トリビアを説明する、小さなモノスペースのキャプションを配置します。 「Nintendoは1889年、京都で花札の製造業者として創業しました。 Marioが登場するのは、その96年後です。」
7. HTMLドキュメントを1つ作成する：
   • <!doctype html> から </html> までの単一ドキュメントにし、CSSはインラインに記述し、外部JSは使用しません。
   • すべてのアニメーションに @keyframes と animation: ... infinite を使用します。
   • ステージには固定のキャンバス比率（例：16:9のレターボックス）を使い、動画の1フレームとしてループが成立するようにします。
   • ステージ、年号、スプライト、キャプション、目盛りリボンに data-od-id を指定します。
8. 自己チェック：
   • ページ全体がまとまりのある1つのシーンになっており、コラージュのようになっていないこと。視線がまず年号に、次にスプライトに、その後キャプションに向かうこと。
   • 独立してループするアニメーションが少なくとも3つ見えること。
   • カラーパレットを抑え、クリーム色＋アクセントの赤1色＋インク色にすること。
   • 外部アセットを使わないこと。スプライトはすべてインライン SVG または CSS で作成します。

出力要件

<artifact> タグで囲んで出力します。

<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文だけ記述し、その後には何も記述しません。