Cinematic Web
高品質なWebアニメーションを、アニメーションスニペットの寄せ集めではなく、クリエイティブ開発システムとして扱います。
「映画的にして」といった漠然としたリクエストを、以下の明確な要素に変換します。
- アートディレクション
- アセット戦略
- モーション言語
- スクロール振付
- レンダリングおよびポストプロセッシング計画
- パフォーマンスとアクセシビリティ予算
- 実装
- レビューループ
ワークフロー
- 既存のアプリケーションスタック、ルーティングモデル、レンダリング境界、スタイリングシステムを検査します。
- プロジェクトがDOM専用、Motionベース、GSAPベース、R3F/WebGLベース、Splineベース、Rive/Lottieベース、または混合のいずれであるかを特定します。
- 新しいアニメーション動作を追加する前に、共有のモーショントークンを作成または更新します。
- ユーザーが明示的に簡単な実装を要求しない限り、アートディレクションブリーフ（概要）を作成します。
- 利用可能なアセットでコンセプトを実現できる最小のパイプラインを選択します。
- 正確な振付を使用します：スクロール距離、ピン長、スクラブ値、ラベル、スタガー値、カメラ位置、マテリアル値、イージング、スプリング定数。
- マーカー、パフォーマンスオーバーレイ、調整可能な定数、スクリーンショット、または予算チェックを用いて、洗練の前にまずは計測します。
- すべての看板アニメーションに、動きの少ない環境向けおよび低電力デバイス向けのフォールバックを提供します。
- デスクトップ、モバイル、および動きの少ない環境での動作を確認してから、作業完了とします。
意思決定マトリックス
- 小さなホバー、フォーカス、不透明度/変形効果にはCSSを使用します。
- ステート駆動のUI、レイアウトトランジション、共有要素、ジェスチャー、マイクロインタラクションにはReact用のMotionを使用します。
- ピン留めされたストーリー、長いタイムライン、正確なスクロール振付にはGSAP ScrollTriggerを使用します。
- スクロールの感触とWebGL/DOMの同期が体験の一部である場合にはLenisを使用します。
- ヒーローが真の3Dシーンまたはシェーダー構成である場合にはR3F/dreiを使用します。
- デザイナーが所有するインタラクティブな3Dシーンが情報源である場合にはSplineを使用します。
- インタラクティブなベクターアニメーションとステートマシンにはRiveを使用します。
- リアルタイムのWebGLがパフォーマンス予算を超過する場合には、動画、画像シーケンス、または静的メディアを使用します。
品質基準
以下の場合、結果は許容されません。
- すべてにデフォルトのイージングを使用している。
- 選択せずにシーン全体にグローバルブルームを適用している。
- transform/opacityで十分な場合にレイアウトプロパティをアニメーションさせている。
- 検査や圧縮のガイダンスなしに、重いGLBをそのまま使用している。
- 動きの少ない環境向けのパスがない。
- 遅延読み込みなしの巨大なクライアントコンポーネントに依存している。
- 開発者のマシンでのみ印象的に見える。
モーショントークン
実装前に、以下を含む共有モーションシステムを作成します。
- イージング
- スプリング
- 継続時間
- スタガー
- スクロールスクラブ値
- パララックス比率
- 動きの少ない環境向けの代替値
examples/recipes/motion-tokens.tsをスターターとして使用します。
必要に応じて読み込むリファレンス
- アートディレクションと情報収集：
references/creative-direction.md - 有名サイトをコピーしないためのリファレンス分析：
references/reference-analysis.md - イージング、スプリング、質量、振付：
references/motion-language.md - GSAP + Lenis スクロールシステム：
references/scroll-choreography.md - R3Fシーンアーキテクチャ：
references/r3f-webgl-scenes.md - ブルーム、被写界深度、色収差、ビネット、シェーダー、トーンマッピング：
references/postprocessing-shaders.md - Blender、Spline、Rive、glTFの連携：
references/asset-pipeline.md - スタック選択：
references/stack-decision-matrix.md - パフォーマンス予算とモバイルフォールバック：
references/performance-budgets.md - 動きの少ない環境とアクセシビリティ：
references/accessibility-reduced-motion.md - 最終レビュー：
references/qa-rubric.md
出力要件
実装時には、以下を報告してください。
- 変更したファイル
- 追加または再利用したモーショントークン
- 数値を含む振付の概要
- アセットに関する仮定
- パフォーマンスリスクとその軽減策
- 動きの少ない環境での動作
- 実行方法と確認方法