Icon Cloud
Render a set of icons or logos across the surface of a slowly rotating 3D sphere. Pure CSS 3D + requestAnimationFrame, SSR-safe, with hover-to-pause and full control over radius, speed, and icon size.
Pro features
What the Pro version adds to this component.
3D Sphere Layout
Icons are distributed evenly across a real CSS 3D sphere surface, not a flat grid.
Smooth Rotation
requestAnimationFrame drives a continuous, jitter-free spin you can slow down or stop.
Speed Control
A single speed prop tunes the pace; 0 freezes the cloud for reduced-motion or static shots.
Hover to Pause
The sphere stops while hovered so users can focus on and read an individual icon.
Any Node as an Icon
Pass lucide icons, SVGs, or <img> logos — each keeps its own color and styling.
SSR-Safe & Labelable
Renders safely on the server and forwards aria attributes so the group gets one clear name.
Installation
Install via CLI
npx @moontra/moonui-cli add icon-cloudUsage
Examples
Default Tech-Stack Cloud
A balanced sphere of brand icons that carry their own colors, rotating at the default speed and pausing when the pointer hovers over it.
Slow, Calm Rotation
Lower the speed prop (0 = fully stopped) for a subtle, ambient motion that reads as premium rather than distracting.
Large Radius & Bigger Icons
Scale the whole cloud up with a wider radius and larger iconSize for hero sections where the sphere is the focal point.
Clickable Icons
Pass onIconClick to make every icon interactive: each one becomes a keyboard-accessible button (role="button", Enter/Space) that stays clickable even while the sphere rotates. Click an icon to see its name and position index below.
“Integrations” Landing Section
Compose the cloud with a real heading and supporting copy to build a trust-building “works with your stack” marketing block.