プレイグラウンドバンドル

このページを使用して、次のパッケージの焦点を当てた API をテストします。

• @tsparticles/confetti
• @tsparticles/fireworks
• @tsparticles/particles

各セクションには独自のキャンバス、JSON エディター、およびコントロールがあります。

デモはローカルのキャンバス要素 (*.create(...)) にスコープされているため、ページ全体を引き継ぐことはありません。

@tsparticles/confetti

One-call confetti API for celebratory bursts and overlays.

Ready. Press Start.

{ "count": 80, "spread": 55, "angle": 90, "startVelocity": 45, "gravity": 1, "zIndex": 10, "colors": [ "#ff577f", "#ffd166", "#06d6a0", "#4cc9f0" ], "position": { "x": 50, "y": 50 } }

@tsparticles/fireworks

Focused fireworks API with quick setup for launch/explosion scenes.

Ready. Press Start.

{ "background": "#0a1026", "colors": [ "#ffffff", "#ffd166", "#72ddf7", "#f15bb5" ], "sounds": false, "rate": { "min": 2, "max": 4 }, "speed": { "min": 10, "max": 25 } }

@tsparticles/particles

Simplified particles background API for network and geometric effects.

Ready. Press Start.

{ "count": 30, "color": "#72ddf7", "links": true, "linksColor": "#72ddf7", "linksLength": 100, "collisions": true, "radius": { "min": 1, "max": 3 }, "speed": { "min": 0.3, "max": 1.2 }, "shape": [ "circle", "square" ] }