Pro

Halftone image

A photograph printed as a halftone screen: ink dots on a 45° grid whose size follows the picture's tone. The dots grow in on a diagonal when it first appears, and swell and part around the pointer like a loupe over newsprint.

Pro

pnpm dlx shadcn@latest add @caliper/halftone-image

Spring issue

Move across the portrait to look through the loupe.

Aoife Byrne

On building tools for slow work, p. 32

Installs components/ui/halftone-image.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

Portraits, covers and feature images on editorial and brand pages.
Pairing with the photograph itself, as the reveal lens demo does.

Skip it when

Images people must judge accurately, such as product colour.
Very small thumbnails, where the screen turns to noise.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The loupe eases back: Dots keep the direction they were pushed in and ease home after the pointer leaves, so nothing snaps.

Styling

Area, not radius: Each dot's area is proportional to the ink it stands for, as in print, so mid-tones look right instead of washing out.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/halftone-image

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

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

The worked example comes with Pro

The 27-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

HalftoneImage

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

src *string—

alt *string—What the picture shows.

cellnumber9Screen pitch in px: the distance between dot centres along a row.

reachnumber96How far the pointer's loupe reaches, in px.

It exposes img semantics, with aria-label and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.