Skip to content
ParticleText.js

ParticleText.js

Create beautiful, interactive particle text animations with pure vanilla JavaScript
Get Started View Examples GitHub

Features

Section titled “Features”

Zero Dependencies

Pure vanilla JavaScript with no external dependencies. Works everywhere.

Highly Customizable

Extensive configuration options for colors, particles, animations, and more.

Responsive

Built-in responsive breakpoint system adapts to any screen size.

Performance Optimized

Smart particle limiting and automatic slow browser detection.

Accessible

ARIA labels, reduced motion support, and screen reader compatibility.

Framework Ready

Easy integration with React, Vue, Angular, Svelte, and more.

Quick Example

Section titled “Quick Example”

Get started with just a few lines of code:

<!DOCTYPE html>
<html>
<head>
  <title>ParticleText.js Demo</title>
</head>
<body>
  <canvas id="particle-canvas" data-text="Hello World"></canvas>


  <script src="particleText.js"></script>
  <script>
    initParticleJS('#particle-canvas', {
      colors: ['#695aa6', '#8b7bb8'],
      fontSize: 100
    });
  </script>
</body>
</html>

Why ParticleText.js?

Section titled “Why ParticleText.js?”

ParticleText.js makes it easy to add eye-catching particle text animations to your web projects. Whether you’re building a portfolio, landing page, or interactive experience, ParticleText.js provides the tools you need with minimal setup.

  • Simple API: Initialize with a single function call
  • Flexible Configuration: Over 15 configuration options
  • Mobile Support: Touch-enabled interactions
  • Browser Compatible: Supports IE11+ and all modern browsers

What’s Included?

Section titled “What’s Included?”
  • 18 Example Demos: Learn from comprehensive examples
  • Interactive Playground: Test configurations in real-time
  • Framework Guides: Integration docs for 6+ popular frameworks
  • Complete API Reference: Detailed documentation of all features
  • Performance Guides: Optimization tips and best practices

Ready to Start?

Section titled “Ready to Start?”

Community & Support

Section titled “Community & Support”

Built with love by Aayush Sinha