Halftone Dots

A React component in Beamline's Motion & effects category.

A picture rebuilt as a field of dots whose size follows brightness; a new picture morphs the dots, a click ripples through, the pointer pushes dots aside.

Use it for

A signature visual for an empty state, onboarding step or feature intro.
A profile or brand header where a photo should read as part of the interface.

Not for

Showing an image people need to see in detail (img, lightbox).
Data (charts; a dot matrix of values is matrix or activity-heatmap).

Anatomy

field (role img, labelled)
canvas
unlit grid
lit dots (vertical gradient)
viewfinder corners (optional)

States

loading (grid only)
resting
morphing to a new picture
ripple
pointer displacement
paused (off screen or hidden tab)

Keyboard

Not focusable: it is a picture. Put controls that change it (segmented control) next to it.

Motion

Dots ease to their new size (time constant 120 ms) so pictures flow into each other; a click sends a ring outward at 520 px/s that swells the dots it passes; dots within 70 px of the pointer lean away up to 12 px. The canvas draws only while something moves. Reduced motion: pictures swap at once, no ripple or displacement.

Props

Prop	Type	Default	Description
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`HalftoneDotsClassNames`	—

Import

import { HalftoneDots } from "@/components/halftone-dots/halftone-dots";

Get it

Halftone Dots is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent