【CodePen】パーティクルアニメーション・エフェクトのアイデア19選

💡 実装のポイント
粒子の本数は冒頭のBALL_NUM = 30で制御。粒子間の接続ライン描画はrenderLines()内でdis_limit = 260（px）を閾値に、距離に応じたアルファ値rgba(150,150,150,α)で引かれている。マウス追従はcanvas.addEventListener('mouseenter')でmouse_ballオブジェクトをボール配列に追加するシンプルな仕組みで、mouseleave時に除去される。外部ライブラリはjQuery（CDN）のみ。

💡 実装のポイント
new ParticleNetwork(canvasDiv, options)の1行で起動できるモジュール構成。optionsオブジェクトのparticleColor・background・speed（”fast”/”slow”/”medium”/”none”）・density（”high”/”low”/数値）の4項目だけでカスタマイズが完結する。interactive: trueにするとマウス位置に追従するインタラクティブ粒子が1つ追加され、クリック時にランダム速度で弾き飛ぶ動作も内蔵されている。

💡 実装のポイント
グリッド状に配置した400点弱のポイントに対して、各点の近傍5点を事前計算してp1.closest = closestに格納しておく設計。マウス位置との距離（二乗距離で判定）に応じてpoints[i].activeを0〜0.3に段階設定し、その値をラインとサークルのアルファ値に直接使う。アニメーションはTweenMax（GSAP）のTweenLite.toでポイントを揺らす仕組み。外部依存はjQuery・TweenMaxの2本。

💡 実装のポイント
通常粒子・花火粒子・ダスト粒子・リップルを別クラスで管理し、描画ループでまとめて処理する構成。粒子間の接続ライン描画は空間をグリッド（gridSize = 120）で区画化し、隣接セル内の粒子同士のみ距離チェックする最適化が施されている。画面サイズに応じてadjustParticleCount()で自動的に粒子数が段階調整されるため、モバイル環境での負荷も考慮されている。外部ライブラリ不使用のピュアVanilla JS。

💡 実装のポイント
CoffeeScriptで記述されたPen。各粒子にcharge（+1 or -1）とmass（0.5〜8の乱数）を持たせ、粒子ペアごとにGRAVITY * a.mass * b.mass / dSqで引力/斥力を計算するn体シミュレーション構成。フレームごとに8%の確率でa.chargeが反転するため挙動が常に変化する。FRICTION = 0.75で速度を減衰させ、TAIL_LENGTH = 12フレーム分の軌跡を描画。描画・アニメーション管理にsketch.jsを外部読み込みで使用。コンパイル後のCSS/JSで動作確認する場合は「View Compiled」を使用。

💡 実装のポイント
THREE.Geometryに2万頂点をランダム配置し、サイズの異なる5段階のTHREE.PointCloudMaterialを持つPointCloudを5つ重ねて奥行き感を演出する構成。materials[i].color.setHSL(h, color[1], color[2])で時間軸に応じた色相シフトが行われる。THREE.Geometry・THREE.PointCloudはThree.js r71相当の旧API（現行はBufferGeometry/Points）なので最新バージョンでは動作しない点に注意。外部依存はThree.js（r71）・jQuery・Stats.js。

💡 実装のポイント
CircleクラスとParticlesクラスの2層構造で設計されており、new Particles(canvas.width/2, 1, 50, -3, 3, 300, [...colors], canvas)の1行でシステム全体を初期化できる。各サークルはrGrow距離内にマウスが入るとrExtraを+3ずつ増やして膨張し、離れると-1ずつ縮小する仕組み。粒子数をcanvas.width/2としているため画面幅に応じて自動スケールする。カラーは配列でまとめて渡し、生成時にランダム選択。外部依存なし。

💡 実装のポイント
TypeScriptプリプロセッサを使用（CodePen上では「View Compiled JavaScript」で変換後のJSを確認可能）。ParticleSystemクラスにammount・diameter・life・speedを設定する設計で、各パーティクルはsetIntervalで自律的に位置を更新し、lifeが尽きるとparticlesマップから自動削除される。MapでIDキー管理しているため追加・削除が安全。onresizeでシステムを再初期化する処理も組み込み済み。外部依存なし。

💡 実装のポイント
Canvasに等間隔で描いたランダム透明度のドット（またはスクエア）を素地として、PerlinNoiseクラスで生成したシームレスなノイズ画像をCSSmask-imageに適用し、animation: moveMask Xms linear infiniteで横スクロールさせることでシマー効果を実現。マスクサイズはmaskSize: 300% 100%で広げてシームレスループを担保。パーティクルの形状・サイズ・速度・コントラスト・カラーをTweakpane UIでリアルタイム調整できる。ESM経由でtweakpane@4.0.4をimport。

💡 実装のポイント
ExplodeAnimation(x, y)コンストラクタで1000頂点を指定座標に集め、dirs配列に各頂点のランダム方向速度を格納する。update()では毎フレームparticle.x/y/z += dirs[pCount].x/y/zで各頂点を個別に展開し、this.object.geometry.verticesNeedUpdate = trueで再描画をThree.jsに通知する旧API構成。Three.js r61を使用しており、THREE.ParticleBasicMaterial・THREE.ParticleSystemは現行版ではPointsMaterial・Pointsに改名されているため移植時は読み替えが必要。

💡 実装のポイント
各モードの挙動をSETTINGS配列のspawnBehavior（初期配置）・frameBehavior（毎フレームの頂点更新）・sceneFrameBehavior（カメラ操作）の3関数に分けて定義するデータ駆動設計。「三角関数グリッド」モードではTHREE.VertexColorsを使い頂点ごとにsetHSL()で色付けし、colorsNeedUpdate = trueで再描画する。「幽霊」モードはブラウン運動＋中心への微弱引力を組み合わせた動きで、スプライト画像をPointCloudMaterialのmapに設定。外部依存はThree.js・lodash・animation-controller。

💡 実装のポイント
1600個の頂点を球面座標（theta・phi）からXYZ変換してTHREE.BufferGeometryに格納し、geometry.setAttribute('customColor', ...)で各頂点の色をGLSLへ渡すTHREE.ShaderMaterial構成。頂点シェーダーでattribute vec3 customColorを受け取りvarying vec3 vColorでフラグメントシェーダーへ受け渡す基本的なカスタムシェーダーパターン。GSAPのgsap.to(particles.rotation, ...)でマウス移動に滑らかに追従させ、スケールのyoyo（往復）アニメーションも別タイムラインで並走させている。外部依存はThree.js r122・GSAP。

💡 実装のポイント
わずか数行のシンプルな構造が特徴的なPen。各フレームでfoo = Math.sin(t) * 2 * Math.PIを算出し、400点の描画座標をr = 400 * Math.sin(i * foo)・x = Math.sin(i) * r + 中央x・y = Math.cos(i) * r + 中央yで決定する1ループ完結の構成。tを0.000005ずつ増やすことで模様が極めてゆっくり変化する。$.fillStyle = 'hsla('+i+12+',100%,60%,1)'でiに連動した色相を付けており、globalCompositeOperationの切り替えでトレイル効果を演出。外部依存なし。

💡 実装のポイント
HTMLはPugで- (1..200).each do |i|ループにより200個の.particle要素を生成し、SASS側の@for $i from 1 through 400ループで:nth-child(#{$i})ごとにrandom()でサイズ・速度・遅延・透明度・アニメーション種別を個別設定する構成。$anims: float, floatReverse, float2, floatReverse2の4パターンをランダムに選択することで不規則な揺れを実現。背景にはfilter: url('#goo')でSVG feMorphologyを適用し、粒子が近接すると結合するゴーイー（ぬめり）効果を付与している点も見どころ。SASSビルド環境が必要なのでCodePenの「View Compiled CSS」でCSS確認を。

💡 実装のポイント
オフスクリーンCanvasに大きなフォントでテキストを描き、ctx.getImageDataでアルファチャンネルを読み取って透明でないピクセル座標をParticleのstartPosとして登録する古典的なテキストパーティクル手法。各粒子はlifeフレーム（最大300）を使い切ると自動リセットされ、テキストの輪郭に常に粒子が集まる。FRICT = 0.98の摩擦係数で速度を減衰させ、加速度のa.x/y = (random()-0.5)*0.8で微細なランダムウォークを付与。高速乱数ライブラリ（fastrandom）がインライン埋め込みされている。CSSプリプロセッサはSCSSだがスタイル自体はシンプル。

💡 実装のポイント
テキストのサンプリングはwidth/150刻みでピクセルスキャンし、アルファ値150以上の座標にnew Particle(x, y)を生成する構成。各粒子は加速度・速度・摩擦（this.friction = random()*0.05 + 0.94）を持ち、目標座標へ引き寄せる力（accX = (dest.x - x)/1000）でゆっくり収束する。マウスがradius*70ピクセル以内に入ると反発力を加算。クリックでradius（1〜4）を切り替えることで反発範囲を変更できる。テキスト変更はkeyupイベントでリアルタイム再スキャン。外部依存なし。

💡 実装のポイント
テキストスキャン後に画面をグリッドに分割し、各セルにnoise(i)*TWO_PIで角度を格納したフローフィールド（fieldオブジェクト）を事前生成。描画ループで各粒子の現在座標からセルキー（${x - x%fieldStep}-${y - y%fieldStep}）を算出してフィールド角度を取得し、p5.Vector.fromAngle(angle, system.flow)で力を加算する。重力方向・強度もベクトルで制御可能。外部依存はp5.js・dat.GUI・カスタムペン（Gthibaud/dybzvNwのCanvasユーティリティ）の3本。

💡 実装のポイント
2500個の粒子が自由にバウンドしながら、現在座標のピクセルがmap[~~y * width + ~~x]でテキスト領域内かを毎フレーム参照する構成。領域内ならばthis.rを最大12まで+1ずつ増やして球が膨張し、領域外では-1ずつ縮小する。描画は2パス構成で、1パス目（影あり）を灰色で、2パス目（影なし）を白で描くことで内部のハイライト効果を演出している。makeMap(text)でオフスクリーンCanvasにフォントサイズ300pxで描いたテキストのピクセルデータを取得してmap配列に展開する。外部依存なし。

💡 実装のポイント
PugプリプロセッサとBabel+SCSSを使用した構成。p5.jsのroboto.textToPoints()で数字・コロンの文字アウトライン座標を事前計算し（renderCharacter()）、時刻が変わるたびにtextPoints配列を差し替える設計。粒子は独自のParticleクラスでattractTo(textPoint)メソッドが目標ポイントへの速度ベクトルを加算し、friction = 0.75で素早く収束させる。ctx.beginPath()を1フレームに1回開いてすべての粒子を1パスでarc()し、ctx.fill()を1回で処理するバッチ描画でパフォーマンスを確保している。外部依存はp5.js。