particles.js プレイグラウンド — リアルタイム設定エディター・ジェネレーター
コントロールまたは生の JSON で particles.js の設定を編集し、リアルタイムで動作を確認して、JSON やそのまま貼り付けられる HTML スニペットをコピーできます。
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
この particles.js プレイグラウンドは、particles.js の設定のためのリアルタイムエディター兼ジェネレーターです。パーティクルの数、色と形、つながる線、動き、ホバーやクリック時の効果をコントロールで変えるか、JSON の設定全体を直接編集すると、入力に合わせてプレビューが再実行されます。どちらのビューも同じ設定を編集するので、スライダーで大まかに作ってから JSON で微調整できます。見た目が決まったら、JSON か、script タグと particlesJS() の呼び出しを含む完全な HTML スニペットをコピーしてください。
プレビューは模倣ではなく本物の particles.js 2.0.0 ライブラリで動いているので、見たままがページに表示されます。その癖も含めてです。受け付ける色は 16 進数だけで、密度をオンにするとパーティクル数はキャンバスのサイズに応じて変わり、つながる線はすぐに処理が重くなります。FPS の表示は、スマートフォン向けに公開する前に設定を判断するのに役立ちます。particles.js 自体は 2015 年の 2.0.0 以来更新されていません。現在のブラウザでも動作しますが、メンテナンスされている後継の tsParticles を選ぶべき場面については、下の解説で説明しています。
使い方
- 出発点にするプリセットを選ぶか、JSON エディターに自分の設定を貼り付けます（particlesjs-config.json、particlesJS("particles-js", {...}) の呼び出し、プレーンなオブジェクトのいずれでも動きます）。.json ファイルをツールにドロップすることもできます。
- 「コントロール」タブで設定を調整します。パーティクルの数と密度、色、形、不透明度、サイズ、つながる線、動き、インタラクションです。または JSON を直接編集します。エラーはエディターの下に表示され、プレビューは最後の有効な設定を保ちます。
- ページに合わせてプレビューの背景色や背景画像を設定し、プレビューにホバーやクリックをしてインタラクションをテストします。「拡大」や「全画面」で実寸を確認し、FPS の表示に注目してください。
- 出力を選びます。HTML スニペット、particlesJS.load 版、React コンポーネント、JSON 設定のいずれかです。コンテナをページ全体の背景にするか、親要素いっぱいに広げるかを選びます。
- コピーまたはダウンロードし、HTML スニペットはページの閉じ </body> タグの直前に貼り付けます。
よくある質問
particles.js を Web サイトに追加するには？
<div id="particles-js"></div> のような id 付きの空の要素を追加して CSS でサイズを指定し、script タグでライブラリを読み込み（jsDelivr では cdn.jsdelivr.net/npm/ の後に particles.js@2.0.0/particles.min.js を続けた場所で配信されています）、その id と設定で particlesJS("particles-js", { ...config }) を呼び出します。スクリプトは要素が存在した後に実行する必要があるので、</body> の直前に置きます。何も表示されない最もよくある原因は、高さのないコンテナです。particles.js は要素からキャンバスのサイズを決めるので、高さ 0 の div では高さ 0 のキャンバスになります。このツールの HTML スニペットには、ページ全体の背景用または親要素いっぱいに広げる用の CSS が含まれています。
React や Next.js で particles.js を使うには？
npm install particles.js でインストールし、ブラウザでのみ実行されるよう useEffect の中で import します（window を使うため、トップレベルで import すると Next.js のサーバーサイドレンダリングが壊れます）。要素が描画されたら window.particlesJS("particles-js", config) を呼び出し、コンポーネントのアンマウント時には後片付けをします。window.pJSDom の各エントリで pJS.fn.vendors.destroypJS() を呼び出し、window.pJSDom を空の配列に戻してください。そうしないとアニメーションのループが動き続け、次のマウントが失敗します。ここで出力される React / Next.js 版は、これを行うコンポーネントです。新しい React プロジェクトなら、メンテナンスされている @tsparticles/react パッケージのほうが自然に合います。
particles.js はまだメンテナンスされていますか？particles.js と tsParticles の比較
されていません。Vincent Garreau による particles.js は 2015 年にリリースされたバージョン 2.0.0 で止まっており、リポジトリはそれ以来リリースがありません。canvas と requestAnimationFrame しか使っていないため現在のブラウザでも動作し、多くのサイトで使われています。Matteo Bruni による tsParticles は TypeScript への移植として始まった、活発にメンテナンスされている後継です。より多くの形や効果、公式の React・Vue・Angular・Svelte コンポーネント、より良いパフォーマンスのオプションを備え、particles.js のオプションのほとんどを読み込めます。静的なページに依存関係なしで手早く背景を付けるなら particles.js を、フレームワークのアプリや何年もメンテナンスするものなら tsParticles を選びましょう。
particles.js はモバイルで Web サイトを遅くしますか？
遅くすることがあります。すべてのパーティクルが毎フレーム描き直され、つながる線を有効にすると各パーティクルがほかのすべてのパーティクルと距離を比較されるので、コストはパーティクル数の 2 乗で増えます。retina_detect は高 DPI のスマートフォンで描画するピクセル数を 2〜3 倍にします。滑らかに保つには、小さな画面でパーティクルが少なくなるよう密度をオンにしておき、線をオンにするなら約 100 個未満にとどめ、FPS が落ちたら線や retina_detect をオフにし、訪問者が prefers-reduced-motion を設定している場合は particles.js を初期化しないようにします。ブラウザはバックグラウンドのタブで requestAnimationFrame を一時停止するので、タブが非表示のときはコストがかかりません。
particles.js の背景が表示されないのはなぜですか？
次の順に確認してください。コンテナに実際の高さがあるか（height: 100% は親にも高さがある場合にしか機能しないため、スニペットでは position: fixed または absolute を使っています）、particlesJS の呼び出しが要素の存在後に実行されているか、パーティクルの色が背景と違うか、ほかのコンテンツが不透明な背景で覆い隠していないか、ブラウザのコンソールにエラーが出ていないか。particlesJS.load を使う場合は、file:// からの JSON ファイルの読み込みはブロックされるので、ページを http(s) で配信する必要があります。色を 16 進数ではなく名前や rgb() で書いた場合も particles.js は描画を止めます。このツールはそれを警告します。
particles.js で画像や独自の形を使えますか？
はい。shape.type を "image" に、shape.image.src を画像の URL に設定します。width と height でアスペクト比を、size オプションで描画する大きさを設定します。PNG、JPG、GIF、WebP は通常の画像として読み込まれます。SVG ファイルは色を置き換えられるよう XMLHttpRequest でダウンロードされるため、SVG をホストしているサーバーがクロスオリジンのリクエストを許可している必要があります。画像のほかに、組み込みの形として circle、edge（正方形）、triangle、polygon、star があり、polygon.nb_sides で辺の数や星の頂点の数を設定します。形の配列を指定すると、各パーティクルにランダムに 1 つが割り当てられます。
particles.js の設定リファレンス：重要なオプション
particles.js の設定には 3 つのトップレベルのキーがあります。particles（何をどう描き、どう動かすか）、interactivity（マウスへの反応）、retina_detect です。省略したキーはライブラリのデフォルトになり、そのデフォルトは重めです。線がオンで半径 20 のパーティクルが 400 個です。そのため、色だけを設定した設定はデモのようには見えません。
• particles.number.value と density：density.enable がオンなら、value は value_area × 1000 平方ピクセルの面積あたりの数で、実際の数はキャンバスに応じて変わります。value_area 800 で 80 個なら、1920×1080 の画面では約 200 個、スマートフォンでは数十個になります。
• particles.color.value：16 進数の文字列、16 進数の文字列の配列（各パーティクルが 1 つを選びます）、"random"、または {r, g, b} オブジェクト。色の名前や rgb() の文字列には対応しておらず、アニメーションが止まります。
• particles.shape.type：circle、edge、triangle、polygon、star、image、またはそれらの配列。stroke で輪郭線を追加し、polygon.nb_sides で polygon の辺の数と star の頂点の数を設定します。
• opacity と size：value が最大値で、random はパーティクルごとに 0 からその値までの値を選び、anim は指定した速度で opacity_min / size_min と value の間を脈打たせます。
• line_linked：distance ピクセルより近いパーティクル同士を結ぶ線で、距離に応じて薄くなります。その color は単一の 16 進数の値である必要があります。
• move：speed、direction（none または 8 方向のいずれか）、random（速度にばらつき）、straight（ふらつきなし）、out_mode（out は反対側に回り込み、bounce は端で跳ね返る）、bounce（パーティクル同士が衝突）、attract。
• interactivity.events：onhover のモードは grab（カーソルまで線を引く）、bubble（近くで大きくなるか薄くなる）、repulse（押しのける）、onclick のモードは push（パーティクルを追加）、remove、bubble、repulse です。強さは interactivity.modes で設定します。detect_on はデフォルトで canvas で、window にするとコンテンツがキャンバスを覆っていてもビューポートの座標を使って反応します。
particles.js のインストール：CDN、npm、セルフホスト
CDN から：src が cdn.jsdelivr.net/npm/ の後に particles.js@2.0.0/particles.min.js を続けたものである script タグ（完全なタグは上の HTML スニペットにあります）。@latest を使うのではなく、このようにバージョンを固定しましょう。npm パッケージに含まれているのは圧縮されていない particles.js だけで、.min.js ファイル（約 23 KB）は jsDelivr がリクエスト時に生成します。生成されるファイルなので、jsDelivr は SRI の integrity ハッシュを付けないよう勧めています。
npm で：npm install particles.js@2.0.0 を実行し、クライアントサイドのコードで import "particles.js" します。パッケージは何もエクスポートせず、import すると window.particlesJS と window.pJSDom が定義されます。TypeScript の型は同梱されていないので、TypeScript のプロジェクトでは 1 行の declare module "particles.js" が必要で、呼び出しは window 経由で行います。
セルフホスト：npm パッケージの particles.js（または jsDelivr の圧縮版ファイル）を静的ファイルにコピーし、script タグでそれを指定します。ライブラリは eval を使わないので、自分のスクリプトを許可する厳格な Content-Security-Policy の下でも動作します。画像の形を使う場合はそのホストを img-src に、SVG 画像や particlesJS.load を使う場合はホストを connect-src にも追加する必要があります。
particles.js は MIT ライセンスなので、ファイル内のライセンス表記を残しておけば商用プロジェクトでも使えます。
パーティクル背景を軽く、アクセシブルにする
動く背景は装飾なので、決して邪魔になってはいけません。動きを減らす設定を尊重し、訪問者がそれを求めていない場合にだけ開始しましょう：if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config)。あるいは表示は残して move.enable を false にすれば、静止した 1 フレームだけが描画されます。
テキストを読みやすく保ちましょう。文字色を背景色、パーティクルや線の色と照らし合わせて確認し、必要ならテキストの下に半透明のオーバーレイを追加します。コンテンツは position: relative とより大きな z-index でキャンバスの上に置き、キャンバスにクリックを受けさせたくない場合は pointer-events: none を指定して、ホバー効果には detect_on: "window" を使います。
実機のスマートフォンでテストしてください。このプレイグラウンドの FPS 表示が測っているのはあなたのコンピューターで、ミドルレンジのスマートフォンではその 3 分の 1 程度しか出ないこともあります。効果の大きい順に、パーティクル数を減らす、value_area を大きくする、retina_detect をオフにする、つながる線を無効にする、の変更が役立ちます。
関連する無料ツール
- CSS グラデーション作成 — ドラッグできるカラーストップ、角度ダイヤル、プリセットで線形・放射・円錐グラデーションを作成。CSS や Tailwind のクラスをコピーできます。
- box-shadow ジェネレーター — 重ねた box-shadow や text-shadow の効果をライブプレビューでデザイン。エレベーション、ニューモーフィズム、グローのプリセット付きで、CSS をコピーできます。
- JSON 整形 — JSON を整形、圧縮（minify）、検証し、解析エラーは行と列で位置を示します。ブラウザ上で動作、アップロード不要。
- カラーパレット生成 — スペースキーで新しいパレットを生成し、気に入った色をロックし、配色の調和を選び、写真からパレットを抽出できます。CSS、Tailwind、SCSS、JSON、PNG で書き出し。
- SVG エディター — キャンバスに図形、矢印、フリーハンドの線、テキストを描き、きれいな SVG や PNG をダウンロード。無料、ブラウザで動作、登録不要です。