.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

Ein Bild oder eine SVG, neu aufgebaut als interaktive WebGL-Partikel, die umherstreifen, sich zerstreuen oder beim Hover verstecken und auf den Mauszeiger reagieren.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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

Der Code ist gesperrt

Pixel Swarm gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`src` erforderlich	`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`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y