MOTION LAB

キネティック・モーショングラフィック

文字や図形だけが音楽のリズムに合わせて動き、最後にロゴになる、約20秒のスタイリッシュなタイトル映像です。

制作のポイント

点・線・面・文字・色だけで構成した、144BPM の拍に同期するモーショングラフィック。すべて HTML と GSAP で描き、画像素材は使っていない。Suno で作った曲の拍に1拍単位で合わせ、スクイーズ＆ストレッチの文字、グリッドの波、SVG パスの描画、帯のスライドを経てロゴに組み上がる。

• 拍グリッドに合わせたタイミング設計
• 楽曲のビート検出と頭合わせ
• キネティック・タイポグラフィ
• スクイーズ＆ストレッチ
• グリッド・スタッガー
• clip-path による図形モーフ
• SVG パスの描画とパス追従
• mix-blend-mode によるロゴ合成
• 効果音のタイミング同期

長さ

0:22

画面

横長 1920×1080

音楽

Suno

効果音

ElevenLabs

映像の組み立て

HyperFrames、GSAP