Dot Orbit Shader

Animated multi-color dots, each orbiting around its cell center. Great for playful backgrounds, textures, and UI accents. Powered by Paper Design Shaders.

Features

Up to 10 dot colors with automatic interpolation between them.
Controls for dot size, size variation, and orbit spread.
stepsPerColor multiplies the color count for richer gradients.
Animatable with speed control — set to 0 for a static pattern.

Examples

Pastel

Dense

Tight uniform dots with high color step count for a neon pixel effect.

Slow drift

Low speed with wide spread for a subtle ambient motion.

Playground

Adjust dot size, spread, and speed to explore the shader.

Controls

Dot size0.4

Size variation0.3

Orbit spread0.5

Speed1

Installation

npx shadcn@latest add @sona-ui/dot-orbit-shader

Usage


export default function DotOrbitShaderExample() {
  return <DotOrbitShader className="h-64 lg:h-72 w-full" />;
}

Props

Property	Type	Default	Description
`colorBack`	`string`	`"#000000"`	Background color. Accepts hex, RGB, or HSL strings.
`colors`	`string[]`	`["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"]`	Up to 10 dot colors. Accepts hex, RGB, or HSL strings.
`size`	`number`	`0.4`	Dot radius relative to cell size (0–1).
`sizeRange`	`number`	`0.3`	Random variation in dot size (0–1). 0 = uniform.
`spreading`	`number`	`0.5`	Maximum orbit distance around each cell center (0–1).
`stepsPerColor`	`number`	`1`	Extra color steps between base colors. 1 = N colors, 2 = 2×N, etc. (1–4).
`speed`	`number`	`1`	Animation speed multiplier. 0 = static.