.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Pixel Swarm

imagePro

An image or SVG rebuilt as interactive WebGL particles that roam, scatter or hide on hover and react to the pointer.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

pixel-swarm.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PixelSwarmProps = {  src: string  fit?: 'contain' | 'cover'  shape?: SwarmShape  colorMode?: SwarmColorMode  color?: string  palette?: string[]  paletteBy?: 'random' | 'tone'  shade?: boolean  count?: number  particleSize?: number  hover?: SwarmHover  repel?: SwarmRepel  repelRadius?: number  repelStrength?: number  transition?: number  intro?: boolean  label?: string  children?: ReactNode  className?: string}export function PixelSwarm({  src,  fit = 'contain',  shape = 'square',  colorMode = 'original',  color = 'currentColor',  palette,  paletteBy = 'random',  shade = false,  count = 9000,  particleSize,  hover = 'roam',  repel = 'push',  repelRadius = 120,  repelStrength = 1,  transition = 1100,  intro = true,  label,  children,  className,}: PixelSwarmProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Pixel Swarm is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/pixel-swarm

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

PixelSwarmProps

Prop	Type	Default	What it does
`src` required	`string`	–	URL or data URI of the picture. SVG, PNG, JPG and WebP all work. Transparent pixels stay empty.
`fit`	`'contain' \| 'cover'`	`'contain'`	`contain` shows the whole picture inside the box; `cover` fills the box and crops the overflow.
`shape`	`SwarmShape`	`'square'`	Shape of the particles. `mixed` gives every particle a fixed random shape.
`colorMode`	`SwarmColorMode`	`'original'`	Where particle colours come from. `original` keeps the picture's own colours, `single` uses `color`, `palette` uses `palette`.
`color`	`string`	`'currentColor'`	The colour for `single`. Any CSS colour, including `var(--x)`; defaults to the inherited text colour.
`palette`	`string[]`	–	Colours for `palette` mode. Any CSS colours, including `var(--x)`.
`paletteBy`	`'random' \| 'tone'`	`'random'`	In `palette` mode: `random` picks a colour per particle, `tone` maps the picture's brightness onto the palette like a gradient map.
`shade`	`boolean`	`false`	In `single` mode: scale each particle's brightness by the picture's own brightness, so photos stay readable.
`count`	`number`	`9000`	Approximate number of particles, up to 24 000. It is reduced on small containers.
`particleSize`	`number`	–	Diameter of a particle in CSS pixels. Leave it out to size particles from the spacing, which makes the picture solid. Photos (pictures with no transparent pixels) then get slightly larger, soft-edged particles that blend into each other instead of hard blocks.
`hover`	`SwarmHover`	`'roam'`	What the particles do while the pointer is over the component (or it has keyboard focus, which makes it focusable). `roam` lets them wander across the whole box, `scatter` blows them to random spots, `hide` shrinks them away. They return when the pointer leaves.
`repel`	`SwarmRepel`	`'push'`	How the pointer pushes particles as it moves across the picture.
`repelRadius`	`number`	`120`	Reach of the pointer force in CSS pixels.
`repelStrength`	`number`	`1`	Strength of the pointer force. 1 is a gentle push, 2 throws particles far.
`transition`	`number`	`1100`	Time in milliseconds for the hover change (and the first assembly) to complete.
`intro`	`boolean`	`true`	Gather the picture out of scattered particles the first time it is seen.
`label`	`string`	–	Accessible description of the picture. Without it the component is decorative. When `hover` makes it focusable it always gets a name, `"Particle picture"` when none is given.
`children`	`ReactNode`	–	Content drawn on top of the particles.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y