ジェネラティブ演出
アルゴリズムが描く、絵そのものが主役の表現。
アルゴリズムが描く絵そのものが主役の、Canvas 表現のカテゴリ。打ち上げ花火、水面の波紋、紙吹雪バースト、星空と流れ星、降る雪、泡、パーティクルテキスト、描く線の軌跡、ジェネラティブ背景グリッド、ランダムウォークの木がある。いずれもクリックやポインタに反応し、重力・減衰・バネのような物理で動く。原則は美的ユーザビリティ効果。絵が美しいこと自体が価値になる稀なカテゴリだが、その分、動き続ける絵は本文の可読性を奪う。ヒーロー背景や完了画面のような「絵が主役でよい場所」に限って引く。
使い分け静かな常時背景は generative-dot-grid / starry-sky / falling-snow、操作に応える演出は water-ripple / fireworks-canvas / random-walk-tree。完了の祝祭は confetti-canvas-burst を1回だけ。文字を主役にするなら particle-text-form。どれも1ページに1つ。
まず見る3件
- クリック
打ち上げ花火
Canvas Fireworks
クリック/タップした座標へロケットが打ち上がり、放物運動で必ずその位置で開花する。重力+空気抵抗で減衰するパーティクルと加算合成の発光で花火らしさを出す。
- 初速は目標高さから逆算（vy0 = −√(2g·dy)）し、横速度は到達時間で割る。押した場所で必ず開くのが「反応した」実感になる
- 軌跡は clearRect ではなく低アルファ（0.16）の塗り重ねで消す。lighter のまま塗ると消えずに残る
- 開花は中心 15% を遅く白く、外側を速く彩色にする。一様な速度だと輪郭だけの輪になる
- JS
- Canvas
- ホバー
パーティクルテキスト
Particle Text Formation
テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。
- サンプリング間隔 3px・粒 1.5px で 800 太字を読める密度にする。間隔を広げると字が破線になる
- 帰巣はバネ定数 60・減衰 8.5 の臨界近く。減衰が弱いと文字が震え続け、強いと戻りが鈍く見える
- 反発は半径 46px・力 900 を距離で線形に弱める。一定の力だと境界で粒がはじけ飛ぶ
- JS
- Canvas
- 自動再生
ジェネラティブ背景グリッド
Generative Dot Field
格子状のドットが位置ごとに位相をずらしたsin波でゆっくり明滅・拡縮する、静かに動き続けるヒーロー背景。カーソルを近づけると周囲のドットがわずかに明るくなる。
- 位相は col·0.5＋row·0.5 で斜めに揃える。乱数位相だとノイズ、行だけだと縞になり、斜めが波に見える
- 明滅は alpha 0.14〜0.48・半径 1.1〜2.7px の狭い幅。振幅が大きいと背景なのに視線を奪う
- 上のテキストは pointer-events none にして canvas がポインタを拾う。見出しの下でも反応が途切れない
- JS
- Canvas
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 打ち上げ花火 Canvas Fireworks | クリック | JS / Canvas | 購入完了・達成画面の祝祭演出・年末年始・イベントLPの遊び要素 | default |
| 水面の波紋 Water Ripple Effect | クリック | JS / Canvas | 和風・水をテーマにした LP のヒーロー・タップ反応のある待機画面・スプラッシュ | default |
| 紙吹雪バースト Canvas Confetti Burst | ホバー | JS / Canvas | 注文・送信完了の祝祭演出・達成バッジ・レベルアップの通知 | default / hover / active |
| 星空と流れ星 Starfield with Shooting Stars | 自動再生 | JS / Canvas | 夜・宇宙をテーマにしたヒーロー背景・静かに動く待機画面 | default |
| 降る雪 Falling Snow | 自動再生 | JS / Canvas | 冬・年末のキャンペーン LP・季節感を出す背景演出 | default |
| 泡・バブル Rising Bubbles | クリック | JS / Canvas | 水・飲料・清潔感のある商品 LP・明るい配色の待機・演出面 | default |
| パーティクルテキスト Particle Text Formation | ホバー | JS / Canvas | ブランド名・キャッチを粒子で見せるヒーロー・ポインタで散る遊びのある見出し | default |
| 描く線の軌跡 Pointer Trail Ribbon | ホバー | JS / Canvas | ポートフォリオ・遊び心のあるトップ・描く体験を主役にした演出面 | default |
| ジェネラティブ背景グリッド Generative Dot Field | 自動再生 | JS / Canvas | テック・SaaS のヒーロー背景・静かに動き続ける演出面 | default |
| ランダムウォークの木/枝 Random Walk Growing Tree | クリック | JS / Canvas | 自然・成長をテーマにした演出面・タップで育つ遊びのある待機画面 | default |
すべての見本（10件）
- クリック
打ち上げ花火
Canvas Fireworks
クリック/タップした座標へロケットが打ち上がり、放物運動で必ずその位置で開花する。重力+空気抵抗で減衰するパーティクルと加算合成の発光で花火らしさを出す。
- JS
- Canvas
- クリック
水面の波紋
Water Ripple Effect
クリック/タップした場所から波紋が広がる。複数の波紋が同時に重なり合い、揺らぎのある輪郭と加算合成の光の縁でシェーダーなしでも水面らしさを出す。ドラッグでなぞると航跡状に波紋が連続発生する。
- JS
- Canvas
- ホバー
紙吹雪バースト
Canvas Confetti Burst
ボタンを押すと画面上部から紙吹雪が舞い落ちる。矩形パーティクルをscaleYで周期的に潰し3D回転のフラッターを近似、重力+左右の揺れで落下させる。EC購入完了・フォーム送信完了などの祝祭演出に。
- JS
- Canvas
- 自動再生
星空と流れ星
Starfield with Shooting Stars
自動で瞬く星空に、数秒おきにランダムな流れ星が横切る。カーソルを乗せる/触れると近くの星がひときわ強く輝く。
- JS
- Canvas
- 自動再生
降る雪
Falling Snow
奥行き(z)を持った雪片が自動で降り続ける。マウス/指を素早く動かすとその方向へ風が吹き、雪片が流される。風は時間とともに基準の弱い風へ戻っていく。
- JS
- Canvas
- クリック
泡・バブル
Rising Bubbles
水底から泡が揺らぎながら立ち上る。タップした泡はすぐに弾けて波紋状のリングを残す。画面上端まで届いた泡も一定確率で自然に弾ける。
- JS
- Canvas
- ホバー
パーティクルテキスト
Particle Text Formation
テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。
- JS
- Canvas
- ホバー
描く線の軌跡
Pointer Trail Ribbon
ポインタが動いた軌跡が発光するリボンになり、時間とともに尾を引いて消えていく。PCはホバーで常時描け、スマホは触れている間だけ setPointerCapture で追従して描ける。
- JS
- Canvas
- 自動再生
ジェネラティブ背景グリッド
Generative Dot Field
格子状のドットが位置ごとに位相をずらしたsin波でゆっくり明滅・拡縮する、静かに動き続けるヒーロー背景。カーソルを近づけると周囲のドットがわずかに明るくなる。
- JS
- Canvas
- クリック
ランダムウォークの木/枝
Random Walk Growing Tree
クリック/タップした場所から枝が伸び始める。各枝は角度に小さなランダムウォークを加えながら成長し、伸び切ると確率的に2本へ分岐するか、先端に花を咲かせて止まる再帰的な生成表現。
- JS
- Canvas