Halftone CMYK

Select this text

Paper logoPaper icon

Installation

npm i @paper-design/shaders-react

Code

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

<HalftoneCMYK
  size={0.59}
  gridNoise={0.5}
  softness={0.22}
  contrast={2}
  floodC={0.13}
  floodM={0.09}
  floodK={0.24}
  gainC={0.61}
  gainM={0.09}
  gainY={1}
  grainSize={0}
>
  <div className="demo">
    <style>{`.demo { display: grid; align-content: center; justify-items: start; gap: 48px; height: 100%; padding: 0 8%; color: #222 }
    .demo p { margin: 0; font: 300 120px/1.1 Matter, system-ui; font-feature-settings: "ss01"; word-spacing: 0.1em; text-transform: lowercase }
    .demo button { display: flex; align-items: center; height: 128px; padding: 0 40px; border: 3px solid rgb(0 0 0 / 20%); border-radius: 24px; font: 44px 'Paper Mono', ui-monospace, monospace; color: #222; background: #fff; transition: background-color 150ms cubic-bezier(0.685, 0.89, 0.315, 0.995) }
    .demo button:hover { background: #f0efe4 }
    .demo button:active { background: #e9e8e0 }
    .demo .logos { display: flex; align-items: center; gap: 40px }
    .demo .logos img { height: 80px; width: auto }`}</style>
    <p>Select this text</p>
    <div className="logos">
      <img src="/images/logos/paper-logo-only.svg" alt="Paper logo" />
      <img src="/apple-touch-icon.png" alt="Paper icon" />
    </div>
    <button
      onClick={(event) => {
        const clicks = Number(event.currentTarget.dataset.clicks ?? 0) + 1;
        event.currentTarget.dataset.clicks = String(clicks);
        event.currentTarget.textContent = `clicked ${clicks} time${clicks === 1 ? '' : 's'}`;
      }}
    >
      hover and click me
    </button>
  </div>
</HalftoneCMYK>

Shader Props

NameDescriptionTypeValues
imageThe image to use for the effectHTMLImageElement | stringImage object or URL
colorBackBackground (paper) colorstringHex, RGB, or HSL color
colorCCyan ink color (alpha controls layer transparency, not dot size)stringHex, RGB, or HSL color
colorMMagenta ink color (alpha controls layer transparency, not dot size)stringHex, RGB, or HSL color
colorYYellow ink color (alpha controls layer transparency, not dot size)stringHex, RGB, or HSL color
colorKBlack ink color (alpha controls layer transparency, not dot size)stringHex, RGB, or HSL color
sizeGrid size (relative to image box)number0 to 1
gridNoiseDisplaces both dot positions and color sampling points (positions only with sharp type); naturally makes the background more visiblenumber0 to 1
typeDot type style (dots and ink differ most at low softness)enum
| "dots" | "ink" | "sharp"
softnessDots edge softnessnumber0 to 1
contrastInput image contrastnumber0 to 2
floodCUniform cyan flood applied to all dots (needs colorC alpha > 0)number0 to 1
floodMUniform magenta flood applied to all dots (needs colorM alpha > 0)number0 to 1
floodYUniform yellow flood applied to all dots (needs colorY alpha > 0)number0 to 1
floodKUniform black flood applied to all dots (needs colorK alpha > 0)number0 to 1
gainCProportional cyan gain that enhances existing dots (needs colorC alpha > 0)number-1 to 1
gainMProportional magenta gain that enhances existing dots (needs colorM alpha > 0)number-1 to 1
gainYProportional yellow gain that enhances existing dots (needs colorY alpha > 0)number-1 to 1
gainKProportional black gain that enhances existing dots (needs colorK alpha > 0)number-1 to 1
grainSizeSize of grain texture, applied to both grain and overlay (relative to image box), needs grainMixer or grainOverlay > 0number0 to 1
grainMixerStrength of grain disturbing dots shapenumber0 to 1
grainOverlayPost-processing b/w grain overlaynumber0 to 1

Common Props

NameDescriptionTypeValues
scaleOverall zoom level of the graphicsnumber0.1 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
offsetXHorizontal offset of the graphics centernumber-1 to 1
offsetYVertical offset of the graphics centernumber-1 to 1
widthCSS width style of the shader elementnumber | string—
heightCSS height style of the shader elementnumber | string—
fitHow to fit the rendered shader into the canvas dimensionsenum
| "contain" | "cover"
originXReference point for positioning world width in the canvasnumber0 to 1
originYReference point for positioning world height in the canvasnumber0 to 1
minPixelRatioMinimum pixel ratio to use when rendering the shader (default is 2 for double resolution)number—
maxPixelCountMaximum pixel count that the shader may processnumber—

Description

CMYK halftone printing effect with customizable dot patterns and ink colors for each channel