Dot Orbit

Animated multi-color dots pattern with each dot orbiting around its cell center. Supports many colors plus shape and motion controls. Great for playful, dynamic backgrounds and UI textures.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dot Orbit to your project and fits it to your theme.

import { ShaderBackground } from "@/components/ui/dot-orbit"

export default function ShaderBackgroundDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ShaderBackground className="h-full w-full" />
    </div>
  )
}