name: 10-animation-styles-skill description: Make animated story videos in 10 styles that do big numbers on Reels and TikTok: pixel art, PS2 style, comic art, lego style, claymation, paper cutout, retro anime, low poly 3D, risograph and miniature diorama. Agent writes the story, codes every scene, and renders an mp4 on the user's own computer, with no credits or image models. Use one style for a whole video or switch style every beat. Use when asked for an animated video, a story video, a video in any of these styles, "make it look like claymation / paper / pixel art", an animated ad for an app or SaaS, or when someone wants story copy for a video.
アニメーションスタイル
10種類のルック。それぞれが実際のコードファイルで、Claudeが任意のストーリーに適用できます。画像モデルやビデオモデルは一切呼び出さないため、同じストーリーは毎回同じようにレンダリングされ、コストはかかりません。
このテンプレートには、完成した22秒のサンプルが付属しています。Claudeが自作ロケットで月へ飛び立つストーリーを、ビートごとに新しいスタイルで表現します。まずはこれを実行して各ルックの動きを確認し、その後でストーリーを置き換えてください。
スタイル一覧
| ファイル | スタイル | 一言で表すルック |
|---|---|---|
pixel.js | ピクセルアート | 約120ピクセル幅で描画、スムージングなしで拡大。少ないパレット、ディザのかかった空、ゲームのHUD |
ps2.js | PS2風 | 少ないポリゴン、粗い小さなテクスチャ、フォグ、低解像度の画像を引き伸ばした見た目、ミッションHUD |
comic.js | コミックアート | 太いインクの線、フラットな色、ベンデイドット、アクションライン、キャプションボックス、大きな「BOOM」 |
brick.js | レゴ風 | すべてがスタッド付きのプラスチックブロックで構成、柔らかい日差し |
clay.js | クレイメーション | 指紋のついた柔らかい形状、柔らかい光、毎秒12ポーズ |
paper.js | ペーパーカットアウト | 小さな影のあるカードの切り抜きの重なり、紙の繊維、毎秒8ポーズ |
anime.js | レトロアニメ | 80年代のセル画風：グラデーションの空、大きな太陽の円盤、スピード線、ヒット時の反転フレーム、フィルムグレイン |
poly.js | ローポリ3D | フラットな面と硬い光、丸みは一切なし |
riso.js | リソグラフ | オフホワイトの紙に2色のインク、それぞれに独自のハーフトーンドット、わずかにずれて印刷 |
mini.js | ミニチュアジオラマ | 机の上の小さな手作りのセット、段ボールと綿、ティルトシフトブラー |
styles.md には各スタイルのルールが記載されています：そのスタイルに見えるための要素、新しい被写体に変更する際のポイント、壊してはいけない条件など。シーンを書く前に、使用するスタイルの該当部分を読んでください。
手順
- 概要を聞き出す。 ストーリーやアプリの内容、縦型（Reels、TikTok）か横型（X、YouTube）か、どのスタイルを使うか。特に指定がなければ、ビートに合った3〜5スタイル、または全10スタイルを見せてもよい。ビデオ全体で1スタイルでも問題ない。
- ストーリーを書く
copywriter.mdを使用。ビートごとに1行。各行の横にスタイルを表示してユーザーに見せ、承認を待つ。 - テンプレートをコピーする：
cp -r ~/.claude/skills/claude-animation-styles/template ~/my-video && cd ~/my-video && npm i。変更前に動作確認：node render.cjs stills 2,6,12を実行し、画像を開く。これらはサンプルストーリーの画像なので、自分のストーリーを始める前にstills/を削除すること。 - story.json を書く。
formatはverticalまたはwide。各ビートにはstyle（ファイル名）、seconds、lineを含める。同じスタイルを複数のビートで使用でき、それぞれに独自のシーンが設定される（以下参照）。 - 使用する各スタイルファイルのシーンを書き換える。 ルックは維持し、被写体を置き換える。「被写体の変更」を参照。
- 各スタイルのスチル画像を確認する：
node render.cjs stills 1,3.5,6。数値はビート内ではなくビデオ全体の経過時間（秒）で、各画像のファイル名が出力される。それぞれを開く。音声なしで被写体が認識できるか？そのスタイルとして成立しているか？フレームからはみ出している部分はないか？ - ユーザーが希望する場合、音声を追加する：
ELEVENLABS_API_KEY=... python3 voice.py [voice_id]。セリフを読み上げ、voice.mp3を生成し、story.jsonのビートタイミングをそれに合わせて調整する。キーがない場合は音声なしなので、手動で秒数を設定し、音楽を追加する。 - レンダリングする：
node render.cjs video --audio voice.mp3、または音声なしの場合はnode render.cjs video。出力はout/video.mp4。20秒のビデオで数分かかる。 - 全体を確認してから引き渡す：
ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg（1秒1コマなので、最後に空のセルがあっても正常）。音声は確認できないので、ユーザーに音声チェックを依頼すること。
音声の下にBGMを入れる場合（音声より14dB小さく）：
ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav
両方の音量を -af ebur128 で測定し調整すること。トラックによってラウドネスが大きく異なるため。
被写体の変更
各スタイルファイルには、世界を一度だけ構築する create と、任意の瞬間を描画する render(t, ctx, dur) があります。t はビート内の経過時間（秒）、dur はビートの長さです。t のみを参照するため、どのフレームも任意の順序で描画できます。
同じスタイルを2回使用する場合。 create は index（story.json内のビート位置）、line、beat を受け取ります。this.index = index を保存し、各ビートで異なるシーンを描画します。start で分岐しないこと（タイミングが変わるたびに値が変わるため）。
2Dスタイル（pixel, comic, paper, anime, riso）。 被写体は小さなペインターを通じて描画されます：paint.fill(path, key) と paint.lines(segments, width, key)。各スタイルがこれらの動作を決定します。comicではインク線を追加、paperでは影を追加、risoではインク濃度を設定します。lib/common.js にサンプルの被写体（drawClaude、drawRocket）があります。drawCat、drawPhone、drawFounder などを同じように書き、すべてのスタイルで同じ部品名を使用すれば、各ルックが自動的に適用されます。新しい部品名（fur、apron）は各スタイルのパレット（comic、paper、animeでは PAL、risoでは toneA と toneB）に追加する必要があります。追加しないとエラーなく間違った色で描画されます。ピクセルアートは独自のスプライトを描画するため、手作業で記述してください。
3Dスタイル（ps2, brick, clay, poly, mini）。 lib/three-claude.js は被写体を単純な形状で構築し、kit がポリゴン数とマテリアルを決定します。同様に被写体を構築してください：makeCat(kit)。レゴスタイルは例外で、すべてをブロックで構築する必要があるため、その add ヘルパーをコピーしてください。
すべてのスタイルで被写体を統一すること。 同じシルエット、同じ2〜3色。これにより、スタイルの変更が新しいクリップではなく同じストーリーとして認識されます。細かいキャラクターよりも、単純で認識しやすい形状のほうが効果的です。
効果的な使い方
- ハードカットでスタイルを切り替える。 次のルックに直接カット。その意外性がトランジションになります。
- 中央で動く大きなオブジェクトを1つ。 視聴者は1秒未満で各ビートを理解する必要があり、多くの場合、音声をオフにしたスマートフォンで見ています。
- 各ビートは1.5〜3秒。 ルックを見るのに十分な長さであり、次のビートまで見てもらえる短さ。
- カットをまたいでストーリーを動かし続ける。 あるビートの終わりでロケットが上昇しているなら、次のビートの開始でも上昇していること。
- テキストはスタイルに属する。 ゲームルックではHUD、コミックルックではキャプションボックス。字幕は上に重ねない。
問題が発生した場合
- PuppeteerまたはThree.jsがない：
npm i（render.cjsのあるフォルダで）。 - ffmpegがない： Macの場合
brew install ffmpeg。スチル画像はffmpegがなくても機能しますが、ビデオには必要です。 - 3Dフレームが真っ黒、またはレンダリングが非常に遅い： MacではGPUを使用、それ以外ではソフトウェアレンダラーを使用します（
render.cjsのgl行）。ソフトウェアレンダリングは動作しますが、非常に時間がかかります。 - 見出しのフォントが正しくない： ページはGoogle FontsからInter TightとBangersを読み込むため、レンダリング中はインターネット接続が必要です。
- コミックスタイルの単語の表示タイミングが遅れる： 音声がある場合、カウントダウンは
voice.jsonから単語のタイミングを読み取ります。comic.jsで検索する単語を変更してください。
あなた自身の作品に
ルックはコピーして、独自の被写体を作成してください。ブランドのロゴ、ゲームのキャラクター、実際の会社のセットピースを画面上で使用しないでください。また、他のクリエイターのシーンをそのまま模写しないでください。