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.

A static, anti-aliased grid pattern rendered in one of four shape types: circle, diamond, square, or triangle. Each shape supports a fill color, stroke color, and background color, along with optional random variation in size and opacity per cell.

​
Usage

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

export default function Example() {
  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: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#000000"
Background color of the grid.
​
colorFill
string
default:"#ffffff"
Fill color of each shape.
​
colorStroke
string
default:"#ffaa00"
Stroke/outline color of each shape.
​
size
number
default:"2"
Base size (radius) of each shape in pixels. Range: 1 to 100.
​
gapX
number
default:"32"
Horizontal spacing between shape centers in pixels. Range: 2 to 500.
​
gapY
number
default:"32"
Vertical spacing between shape centers 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 per cell. 0 = uniform. Range: 0 to 1.
​
opacityRange
number
default:"0"
Random variation in shape opacity per cell. 0 = fully opaque. Range: 0 to 1.
​
shape
string
default:"\"circle\""
Shape type for each grid cell. One of "circle", "diamond", "square", or "triangle".

​
Shape options

The DotGridShapes enum provides the available shape values:
KeyValueDescription
circle0Circular dots
diamond1Diamond (rotated square)
square2Axis-aligned square
triangle3Equilateral triangle

​
Presets

NameDescription
DefaultWhite circles with orange stroke on black
TrianglesOutlined grey triangles on white
Tree lineVariable-sized circles suggesting a treeline
WallpaperGold-outlined diamonds on dark green

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.