Soothing Bubbles
Before I even get into the the what I actually learned about today I have to mention that my ideas for today's project started out as something wildly different. A simply app where you would click on the screen to place a particle emitter that would spray for a few seconds. Somewhere between the beginning and the end my wife caught a glimpse of the project, which was little more than pretty bubbles floating about and she became entranced by the way they danced across the screen. So I chucked my original idea in the bin and made an agile, dynamic paradigm shift(and perhaps several other buzzwords).
Lesson: Particles.js
I have made many animations in my career, from silky smooth transitions to the pulsing neon button that I swear sounded like a good idea at the time. However I have never really dipped my toe into more advanced animation on the net that the big names frameworks could provide. Wanting to start out small I turned to Particle.js to tackle first, or more specifically react-particle-js for ease of integration with the Next.js framework I had already built out.
I found the basics farely straight forward. Start with the install
npm install react-particle-js || yarn add react-particle-jsThen once imported we can use the Particle component and customize it with the params attribute to customize it.
import Particles from "react-particle-js"
const Bubble=()=>{
return(
<Particles
params={{
background: {
color: {
value: '#0d47a1',
},
},
particles: {
number: {
value: 150,
density: {
enable: true,
value_area: 1200,
},
},
color: {
value: ['#E58F65', '#baf2e9', '#bad7f2', '#925e78', '#706993'],
},
size: {
value: `${size}`,
random: true,
anim: {
enable: true,
speed: 5.2,
size_min: 0.01,
},
},
shape: {
type: 'circle',
stroke: {
width: `${strokeSize}`,
color: '#3fb7FF',
},
},
links: {
enable: false,
},
},
}}
/>
I was surprised by the minute amount of code to get such an impressive effect. The final product uses some real basic state management to control the size of the particle and the stroke around it, which offers some pretty cool effects (my favorite is particle size of 2 and stroke size of 500)
After digging around at some the of the examples of what others have created with Particles, I know it will be a tech I revisit several times in this series.
That is all for today. You can find 100 Lessons, 100 Days at it's current home hosted by the great people at Vercel. Never Stop Coding!!!
Top comments (1)
Just a little correction:
react-particles-jsis using tsParticles as a core library starting from version 3.x, not the abandoned particles.js.You should give a look there, there's a lot of additional features!