Material · dither · Free

Orbit Dots

Orbiting dot field for loading shells, empty states, and quiet cards.

Type: dither
Contexts: loading · empty · card
Tags: dither · dots · orbit · signal
Perf: webgl · DotOrbit uses a noise texture — light for cards; static in dense grids.

Configurator

Pause freezes the live preview. Reduced motion uses the CSS shell fallback. Reset restores catalog defaults and clears config URL params. Share config copies this page link.

Speed0.45Scale0.70Size0.55Size range0.25Spreading0.85Steps3.00Back

Install

free

Install under 60s — CLI or copy-paste, no account required.

CLI

npx shadcn@latest add @frameline/orbit-dots

Copy-paste path

components/ui/orbit-dots.tsx

Drop source beside your UI kit, or paste JSX from the panel below after install.

Installation docs

Free — no account required. Source lands in your repo. Full install guide.

License

Free

Excellent free materials. Same craft bar as paid.

Permitted

Install free SKUs into your projects
Commercial use of free materials
Copy / CLI install without an account

Not permitted

Redistribute source packages
Resell materials in templates or asset kits

Compare Free, Personal, and Team on Pricing.

JSX

import { OrbitDots } from "@/materials";

<OrbitDots
  speed={0.45}
  scale={0.7}
  size={0.55}
  sizeRange={0.25}
  spreading={0.85}
  stepsPerColor={3}
  colorBack="#F7F5F0"
  colors={["#2D6BFF","#5B8CFF","#E8F0FF"]}
  className="absolute inset-0"
/>

Props

Name	Type	Default	Description
speed	number	0.45	Animation speed
scale	number	0.7	Pattern scale
size	number	0.55	Dot size
sizeRange	number	0.25	Size variation
spreading	number	0.85	Orbit spread
stepsPerColor	number	3	Steps per color
colorBack	color	#F7F5F0	Background color
colors	colors	#2D6BFF, #5B8CFF, #E8F0FF	Orbit colors

Frameline

Design assets for the AI era — shippable surface so you don’t ship the default look.

Product

Resources

Company

Account

Sera · Stone · Blue