# Halftone Dots

A React component in [Beamline](https://beamline.io/)'s [Motion & effects](https://beamline.io/components/effects) category. Live demo: https://beamline.io/components/halftone-dots

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](https://beamline.io/components/lightbox)).
- Data (charts; a dot matrix of values is matrix or [activity-heatmap](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Motion & effects

- [Glow](https://beamline.io/components/glow): Ambient light around one element that says something is happening: an aurora under a working composer, or a ring of light round a live card.
- [Light band](https://beamline.io/components/light-band): A slow band of split light in the dark behind a section, blue at one end and amber at the other with a bright core: Prism's light at a chosen place, a…
- [Liquid gooey](https://beamline.io/components/liquid-gooey): Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.
- [Sound](https://beamline.io/components/sound): Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.