Print Halftone
CMYK print screening with configurable dots, inks, paper, and registration.
JPEG, PNG, or WebP. Your image stays in this browser.
Customize
API reference
The component applies Shader Lab's CMYK Halftone effect to an image. It does not animate or add a text overlay.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | required | A project image URL, data URL, or local blob URL. Remote servers must allow anonymous CORS image loading. |
width / height | number | string | "100%" | CSS dimensions. Give the parent an explicit height. |
className / style | string / CSSProperties | — | Styles the outer image container. |
fit | "cover" | "contain" | "cover" | Fits and centers the image within the container. |
scale | number | 1 | Image zoom. The playground provides a range of 0.1–4. |
onError | (error: Error) => void | — | Reports initialization or image-loading failure. The component hides the failed canvas and supplies no replacement image. |
shape | "circle" | "square" | "diamond" | "line" | "circle" | Shape of each print dot. |
spacing | number | 5 | Logical grid spacing, 2–48. |
dotSize | number | 1 | Ink-dot size multiplier, 0.1–3. |
contrast | number | 1 | Tonal contrast, 0–2. |
softness | number | 0.25 | Dot-edge softness, 0–1. |
dotGain | number | 0 | Ink expansion, 0–1. |
gcr | number | 0.5 | Black generation relative to the color plates, 0–1. |
cmykBlend | "subtractive" | "overprint" | "subtractive" | Ink blending method. |
cyanAngle | number | 15 | Screen angle in degrees, 0–90. |
magentaAngle | number | 75 | Screen angle in degrees, 0–90. |
yellowAngle | number | 0 | Screen angle in degrees, 0–90. |
keyAngle | number | 45 | Screen angle in degrees, 0–90. |
inkCyan | string | "#00AEEF" | Hexadecimal ink or paper color. |
inkMagenta | string | "#EC008C" | Hexadecimal ink or paper color. |
inkYellow | string | "#FFF200" | Hexadecimal ink or paper color. |
inkKey | string | "#1a1a1a" | Hexadecimal ink or paper color. |
paperColor | string | "#F5F5F0" | Hexadecimal ink or paper color. |
paperGrain | number | 0.15 | Paper texture intensity, 0–0.5. |
registration | number | 0 | Plate misalignment, 0–5. |
Process uses the same CMYK settings as the reviewed sample, including the upstream default process inks. The light paper can make bright areas unsuitable for white text; adjust paper and ink controls for your composition.
Credits
Rendering uses the unmodified Shader Lab 3.0.2 runtime by basement.studio, licensed under Apache-2.0. Vivid Layer's adapter and examples use the Vivid Layer Community License; the upstream implementation retains its own license.
The default photograph is Jeremy Bishop's Monument Valley, used under the Unsplash License.