# Dot Orbit
URL: https://remocn.dev/docs/shaders/components/shader-dot-orbit

Dots orbiting on concentric paths across the frame

- Install: `npx shadcn@latest add @remocn/shader-dot-orbit`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-dot-orbit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderDotOrbit } from "@/components/remocn/shader-dot-orbit";

const ShaderDotOrbitScene = () => (
  <ShaderDotOrbit speed={1} size={1} spreading={1} />
);

export const RemotionRoot = () => (
  <Composition
    id="ShaderDotOrbit"
    component={ShaderDotOrbitScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Credits

Shader by [paper-design/shaders](https://github.com/paper-design/shaders).

## Use when
- You want a structured dot-grid backdrop with gentle orbital motion.
- A tech scene benefits from a regular pattern that reads as "network" or "system".
- You want dot size/spread tunable via `size`/`spreading`.

## Don't use when
- You want a static dot grid — the static `dot-grid` shader is intentionally not shipped; use a CSS grid.
- You want organic, flowing motion — use `shader-warp` or `shader-metaballs`.
- The regular pattern would clash with dense foreground content.