So you have seen a cool particles effect in some website and you want one too?
Maybe you don't know what I'm talking about or what particles animations are? Let me show a sample
Still confused? https://codepen.io/collection/DPOage checkout this CodePen collection.
So now you want one too.
If you are using Vue.js you probably found vue-particles but I'm not here to talk about an abandoned project (3 years ago) using an abandoned core library (5 years ago) with issues and bugs.
We need a new library actively maintained: Particles.vue based on a core library actively maintained too: tsParticles
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
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
You can find other tutorials for tsParticles here:
Let's dive into Particles.vue:
Installation
yarn add particles.vue
or
npm install particles.vue
Usage
import Particles from "particles.vue";
Vue.use(Particles);
Demo config
<template>
<div id="app">
<Particles
id="tsparticles"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 60,
interactivity: {
detectsOn: 'canvas',
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
speed: 3
},
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,
value_area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}"
/>
</div>
</template>
TypeScript errors
If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous code:
declare module "particles.vue";
Demos
The demo website where you can find other configurations is here
https://particles.matteobruni.it
There's also a CodePen collection actively maintained and updated here
https://codepen.io/collection/DPOage
And a CodeSandbox template to start with:
Top comments (0)