Text Particle System In JavaScript – text-particles.js

Preview:

Description:

text-particles.js is a pure JavaScript plugin to draw animated, interactive text particles on an HTML5 canvas element.

How to use it:

1. Create an HTML5 canvas element with a unique ID called ‘tp__canvas’.

<canvas id="tp__canvas"></canvas>

2. Load the minified version of the text-particles.js library in the document. That’s it.

<script src="lib/text-particles.min.js"></script>

3. Or use the library as an ES6 module.

import './styles/index.sass';
import textParticles from './lib/text-particles.js';
textParticles.accelerate({
  // options here
});

4. Override the default text particles.

textParticles.accelerate({
  textList: "Warty Warthog, Hoary Hedgehog, Breezy Badger, Dapper Drake, Edgy Eft, Feisty Fawn, Gutsy Gibbon, Hardy Heron, Intrepid Ibex, Jaunty Jackalope, Karmic Koala, Lucid Lynx, Maverick Meerkat, Natty Narwhal, Oneiric Ocelot, Precise Pangolin, Quantal Quetzal, Raring Ringtail, Saucy Salamander, Trusty Tahr, Utopic Unicorn, Vivid Vervet, Wily Werewolf, Xenial Xerus, Yakkety Yak, Zesty Zapus, Artful Aardvark, Bionic Beaver, Cosmic Cuttlefish, Disco Dingo, Eoan Ermine, Focal Fossa"
});

5. Set the min/max animation speed.

textParticles.accelerate({
  maxSpeed: 2,
  minSpeed: -2
});

6. Customize the appearance of the text particles.

textParticles.accelerate({
  particleColor: "orange",
  particleSize: 0,
});

7. Customize the appearance of the text.

textParticles.accelerate({
  textColor: "#ddd",
  textSize: 24
});