Particles.js text effect with Vanilla JavaScript (no libraries)

Let’s take any letter, word or a sentence and in three steps convert it into interactive particles effect. All in Vanilla JavaScript, no frameworks and no libraries.

In today’s vanilla JavaScript text animation tutorial we will learn how to give particles some motion physics and apply forces such as friction and acceleration, then we will get the particles to form any shape we want, in this case letter shapes, and connect individual particles with lines similar to famous particles.js library, but we will use no libraries, everything we build today is from scratch using just plain vanilla JavaScript. I will explain all the code line by line as I always do.

This vanilla JavaScript text animation tutorial will have 3 main parts, in the first part we will create particles randomly spread around canvas and we implement some physics on them. We will apply forces like friction and acceleration and give each particle different weight to make the movement more realistic. Then in the second part of this video we will take these particles and shape them into letters or images, both is possible with the code we will build today And lastly in the third section we will take famous constellations effect from particles js library and we will connect particles that are near enough to each other with lines but we will not use any libraries, we will write our own vanilla JavaScript code that does that.

You can message me on TWITTER Check out some of my source code on CODEPEN

Leave a Reply