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

Dither Torch

imagePro

A photo printed as a living dither (bayer, halftone, hatch or grain); the pointer is a torch that burns through to full colour and leaves a fading trail.

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.

dither-torch.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type DitherTorchProps = {  src: string  alt: string  mode?: DitherTorchMode  dotSize?: number  radius?: number  softness?: number  trail?: number  wave?: number  contrast?: number  ink?: string  paper?: string  tint?: number  fit?: 'cover' | 'contain'  focusX?: number  focusY?: number  children?: ReactNode  className?: string}export function DitherTorch({  src,  alt,  mode = 'bayer',  dotSize = 4,  radius = 150,  softness = 0.35,  trail = 0.5,  wave = 0.6,  contrast = 1.15,  ink = '#f1ebe0',  paper = '#0d0c0b',  tint = 0.15,  fit = 'cover',  focusX = 0.5,  focusY = 0.5,  children,  className,}: DitherTorchProps) {  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

Dither Torch 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/dither-torch

MCP

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

DitherTorchProps

Prop	Type	Default	What it does
`src` required	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` required	`string`	–	Describes the photo for screen readers.
`mode`	`DitherTorchMode`	`'bayer'`	How the tones are printed: `bayer`: an ordered 8 x 8 matrix of rounded dots `halftone`: round dots on a turned grid that grow with brightness `hatch`: engraved diagonal lines that thicken with brightness `grain`: a living film grain that redraws a few times a second
`dotSize`	`number`	`4`	Size of one dither cell in CSS pixels.
`radius`	`number`	`150`	Radius of the torch in CSS pixels.
`softness`	`number`	`0.35`	0 tears the photo open through the dither pattern; 1 fades it in smoothly.
`trail`	`number`	`0.5`	0 to 1: how long the torch's trail lingers after the pointer moves on.
`wave`	`number`	`0.6`	0 to 1: how strongly the idle swell moves through the print. 0 holds it still.
`contrast`	`number`	`1.15`	Tone contrast before dithering. 1 leaves the photo as it is.
`ink`	`string`	`'#f1ebe0'`	Ink colour, as hex.
`paper`	`string`	`'#0d0c0b'`	Paper colour behind the ink, as hex.
`tint`	`number`	`0.15`	0 to 1: how much of the photo's own colour seeps into the ink.
`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 print.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y