anima

anima は何をしますか？

概要

1つの作品 = 短いブランド準拠のモーションアーティファクト：イントロ/ティーザー/告知動画、単一のアニメーションイラスト、またはアニメーションヒーロー。HyperFramesがモーションを生成し、animaがそれをPageFlyらしく見せます。これはテンプレートライブラリではなく、デザインシステムです。再利用可能なのは単一のindex.htmlではなく、3つの構成に依存しないレイヤー（ブランドトークン（references/brand.css、共有IDは_pf-brand/にあり）、モーションガイドライン（references/style-guide.md）、およびブランド準拠のモーションブロックキット（components/））であり、templates/canvas.html上でケースごとに自由に構成されます。Page Checkupのイントロが最初の実例です（examples/before-after/）。illustraと同じモデル（キット + 自由形式の構成 + スタイルガイド + ガバナンス）を、静的アートからモーションに移植したものです。animaとillustraは別々のスキルとして維持されます - animaはケースで静的PNGが必要な場合にillustraを呼び出しますが、互いに吸収し合うことはありません。

HyperFramesをオーケストレーション - 再発明しない

動画の仕組み（構成構造、タイムライン契約、シーン遷移、lint/inspect/validate、レンダリング）：hyperframesスキルに従います。このスキルは以下を追加するのみ：ブランドプリセット（references/brand.css）、モーションガイドライン（references/style-guide.md）、コンポーネントキット（components/）。

ここではHyperFramesのオーサリングルールは重複しません（DRY - HFのアップグレードによるドリフトを回避）。

使用するタイミング

• 短いブランド準拠のPageFlyモーションピースを制作する場合：

  • イントロ / ティーザー / 告知（「PageFlyの新機能: ...」）、
  • 単一のアニメーションイラスト（1つのコンセプトがアニメーションする）、
  • アニメーションヒーロー（動くヒーローセクション）、または
  • フッテージ作品：既存の実際の録画（画面キャプチャ、製品デモ）にカットするブランド準拠のタイトルカード。

  最初の3つは1600x900のシームレスループです。フッテージ作品は1920x1080で線形です - オーサリング前にreferences/style-guide.md -> フッテージ作品を参照してください。

• ケースに明確なビートがある場合：イントロホールド、オプションのビフォー/アフターモーフ、単一機能ホールド。アニメーションイラスト/ヒーローの場合、イントロのタイトルカード（シーン1）はしばしば省略されます。

使用しない場合： 静的マーケティング画像（illustra / feature-demoを使用）、非PFブランド（代わりにreferences/brand.cssを差し替えてください - エンジンはブランドニュートラルで、PFはデフォルトのプリセットです）。

前提条件（2段階）

• 完成した例をレンダリング/スキン変更する場合： npm hyperframes（npx経由、初回実行時に自動取得）+ Node >= 22 + FFmpeg。最初のアクション： npx hyperframes doctorを実行し、不足している依存関係を報告してから先に進みます。
• 新しい作品をオーサリングする場合： さらにhyperframesスキルファミリー（オーサリング知識 - タイムライン契約、トランジション、QA）。これらのスキルはユーザーグローバル（~/.claude/skills/）であり、このリポジトリにはバンドルされていません - PageFlyをクローンしても入手できません。animaはPFの慣習を十分に継承しているため、これらがなくても進められますが、すべての機械ルールをこれらに委譲するため、不足しているとオーサリング品質が大幅に低下します。

新しいマシンでの初回セットアップ

マシンごとに1回実行します。再実行しても安全です - すべての手順は冪等です。

npx hyperframes doctor                                   # 1. Node >= 22, FFmpeg, Chrome, メモリ
cd /tmp && npx hyperframes init hf-bootstrap \
             --example blank --non-interactive           # 2. HFスキルファミリーをインストール
ls ~/.claude/skills/hyperframes                          # 3. 確認: SKILL.md + references/
rm -rf /tmp/hf-bootstrap                                 # 4. 使い捨てスキャフォールド、削除

注意:

• 専用の「スキルをインストール」コマンドはありません。initはプロジェクトをスキャフォールドし、かつスキルをインストールします - 独自の--skip-skillsヘルプテキストによると、「initは常にAIスキルをGitHubと照合します」（CLI v0.7.108で確認; HYPERFRAMES_SKIP_SKILLS=1でオプトアウト）。そのため、使い捨てディレクトリを使用します。このリポジトリ内でinitを実行しないでください - スキャフォールドがスキルツリー内に散らばってしまいます。
• initはプロジェクト名を受け取ります。パスではありません - 上記のように、最初に親ディレクトリにcdします。
• 一度に約15のスキルをインストールします：hyperframes、hyperframes-cli、hyperframes-media、hyperframes-registry、さらにアニメーションライブラリアダプター（gsap、animejs、css-animations、lottie、three、typegpu、waapi、tailwind）およびwebsite-to-hyperframes。
• HyperFramesはClaudeプラグインではありません - マーケットプレイスで探さないでください。
• レンダリングにはネットワークが必要です。 GSAPはcdn.jsdelivr.net（3.14.2固定）からtemplates/canvas.htmlおよびすべてのサンプルで読み込まれ、アップストリームのhyperframesパターンに一致します。オフラインレンダリングは失敗します。

ワークフロー

1. 意図を理解する（まず質問し、次に計画する）。 生成する前に、メンバーに簡単な概要を尋ねます - どの種類か（ティーザー / アニメーションイラスト / アニメーションヒーロー）、どのシーン/ビートか、レイアウト、トランジション - 次に承認を得るため1段落の計画を示します。「とにかく試して」と言われた場合は、概要をスキップして進めます。イントロのタイトルカード（シーン1）はオプションです - アニメーションイラスト/ヒーローの場合は、ケースが「PageFlyの新機能」というフレーミングを必要としない限り、それを省略します。
2. ケースを理解する -> メッセージ + 必要なビート（イントロ？ ビフォー/アフターモーフ？ 単一機能？）。それを1文で述べます：何が新しく、なぜそれが重要か。
3. ステージから開始する。 自由形式の新ケース -> templates/canvas.htmlをコピーします（空白のブランド準拠1600x900ステージ、brand.cssがインライン化され、ループベールが配線されて非アクティブ）。ビフォー/アフターの場合 -> 代わりにexamples/before-after/から開始します。作業ファイルをケースの独自のディレクトリに**index.html**として保存します（HF CLIはディレクトリのindex.htmlを実行します; コミットされたcanvas.htmlはそのままにしておきます）。
4. ブロックを選択する components/から（インデックス：references/component-catalog.md）。各ブロックのマークアップをシーンに貼り付け、その<!-- Timeline recipe -->を単一のtlタイムラインに貼り付け、オフセットをシーンの開始時間に合わせて再調整します。構築する必要がある特注部分に注意してください。アセットを表示するブロック（logo-lockup、before-after-card）は、index.htmlの隣にassets/ディレクトリが必要です - それを作成し、examples/before-after/assets/pf-logo.svgからPFロゴをコピーし、さらに独自のスクリーンショットの切り抜きを追加します。
5. ガイドラインを適用する（references/style-guide.md）：イージング（シーンごとに3以上変化させる）、ブリージンググロー、ループシームベール、ペーシング/ビートアンカー。ラベル、アイブロウ、バッジは共有キット（_pf-brand/label-rules.md + _pf-brand/badges.html）に従います - Poppins、文頭大文字、var(--badge-*)によるソフトバッジ；モノキャップのアイブロウやメタリックピルは禁止。構造的およびタイムラインのルールはhyperframesスキルに委譲します。
6. QA: npx hyperframes lint && npx hyperframes validate && npx hyperframes inspect。オーバーフロー、コントラスト、H.264のバンディングを修正します。npx hyperframes inspect --at 4.6,5.3を使用して特定のビートを確認します。
7. レンダリング: npx hyperframes render。次に、再利用可能なパーツを収穫します - 以下のガバナンススキャンを実行します。

ハードルール

references/style-guide.mdを反映します；完全な動画機構のリストはhyperframesスキルに委譲します。

1. ブランド変数のみ。 ブランドカラー/半径/シャドウをハードコードしない - 常にvar(--...)を使用；アルファティントはcolor-mix(in srgb, var(--token) N%, transparent)を使用してソリッドトークンから導出します（グロートークンはプリベイクされて出荷されます）。これにより、brand.cssを交換することでブランドが変更されます。リテラル例外（スタイルガイドによる）：フォント"Poppins" / "JetBrains Mono"（レンダラーはvar(--font-*)を解決できません）；GSAPカラートゥイーン；SVG stroke；ニュートラル。
2. すべてのシーンでネイビーの不透明背景。 ジャンプカットなし - シーン間は不透明な--bg上のブラークロスフェードです（hyperframesのハードルール）。
3. エントランスのみ。 最終ビートを除く。すべての要素をINにアニメーションさせる（gsap.from / fromTo）；終了トゥイーンはループテールにのみ存在します。
4. 絵文字なし。 アイコングラフィは手描き - CSSドット、描画されたSVGチェックパス、緑のピル - 絵文字グリフは禁止。
5. 決定論的。 Math.random() / Date.now()なし；有限の繰り返しのみ（repeat: -1は禁止）- レンダリングは再現可能でなければなりません。
6. シームレスループ（ループ作品のみ）。 ティーザー/アニメーションイラスト/ヒーローの場合：グローは非表示で開始され、#loopveilがT終了付近でネイビーにフェードインするため、最終フレーム == フレーム0になります。フッテージ作品はループではなく線形です - それでもクリーンなテールのためにベールで閉じますが、フレーム0と最終フレームが一致する必要はありません。

ファイルマップ

パス	役割
.claude/skills/_pf-brand/	ブランドIDトークン + バッジパレット + ラベルルールの信頼できる情報源（brand-identity.css、badges.html、label-rules.md）。これはanimaのサブディレクトリではなく、兄弟スキルディレクトリです - このスキル内のすべての裸の_pf-brand/はこのパスに解決されます。レイヤーA + バッジはここからreferences/brand.cssに同期されます。現在はanimaによって消費されています；illustraは引き続き独自のフォークをillustra/references/brand.cssに保持しており、このファイルを読み取りません。
references/brand.css	ブランドプリセット：レイヤーA ID + バッジパレット（_pf-brand/から同期）+ レイヤーB動画サーフェスパレット。ブランド変更のために交換します。
references/style-guide.md	モーションガイドライン：ペーシング、イージング、グロー、ループシーム、トランジション、ラベル/バッジ、Do/Don't。トレーニング台帳 - すべての改良を追記します。
references/component-catalog.md	キットインデックス + プロモーションガバナンス + 構築パーツログ。
components/*.html	自己完結型モーションブロック（pf-接頭辞）：先頭コメント + スコープ付き<style> + マークアップ + <!-- Timeline recipe -->。ケースのタイムラインに貼り付けます。
templates/canvas.html	空白のブランド準拠1600x900 HFステージ；brand.cssがインライン化され、ループベールが準備完了。自由形式のケースはここから開始します。
examples/before-after/	Page Checkupイントロ = 実例、data-composition-variablesでパラメータ化されています。ビフォー/アフターの場合はここから開始します。

レンダリングはnpx hyperframes renderを直接実行します - 特注のレンダリングスクリプトはありません（Playwright PNG用のrender.mjsを持つillustraとは異なります）。

ガバナンス - トレーニングモデル（「毎回やり直さない」）

すべての改良は共有レイヤーに蓄積され、使い捨てファイルには決して保存されません：

• ブランドカラー/グローを微調整する -> references/brand.css（ID + バッジパレットは_pf-brand/にあります）
• ラベル/バッジのテイストを変更する -> _pf-brand/label-rules.md + _pf-brand/badges.html
• 新しいイージング/ペーシング/テクニック（「モダンPF」）を確定する -> references/style-guide.md
• 2回目に手作りされたブロック -> 提案+承認を経て**components/にプロモートします**。

各作品の後、手作りしたものを3つの基準に対してスキャンします：

1. 再利用可能 - このケースのコンテンツに固有ではなく、汎用的なモーションコンセプト。（「別の機能でこれをもう一度構築する可能性はあるか？」）
2. 自己完結型かつパラメータ化可能 - 独自のマークアップ + スコープ付きCSS + クリーンなタイムラインレシピ；テキスト/カラー/サイズを受け入れます。
3. ブランド準拠かつクリーン - varのみ、スタイルガイドに従います。

すべて3つを満たす -> プロモートを提案します：新しいcomponents/<name>.html + component-catalog.mdの構築パーツ行（メンバーへのYes/No；自動追加は禁止、技術的判断を依頼することも禁止）。 強いシグナル： 2回目に構築されたパーツはほぼ常にプロモートされます。キットはリーンに保ちます（YAGNI）- 実際のケースで必要になるまでパーツをシードしないでください。使用するたびにキット＋ガイドラインが充実するため、次の作品はより少ない作業で済みます。デフォルトのゲート = 提案+承認。