Dot Orbit

Presets

Description

Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures.

Installation

npm i @paper-design/shaders-react

Code

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

<DotOrbit
  width={1280}
  height={720}
  colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33", "#33cc99"]}
  colorBack="#000000"
  stepsPerColor={4}
  size={1}
  sizeRange={0}
  spreading={1}
  speed={1.5}
/>

Shader Props

Name	Description	Type	Values
colors	Up to 10 base colors	`string[]`	Hex, RGB, or HSL color
colorBack	Background color	`string`	Hex, RGB, or HSL color
stepsPerColor	Number of extra colors between base colors (1 = N color palette, 2 = 2×N color palette, 3 = 3×N color palette, etc)	`number`	1 to 4 (integer)
size	Dot radius relative to cell size	`number`	0 to 1
sizeRange	Random variation in shape size (0 = uniform size, higher = random value up to base size)	`number`	0 to 1
spreading	Maximum orbit distance	`number`	0 to 1

Common Props

Name	Description	Type	Values
speed	Animation speed	`number`	—
frame	Starting animation frame	`number`	—
scale	Overall zoom level of the graphics	`number`	0.01 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
offsetX	Horizontal offset of the graphics center	`number`	-1 to 1
offsetY	Vertical offset of the graphics center	`number`	-1 to 1
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
fit	How to fit the rendered shader into the canvas dimensions	`enum`	\| `"contain"` \| `"cover"`
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas	`number`	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas	`number`	—
originX	Reference point for positioning world width in the canvas	`number`	0 to 1
originY	Reference point for positioning world height in the canvas	`number`	0 to 1
minPixelRatio	Minimum pixel ratio to use when rendering the shader	`number`	—
maxPixelCount	Maximum pixel count that the shader may process	`number`	—