Search documentation

Find a vivid-layer page or product.

Halftone CMYK

A layered CMYK print filter with controllable ink gain, flooding, grain, and softness.

pnpm dlx shadcn@latest add @vivid-layer/halftone-cmyk
Source image

Customize

Size
0.2
Grid Noise
0.2
Softness
1
Contrast
1
Flood C
0.15
Flood M
0
Flood Y
0
Flood K
0
Gain C
0.3
Gain M
0
Gain Y
0.2
Gain K
0
Grain Mixer
0
Grain Overlay
0
Grain Size
0.5
Scale
1

API reference

The wrapper adds playback and runtime safeguards while preserving the complete Paper HalftoneCmyk API. See the Paper Halftone CMYK reference for the full prop table and accepted ranges.

PropTypeDefaultDescription
imagestring | HTMLImageElementundefinedOptionally supplies the source image used by the CMYK halftone effect.
playback"auto" | "always" | "paused""auto"Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport.
width / heightnumber | string"100%"Sets the canvas CSS dimensions. Size the parent element to establish the visible area.
maxPixelCountnumber2073600Caps the rendered pixel budget. Override only after measuring the target devices.

Credits

The rendering engine is Paper Shaders, distributed under the Apache License 2.0. The example image is Scott Webb's Banff landscape, released under CC0. vivid-layer supplies the adapter, playback and loading policies, documentation, and Registry packaging.