<orbit-absorb>Icons revolve, collapse into the center, and re-emerge in a staggered wave. Zero dependencies.
| Attribute | Type | Default | Description |
|---|---|---|---|
icons | JSON OrbitIcon[] | [] | Icons that orbit the center. A URL string, or { src, x?, y? } for a fixed position. |
dots | JSON OrbitDot[] | [] | Decorative dots/squares scattered in the canvas. |
ring-radii | JSON number[] | auto | Explicit ring radii (px). Overrides the spacing derived from rings. |
radius | number (px) | 140 | Orbit radius — distance of icons from the center. |
icon-size | number (px) | 80 | Width and height of each icon. |
badge-size | number (px) | 88 | Diameter of the center badge. |
accent | color | #007CE1 | Center badge fill and glow color. |
rings | number | 3 | Number of background rings. |
spin-duration | number (s) | 60 | Time for one full revolution. |
absorb-duration | number (s) | 7 | Length of one absorb-and-re-emerge cycle. |
stagger | number (s) | 0.25 | Delay between each icon's absorb, creating the wave. |
start-angle | number (deg) | -90 | Angle of the first icon (−90 = top). |
glow | boolean | true | Soft glow behind the center badge. Set "false" to disable. |
emit | boolean | true | Ripple rings emitted from the center. Set "false" to disable. |
width | number (px) | auto | Override the SVG viewBox width. |
height | number (px) | auto | Override the SVG viewBox height. |
center-x | number (px) | width / 2 | Override the center X coordinate. |
center-y | number (px) | height / 2 | Override the center Y coordinate. |
For frameworks, set these as JS arrays instead of JSON attributes — they take precedence over the matching attribute.
| Property | Type | Description |
|---|---|---|
icons | OrbitIcon[] | Orbiting icons as a live array. |
dots | OrbitDot[] | Decorative dots as a live array. |
ringRadii | number[] | Explicit ring radii as a live array. |
The default slot renders inside the center badge — drop in a logo or mark, e.g. <img src="/logo.svg" />.
type OrbitIcon = string | { src: string; x?: number; y?: number };
type OrbitDot = { cx: number; cy: number; r?: number; size?: number; fill: string };
Respects prefers-reduced-motion: reduce — when the user prefers reduced motion, all animations are disabled and icons rest in their orbit.