KANMON NOTE
— 15 SEC SHOWREEL

関門海峡エリアの情報メディア「かんもんノート」の15秒ショーリール。青を基調に、海峡・関門橋・ノートをモチーフにしています。素材ファイルなし・ブラウザのCanvasとWeb Audioだけで描画と音を生成しています。

参考:前回の汎用パターン
00.00 / 15.00

「動画に書き出す」を押すと頭から15秒を再生しながら録画し、WebM(Safariでは MP4)でダウンロードします。書き出し中はタブを前面に表示したままにしてください。

01 / 海峡ノート

青と白。「ノートに書いた一本の線が関門海峡になる」という流れ。

  1. 罫線が引かれ、ペンが波線を描く
  2. 波線が海になり、下関・門司の陸がせり上がる
  3. 主塔→橋桁→ケーブル→ハンガーの順に橋が架かる
  4. 船が海峡を渡り、「関門海峡」
  5. ノートカード:お店/イベント/事業者
  6. かんもんノート ロックアップ → 1コマ目へループ

02 / 夜の海峡

紺と光。灯りが一つずつ点いていく夜景演出。

  1. ケーブルの灯りが左から右へ点灯、水面に反射
  2. 橋を走る車の光、両岸の街あかり
  3. 縦書き「関門海峡」
  4. お店/イベント/地域の事業者/情報 がNOTEにつながる
  5. かんもんノート ロックアップ

A / KINETIC TYPE

120BPM。1拍＝0.5秒に合わせて単語を叩きつけるタイポグラフィ。

  1. 線が走り、赤が画面を割る
  2. MOVE / SHAPE / TIME / FEEL / FLOW を毎拍スラム
  3. 横スクロールする7段の文字帯
  4. 赤い円＋回転する文字リング
  5. 0.25秒カットの高速カウントダウン
  6. SHOWREEL 2026 ロックアップ

B / PARTICLE FLOW

すべての粒子の位置を「時刻の関数」で計算しているので、シークしても同じ絵になります。

  1. 26本の光の弦がうねる
  2. 弦がほどけて “FLOW” を形成
  3. 爆散して回転する球体へ
  4. 奥へ吸い込まれるトンネル
  5. “SHOWREEL” に再集結し、上昇して消える

C / BAUHAUS POP

クリーム地に赤・青・黄・墨。図形のバウンドとワイプ転換で見せるポップ系。

  1. 9つの図形が跳ねながらグリッドに着地
  2. 毎拍90°スナップ回転＋色替え
  3. 斜めストライプのワイプ → 黄色い円と波形
  4. 12個の振り子ウェーブが丸→四角に変形
  5. MAKE IT MOVE. でフィニッシュ