Orbit Mesh

A lattice of dots that physically displace through the radial wave field — points push outward on crests and inward on troughs, with optional spiral twist.

orbit-mesh

Background

Build lazily.

Streaks of light woven through a smooth radial wave — switch between ripple, spiral, vortex, and pulse.

0px

Customize

Edit props; preview updates instantly.

Customize

Effect

Scale

0.40x

Color layers

Arms

Wave

0.22

Spiral

2.00

Thickness

0.130

Falloff

1.65

Brightness

3.00

Speed

0.50x

Color tint

Props

Props accepted by OrbitMesh.

Prop	Type	Default	Description
effect	"ripple" \| "spiral" \| "vortex" \| "pulse" \| "wave" \| "bloom"	"spiral"	Wave mode controlling the pulse formula. `ripple`/`spiral`/`vortex`/`pulse` share the Orbit Cipher family vocabulary; `wave` adds a non-radial horizontal sweep; `bloom` does a slow expanding burst with arm petals.
speed	number	0.3	Overall animation speed multiplier.
scale	number	1.2	Zoom of the visible wave field. Higher = bigger features (less crammed at center); lower = denser pattern.
colorLayers	number	3	Chromatic channel iterations (1–6). Layers 1–3 add R/G/B ghosts, 4–6 add C/M/Y — more layers = richer fringes.
spiralArms	number	3	Number of arms in `spiral`, `vortex`, and `pulse`.
waveIntensity	number	0.18	Radial displacement intensity at full ridge.
spiralIntensity	number	0.6	Tangential offset intensity — drives the spiral twist on top of the radial push.
lineThickness	number	0.06	Streak sharpness — numerator of `lineThickness / length(gridCell)`. Higher = thicker, blurrier streaks.
falloff	number	0.5	Radial darkening factor. Lower values flatten brightness across the canvas.
brightness	number	1.5	Overall brightness multiplier applied to the accumulated intensity.
colorTint	string	"#c084fc"	Tint multiplied into the accumulated channels. Higher `colorLayers` adds RGB then CMY ghosts that fan around this tint.
background	string	"#000000"	Background fill drawn each frame beneath the streaks.
className	string	—	Extra class names merged onto the root container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/orbit-mesh.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

import { OrbitMesh } from "@/components/lazy-ui/orbit-mesh";

export function Demo() {
  return (
    <div className="relative h-96 w-full overflow-hidden">
      <OrbitMesh effect="spiral" />
    </div>
  );
}