Particle Text

An incredibly advanced WebGL-style effect built entirely using native HTML5 Canvas ImageData. It reads any text string, converts the pixels into physical particles, and applies repulsion and spring forces to them as the user's mouse interacts with the canvas.

Live Preview

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ParticleText } from "@/components/creative/particle-text";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ParticleText } from "@/components/creative/particle-text";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ParticleText
        text="example"
        fontSize{10}
        fontFamily="example"
      />
    </div>
  );
}