Particle Image

Turn any image into an interactive particle field that scatters from the pointer and settles back toward its origin.

Sample any image into an interactive particle field. The source <img> is hidden and replaced by a canvas of particles that scatter away from the pointer and settle back toward their origin.

Installation

One-time setup: add the @ikui registry to your components.json.

components.json

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

Then install the component:

pnpm dlx shadcn@latest add @ikui/particle-image

Usage

import { ParticleImage } from "@/components/particle-image";

<ParticleImage imageSrc="/logo.svg" canvasWidth="300" canvasHeight="300" />

The source image must be same-origin or served with permissive CORS headers, since the engine reads its pixels off a canvas.

Examples

Colored particles

Pass color to recolor every particle, and initPosition to control where they spawn from before settling.

Props

Prop	Type	Default
`imageSrc`	`string`	-
`className`	`string`	-
`canvasWidth`	`string`	-
`canvasHeight`	`string`	-
`gravity`	`string`	`0.08`
`particleSize`	`string`	`1`
`particleGap`	`string`	`3`
`mouseForce`	`string`	`30`
`renderer`	`"default" \| "webgl"`	`default`
`color`	`string`	-
`colorArr`	`number[]`	-
`initPosition`	`"random" \| "top" \| "left" \| "bottom" \| "right" \| "misplaced" \| "none"`	`random`
`initDirection`	`"random" \| "top" \| "left" \| "bottom" \| "right" \| "none"`	`random`
`fadePosition`	`"explode" \| "top" \| "left" \| "bottom" \| "right" \| "random" \| "none"`	`none`
`fadeDirection`	`"random" \| "top" \| "left" \| "bottom" \| "right" \| "none"`	`none`
`noise`	`number`	`10`
`responsiveWidth`	`boolean`	-