Components / Animations / Halftone Screen

Halftone Screen

An image in four-colour process halftone, the way a press prints it. Cyan, magenta, yellow and black are each screened on their own grid at 15°, 75°, 0° and 45°, which is what turns their interference into a rosette instead of a moiré. Coverage is dot area, not radius: past r = ½ a round dot is clipped by its cell, and the radius is solved from that clipped area, so 30% ink covers 30% of the paper. Hover for a loupe and press to lean in; Tab to it and the arrow keys carry the glass; on touch, tap for a look or hold and drag.

Usage

import HalftoneScreen from '@/components/halftone-screen'

<HalftoneScreen src={photo} alt="Describe the picture" cell={6} />

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/halftone-screen.json

Model

A(r) = πr² − 4·(r²·acos(1/2r) − ½√(r² − ¼)),  r > ½

the area a round dot of radius r covers once its cell clips it

Props