Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

CMYK halftone printing effect applied to images with customizable dot patterns and ink colors for each channel (Cyan, Magenta, Yellow, Black). Simulates traditional four-color printing process.

​
Features

  • True CMYK color separation
  • Customizable ink colors per channel
  • Multiple dot styles (dots, ink, sharp)
  • Individual channel gain and flood controls
  • Grid noise and grain effects
  • Vintage printing simulation

​
Basic Usage

import { HalftoneCmyk } from '@paper-design/shaders-react';

function App() {
  return (
    <HalftoneCmyk
      image="/path/to/image.jpg"
      type="ink"
      size={0.2}
      contrast={1}
      softness={1}
      colorBack="#fbfaf5"
      colorC="#00b4ff"
      colorM="#fc519f"
      colorY="#ffd800"
      colorK="#231f20"
      gridNoise={0.2}
      floodC={0.15}
      gainC={0.3}
      gainY={0.2}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
default:"''"
Optional source image to convert to CMYK halftone
​
type
'dots' | 'ink' | 'sharp'
default:"'ink'"
Dot rendering style:
  • dots: Separate dots with clear boundaries
  • ink: Blended dots simulating ink spread
  • sharp: Sharp dots with per-pixel color sampling
​
size
number
default:"0.2"
Halftone cell size (0 = large cells, 1 = small cells)
​
contrast
number
default:"1"
Image contrast adjustment before halftone conversion
​
softness
number
default:"1"
Edge softness of dots (0 = hard edge, 1 = smooth gradient)
​
colorBack
string
default:"'#fbfaf5'"
Background (paper) color in hex, rgb, or rgba format
​
colorC
string
default:"'#00b4ff'"
Cyan ink color in hex, rgb, or rgba format
​
colorM
string
default:"'#fc519f'"
Magenta ink color in hex, rgb, or rgba format
​
colorY
string
default:"'#ffd800'"
Yellow ink color in hex, rgb, or rgba format
​
colorK
string
default:"'#231f20'"
Black (key) ink color in hex, rgb, or rgba format
​
gridNoise
number
default:"0.2"
Smooth noise applied to both dot positions and color sampling
​
grainSize
number
default:"0.5"
Size of grain overlay texture
​
grainMixer
number
default:"0"
Strength of grain affecting dot size
​
grainOverlay
number
default:"0"
Strength of grain overlay on final output

​
Channel Controls

​
floodC
number
default:"0.15"
Flat cyan dot size adjustment applied uniformly
​
floodM
number
default:"0"
Flat magenta dot size adjustment applied uniformly
​
floodY
number
default:"0"
Flat yellow dot size adjustment applied uniformly
​
floodK
number
default:"0"
Flat black dot size adjustment applied uniformly
​
gainC
number
default:"0.3"
Proportional cyan dot size gain (enhances existing dots)
​
gainM
number
default:"0"
Proportional magenta dot size gain
​
gainY
number
default:"0.2"
Proportional yellow dot size gain
​
gainK
number
default:"0"
Proportional black dot size gain

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"1"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center

​
Animation Parameters

​
speed
number
default:"0"
Animation speed multiplier (0 for static)
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The HalftoneCmyk shader comes with several built-in presets:
  • Default: Vibrant CMYK with cyan and yellow emphasis
  • Drops: High contrast with irregular dot placement
  • Newspaper: Grayscale newsprint effect
  • Vintage: Soft vintage colors with grain
import { HalftoneCmyk, halftoneCmykPresets } from '@paper-design/shaders-react';

function App() {
  return <HalftoneCmyk {...halftoneCmykPresets[0].params} image="/image.jpg" />;
}

​
Examples

​
Newspaper Print

<HalftoneCmyk
  image="/image.jpg"
  type="dots"
  size={0.01}
  contrast={2}
  softness={0.2}
  colorBack="#f2f1e8"
  colorC="#7a7a75"
  colorM="#7a7a75"
  colorY="#7a7a75"
  colorK="#231f20"
  gridNoise={0.6}
  floodK={0.1}
  gainC={-0.17}
  gainM={-0.45}
  gainY={-0.45}
  grainOverlay={0.2}
/>

​
Vintage Poster

<HalftoneCmyk
  image="/image.jpg"
  type="sharp"
  size={0.2}
  contrast={1.25}
  softness={0.4}
  colorBack="#fffaf0"
  colorC="#59afc5"
  colorM="#d8697c"
  colorY="#fad85c"
  colorK="#2d2824"
  gridNoise={0.45}
  floodC={0.15}
  gainC={0.3}
  gainY={0.2}
  grainMixer={0.15}
  grainOverlay={0.1}
/>

​
High Contrast Drops

<HalftoneCmyk
  image="/image.jpg"
  type="ink"
  size={0.88}
  contrast={1.15}
  softness={0}
  colorBack="#eeefd7"
  colorC="#00b2ff"
  colorM="#fc4f4f"
  colorY="#ffd900"
  colorK="#231f20"
  gridNoise={0.5}
  floodC={0.15}
  gainC={1.0}
  gainM={0.44}
  gainY={-1.0}
  grainMixer={0.05}
  grainOverlay={0.25}
/>

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API: 
import { HalftoneCmykTypes, getShaderNoiseTexture } from '@paper-design/shaders';

{
  u_type: HalftoneCmykTypes.ink, // or 1
  u_noiseTexture: getShaderNoiseTexture(), // Required!
  u_colorBack: [r, g, b, a],
  u_colorC: [r, g, b, a],
  u_colorM: [r, g, b, a],
  u_colorY: [r, g, b, a],
  u_colorK: [r, g, b, a],
  // ... other parameters
}

​
Dot Types

  • dots (0): Separate dots with clear boundaries
  • ink (1): Blended dots simulating ink spread
  • sharp (2): Sharp dots with direct pixel sampling

​
CMYK Separation

The shader automatically converts RGB images to CMYK using standard formulas:
  • Cyan: Absence of red
  • Magenta: Absence of green
  • Yellow: Absence of blue
  • Black (Key): Overall darkness
Each channel is rendered at a different rotation angle (15°, 75°, 0°, 45°) to prevent moiré patterns.

​
Channel Controls

Flood Parameters (-1 to 1):
  • Add or subtract a flat amount from all dots in a channel
  • Positive values make all dots bigger
  • Negative values make all dots smaller
  • Useful for overall color balance
Gain Parameters (-1 to 1):
  • Multiply existing dot sizes proportionally
  • Positive values enhance existing dots
  • Negative values reduce existing dots
  • Preserves relative differences between areas

​
Performance Notes

  • Static shader (no animation by default)
  • Requires noise texture (automatically handled in React)
  • ink and sharp types sample 9 cells per pixel
  • Performance scales with image resolution
  • Grid noise adds slight computational cost