.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 Sweep

imagePro

A photo that dissolves into view square by square behind a ragged sweeping front, from a solid colour or a mosaic of itself.

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-sweep.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PixelSweepProps = {  src: string  alt: string  direction?: PixelSweepDirection  cellSize?: number  cover?: string  edgeNoise?: number  duration?: number  easing?: PixelSweepEasing  delay?: number  play?: boolean  seed?: number  onRevealComplete?: () => void  fit?: 'cover' | 'contain'  focusX?: number  focusY?: number  children?: ReactNode  className?: string}export function PixelSweep({  src,  alt,  direction = 'right',  cellSize = 22,  cover = '#0e0e10',  edgeNoise = 0.55,  duration = 1500,  easing = 'in-out',  delay = 0,  play,  seed = 7,  onRevealComplete,  fit = 'cover',  focusX = 0.5,  focusY = 0.5,  children,  className,}: PixelSweepProps) {  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 Sweep 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-sweep

MCP

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

PixelSweepProps

Prop	Type	Default	What it does
`src` required	`string`	–	The photo.
`alt` required	`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`	–	–

Preview

Code

The code is locked

Props

A11y