Dot Orbit
Installation
npm i @paper-design/shaders-react
Code
import { DotOrbit } from '@paper-design/shaders-react';
<DotOrbit
height={500}
colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33", "#33cc99"]}
colorBack="#000000"
stepsPerColor={4}
size={1}
sizeRange={0}
spreading={1}
scale={1}
speed={1.5}
/>
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 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| 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.