.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

Et billede eller en SVG genopbygget som interaktive WebGL-partikler, der strejfer rundt, spredes eller gemmer sig ved hover og reagerer på markøren.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Pixel Swarm er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`src` påkrævet	`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

Kode

Koden er låst

Props

A11y