Orbit Bloom

A radial grid of shapes that morph between circle and square — same four effect modes as Orbit Cipher, but shape-based instead of glyph-based.

orbit-bloom

Background

Build lazily.

Shape-based sibling of Orbit Cipher — circles morph to squares as crests pass.

0px

Customize

Edit props; preview updates instantly.

Customize

Effect

Shape

Square

Shape shift

1.00

Fill ratio

60%

Columns

Rows

Speed

1.00x

Wave frequency

4.0

Wave power

7.0

Arms

Falloff

1.8

Base alpha

18%

Color cycle

3.1

Opacity

100%

Color 1

Color 2

Props

Props accepted by OrbitBloom.

Prop	Type	Default	Description
effect	"ripple" \| "spiral" \| "vortex" \| "pulse"	"spiral"	Radial pattern mode. `ripple` = concentric rings, `spiral` = arms uncoiling outward, `vortex` = log-radius arms with inverse spin, `pulse` = radial pulses modulated by angular petals.
columns	number	28	Cells across the canvas. Cell width = canvasWidth / columns.
rows	number	18	Cells down the canvas.
speed	number	1	Overall animation speed multiplier.
waveFrequency	number	1	Spatial frequency of the radial wave.
wavePower	number	3	Wave peak sharpness. Higher = thinner, brighter ridges.
spiralArms	number	3	Number of arms in `spiral`, `vortex`, and `pulse`.
falloff	number	1.5	Radial darkening exponent — higher concentrates brightness at the center.
baseAlpha	number	0.06	Baseline alpha so the shape grid is faintly visible everywhere.
colorSpeed	number	1	Speed of the two-tone color cycle.
shape	number	0.4	Base shape — 0 = full circle, 1 = full square, 0.5 = squircle. Per-cell shape also drifts with radius so the grid morphs outward from the center.
shapeShift	number	0.3	Speed at which the shape oscillates between circle and square over time. 0 disables the shift.
fillRatio	number	0.8	Shape side as a fraction of cell width at full intensity. Off-crest cells shrink to small dots.
color1	string	"#7c3aed"	Primary tone in the two-tone cycle.
color2	string	"#f0abfc"	Secondary tone in the two-tone cycle.
background	string	"#000000"	Background fill drawn each frame beneath the shapes.
opacity	number	1	Multiplier applied to the final draw alpha.
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-bloom.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

import { OrbitBloom } from "@/components/lazy-ui/orbit-bloom";

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