DEVHATCH

VANTA

Vanta.js を使った視覚演出の実装手順： 1. 必要なライブラリをCDNまたはnpm/yarnで導入（例: vanta.birds.min.js） 2. refを使って対象のDOMを取得（useRef & useEffect） 3. VANTA.BIRDS などで初期化、THREE.jsも忘れずに読み込む 4. オプションで背景色、動きの速さ、オブジェクト数など調整可能 5. unmount時にdestroy()を呼び出しリソース解放 デモや応用にも使える軽量ライブラリです

Rain Animation

Framer MotionとCanvasを使って、10秒後に青空へ切り替わる雨アニメーションを実装。 アニメーションによって視覚的なインパクトを与え、UX向上を図る。

Zoom Mask Image

黒背景にマスク処理を施し、枠内にズームインしてくる画像演出。 Framer Motionを使った視線誘導の一例として応用可能。

BufferGeometry

三角がくるくるするアニメーション

Wave Particles

Three.js を使って動的に波打つ粒子表現を作成。 可視化に応じてカラーパターンや波形関数を変更可能。 サイト背景などにも応用できる演出技術。

Orbit Particles

Three.js を使った中心軌道型のパーティクル演出。 一定の半径でランダムな星粒が回転し、視覚的に美しい演出が可能。 シンプルで軽量、背景にも応用可能なスタイル。

Wave Surface

三角格子状の水面を揺らすシンプルな波アニメーション。 Wireframe表示を使ってデジタルな質感と軽量性を両立。 背景としても利用可能で、動きのある演出に効果的です。

Sparkling Water

黒背景に流れる水面＋ラメ入りのキラキラ粒子。 ノイズマスクで質感をプラスした視覚演出サンプルです。

Glitter Particle

ラメ状の粒子が降り注ぐエフェクト。 ノイズマスクで自然な輝きと動きを演出し、幻想的な雰囲気を表現できます。

FLOATING OBJECTS

three.js を使った空間浮遊オブジェクトの実装手順： 1. BufferGeometryとMeshを使って複数オブジェクトを配置 2. Group にまとめて動きを統一化 3. PointLightで立体感を演出 4. sin波を使った上下ゆらぎで自然な浮遊表現 5. useEffect + requestAnimationFrameでループ制御 空中に漂うような幻想的なアニメ演出に最適です

Nebula Cloud

Three.js を使った軽やかな星雲風アニメーション： 1. THREE.BufferGeometry で星雲の粒子群を生成 2. PointsMaterial で半透明＆AdditiveBlending を指定 3. rotation を少しずつ変化させてゆらゆら浮遊感を表現 4. リサイズ対応も実装済み 5. unmount 時に cancelAnimationFrame で後処理を実行

Petal Breeze

花びらが春風に舞うようなエフェクト。 - 透過PNGの花びらテクスチャ使用 - ゆらゆら回転しつつ、優雅に降下・浮遊 - resize対応でモバイルでもOK

GALAXY

軽めの銀河パーティクルがゆっくり回転する視覚演出です： 1. three.js を npmでインストール済（v0.124.0） 2. useRef & useEffect で canvas 埋め込み 3. BufferGeometry で円形パーティクル生成 4. 回転アニメーションの追加 5. resize時の再設定と clean-up でリソース解放

THREE.js Breath Aura

Three.js を用いた「呼吸するオーラ」エフェクトの実装例： 1. SphereGeometry を使って球体を構築 2. ShaderMaterial を利用してフラグメントシェーダ内で透明度をsin波で制御 3. アニメーションには requestAnimationFrame と Clock を使用 4. 透過＋青系カラーのパルス風表現で神秘的な雰囲気を演出 このような幻想的な演出は背景ビジュアルやUIの注目ポイントに応用可能です

Meteor Shower

Three.js + BufferGeometry を使ったメテオ（流星）シャワーエフェクトの実装： 1. BufferGeometry で複数のポイント（粒）を配置 2. 各粒にランダムなY速度を割り当てる 3. アニメーションループで Y を減算し、下部に達したら再上部へリセット 4. additive blending & 少しの回転で宇宙的で綺麗な雰囲気を演出 背景やイントロビジュアルに映える演出に使えます

Sparkling Particles

Three.js とカスタムシェーダーを使って きらめく光が浮遊する演出を実装： 1. BufferGeometry で大量の点を生成／サイズをランダム化 2. ShaderMaterial に時間制御用 uniform を追加 3. 頂点シェーダーで点の透明度を脈動させる 4. フラグメントシェーダーで丸いフェードアウト粒子を描画 5. リサイズ対応＆クリーンアップも実装済み