Dot Orbit Shader

Use Dot Orbit Shader as a decorative background or texture. It renders colored dots that orbit inside a repeated grid and can run continuously or remain still.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

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

Basic usage

hero-background.tsx

import DotOrbitShader from "@/components/ui/dot-orbit-shader/dot-orbit-shader";
 
export function HeroBackground() {
return <DotOrbitShader className="absolute inset-0" speed={0.25} />;
}

Examples

Use a lower speed for ambient movement. Set speed to zero when the pattern should be static, and adjust colors, size, and spread to suit the background.

Usage


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

API

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.

Accessibility

Treat the shader as decorative and keep meaningful content outside it. Check text contrast against the final background and provide a reduced-motion alternative when needed.

Styling

Use className to place the shader in a bounded layer. The component accepts color and motion options without requiring changes to its source.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.