Halftone Image
Draws an image as a token-tinted dot grid sized by brightness, with a radial reveal and an optional pointer lens.
Preview
Harbour, 6:10 am
Issue 14 · cover · 7 px pitch
Ines Duarte
Lead designer
square · 5 px
Object study 03
$48.00 · print
circle · 6 px
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Image to sample: same-origin, data: URI, or CORS-enabled. |
| alt | string | required | Text alternative; becomes the aria-label of the role="img" root. |
| cell | number | 8 | Grid pitch in CSS px. |
| minDot | number | 0.6 | Radius of the faint empty-cell dot; 0 hides the grid. |
| shape | "circle" | "square" | "circle" | Dot shape. |
| colors | [string, string] | ["var(--foreground)", "var(--muted-foreground)"] | Top and bottom gradient stops; CSS colors or var(--token). |
| lens | boolean | true | Swell dots near the pointer (off under reduced motion). |
| lensColor | string | null | "var(--accent)" | Colour the lens lights dots with; null keeps them in ink. |
| radius | number | 80 | Lens radius in CSS px. |
| reveal | boolean | true | Radial grow-in when an image loads (off under reduced motion). |
| invert | boolean | false | Light areas get the big dots. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.