05

Canvas Effects

AK²-Engine が動かす Canvas エフェクト統合カタログ。
背景オーバーレイ用(セクション背景・ページ全体)に分類して掲載。

A. 四季・情緒系
四季・情緒系

雪の舞い

重力と風のベクトルを計算した結晶の降下。サイン波による左右の揺れで自然な漂い感。サロン・和風・冬テーマに。

effects: [snow] デモを見る
四季・情緒系

桜吹雪

独自の回転軸を持つ花びらが螺旋を描きながら舞い散る。scaleX 圧縮で花びら形状を表現。和風・春・ブライダルに。

effects: [sakura] デモを見る
四季・情緒系

桜吹雪(物理演算)

空気力学的な姿勢制御エンジン搭載。縦・横モードを切り替えながらX/Y独立のきりもみ回転で花びらがパタパタ翻る。和風・春・ブライダルに。

effects: [cherry-blossom]
四季・情緒系

蛍の光

サイン波で個別に明滅する発光体が漂う。radialGradient + lighter 合成で柔らかな輝き。夏の夜・和風・幻想系に。

effects: [firefly] デモを見る
四季・情緒系

落葉

紅葉・黄葉がひらひらと舞い落ちる。Y軸回転を scaleX で近似したひらひら感と葉脈の描写が特徴。秋テーマ・和風・旅館に。

effects: [leaf] デモを見る
四季・情緒系

楓落葉(ランダムウォーク)

ガウス近似乱数のランダムウォークとベルヌーイ試行の確率的方向転換。横滑空時は空気抵抗で落下が緩み、Path2D描画の楓シルエットが自然に舞い落ちる。

effects: [maple-leaves]
四季・情緒系

落葉(物理演算)

空気力学的な姿勢制御と卵型フォルムの落ち葉エフェクト。チカチカ防止の最低幅保証でなめらかにきりもみ回転。秋テーマ・和風・旅館に。

effects: [leaf-fall]
四季・情緒系

紅葉(もみじ)

カスタムSVGパスから起こしたもみじ形をフラットスピンと疑似3Dパースペクティブで舞わせる。斜め上から見下ろす立体感が特徴。秋・和風・日本庭園に。

effects: [momiji]
B. 自然・エレメント系
自然・エレメント系

雨粒

放射状グラデーションで立体感を表現した雫形パーティクルが落下する。大きい粒ほど速く落ちるリアルな速度差で奥行き感を演出。雨・梅雨・清涼・リゾートに。

effects: [rain]
自然・エレメント系

オーロラ

複数のベジェ曲線が重なり合い、色相と透明度が常に変化するカーテン状の背景。北欧・エコ系に。

effects: [aurora] デモを見る
自然・エレメント系

水の波紋

ランダムな座標から同心円が自動的に広がり消えていく。内外2重リングで奥行き感を演出。水・癒やし・スパ・リゾート系に。

effects: [wave-ripple] デモを見る
自然・エレメント系

雲の漂い

大型の横長グラデーション楕円が横方向にゆっくりと流れる。重なり合うことで境界の曖昧な雲形を表現。霧・夢幻・ロマンチック系に。

effects: [cloud] デモを見る
C. 物理・エネルギー系
物理・エネルギー系

火花

ランダムな座標からパーティクルが放射状に飛び散る。重力の影響で弧を描きながら落下・消滅。IT・製造業に。

effects: [sparks] デモを見る
物理・エネルギー系

スチーム・煙

下部から湧き上がる煙が膨張しながら上昇し消えていく。radialGradient でふんわりした煙らしい表現。温泉・カフェ・和モダン系に。

effects: [steam] デモを見る
物理・エネルギー系

煌めき(シマー)

4点星形の光点がランダムに高速明滅する。sin の絶対値に閾値を設けた鋭い瞬き表現。ラグジュアリー・ジュエリー・ブライダル系に。

effects: [shimmer] デモを見る
物理・エネルギー系

上昇炎粒(Ember)

オレンジの発光粒子がゆらぎながら上昇し中途で消えていく。lighter 合成で橙→白熱色へ変化。炎・達成感・ゲーム演出に。

effects: [ember] デモを見る
物理・エネルギー系

ステータスアップ

I字型の光の棒が横揺れなしにまっすぐ上昇する。上端を白熱色、下方向へオレンジグラデーションで消滅。ゲームバフ・達成感・パワーアップ演出に。

effects: [status-up] デモを見る
物理・エネルギー系

稲妻

ミッドポイント変位法で生成した分岐ボルトが瞬間閃光。グロー3層描画で迫力のある光表現。火花(Sparks)とは別の独立したエフェクト。テクノロジー・嵐系に。

effects: [lightning] デモを見る
D. 空間・システム系
空間・システム系

グリッド構築

スキャンラインが上から下へ走りながら空間を構築。完了時に ak2:grid-ready を発火。ロゴアニメーションと連携。

effects: [grid-construction] デモを見る
空間・システム系

グリッド(環境光)

格子線を常時描画する環境光グリッド。空間に奥行きと技術感を添えるシンプルな背景エフェクト。

effects: [lines]
空間・システム系

光速移動

中央の焦点から透視投影で放射状に伸びる光の線。近い星ほど太く速く飛び去るワープ演出。宇宙旅行・SF・先進技術系に。

effects: [star-speed] デモを見る
F. セクション背景マクロ

// position:relative なセクション内に配置するオーバーレイ canvas

bgShapes
セクション背景マクロ

ぼかし図形(bgShapes)

グラデーション楕円を重ねたソフトな背景装飾。CSS アニメーションで浮遊。色・位置・サイズをパラメータで指定。

bgShapes([{c1, c2, top, left, w, h}]) デモを見る
{{ bgSakura() }}
セクション背景マクロ

桜吹雪背景(bgSakura)

SakuraEffect を section-effects.js で駆動。section に position:relative が必要。

{{ bgSakura() }}
{{ bgSnow() }} {{ bgAurora() }} {{ bgSparks() }}
セクション背景マクロ

その他マクロ

bgSnow・bgAurora・bgSparks の3種。対応する Canvas エフェクトクラスを section-effects.js が自動描画。

utils: [section-effects]
E. ページ全体エフェクト(Full-page Ambient)

// AK²-Engine に登録して canvas 全体を使うエフェクト

Full-page Ambient

星座(StarField)

80個のパーティクルが漂い、一定距離内の粒子どうしを直線で結ぶ。星座図のような幾何学美。

effects: [stars] デモを見る
Full-page Ambient

クリック波紋(Ripple)

クリック座標に同心円を展開。時間経過で広がりながら透明になる物理的な波紋。

effects: [ripple] デモを見る
Full-page Ambient

波(WaveEffect)

複数のベジェ曲線をサイン波の数式で動かす。動画ゼロで解像度無限大の滑らかな波。

effects: [waves] デモを見る
G. フィルム・ヴィンテージ系

// 白背景向けフィルム質感オーバーレイ

フィルム・ヴィンテージ系

映写機フリッカー

映写機の光量ムラとフィルム揺れを再現。ランダムな輝度変化と微細な上下ブレで、ビンテージ映像の質感を白背景に演出。

effects: [projector-flicker] デモを見る
フィルム・ヴィンテージ系

ヴィンテージフィルム

縦スクラッチ、ほこり粒子、セピア薄膜、周辺暗落ちを重ねた本格ビンテージ質感エフェクト。白背景専用。フィルム・昭和レトロ・アンティーク系に。

effects: [vintage-film] デモを見る