<orbit-absorb>

Icons revolve, collapse into the center, and re-emerge in a staggered wave. Zero dependencies.

GitHub npm

Logo 

		

	


	

		
API reference


		
Attributes

		

			

				
					

						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.
					

				
			

		


		
Properties (JavaScript)

		
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.
					

				
			

		


		
Slot

		
The default slot renders inside the center badge — drop in a logo or mark, e.g.
			<img src="/logo.svg" />.
		


		
Types

		
type OrbitIcon = string | { src: string; x?: number; y?: number };
type OrbitDot  = { cx: number; cy: number; r?: number; size?: number; fill: string };


		
Accessibility

		
Respects prefers-reduced-motion: reduce — when the user prefers reduced motion,
			all animations are disabled and icons rest in their orbit.