BACKGROUND EFFECT
AMBIENT
BACKGROUND
爽やかな青のグラデーションが
有機的に流れるWebGL背景
About
流れる色彩で
空間に奥行きを
シンプレックスノイズとFBM（Fractal Brownian Motion）を組み合わせ、 水面や空のような自然な揺らぎを表現しています。
マウスの動きに反応して波紋が広がり、色が滲むようにインタラクティブに変化。 スクロールに連動してグラデーションが流れ、ページ全体で一体感のある体験を提供します。
Technology Three.js / GLSL
Algorithm Simplex Noise + FBM
Interaction Mouse / Touch / Scroll
Performance 60fps GPU Accelerated
Features
実装のポイント
01
Shader Animation
Three.js + GLSLシェーダーでGPU描画。複数のノイズレイヤーを重ねて 有機的なうねりを生成しています。
02
Water Ripple
波動シミュレーションによる水面のようなインタラクション。 マウス位置に応じて波紋が広がります。
03
Scroll Response
スクロール量に連動してグラデーションが流れる。 ページ全体で一体感のある体験を提供。
04
Performance
軽量設計でモバイルでも滑らか。prefers-reduced-motion対応で アクセシビリティも確保。
Use Cases
活用シーン
コーポレートサイト
洗練された印象を与えるメインビジュアルに最適です
ランディングページ
ユーザーの注目を集めるヒーローセクションに
ポートフォリオ
クリエイティブな印象を演出する背景として
ブランドサイト
高級感と先進性を表現するビジュアルに