Interactive Particle Text Effect In JavaScript

Category: Animation , Javascript , Text | April 25, 2023
Authorg3th3x
Last UpdateApril 25, 2023
LicenseMIT
Views1,013 views
Interactive Particle Text Effect In JavaScript

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>

You Might Be Interested In:


Leave a Reply