Dot Orbit

Presets

Installation

npm i @paper-design/shaders-react

Code

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

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

Props

Name	Description	Type	Values
colorBack	Background color	`string`	Hex, RGB, or HSL color
colors	Up to 10 base colors	`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
scale	Overall zoom level of the graphics	`number`	0.01 to 5
speed	Animation speed	`number`	0 to 20

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