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.

Halftone Dots is an image filter shader that converts an input image into a halftone dot pattern. Grid layout (square or hex), dot style, size, contrast, color palette, and grain are all independently configurable.
This is an image filter shader — it requires an image input. In React, pass a URL string to the image prop and it is loaded automatically. In vanilla JS, pass a fully loaded HTMLImageElement to u_image.

​
Usage

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

export default function Example() {
  return (
    <HalftoneDots
      image="/my-photo.jpg"
      type="gooey"
      grid="hex"
      size={0.5}
      radius={1.25}
      contrast={0.4}
      colorFront="#2b2b2b"
      colorBack="#f2f1e8"
      originalColors={false}
      inverted={false}
      grainMixer={0.2}
      grainOverlay={0.2}
      grainSize={0.5}
      style={{ width: 600, height: 400 }}
    />
  );
}

​
Props

​
image
string (React) | HTMLImageElement (vanilla JS)
required
The source image to filter. In React, pass a URL string — the component loads it automatically. In vanilla JS, pass a fully loaded HTMLImageElement as u_image.
​
type
HalftoneDotsType
default:"'gooey'"
Dot style. Use the HalftoneDotsTypes enum (vanilla JS) or string literal (React).
ValueDescription
classicCrisp circular dots
gooeySoft blobs that merge together
holesInverted circle with holes
softDiffuse, feathered blobs
​
grid
HalftoneDotsGrid
default:"'hex'"
Grid layout for dot placement. Use the HalftoneDotsGrids enum (vanilla JS) or string literal (React).
ValueDescription
squareRegular square grid
hexHexagonal offset grid
​
size
number
default:"0.5"
Grid size relative to the image box. Range: 0 to 1.
​
radius
number
default:"1.25"
Maximum dot size relative to the grid cell. Range: 0 to 2.
​
contrast
number
default:"0.4"
Contrast applied to the sampled image before determining dot sizes. Range: 0 to 1.
​
originalColors
boolean
default:"false"
When true, each dot uses the sampled color from the source image instead of colorFront.
​
inverted
boolean
default:"false"
Inverts the image luminance before determining dot sizes. Has no effect when contrast is zero.
​
colorFront
string
default:"'#2b2b2b'"
Foreground (dot) color used when originalColors is false.
​
colorBack
string
default:"'#f2f1e8'"
Background color shown between dots.
​
grainMixer
number
default:"0.2"
Strength of grain distortion applied to the dot edges. Range: 0 to 1.
​
grainOverlay
number
default:"0.2"
Post-processing black/white grain overlay strength. Range: 0 to 1.
​
grainSize
number
default:"0.5"
Scale applied to both grain distortion and the grain overlay. Range: 0 to 1.

​
Presets

The following presets are exported from @paper-design/shaders-react:
ExportNameDescription
defaultPresetDefaultGooey hex grid, warm paper tones
ledPresetLED screenSquare grid, green on black, soft type
netPresetMosaicClassic hex grid using original image colors
roundAndSquarePresetRound and squareSquare grid, holes type, inverted contrast
import { halftoneDotsPresets } from '@paper-design/shaders-react';

​
Enums

Import HalftoneDotsTypes and HalftoneDotsGrids from @paper-design/shaders when using the vanilla JS API: 
import { HalftoneDotsTypes, HalftoneDotsGrids } from '@paper-design/shaders';

// HalftoneDotsTypes: classic | gooey | holes | soft
// HalftoneDotsGrids: square | hex