SVG path customizable orbiting images effect.
Pick a shape, then change the radius, rotation and speed. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs to orbit along the path. |
altPrefix | string | "Orbiting image" | Prefix for auto-generated alt attributes. |
shape | string | "ellipse" | Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom. |
customPath | string | undefined | Custom SVG path string (used when shape="custom"). |
baseWidth | number | 1400 | Base width for the design coordinate space used for responsive scaling. |
radiusX | number | 700 | Horizontal radius for ellipse/rectangle shapes. |
radiusY | number | 170 | Vertical radius for ellipse/rectangle shapes. |
radius | number | 300 | Radius for circle, square, triangle, star, heart shapes. |
starPoints | number | 5 | Number of points for star shape. |
starInnerRatio | number | 0.5 | Inner radius ratio for star (0-1). |
rotation | number | -8 | Rotation angle of the entire orbit path in degrees. |
duration | number | 40 | Duration of one complete orbit in seconds. |
itemSize | number | 64 | Width/height of each orbiting item in pixels. |
direction | string | "normal" | Animation direction: "normal" or "reverse". |
fill | boolean | true | Whether to distribute items evenly around the orbit. |
width | number | "100%" | 100 | Container width in pixels or "100%". |
height | number | "auto" | 100 | Container height in pixels or "auto". |
showPath | boolean | false | Whether to show the orbit path for debugging. |
pathColor | string | "rgba(0,0,0,0.1)" | Stroke color when showPath is true. |
pathWidth | number | 2 | Stroke width when showPath is true. |
easing | string | "linear" | Animation easing: linear, easeIn, easeOut, easeInOut. |
paused | boolean | false | Whether the animation is paused. |
center (slot) | VNode | undefined | Custom content rendered at the center of the orbit. |
responsive | boolean | false | Enable responsive scaling based on container width. |
Keyboard shortcuts and ARIA behavior.