Motion
まず、/hyperframes（レンダリング契約）スキルを読み、次に brand/DESIGN.md を読んでください。プロダクションフォルダは templates/base/ のコピーです。
ベース
templates/base/index.htmlには、カラー変数、フォント、3Dインターフェイスプレーン（#world）、ガラスカードのスタイル、キャッシュ、インジケーターが既に含まれています。これらのクラスは維持し、スタイルを再発明しないでください。- 動画が10秒を超える場合は、
compositions/内に各サブコンポジション用のシーンを作成します（ルートにはシーンホスト、オーディオ、背景ワールドのみを残します）。 - GSAPはローカル（
assets/js/gsap.min.js）に配置します。CDNは使用しないでください。レンダリングはネットワークなしで行われます。 - フォント：
@font-faceでassets/fonts/を参照します。
モーション（スタジオ規定値）
| アクション | 値 |
|---|---|
| テキスト出現 | キャッシュから：yPercent 110 → 0、0.7～0.85秒、expo.out、行間80msオフセット |
| テキスト消失 | yPercent 0 → -110、0.36～0.4秒、power3.in |
| ガラスカード出現 | y +1250 → 0、1.1秒、expo.out |
| インジケーター | y 26 → 0 + 不透明度、0.6秒、expo.out、70msオフセット |
| ライン | scaleX 0 → 1（左から）、0.7～0.8秒、expo.out |
| インターフェイスプレーン | 連続線形スクロール、rotationX 56、rotationZ -20 |
| ガラスの反射 | 1動画あたり1回、1.3秒、power2.inOut |
| 数字のカウントアップ | 0.9～1.4秒、power3.out、最終値は四捨五入してそのまま保持 |
技術的禁止事項：letter-spacing、width、top、left のアニメーション；GSAPがアニメーションする要素へのCSS transform；タイトルへの filter: blur；背景のハローやグラデーション（DESIGN.md 参照）。
実際のインターフェイス
アプリケーションを表示するには、実画面キャプチャ（公開サイト（例：mescentimes.cloud）の場合 npx hyperframes capture <url> --json）を使用するか、FCFA単位の実際のデータを用いてHTMLで画面を再構築します。クライアントの偽ロゴは絶対に使用しないでください。
チェックしてからレンダリング
npx hyperframes check --json # エラーゼロ
npx hyperframes snapshot --at <キーフレームのタイムスタンプ> # 各フレームを確認
npx hyperframes render --output renders/<スラッグ>.mp4
レンダリング後：携帯電話で6枚のスチルを抽出し（ffmpeg -ss T -i … -vf scale=540:-2）、納品前に確認してください。