.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

Et foto trykt som levende dither (bayer, halvtone, skravering eller korn), hvor markøren er en fakkel, der brænder igennem til fuld farve og efterlader et udtonende spor.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Dither Torch er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`src` påkrævet	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` påkrævet	`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

Kode

Koden er låst

Props

A11y