Particle imagePro

An image formed by points sized by luminance, gathering once and then holding still.

Markdown

On this page

ProA portrait condensing out of points, then holding still.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/particle-image

Usage

tsx

import { ParticleImage } from "@/components/ui/chatcn/pro/particle-image"

<ParticleImage src={image.url} alt={image.prompt} columns={80} />

Dark ink on light paper draws the shadows; light ink on dark paper draws the lights, so the picture reads the right way round in both themes. Images must be same origin or serve CORS. Change playKey to replay the gather.

Examples

Cells and states

ProSquare cells, a coarse grid, no intro, a landscape crop and a missing image.

Props

Prop	Type	Notes
`src`, `alt`	`string`	`alt` is required: the points are an image
`columns`	`number`	Points across. Default 72
`shape`	`"round" \| "square"`	Default `round`
`maxDot`	`number`	Largest dot as a share of the cell. Default 0.92
`settle`	`number`	Seconds to settle. Default 1.2
`intro`	`boolean`	Gather on arrival. Default true
`playKey`	`unknown`	Change to replay
`onStatusChange`	`(status) => void`	`loading`, `ready` or `error`

Accessibility

An image named by alt, busy while loading. When the file fails, the name says so and the frame says how to fix it.
Under forced-colors the canvas hides.

Motion

Points gather from a soft cloud around the center on a critically damped spring, then snap to their grid and the loop stops. Reduced motion draws the picture in place.