givemotion/givemotion

givemotion: HTML を入れて、ビデオを出力

コンポジションは HTML ファイル1つです。全てのフレームは、ある瞬間のそのページです。CSS アニメーション、トランジション、Web Animations、タイマー、requestAnimationFrame、Canvas、WebGL はすべて仮想クロック上で動作するため、記述した内容はフレーム単位で正確に、毎回同一にレンダリングされます。スクリプトタグやインポートは不要です。ランタイム（window.gm）とプリセットスタイルシートが自動的に注入されます。

このファイルが核です（すべてお読みください）。次に、あなたの動画に必要な1〜3個のテクニックレシピのみを読んでください（最後の表を参照）。各レシピは、プロがそのエフェクトをどのように構築するか、数値と動作例を示しています。必要に応じて他の項目も参照してください。

ループ

0. 方向性を決める。 コードの前に、一流スタジオがこのブリーフをどう制作するかを決めてください。ジャンルをリサーチし（可能であれば実例をウェブ検索、そうでなければ記憶から呼び起こす）、HTML の上部に次のように記述します。言葉によるルック、タイプシステム、モーション言語（イージングファミリー、リズム、シーンの受け渡し方）、ショットリスト（各瞬間の1行：時間、画面に表示されるもの、動き、受け渡し）。方法：references/direction.md。
1. スタイルフレーム。 まずキーとなる2〜3フレームのホールドを作成し、静止させ、still で確認します。ポスターとして評価（1つの焦点、階層、マージン）。その後アニメーション化。
2. モーションを記述 し、npx givemotion check video.html を実行しながら進めます。すべての ✖ を修正。⚠ は意図的でなければ実際の欠陥。ℹ はスタイルヒント。
3. 2回レビューする。 npx givemotion review video.html は、視聴者が見るものを書き出します（概要、人が読むフレーム、忙しい瞬間のモーションストリップ）。さらに review/REVIEW.md を書き出します。厳しく採点し、最悪の問題5つを修正し、再度レビューします。新鮮な目はより多くを見つけます。ブリーフとレビューフォルダだけをサブエージェントに渡してください。ブリーフの時間を data-expect に設定します。
4. レンダリング： npx givemotion render video.html -o out/video.mp4。

--json でマシン出力、<command> --help でオプション表示。still video.html -t 3.2 -o f.png で任意の瞬間をレンダリング。inspect --at 4.5 --el "#logo" で要素の位置を確認。

優れたモーションの作り方

エンジンは任意の HTML/CSS/SVG/Canvas とフレーム正確なタイムラインを提供します。ルックはあなたがどのように振り付けるかで決まります。すべての要素が手動で振り付けられた動画は、単一ワードのプリセットで作られた動画よりも、ブラインド視聴者に好まれました。

1. 手動で振り付ける。 重要なものには gm.timeline を使用。明示的な開始時間、動きごとのイージング（速い expo.out の叩きつけ、柔らかい sine.inOut のドリフト、back.out(1.6) の着地）、関連するパーツ間の 40〜120 ms のオフセット。プリセット（data-enter、data-camera）は小さな補助要素にのみ使用。
2. すべてのヒーローモーメントに3層を。 メインの動き。それを売るセカンダリディテール（高速時のブラー、グロー、成長する影、フォロースルー、インパクト時のリングやパーティクル）。そして、フレームが決して静止しないようにするアンビエントモーション（背景のドリフト、スローなカメラプッシュ）。
3. タイミングにコントラストを。 速いイン、遅いセトル。何かが着地した後の 0.4〜1 秒のホールド。エントランスよりも短いエグジット。すべてを同じ速度、同じカーブで動かさない。
4. 色、フォント、コピー、サイズ、タイミングについてブリーフに正確に従う。 あなたのクラフトは物事がどのように動くかに注がれ、余計なコンテンツには注がない。
5. フレーム0がフック。 フレームの端で何も切れていない。テキストは大きい（タイトル 96〜200 px、本文 1080p で 36 px 以上）。各瞬間に1つのヒーロー。シーンは（フェードではなく）プッシュ、ウィップ、モーフ、マッチカットで互いに流れ込む。
6. ものはものから生まれる。 新しい要素はすでに画面上にあるものから生まれ、どこからともなく現れるのではない。3つの円がメインの円から絞り出される。画面上の長方形の1つがスライドして下線になる。クリックされたボタンからカードが成長する。ロゴのマークがエンドカードのマークになる。追加する前に再利用し、変換する。次のセットを早めに仕込む。 このビートが演奏されている間に、すでに世界に（小さく、薄暗く）存在させ、カメラがそれを明らかにする。
7. カメラの動きは「ここを見て」を意味する。 視聴者が次に読むべきものに向かってのみプッシュインする。単なるトランジションとして空のスペースや古いシーンにズームインしない。シーンを離れるには、横に動く（プッシュ、ウィップ、ワイプ）か、要素を運ぶ（モーフ、上記のルール）。
8. transform/translate/scale/rotate/opacity/filter/clip-path をアニメーション化し、width/top/left は使用しない。
9. すべての要素に計画された寿命を。 イン、読み取り可能なホールド（〜1 秒 + 単語あたり 0.25 秒）、次にエグジットまたは受け渡し。ショットリストが各ホールドを指定する。

階層：一度に1つのことが重要

視聴者は、目が常にどこを見るべきかがわかる動画を好みました。

• すべての行にキーワードがある。 意味を伝える単語にコントラスト（アクセントカラー、太いウェイト、大きいサイズ、または描かれたハイライト）を与える。残りは控えめに。1行に1つ、1画面に最大2つ。すべてがアクセントなら、何もアクセントではない。
• すべての瞬間に1つのヒーローがいる： 最も大きく、最も明るく、最も動きのあるもの。サポートはより小さい（ヒーロー ≥ 次のサイズの 1.6 倍。最大3レベル）、より薄暗い（ミュートまたは 50〜70% の不透明度）、ヒーローの後に到着し、動きは少ない。エフェクト（リング、スパーク）はヒーローをフレームし、決して交差しない。
• 順序に従って目を導く： ヒーローが最初に着地する。キーワードは行が落ち着いてから 0.2〜0.4 秒後に色または下線を取得する。サポートはそれに続く。カメラまたはコールアウトが何かに焦点を合わせるとき、残りを暗くする。
• パレットの役割を厳密に： アクセントは強調のみ、ミュートはセカンダリテキストに。

イージング：動きにカーブを合わせる

• 入るは減速（イーズアウト：expo.out、power3.out、または重量を持って着地する場合は back.out(1.4)）。
• 出るは加速（イーズイン：power2.in）、エントランスより短く（60〜70%）。
• 表示されたまま A から B に移動する（カメラ移動、画面上のもののスケール変更）：イーズインアウト（power2.inOut、sine.inOut）：穏やかに始まり、穏やかに着地。
• アンビエントドリフト： 長い sine.inOut。linear はループ（スピン、ティッカー）のみ。画面上で開始または停止するものは直線的に動かない。
• ease を指定しない場合、エンジンが自動的に処理します（エントランスはスプリングイン、移動はイーズインアウト、エグジットはイーズイン）。自分で設定する場合は上記のルールに従ってください。

最小構成

<!doctype html>
<html data-width="1920" data-height="1080" data-fps="30" data-duration="2.5">
<head>
<style>
  :root { --bg: #0b0d12; --ink: #fff; --accent: #7c9cff; }
  body { background: var(--bg); color: var(--ink); font-family: Inter, sans-serif; }
  .scene { display: grid; place-items: center; }          /* .scene は absolute + 全画面 */
  h1 { font-size: 160px; letter-spacing: -0.03em; margin: 0; }
  .glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: var(--accent); filter: blur(160px); opacity: .25; }
</style>
</head>
<body>
  <section class="scene">
    <div class="glow"></div>
    <h1 id="t" data-split="chars">Hello</h1>
  </section>
  <script>
    gm.timeline('.scene')
      .from('.glow', { scale: 0.6, opacity: 0, duration: 1.2, ease: 'sine.out' }, 0)             // アンビエント：光が咲く…
      .to('.glow', { x: 220, y: -90, duration: 2.5, ease: 'sine.inOut' }, 0)                        // …そして漂い続ける
      .from('#t .gm-char', { y: 140, opacity: 0, filter: 'blur(12px)', duration: 0.7, ease: 'expo.out', stagger: 0.05 }, 0.2) // メイン：高速イン、高速時にブラー
      .fromTo('#t', { letterSpacing: '0.12em' }, { letterSpacing: '-0.03em', duration: 2.4, ease: 'expo.out' }, 0.2)        // ディテール：トラッキングが締まる
      .to('#t', { scale: 1.06, duration: 1.9, ease: 'sine.inOut' }, 0.6);                        // ホールドは呼吸し続ける
  </script>
</body>
</html>

ビルドインフォント：Inter、JetBrains Mono、Playfair Display、Space Grotesk、Bebas Neue、Nunito、Caveat。その他は @font-face で。

タイミングモデル（必読）

• 設定は <html> に記述：data-width、data-height（偶数）、data-fps（デフォルト 30）、オプションで data-duration、data-background。
• 時間は秒単位：1.5、1.5s、500ms、45f（フレーム）、1:02.5。
• クリップ。 data-start、data-duration または data-end を持つ要素は、開始から開始+duration の間だけ存在します（display されます）。時間は親クリップを基準とします。タイミングのない要素は常に存在します。
• 動画の長さ = <html> の data-duration、それ以外は最後のクリップの終わり。
• シーケンス。 コンテナの data-sequence は子要素を順番に再生します。すべての子要素に data-duration が必要。または、コンテナに data-cuts="0 2.13 4.27"（各子要素の開始時間、"beats: 0 4 8" / "bars: 0 1 2" も可）を指定。data-gap="0.2"（負の値はオーバーラップ）。data-transition="<名前> <秒数> [イージング]" は隣接要素をオーバーラップさせ、変化をアニメーション化します。子要素は独自の data-transition（どのように入るか）を設定可能。各トランジションはその長さ分だけ合計時間から差し引かれます：4秒のシーン3つに fade 0.5 を指定すると、合計は 11秒。ビートにカット、data-cut-align、およびシーンの時間0の位置については、references/timeline.md を参照。
• トランジション： push-/cover-/whip-/wipe- + left/right/up/down（push：新しい要素が古い要素を押し出す。cover：新しい要素がスライドして覆う。whip：高速、ブラー付き）、diagonal、clock、iris、zoom、zoom-through（古いシーンが飛び去る）、flip（3D）、dip（黒を通して）、blur、fade-up、fade、そして morph：両方のシーンで同じ data-morph="名前" を持つ要素は、古い場所から新しい場所に飛び、サイズ変更されながら、残りはクロスフェードします。ロゴ、カード、数字をまたいで運びます。1つのシーン内では gm.fly を使用。
• CSS アニメーションはクリップ時間で動作します。 animation: fade-up .6s .4s both は、クリップが表示されてから 0.4秒後に開始します。both（または backwards）フィルを使用して、遅延前に要素が非表示になるようにします。
• 長いシーン内で後から何かが表示される場合（1つのカメラワールド、1つのホワイトボード）：data-enter の遅延は要素のクリップの開始からカウントされるため、data-enter="write 0.8 11.9" はシーン開始から 11.9秒後にラベルを書き込み、それまで非表示にします。追加のクリップは不要。
• gm.onFrame(fn) は動画の時間を取得します（シーン内でも）。gm.onFrame('#s', (local, info, el) => …) は #s の開始からカウントします（gm.timeline('#s') と同様）。
• タイマー、requestAnimationFrame、Date.now()、performance.now() は仮想化されており、Math.random() はシードされています。通常の Web アニメーションコードはそのまま動作します。

タイムライン：正確な振り付け（GSAP スタイル、ビルドイン）

2つ以上の動くパーツがある場合は、gm.timeline を使用します。GSAP でおなじみの API で、時間から計算されます（フレーム正確、並列）。時間は、スコープを含むクリップを基準とした秒単位です。

gm.timeline('#scene2')                                     // スコープ：セレクタはその内部で検索される
  .from('.title .gm-word', { y: 120, opacity: 0, rotate: 8, stagger: 0.06 })   // イージングなし：スプリングイン
  .to('.card', { x: 400, y: -60, scale: 1.2 }, '+=0.3')                 // 弧を描き、距離に応じたサイズ
  .fromTo('.bar', { scaleY: 0 }, { scaleY: 1, stagger: { each: 0.08, from: 'center' } }, '<')
  .to('#line', { draw: 1, duration: 1.5 }, 2)                       // SVG ストロークを描画
  .to('.price', { textContent: 249, duration: 1.5 }, 2.5);          // 数字をカウント
gm.fly('#event', { from: '#slot2', at: 7.5, duration: 0.8 });      // 別の要素のボックスから自身の場所へ飛ぶ

from()/fromTo() は、クリップの開始時点での開始値を表示します（入るまで非表示）。1つのプロパティに対するオーバーラップするトゥイーン：最新の開始が優先。位置、すべてのプロパティとオプション、ラベル、キーフレーム、gm.fly、SVG の注意点：references/timeline.md。

ビルドインのその他機能（references/api.md に表あり）：data-enter/data-exit プリセット、data-split、data-stagger、data-count（-roll）、data-type（タイプライター）、data-scramble、data-camera（push、float、shake…）、data-parallax、data-morph、data-fit、data-pulse、イージング名（GSAP 名が使えます）、プリセット CSS キーフレームと var(--px)、そして既製のブロック（npx givemotion blocks：キャプション、コードウィンドウ、カーソル、ブラウザウィンドウ、チャート…）。

テクニックレシピ（動画に必要なものを読んでください）

動画の内容…	参照
ロゴ、ブランドスティング、イントロ、エンドカード	references/techniques/logo-reveal.md
大きく叩きつける、積み重なる、回転するタイポグラフィ。見出しが主役	references/techniques/kinetic-type.md
テキストリビール：単語/文字、タイプライター、書き込み、スクランブル、ハイライト	references/techniques/text-reveals.md
カメラ移動：プッシュ、フォロー、ウィップ、バンク、ディテールへのズーム、シェイク	references/techniques/camera-moves.md
複数シーンの受け渡し（プッシュ、ウィップ、モーフ、シェイプワイプ）	references/techniques/scene-transitions.md
グロー、ライトスイープ、グラデーション、グレイン、ブラー、深度	references/techniques/light-and-depth.md
数字、カウンター、棒/折れ線グラフ、コールアウト	references/techniques/numbers-and-charts.md
描画される線、ルート、地図、ピン、パスを移動するもの	references/techniques/paths-and-maps.md
フラットなシェイプ：成長、押しつぶし、分割、軌道、モーフ	references/techniques/shapes-and-motion-graphics.md
カーソル、クリック、タイピング、リストがあるアプリ/UI	references/techniques/ui-demo.md
エディタ内のコード、タイピング、行ハイライト	references/techniques/code-on-screen.md
衝撃とエネルギー：叩きつけ、シェイク、バースト、音楽ビート	references/techniques/impacts-and-energy.md
単語ごとのキャプション、縦型 9:16 クリップ	references/techniques/captions-vertical.md
ホワイトボード、スケッチ、手描き	references/techniques/hand-drawn.md
すべての背後にあるリビング背景	references/techniques/backgrounds-and-ambient.md

API リファレンス（必要なときに参照）

こんなとき…	参照
属性、プリセット、イージング名、プリセット CSS、ブロック	references/api.md
gm.timeline の完全版：位置、キーフレーム、ラベル、gm.fly、SVG	references/timeline.md
gm.camera ワールド、ショット、gm.path.travel、ライディング、パララックス	references/camera.md
gm.chart.*、チャートブロック	references/charts.md
ダイアグラム、矢印、data-sketch、gm.connect、gm.shape、パスモーフ	references/diagrams.md
音楽、ビート、ナレーション + givemotion words、ビデオクリップ、キャプション	references/media-audio.md
データ/テンプレート、<gm-in

…

[翻訳のため省略]