Pixel Sweep
imageProEin Foto, das Quadrat für Quadrat hinter einer gezackten, streichenden Front sichtbar wird, aus einer einfarbigen Fläche oder einem Mosaik seiner selbst.
Bald verfügbar
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Die Vorschau konnte nicht geladen werden.
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
pixel-sweep.tsxPro
Der Code ist gesperrt
Pixel Sweep gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · 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
CLI
npx shadcn@latest add @manniche-pro/pixel-sweepMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
PixelSweepProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
src erforderlich | string | – | The photo. |
alt erforderlich | string | – | Describes the photo for screen readers. |
direction | PixelSweepDirection | 'right' | The way the reveal travels. right starts at the left edge and sweeps to the right. |
cellSize | number | 22 | Size of one square in CSS pixels. |
cover | string | '#0e0e10' | What the photo hides under: a hex colour, or mosaic for the photo itself in blocks of one colour (needs CORS on cross-origin photos, otherwise it falls back to a dark grey). |
edgeNoise | number | 0.55 | 0 is a straight front; 1 is a ragged, scattered one with tongues running ahead. |
duration | number | 1500 | Length of the sweep in milliseconds. |
easing | PixelSweepEasing | 'in-out' | Pace of the sweep. |
delay | number | 0 | Wait in milliseconds before the sweep starts. |
play | boolean | – | Leave it out to reveal once, when a third of the box has scrolled into view. true reveals, false covers the photo again, each with the same sweep. |
seed | number | 7 | Changes the scatter pattern, so several on a page do not dissolve alike. |
onRevealComplete | () => void | – | Called once the photo is fully revealed. |
fit | 'cover' | 'contain' | 'cover' | cover crops the photo to fill the box, contain shows all of it. |
focusX | number | 0.5 | Horizontal focus point from 0 (left) to 1 (right), used when cover crops the photo. |
focusY | number | 0.5 | Vertical focus point from 0 (top) to 1 (bottom), used when cover crops the photo. |
children | ReactNode | – | Content shown on top of the photo. |
className | string | – | – |
A11y
Noch keine Hinweise zur Barrierefreiheit.
Die Hinweise kommen mit dem Quellcode, wenn Pro öffnet.