web-particles

Official tsParticles Web Component

Installation

yarn add web-particles

Usage

Demo config

<web-particlesid="tsparticles" url="http://foo.bar/particles.json" /><web-particlesid="tsparticles"
options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, resize: true }, modes: { push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: '#ffffff' }, links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 }, collisions: { enable: true }, move: { direction: 'none', enable: true, outMode: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, area: 800 }, value: 80 }, opacity: { value: 0.5 }, shape: { type: 'circle' }, size: { value: { min: 1, max: 5 }, } }, detectRetina: true }"
/>

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage