MMridha UI

Interactive Particle Field

A React Three Fiber canvas with a field of particles that respond to mouse cursor proximity — nearby particles scatter and drift back into place. GPU-accelerated and optimized for use as a hero background.

ReactNext.jsClient ComponentReactThree.js

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/interactive-particle-field

Registry endpoint: https://ui.mridha.net/r/interactive-particle-field.json

Manual Installation

1. Install dependencies

pnpm add @react-three/fiber @react-three/drei three

2. Copy the component file

Copy the source from the Code tab above into components/ui/interactive-particle-field.tsx

3. Import the component

import { InteractiveParticleField } from "@/components/ui/interactive-particle-field";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <InteractiveParticleField />
    </main>
  );
}

Dependencies

@react-three/fiber@react-three/dreithree

Accessibility

  • The canvas is purely decorative — uses aria-hidden='true'.
  • Provide a static background color fallback behind the canvas.
  • Do not place interactive UI controls inside the canvas.

Performance

  • Particle count is automatically reduced on mobile devices.
  • Rendering pauses when the component is outside the viewport.
  • This is the heaviest component in the library — use once per page.
  • Requires WebGL support. Provides a graceful static fallback.

Browser Limitations

  • Requires WebGL support — not available in all headless or older browsers.
  • High-density displays may need particle count reduction for stable 60fps.