オプションリファレンス

tsParticles の options は非常に広いため、このページを全体マップとして使ってから各サブオプションへ進むのがおすすめです。

構成パスを選ぶ

素早く見た目を作る: preset から始めて主要フィールドを上書きする。
フルコントロール: particles、interactivity、background を手動で定義する。
config-first の進め方: @tsparticles/configs から始めて、段階的に調整する。

クイックガイド（ローカル）

particles の詳細ページ

参照元ドキュメント

メイン options ドキュメント: tsparticles/markdown/Options.md
詳細 options ページ: tsparticles/markdown/Options/
TypeScript インターフェース: tsparticles/engine/src/Options/Interfaces

よく使う root options

background
fullScreen
interactivity
particles
detectRetina
preset
responsive

よく使うセクション

background: canvas 背景とマスキングの基本。
particles.number: 数と密度。
particles.move: 速度、方向、out modes。
particles.shape: 円、多角形、画像、絵文字、カスタム。
particles.palette: 調和したカラーパレットを素早く切り替え。
interactivity: hover/click モードと外部エフェクト。
detectRetina: 高 DPI 画面での品質とパフォーマンスのバランス。

particles マップ（ネスト表示）

個別ページを開く前に、次のツリーをナビゲーションとして使ってください。

text

particles
|- number
|- color
|- shape
|- size
|- opacity
|- move
|- links
|- collisions
|- life
|- destroy
|- group
|- orbit
|- repulse
|- roll
|- rotate
|- shadow
|- stroke
|- tilt
|- twinkle
|- wobble
|- zIndex
`- palette

まず root docs、その後に詳細セクションを読む流れがおすすめです。

基本: Particles
詳細: Particles Number, Particles Move, Particles Links

安全に進めるオプション設定手順

demos または presets から動く設定を開始する。
一度に 1 セクションずつ変更する。
アプリコードで TypeScript（IOptions）検証を行う。
本番用 options は専用 JSON ファイルに分離する。

最小の型付き例

import type { ISourceOptions } from "@tsparticles/engine";

export const particlesOptions: ISourceOptions = {
  fpsLimit: 60,
  particles: {
    number: { value: 70 },
    move: { enable: true, speed: 1.5 },
  },
};

パフォーマンスのガードレール

高度な plugins が不要なら @tsparticles/slim を優先する。
粒子数はコンテナ面積に比例させる。
重い interactivity を追加する前に実機でプロファイリングする。

オプションリファレンス ​

構成パスを選ぶ ​

クイックガイド（ローカル） ​

particles の詳細ページ ​

参照元ドキュメント ​

よく使う root options ​

よく使うセクション ​

particles マップ（ネスト表示） ​

安全に進めるオプション設定手順 ​

最小の型付き例 ​

パフォーマンスのガードレール ​

関連リファレンス ​

オプションリファレンス

構成パスを選ぶ

クイックガイド（ローカル）

particles の詳細ページ

参照元ドキュメント

よく使う root options

よく使うセクション

particles マップ（ネスト表示）

安全に進めるオプション設定手順

最小の型付き例

パフォーマンスのガードレール

関連リファレンス