Installation

Architecture

This component leverages Float32Array buffers inside a raw Three.js <bufferGeometry> to achieve maximum performance. Instead of rendering thousands of React nodes, it renders a single mesh consisting of thousands of vertices.

During the useFrame loop, the distances between the normalized mouse coordinates and each vertex are calculated. If the mouse comes within the repulsion threshold, the vertex is pushed away using inverse square forces, and slowly interpolates back to its origin using a spring factor.

Usage Guide

1. Import the Component

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

import { ParticleSystem } from "@/components/creative/particle-system";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ParticleSystem } from "@/components/creative/particle-system";

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