Future UI

Particle Dispersion

▦ Cards

Image card made of particles that swirl and repel around the mouse cursor.

particlecanvasimagehoverphysicsinteractiveblock

No preview available

Canvas 2D Physics ~ Move Mouse to Interact

Controls

4
60
5

Cards / React Component

About Particle Dispersion

Image card made of particles that swirl and repel around the mouse cursor.

Category Cards
Framework React + TypeScript
Dependencies gsap
Tags particle, canvas, image, hover, physics, interactive, block

Install Particle Dispersion in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/particle-dispersion.json?key=YOUR_LICENSE_KEY"

Usage example

import { ParticleDispersion } from './ParticleDispersion';

export default function Example() {
  return (
    <ParticleDispersion
      image="/your-image.jpg"
      width={400}
      height={500}
      particleSize={3}
      sampleGap={4}
      mouseRadius={60}
      force={5}
      title="Particle"
      subtitle="Dispersion Effect"
    />
  );
}