Dot Orbit

Installation

npm i @paper-design/shaders-react

Code

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

<DotOrbit
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 0%)"
  stepsPerColor={4}
  size={1}
  sizeRange={0}
  spreading={1}
  scale={1}
  speed={2}
  colors={[
    "hsl(26, 100%, 50%)",
    "hsl(0, 100%, 19%)",
    "hsl(0, 100%, 3%)",
    "hsl(38, 100%, 83%)"
  ]}
/>

Props

colorBack

Background color.

colors

Up to 10 base colors.

stepsPerColor

Number of discrete steps between each 2 base colors.

size

Dot radius relative to cell size.

sizeRange

Randomizes each dot radius between 0 and size.

spreading

Maximum orbit distance.

scale

Overall pattern zoom.

speed

Animation speed.

Description

Animated multi-color dot grid where each dot orbits around its cell center. Supports up to 10 base dot colors with optional 2×, 3×, or 4× extended color steps, along with controls for dot size, variation, and orbit distance. Great for playful, dynamic backgrounds and UI textures