Halftone imagePro

A photo as a monochrome halftone screen with angle, cell size and round, square or line dots, antialiased in the shader, ink and paper from tokens.

Markdown

On this page

ProA wildlife photo as a halftone screen with round, square or line dots at three screens and three angles.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/halftone-image

Usage

tsx

import { HalftoneImage } from "@/components/ui/chatcn/pro/halftone-image"

<HalftoneImage src={image.url} alt={image.prompt} cellSize={8} angle={45} shape="round" />

Round dots use the classic cosine spot: dots in the highlights, a checkerboard at half tone, paper dots in the shadows, with coverage corrected so a 30% gray prints as 30% ink. Dots stand for dark on a light paper and for light on a dark one, so the picture reads the same in both themes.

Examples

Shapes and states

ProRound, square and line dots, a negative, a coarse muted screen, a missing file and a reveal on hover.

Props

Prop	Type	Notes
`src`, `alt`	`string`	`alt` is required
`cellSize`	`number`	CSS px between dot centers. Default 6
`angle`	`number`	Screen angle in degrees. Default 45
`shape`	`"round" \| "square" \| "line"`	Default `round`
`ink`, `paper`	`string`	Tokens or CSS colors
`contrast`, `brightness`, `invert`		Defaults 1.1, 0 and false
`reveal`	`boolean`	Original on hover, focus, or press and hold
`aspectRatio`, `width`, `height`, `maxPixels`, `renderer`		As in Dither image

Accessibility

The canvas is aria-hidden. The real content always exists: the <img> with your alt sits underneath and is what screen readers announce.
Under forced-colors: active the effect hides and the plain image shows with system colors.
Under prefers-contrast: more ink and paper snap to the text and canvas tokens, with no mid tones.

Motion

The first frame fades in over 200 ms; reveal crossfades over 150 ms.