Options Updates

New numeric values are now randomizable, using the { min, max } object instead of the numeric value. The list of the new randomizable options are:

particles.move.attract.distance

particles.move.angle.offset

particles.move.angle.value

particles.orbit.opacity

particles.orbit.radius

particles.orbit.width

particles.repulse.distance

particles.repulse.duration

particles.repulse.factor

particles.repulse.speed

particles.roll.darken.value

particles.roll.enlighten.value

particles.rotate.animation.speed

particles.tilt.animation.speed

particles.twinkle.lines.opacity

particles.twinkle.particles.opacity

These are the core options, also every animation object now can have randomizable count and speed properties.

Absorbers and Emitters plugin options now have randomizable coordinates, the { min, max } can be set to their position.x and position.y values instead of a single numeric.

matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

tsParticles - TypeScript Particles

Matteo Bruni · 2022-03-11T07:39:00Z

tsParticles 1.42.0 Changelog Options Updates New numeric values are now randomizable, using the { min, max } object instead of the numeric value. The list of the new randomizable options are: particles.move.attract.distance particles.move.angle.offset particles.move.angle.value particles.orbit.opacity particles.orbit.radius particles.orbit.width particles.repulse.distance particles.repulse.duration particles.repulse.factor particles.repulse.speed particles.roll.darken.value particles.roll.enlighten.value particles.rotate.animation.speed particles.tilt.animation.speed particles.twinkle.lines.opacity particles.twinkle.particles.opacity These are the core options, also every animation object now can have randomizable count and speed properties. Absorbers and Emitters plugin options now have randomizable coordinates, the { min, max } can be set to their position.x and position.y values instead of a single numeric. tsParticles 1.42.1 Changelog Bug Fixes Fixes issue with 0 values on x and y properties of emitters position options matteobruni / tsparticles tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components <img src="https://camo.githubusercontent.com/c8a151dba322b363f75552c81e39168376ddc4678451ed2a731c6a1bd23806e8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e6564253230776974682d6c65726e612d6363303066663f7374796c653d666f722d7468652d6261646765" alt="lerna" data-canonical-src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff?style=for-the-badge" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/8f96d4d0dccc9c7491f3ed07af70a808b0fd4d2e4d863a1f7bb9e51e10ae526e/68747470733a2f2f6170692e636f646163792e636f6d2f70726f6a6563742f62616467652f47726164652f6239383361616633343631613463343862316532656563636531666631643734" alt="Codacy Badge" data-canonical-src="https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/e08ae3630c8387f3d4fcccab125b08abafab0dcc343c4aab5ff31f085db83829/68747470733a2f2f6261646765732e6f70656e626173652e636f6d2f6a732f726174696e672f74737061727469636c65732e7376673f7374796c653d6f70656e6261736526746f6b656e3d41396a4851316e6b6236666e436e644b4d374f3277346878334f443850564375714874537077386d4d4f673d" alt="Rate this package" data-canonical-src="https://badges.openbase.com/js/rating/tsparticles.svg?style=openbase&token=A9jHQ1nkb6fnCndKM7O2w4hx3OD8PVCuqHtSpw8mMOg=" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/2f3c18346a206cb3767ec3fcd974da8bf77985bd849a77b320ac2a555064735c/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f3837323036313135373337393330313431363f6c6162656c3d646973636f7264266c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465267374796c653d666f722d7468652d6261646765" alt="Discord" data-canonical-src="https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/21bec78017a24cf8358d5cabb393216db5d0628de8f5c331511d128bd121ea4e/68747470733a2f2f696d672e736869656c64732e696f2f7265646469742f7375627265646469742d73756273637269626572732f74735061727469636c65733f7374796c653d666f722d7468652d6261646765" alt="Reddit" data-canonical-src="https://img.shields.io/reddit/subreddit-subscribers/tsParticles?style=for-the-badge" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/e86b7f51a0224618fe45aad99bff3e02ed8a5838691f244bf1df0e94454dafe2/68747470733a2f2f6170692e70726f6475637468756e742e636f6d2f776964676574732f656d6265642d696d6167652f76312f66656174757265642e7376673f706f73745f69643d313836313133267468656d653d6c69676874" alt="tsParticles Product Hunt" data-canonical-src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/e71e3958b61d3e8e3c64a7747407e0d7267599c87df10c0d94c6e9499c0772df/68747470733a2f2f696d672e6275796d6561636f666665652e636f6d2f627574746f6e2d6170692f3f746578743d4275792532306d65253230612532306265657226656d6f6a693d25463025394625384425424126736c75673d6d617474656f6272756e6926627574746f6e5f636f6c6f75723d35463746464626666f6e745f636f6c6f75723d66666666666626666f6e745f66616d696c793d417269616c266f75746c696e655f636f6c6f75723d30303030303026636f666665655f636f6c6f75723d464644443030253232" alt="Buy Me A Coffee" data-canonical-src="https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20beer&emoji=%F0%9F%8D%BA&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00%22" style="max-width: 100%;"> Table of Contents tsParticles - TypeScript Particles Table of Contents Do you want to use it on your website? Library installation Hosting / CDN jsDelivr cdnjs unpkg npm yarn pnpm Import and require Usage Official components for some of the most used frameworks Angular ng-particles Astro astro-particles Ember.js ember-tsparticles Inferno inferno-particles jQuery jquery-particles Preact preact-particles ReactJS react-particles RiotJS riot-particles SolidJS solid-particles Svelte svelte-particles VueJS 2.x vue2-particles VueJS 3.x vue3-particles Web Components web-particles WordPress wordpress-particles Elementor Presets Big Circles Bubbles Confetti Fire Firefly Fireworks Fountain Links Sea Anemone Snow Stars Triangles Templates and Resources Demo / Generator Video Tutorials Characters as particles Polygon mask Animated stars Nyan cat flying on scrolling stars Snow particles Background Mask particles … View on GitHub

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components