1仕組みと動作原理
技術非依存の基盤層：技術スタックを選ばず、あらゆる実装にそのまま引き渡せる「具体的な数値」（デュレーション、cubic-bezier、stagger オフセット、spring 設定）を出力。
skills/animation-principles/SKILL.md
It does not pick a tech stack; it produces concrete numbers (durations, cubic-bezier curves, stagger offsets, spring configs) ready to hand to any implementation.
ここで行っていること：「心地よい動き」を伝達可能なパラメータに分解し、Remotion / GSAP / CSS / 手動キーフレームのいずれの実装パスでも活用できるようにする。本パック内の他のスキル（構図、ブランドガイドライン、クリエイティブブリーフ）から頻繁にクロスリファレンスされる理由もここにあります。
数値を決める前に「3つの柱（感情の意図 / 視覚的ナラティブ / モーションの技巧）」を確立する。このステップを省略すると「技術的には正しいが感情が宿らない」動きになる。
skills/animation-principles/SKILL.md
Every piece of motion should answer three questions *before* you pick a duration or curve.
ここで行っていること：下流のすべての数値決定に対して事前のゲートウェイを設置。「真っ先にデュレーションを尋ねる」というありがちな順序の逆転を是正します。
3層モーションモデル（Primary / Secondary / Ambient）を用いて「平坦さ」を説明し、判断層スキルの Hero / Support / Texture と明示的に対応付ける。
skills/animation-principles/SKILL.md
Flat motion = only the main thing moves. Believable motion runs three layers at once:
ここで行っていること：「主要素しか動いていない」状態を平坦さの根本原因と定義し、2つの用語体系が衝突しないよう類語マッピングを提供。shot-composition ではこれら3つの役割を Z 軸に投影し、視差速度として扱います。
イージングを最大のレバーと位置づける：linear は連続ループ専用とし、個別のイベントには必ず加速度を持たせ、入場／退場／移動／ブランドの4系統に応じた具体的なカーブを提示。
skills/animation-principles/SKILL.md
Linear motion reads as robotic. Reserve `linear` for continuous loops (spinners, marquees, infinite scroll) only.
ここで行っていること：「入場に linear を使ってしまう」という頻出ミスに直接対応。各系統のカーブはコピー＆ペーストしてそのまま使えるよう、小数点以下4桁の精度で提供されます。
要素のスケールに応じてデュレーションを4段階（マイクロインタラクション 100-200ms → シネマティックショット 800-2000ms）に分類し、距離や面積の変化に合わせてデュレーションを等比拡大させる。
skills/animation-principles/SKILL.md
Distance and size scale duration.
ここで行っていること：「すべての要素に同一のデュレーションを適用してしまう問題」に対して定量的ルール（距離や面積が約2倍になるごとに所要時間を 30-50% 追加）を提示し、異なるスケールの要素でも知覚速度をほぼ一定に保ちます。
「要素が一斉に出現する」のを防ぐため、スタッガーと1/3ルールの2形態を活用——リストは 40-80ms、高密度グリッドは 20-40ms、全体時間は 600-800ms の上限で抑制。
skills/animation-principles/SKILL.md
Never reveal a list, grid, or group all at once — it reads as a single flat event. Stagger each child's start.
ここで行っていること：「リズム」を計算可能なパラメータに分解（要素数 × オフセットが上限を超える場合は距離ベースのスタッガーへ切り替え）。1/3ルールの「同時性」の形態は、ブランドガイドラインスキルでスタッガーの上限を論証する際にも引用されます。
診断テーブルを用いて症状を根本原因（stiff / floaty / cheap / mechanical）へ逆マッピングし、レビューを実行可能な修正チェックリストに変換。
skills/animation-principles/SKILL.md
- **Feels stiff/robotic** -> using `linear` or symmetric easing on an enter; switch to ease-out.
ここで行っていること：ユーザーは往々にして「なんとなく違和感がある」としか言えません。このテーブルは感覚的な形容詞を原因と処方箋へ変換します。client-revisions における曖昧なフィードバックの翻訳と同じ設計思想の別側面です。
手動キーフレームの手法を AE の Graph Editor にマッピング：F9 の Easy Ease は単なる 33% の対称な起点に過ぎず、非対称に作り込む必要がある。
skills/animation-principles/SKILL.md
`F9` (Easy Ease) is only a 33% symmetric starting point — make it asymmetric.
ここで行っていること：原則を AE の具体的な操作テクニック（Speed Graph の形状、influence の数値、overshoot / anticipation / bounce のレシピ）へと落とし込み、数値カーブと手動キーフレームの両方の制作パスをカバーします。
2コア機能
01命名済み cubic-bezier ライブラリ（入場／退場／移動／overshoot の4系統 + Material 標準カーブ + iOS 近似値）
02デュレーション段階表（マイクロインタラクション／UI トランジション／ヒーロー要素／シネマティックショット）+ 距離-デュレーションのスケーリング規則
03スタッガーとリズム：リスト 40-80ms、グリッド 20-40ms、総所要時間の上限と距離ベースのスタッガー
04spring と duration-based の選定基準（中断可能なインタラクションには spring、タイムライン固定のシーケンスには duration + カーブ）
05物理的直感の3点セット：anticipation（予兆）、follow-through / overlapping（追従／重複）、arcs（円弧運動）
06ビート同期（BPM グリッド量子化）と音楽がない環境下での視覚パルス設定
07AE Graph Editor の手動クラフト：Speed/Value Graph、influence/velocity の数値、overshoot / anticipation / bounce の段階的レシピ、減衰バウンスエクスプレッション
08アニメーション12原則の画面内モーション向け数値化改変（UI における重要度順にソート）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | @react-spring/web（示例 spring 预设值，仅作参考实现） |
| package | SwiftUI / iOS 动画 API（示例 spring 写法，跨平台参考） |
| package | After Effects Graph Editor（手工缓动的落地工具） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: スクリプト実行や外部影響を一切持たない、純粋なプロンプト指示およびルールテキスト
監査ノート： 純粋な指示・数値方法論：スクリプトなし、実行ファイルなし、外部ネットワーク送信なし、クレデンシャルの読み込みなし、ローカルディスクへの書き込みなし。唯一の「外部要素」はコード例（@react-spring/web、SwiftUI、AE Graph Editor 操作）ですが、これらは実装側またはユーザー側の操作に属し、本スキルの実行時動作を構成するものではありません。留意点は、対話的な性質（推奨カーブやデュレーションが一定の美意識・トーンを規定すること）およびドメイン数値はプロジェクトの実情に合わせて検証・調整が必要であることのみです。
5二重目の独立検証
- [ok] SKILL.md 的曲线值是否与 reference 一致（防两处打架） — SKILL.md 的 Quick reference（Enter `cubic-bezier(0.16, 1, 0.3, 1)`、Exit `(0.7, 0, 0.84, 0)`、Move `(0.65, 0, 0.35, 1)`、Branded `(0.34, 1.56, 0.64, 1)`）与 easing-curves.md 的分族库同型；但 reference 另列一套 Material 标准曲线（如 `0.2, 0, 0, 1`），两套体系并存且文档未给裁决规则——属文档分层而非矛盾，已在 risks 记录。
- [ok] 是否真的没有脚本或可执行资产 — 清点后目录内只有 5 个文件（SKILL.md、3 本 .md reference、1 个 0 字节 README），无 .js/.sh/.py/.json。
- [ok] 「技术无关」声明是否成立（有没有偷偷选边） — 自带代码示例覆盖 CSS 曲线、Framer Motion、react-spring、SwiftUI 与 AE 手工关键帧，且 SKILL.md 明确说「不选技术栈」；示例之间是并列参考，无强制依赖。
- [ok] 交叉引用是否指向真实存在的上游（本 pack 内） — 被引的 motion-art-direction（Hero/Support/Texture）与 shot-composition 都在同一仓库 skills/ 下存在；引用只做术语对齐，不要求安装额外 skill。
- [unlocatable] 「距离或面积翻倍加 30-50% 时长」等缩放系数的来源 — 这是经验规则，pin 仓库内无出处、无测量脚本、无数据文件。作为文档声明记录，不当作已核事实；实际项目应以感知测试校准。
6結論
最適な用途： 「動きをどう動かすべきか」に関わるあらゆるシーンに最適：ぎこちない／浮いている／安っぽい動きの修正、入場／退場カーブとデュレーションの選定、リストへのスタッガー適用、spring を採用すべきかの判断、モーションと音楽ビートの同期、チーム内でモーション言語を統一する際の判断基準の策定。また、他のスキル（構図、ブランドモーションガイドライン、クリエイティブブリーフ）の下流を支える理論的基盤としても機能します。
不向きな用途： 不適合な用途：① 具体的な実装コードやコンポーネントが必要な場合（gsap-web、remotion-video、web アニメーション系スキル等を利用してください。本スキルはパラメータ層までしか扱いません）；② ビジュアルの方向性やブランド個性の意思決定が必要な場合（motion-art-direction の判断層を利用してください）；③ プラットフォームのエンジニアリング詳細（エンコード／デコード、レンダリングパイプライン等）が必要な場合（after-effects や remotion などの担当領域です）；④ すべての数値に権威ある公的典拠を求めるコンプライアンス環境（提示される数値は実務上の経験値です）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload animation-principles.tar.gz
sha256:
Option B · Copy Guide for Agent069d807fa45f71f5…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.