Japanese motion-graphics explanation of a code-rendered film pipeline

Claude Opus5.5 モーショングラフィックス ──────────────────── 天才Opus5.5にどうやって作ったのか 説明させてみた（↓） ───────── ■ 全体の流れ index.html（絵を描くプログラム） ↓ 1コマずつ描かせる render .py（900コマを撮って動画ファイルにする） ↓ make_audio.py（音楽を計算で作る） ↓ 合体して MP4 ① すべてを「拍」で決めている いちばん大事な考え方です。テンポを 128BPM にすると、32拍でちょうど15秒になります。「4拍目で MOVE が出る」「28拍目で爆発」のように、映像の出来事をすべて拍の番号で書いています。音楽も同じ拍の番号で鳴らしています。だから、映像と音がずれる余地がありません。手作業のタイミング合わせは一度もしていません ② 動きは「イージング（緩急）」の数式 たとえば文字が滑り込む動きは、「0→1 に進む割合」を数式で曲げて作っています。最初速く、最後ゆっくり止まる（expo）：MOVE の滑り込み 少し行き過ぎて戻る（back）：SHAPE の文字がポンと出る 跳ねて止まる（bounce）：RHYTHM の文字が落ちて弾む グラフエディタの場面はこの「緩急の曲線」そのものを見せる演出です。モーションデザイナーが毎日さわる道具なので分かる人ほど「おっ」となるところです。 ③ 図形の変形・3D・粒子もすべて計算 丸→四角→三角→星：図形のまわりを240点で表し、同じ点同士を少しずつ動かして変形させています トンネルとワイヤーの立方体：遠くの物ほど小さく描く計算（遠近法）を自分で書いて、3Dっぽく見せています。 最後の CLAUDE：一度見えないところに文字を描き、文字の形の点を約5,000個拾っています。その位置へ粒子を集めています。 ④ 仕上げの質感 モーションブラー：1コマを、ほんの少しずつ時間をずらして10回描き、平均しています。速い動きがなめらかにぶれて、映像らしくなります（5回だと残像が段々に見えたので10回にしました） グリッチ：赤・緑・青の色を分けて左右にずらし、画面を横に切ってずらしています フィルムの粒子・周辺の暗さ：薄いノイズを毎コマ違う位置に重ねています 四隅の表示（タイムコードなど）：「白黒反転」の重ね方で描いているので、どの背景色でも読めます ⑤ 書き出し render. py が、画面を持たない Chrome を裏で起動します。「0コマ目を描いて → 画像を受け取る」を900回くり返し、そのまま ffmpeg（動画を作る道具）へ流して MP4 にしています。約6分かかりました。 ⑥ 音楽も計算で作っている 楽器の音を、波の形の計算で作っています。 キック：低い音が一瞬で下がっていく波 ハット・スネア・「シュッ」という効果音：ザーッという雑音を削って形を整えたもの 和音：少しずつ音程をずらしたノコギリ波を7本重ねたもの さらに、キックが鳴るたびに他の音を一瞬小さくして、クラブ音楽っぽいうねりを出しています。最後の決めの直前には、わざと0.1秒ほど完全な無音を入れて、爆発の落差を大きくしています。

— 妖精アーヤ (@aiehon_aya) Sep 25, 2026