.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

Ein Foto, gedruckt als lebendiges Dithering (Bayer, Halbton, Schraffur oder Korn), bei dem der Mauszeiger als Fackel bis zur vollen Farbe durchbrennt und eine verblassende Spur hinterlässt.

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.

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

Der Code ist gesperrt

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

MCP

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

DitherTorchProps

Prop	Typ	Standard	Was sie tut
`src` erforderlich	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` erforderlich	`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`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y