HTML モーション グラフィックス は何をしますか？
GSAP、方向性SVGモーションブラー、統一#worldカメラリグ、およびオプションのThree.js WebGL背景を活用して、サーバーレスでスタンドアロンなindex.htmlファイルとして、シネマグレードの決定論的モーショングラフィックスを構築します。
使用するタイミング
index.htmlでプロモーションビデオ、プロダクトローンチオープナー、ティーザー、ブランドバンパーを作成する場合。- キネティックタイポグラフィ、SaaS UIプロダクトツアー、マルチシーンビジュアルエクスプレーナーを構築する場合。
- 静的なスライドのようなウェブアニメーションを、真のカメラ駆動型モーションデザインに変換する場合。
file://で直接開くことができ、フレーム正確なスクラビングとヘッドレスMP4レンダリングをサポートする、ポータブルなindex.htmlを提供する場合。
コアワークフロー
ステップ1: クリエイティブブリーフとコンセプトフレームの確定
コードを書く前に、簡潔なスタイルブリーフを定義して、出力が汎用的なスライドショーテンプレートのように見えないようにします。
- アスペクト比と解像度: デフォルトはデスクトップ/YouTube用に
1920x1080（16:9）、またはReels/TikTok/Shorts用に1080x1920（9:16）（9:16ソーシャルHUDクリアランスのために、コンテンツをtransform-origin: 50% 45%で0.78にスケーリングされた.safeコンテナでラップ）。 - コンセプトアーキテクチャ: デフォルトの
フック -> 3つのアイコンタイル -> CTAではなく、主題に基づいた明確な構造コンセプトを選択します。- 連続ワールド/カメラジャーニー: カメラがシーンの中をドリー、オービット、またはダイブする単一の統合空間。
- リビングUIツアー: カーソル/タップがインタラクトし、パネルが拡張し、データが決定論的にアニメーションする、再構築されたDOM/SVGプロダクトコンポーネント。
- 問題から明確化へ: ビジュアルカオスが構築され、その後単一のプロダクトアクションがフレームを掃除してブランドマークにする。
- 純粋なキネティックタイポグラフィ: 単語が様々な軸から進入し、ウェイト/スケールを変化させ、最終的なマークに組み立てられる。
- ステージカートゥーン/連続アクション: キャラクターまたはヒーローサブジェクトがアクティブなまま、背景、インストゥルメント、およびダイジェティックラベルがその周りで変化する。
- カラーとサーフェスシステム: CSSカスタムプロパティ（
--base、--ink、--accent、--accent-lit）を定義します。フラットな単一色の背景にしてはなりません。少なくとも2つのレイヤーを組み合わせます（例: ラジアル水平線グロー + リニアグラデーション、ソフトメッシュブロブ、またはWebGLネビュラ + ドリフトダスト + SVGフィルムグレインオーバーレイ）。 - オーディオとタイミング計画: 合計期間（秒単位の
DURATION）を固定し、すべてのビートを秒単位の絶対タイムスタンプにマッピングします。
ステップ2: スタンドアロンindex.htmlアーキテクチャの構築
インライン<style>と`<script type=