Particle Background
パーティクル背景
どんな動き？
無数の小さな粒子が、それぞれ異なる速度や軌道でゆっくりと画面内を漂い続ける背景アニメーション。星空や光の粒が浮遊しているような幻想的な雰囲気を演出できる。tsparticlesやparticles.jsといったライブラリを使えば設定ファイルだけで手軽に導入でき、イベントページやヒーローセクションの背景装飾として人気が高い。
よく使う場所
ヒーローセクションイベントページ背景演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Drift dozens of small particles slowly across a dark background, each on its own speed and path, looping continuously.Trigger:
Load (starts automatically and loops continuously).
Initial state:
Each particle: a small dot at a random position, opacity: low
Animation:
Each particle drifts slowly along its own loose path with a slightly different speed and direction, gently pulsing in opacity as it moves.
Final state:
Loops back to its starting position and opacity seamlessly.
Timing:
duration: 4–8s per particle (varied per particle), easing: ease-in-out, iteration-count: infinite.実装方法の候補
この動きは以下の技術で実装できます。
tsparticlesparticles.jsthree.js
別名・関連ワード
Particle FieldFloating ParticlesAmbient Particles