ToolLive
Project Detail
tsParticles Demo Gallery
粒子表現を見比べながら調整できるデモツール
Overview
tsParticles のデモ表現をカテゴリ別に見比べながら、粒子数・速度・サイズ・リンク・ホバーなどを調整し、実装コードも確認できるデモツールです。
Description
tsParticles のさまざまな表現を、実際に触りながら比較できるデモツールです。
presets、shapes、plugins、paths、palettes、focused APIs などをカテゴリ別に一覧化し、各デモで粒子数・速度・サイズ・リンク・ホバーなどを調整できます。
右側には現在の設定に近い実装コードを表示し、見た目とコードを同時に確認できる構成です。
Features
- tsParticlesデモのカテゴリ別一覧
- presets の比較
- shapes の比較
- plugins の比較
- paths の比較
- palettes の比較
- focused APIs の比較
- 粒子数の調整
- 速度の調整
- サイズの調整
- リンク距離の調整
- ホバー設定の調整
- 実装コードの自動表示
- 日本語 / 英語切り替え
- 遅延レンダリング
- Google Analytics
- Google AdSense
Tech Stack
ViteJavaScripttsParticlesVercelGoogle AnalyticsGoogle AdSense
Intent
パーティクル演出を実装するときに、デモを見比べながら設定値やコードを確認できるようにするために制作。
Future Ideas
- +GitHub URLの掲載
- +お気に入りデモ保存
- +コードコピー機能の強化
- +デモカテゴリ追加
Repository
tsparticles-demo-gallery