Interactive Particle Text Effect In JavaScript

Preview:

Description:

A JavaScript implementation of an interactive particle text effect using HTML5 canvas.

It breaks your text into individual particles that move and interact. As the user moves their cursor over the particle text, the particles are automatically repelled for a rippling effect across the text.

How to use it:

1. Create an HTML5 canvas element to hold the particle text.

<canvas></canvas>

2. Create an input field to accept the text to be particleized.

<input
  type="text"
  id="inputText"
  placeholder="Type your text..."
  value="Particle text on vanilla JavaScript"
/>

3. Import the necessary JavaScript module.

<script type="module" src="index.js"></script>