デザイン
Webの動きや見せ方を試しながら、仕組みとコードを残していく場所。
流れ、粒子、輪郭。
光の流れが粒子になり、等高線へ変わるヒーローエリア。文字と操作は手前に置いたまま、背景が24秒で一巡します。
左下の01〜03で質感を選び、右下のボタンで一時停止できます。端末で「視差効果を減らす」を有効にしている場合は、静止状態から始まります。
動きの仕組み
同じ波の形に「光」「粒子」「線」という3種類の描き方を重ね、約2.7秒かけて切り替えています。マウスの位置にも少し反応します。
背景はWebGLでリアルタイムに描画します。動画や外部ライブラリの読み込み、APIキー、サーバー側の処理は不要で、GitHub Pages上でも動きます。WebGLが使えない環境では静止画に切り替わります。
実装コード
デモが実際に読み込んでいるファイルです。ダウンロードしたZIPには、以下の4ファイルと代替表示用の画像、説明を含めています。
参考にしたもの
And Idea — Creative Toolsの、変化する背景の手前に文字と操作を固定する構成を参考にしました。このデモの背景、配色、文章、描画コードは独自に制作しています。参考サイトの動画・画像・ロゴ・文章・ソースコードは使用していません。
制作日：2026年9月12日（日本時間）。現行の背景アニメーションとHPへの組み込みは、OpenAI
CodexのGPT-6
Astra（gpt-6-astra、推論設定：High）を使用して制作しました。初期試作にはGPT-5.6
Sol（gpt-5.6-sol）も使用しています。代替表示用の静止画はAI生成画像です。