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.

An animated dots pattern where each dot orbits around its Voronoi cell center. Supports up to 10 colors with interpolation steps between them, plus controls for dot size, size randomization, and orbit spread. Great for playful, dynamic backgrounds and UI textures.

​
Usage

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

export default function Example() {
  return (
    <DotOrbit
      colorBack="#000000"
      colors={['#ffc96b', '#ff6200', '#ff2f00', '#421100', '#1a0000']}
      size={1}
      sizeRange={0}
      spreading={1}
      stepsPerColor={4}
      speed={1.5}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#000000"
Background color behind the dots.
​
colors
string[]
Array of up to 10 colors cycled across the dot grid.
​
size
number
default:"1"
Dot radius relative to the cell size. Range: 0 to 1.
​
sizeRange
number
default:"0"
Random variation in dot size. 0 = uniform, higher = random up to base size. Range: 0 to 1.
​
spreading
number
default:"1"
Maximum orbit distance from the cell center. Range: 0 to 1.
​
stepsPerColor
number
default:"4"
Number of interpolation steps between base colors. 1 = N discrete colors, 4 = 4× more gradations. Range: 1 to 4.
​
speed
number
default:"1.5"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultWarm fire-tone dots orbiting on black
BubblesLarge grey bubbles with size variation
ShineSmall blue, white and gold dots
HallucinatorySingle black dot pattern on yellow

​
Sizing

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