motion-frames

モーションフレームスキル

画面全体に広がるモーションコンポジションを1つ作成します。インライン CSS アニメーションのみを使用します。ページそのものをループさせます。エクスポーター（HyperFrames、 Lottie など）が動画としてキャプチャできるポスターフレームとして扱います。

ワークフロー

1. 現在の DESIGN.md を読みます（上に挿入されています）。モーションの良し悪しはタイポグラフィのコントラストで決まります。見出しには、DS の中で最も表現力のあるセリフ体／ディスプレイトークンを選びます。本文／等幅トークンは、それ以外のすべてのラベルに使用します。
2. キャンバスを構成します。以下のレイヤーを背面から前面の順に重ね、16:9 のヒーローとして構成します。
   • ステージ — 全画面に広がる <main>。オフホワイトまたは DS のキャンバス背景に、ごく控えめなドットグリッドテクスチャを加えます（CSS 背景、22〜32px 間隔の radial-gradient ドット）。
   • 同心円 — 焦点から広がる SVG の円を2〜3個配置します。DS のフォアグラウンドカラーを使い、極細の線（0.5〜1px）で低い不透明度にします。それぞれ異なる速度（60s、90s、180s）で回転させます。
   • フォーカルマーク — ワイヤーフレームの地球儀、様式化したオブジェクト、またはインライン SVG で描いたタイポグラフィのモノグラムを配置します。キャンバス幅の約28%にします。
   • リングラベル — リングの周囲に短い単語や音声表記のトークンを配置します（例：「Hola · Bonjour · 你好 · नमस्ते」）。リングと一緒に回転させ、<text> パスは逆回転させて単語が正立した状態を保ちます。
   • 見出し — 左下または中央下に配置します。ディスプレイセリフ体を使い、1つの単語をイタリック体でアクセントにします。控えめな letterSpacing と不透明度の表示アニメーション（@keyframes type-in）を加えます。
   • フレーム装飾 — 隅に配置するスタンプ（左上のラボタグ、右上のブランド名または号数）と細いベースラインの罫線を配置します。静止させます。
3. アニメーションを設定します。JavaScript は使わず、@keyframes のみを使用します。
   • リングには rotate-slow、rotate-med、rotate-fast を使います。
   • フォーカルマークには globe-spin を使います。
   • フォーカルドットには、イージングを付けた約2秒の pulse を使います。
   • 見出しを読み込み時に一度だけ表示するには marquee-fade を使います。
4. 単一の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを記述し、CSS はインラインにします。
   • モーションには CSS のみを使用します。スクリプトは使わないため、HyperFrames などのフレームキャプチャツールで、確実にキャプチャできます。
   • ステージ、フォーカル、リング、見出し、フレーム装飾に data-od-id を指定します。
5. セルフチェックします。
   • フレーム0でモーションを一時停止しても、構成がポスターとして成立しています。
   • 速度差によって奥行きを表現し、パララックスの演出に頼らず、少なくとも3つのレイヤーを異なる速度で動かします。
   • アクセントは1か所だけにします。通常は見出しのイタリック体の単語にします。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文を記述し、その後には何も記述しません。