dot orbit

An animated dot field where each dot orbits its own grid cell. Dial in size variation and orbit spread for anything from quiet polka dots to swarming chaos.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

import { DotOrbit } from '@devmischief/shaders-svelte';

<DotOrbit
  width={1280}
  height={720}
  colors={['#ff006e', '#ffbe0b', '#06d6a0', '#3a86ff']}
  colorBack="#000000"
  stepsPerColor={4}
  size={1}
  sizeRange={0}
  spreading={1}
  scale={1}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={1.5}
  fit="none"
/>

Shader Props

name	description	type	values
colors	Base dot colors (up to 10).	string[]	hex / rgb
colorBack	Background color shown behind the dots.	string	hex / rgba
stepsPerColor	Extra interpolated colors generated between each pair of base colors. 1 = N colors, 4 = 4×N.	number	1 → 4
size	Dot radius relative to cell size.	number	0 → 1
sizeRange	Random per-dot size variation. 0 = uniform, higher = more variation up to base size.	number	0 → 1
spreading	Maximum orbit distance around each cell center.	number	0 → 1
speed	Animation speed of the orbits.	number	0 → 3
fit	How the dot grid is fit into the canvas.	string	none · cover · contain

Common Props

name	description	type	values
originX	Reference point for positioning width in the canvas.	number	0 → 1
originY	Reference point for positioning height in the canvas.	number	0 → 1
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas.	number	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas.	number	—
minPixelRatio	Minimum pixel ratio used when rendering the shader (default 2).	number	—
maxPixelCount	Maximum pixel count the shader may process.	number	—