canvas-text-particle

Canvas-based interactive particle system that renders text as particles and reacts to mouse movement.

Demo

Demo Website

Install

You can install this module as a component:

# npm
npm install canvas-text-particle
# pnpm
pnpm add canvas-text-particle
# yarn
yarn add canvas-text-particle

CDN

You can also include this library in your HTML page directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/canvas-text-particle@1.1.1/dist/index.min.js"></script>

Example

Vanilla JS

import { ParticleText } from "canvas-text-particle";

const canvas = document.getElementById("canvas") as HTMLCanvasElement;

const pt = new ParticleText(canvas, {
  text: ["Hello", "World"],
  color: "#38bdf8",
  fontSize: 120,
  spread: 0.8,
}).mount();

// Update options at any time
pt.update({ color: "#f472b6" });

// Teardown
pt.destroy();

React

import { useEffect, useRef } from "react";
import { ParticleText } from "canvas-text-particle";

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }

    const pt = new ParticleText(canvasRef.current, {
      text: ["Hello", "World"],
      color: "#38bdf8",
    }).mount();

    return () => pt.destroy();
  }, []);

  return <canvas ref={canvasRef} width={900} height={400} />;
}

Vue

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from "vue";
  import { ParticleText } from "canvas-text-particle";

  const canvasRef = ref<HTMLCanvasElement | null>(null);
  let pt: ParticleText | null = null;

  onMounted(() => {
    if (!canvasRef.value) {
      return;
    }

    pt = new ParticleText(canvasRef.value, {
      text: ["Hello", "World"],
      color: "#38bdf8",
    }).mount();
  });

  onUnmounted(() => pt?.destroy());
</script>

<template>
  <canvas ref="canvasRef" width="900" height="400" />
</template>

API

ParticleText(canvas, options?)

Parameter	Type	Description
canvas	HTMLCanvasElement	Target canvas element
options	ParticleTextOptions	Configuration options

Options

Option	Type	Default	Description
text	string | string[]	[]	Text to render. Array for multi-line.
color	string	"#38bdf8"	Particle color (any valid CSS color)
fontSize	number	120	Font size in pixels
spread	number	0.8	Mouse repel force. Higher = more scatter.

Methods

Method	Returns	Description
.mount()	this	Start animation and attach mouse listeners
.destroy()	this	Stop animation and remove listeners
.update(options)	this	Merge new options and restart animation

All methods return this for chaining.