ギャラリーへ戻る

モーショングラフィック

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

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

使った技法

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