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.

Static grid pattern made of circles, diamonds, squares or triangles. Features customizable size, spacing, stroke width, and random variations.

​
React Usage

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

export default function MyComponent() {
  return (
    <DotGrid
      colorBack="#000000"
      colorFill="#ffffff"
      colorStroke="#ffaa00"
      size={2}
      gapX={32}
      gapY={32}
      strokeWidth={0}
      sizeRange={0}
      opacityRange={0}
      shape="circle"
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountDotGrid(canvas, {
  colorBack: '#000000',
  colorFill: '#ffffff',
  colorStroke: '#ffaa00',
  size: 2,
  gapX: 32,
  gapY: 32,
  strokeWidth: 0,
  sizeRange: 0,
  opacityRange: 0,
  shape: 'circle',
});

// Call cleanup() when done

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
colorFill
string
default:"'#ffffff'"
Shape fill color in hex format.
​
colorStroke
string
default:"'#ffaa00'"
Shape stroke color in hex format.
​
size
number
default:"2"
Base size of each shape in pixels. Range: 1 to 100.
​
gapX
number
default:"32"
Pattern horizontal spacing in pixels. Range: 2 to 500.
​
gapY
number
default:"32"
Pattern vertical spacing in pixels. Range: 2 to 500.
​
strokeWidth
number
default:"0"
Outline stroke width in pixels. Range: 0 to 50.
​
sizeRange
number
default:"0"
Random variation in shape size. 0 creates uniform sizes, higher values add randomness up to base size. Range: 0 to 1.
​
opacityRange
number
default:"0"
Random variation in shape opacity. 0 makes all shapes opaque, higher values add semi-transparency. Range: 0 to 1.
​
shape
'circle' | 'diamond' | 'square' | 'triangle'
default:"'circle'"
Shape type for the dots:
  • circle: Round dots
  • diamond: 45-degree rotated squares
  • square: Square dots
  • triangle: Triangular dots

​
Common Sizing Parameters

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

​
Presets

The Dot Grid shader comes with several built-in presets:
  • Default: White circles with orange stroke
  • Triangles: Gray outlined triangles
  • Tree line: Random sized green circles in vertical rows
  • Wallpaper: Gold outlined diamonds on green
import { DotGrid, treeLinePreset } from '@paper-design/shaders-react';

<DotGrid {...treeLinePreset.params} />

​
Notes

  • This shader is static and does not animate
  • Supports higher resolution rendering (up to 6016×3384 pixels)
  • Use sizeRange and opacityRange to create organic, hand-drawn effects