Skip to main content
A halftone-dot image filter featuring customizable grids, color palettes, and dot styles. Perfect for creating retro printing effects, LED screen simulations, and artistic halftone patterns.

​
Features

  • Multiple dot styles (classic, gooey, holes, soft)
  • Two grid types (square, hex)
  • Original color preservation or custom colors
  • Adjustable dot size and contrast
  • Grain effects and overlays
  • Inverted luminance option

​
Basic Usage

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

function App() {
  return (
    <HalftoneDots
      image="/path/to/image.jpg"
      type="gooey"
      grid="hex"
      size={0.5}
      radius={1.25}
      contrast={0.4}
      colorFront="#2b2b2b"
      colorBack="#f2f1e8"
      originalColors={false}
      grainMixer={0.2}
      grainOverlay={0.2}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
default:"''"
Optional source image to apply the halftone effect to
​
type
'classic' | 'gooey' | 'holes' | 'soft'
default:"'gooey'"
Dot style:
  • classic: Sharp circular dots
  • gooey: Soft blended dots that merge together
  • holes: Inverted dots creating holes
  • soft: Smooth gradient dots
​
grid
'square' | 'hex'
default:"'hex'"
Grid arrangement:
  • square: Square/rectangular grid
  • hex: Hexagonal grid (more organic)
​
size
number
default:"0.5"
Grid size relative to the image box (0 = large dots, 1 = small dots)
​
radius
number
default:"1.25"
Maximum dot size relative to grid cell
​
contrast
number
default:"0.4"
Contrast applied to the sampled image before halftoning
​
colorFront
string
default:"'#2b2b2b'"
Foreground/dot color in hex, rgb, or rgba format
​
colorBack
string
default:"'#f2f1e8'"
Background color in hex, rgb, or rgba format
​
originalColors
boolean
default:"false"
Use sampled image’s original colors instead of colorFront
​
inverted
boolean
default:"false"
Inverts the image luminance (doesn’t affect the color scheme)
​
grainMixer
number
default:"0.2"
Strength of grain distortion applied to dot edges
​
grainOverlay
number
default:"0.2"
Post-processing black/white grain overlay
​
grainSize
number
default:"0.5"
Scale applied to both grain distortion and grain overlay

​
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 HalftoneDots shader comes with several built-in presets:
  • Default: Gooey dots on hex grid with grain
  • LED Screen: Soft dots on square grid simulating LED display
  • Mosaic: Classic dots with original colors
  • Round and Square: Hole dots with inverted luminance
import { HalftoneDots, halftoneDotsPresets } from '@paper-design/shaders-react';

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

​
Examples

​
LED Screen Effect

<HalftoneDots
  image="/image.jpg"
  type="soft"
  grid="square"
  size={0.5}
  radius={1.5}
  contrast={0.3}
  colorFront="#29ff7b"
  colorBack="#000000"
  grainMixer={0}
  grainOverlay={0}
/>

​
Mosaic Pattern

<HalftoneDots
  image="/image.jpg"
  type="classic"
  grid="hex"
  size={0.6}
  radius={2}
  contrast={0.01}
  originalColors={true}
  grainMixer={0}
  grainOverlay={0}
/>

​
Inverted Holes

<HalftoneDots
  image="/image.jpg"
  type="holes"
  grid="square"
  size={0.8}
  radius={1}
  contrast={1}
  colorFront="#ff8000"
  colorBack="#141414"
  inverted={true}
  grainMixer={0.05}
  grainOverlay={0.3}
/>

​
Classic Print

<HalftoneDots
  image="/image.jpg"
  type="classic"
  grid="hex"
  size={0.5}
  radius={1.25}
  contrast={0.4}
  colorFront="#000000"
  colorBack="#ffffff"
  grainMixer={0.2}
  grainOverlay={0.1}
/>

​
Technical Details

​
Shader Uniforms (Vanilla JS)

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

{
  u_type: HalftoneDotsTypes.classic, // or 0
  u_grid: HalftoneDotsGrids.square, // or 0
  u_colorFront: [r, g, b, a],
  u_colorBack: [r, g, b, a],
  u_size: 0.5,
  u_radius: 1.25,
  u_contrast: 0.4,
  u_originalColors: false,
  u_inverted: false,
  u_grainMixer: 0.2,
  u_grainOverlay: 0.2,
  u_grainSize: 0.5,
}

​
Dot Types

  • classic (0): Sharp circular dots with antialiasing
  • gooey (1): Soft dots that blend together
  • holes (2): Inverted effect creating holes
  • soft (3): Smooth gradient dots

​
Grid Types

  • square (0): Rectangular grid alignment
  • hex (1): Hexagonal grid (offset rows)

​
Color Modes

Custom Color Mode (originalColors: false):
  • Uses colorFront for dots and colorBack for background
  • Creates monochrome or duotone effect
  • Best for stylized looks
Original Colors Mode (originalColors: true):
  • Preserves image colors in halftone pattern
  • Adjusts radius and contrast automatically
  • Best for realistic halftone prints

​
Performance Notes

  • Static shader (no animation by default)
  • Performance depends on size (smaller = slower)
  • gooey and soft types sample multiple cells
  • Grain effects have minimal performance impact
  • Works best with moderate size values (0.3-0.7)