HeroParticles

The HeroParticles component initializes a high-performance rendering loop using HTML5 Canvas to control an array of floating dot nodes and connection threads. When the mouse moves, nodes automatically calculate repulsion vectors relative to the coordinates to create organic shockwaves.

Live Preview

Performance Notes

Canvas rendering performance is linked directly to Node density. Keeping counts below 120 (and 60 on mobile viewports) keeps drawing times under 1.5ms per tick, which guarantees solid 60fps on average mobile devices.

Usage Guide

1. Import the Component

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

import { HeroParticles } from "@/components/creative/hero/hero-particles";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { HeroParticles } from "@/components/creative/hero/hero-particles";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <HeroParticles
        particleCount{10}
        minRadius{10}
        maxRadius{10}
      />
    </div>
  );
}