What it looks like
Picture a clear ball with dozens of round stickers on the outside, spinning in midair. The closest icons look bigger and sharper; those at the back shrink and nearly fade, which creates depth. The spin direction follows where the mouse sits relative to the center, and the speed grows the farther away it is; with the cursor right in the middle, the sphere stops. Click an icon and the sphere rolls smoothly until it faces you. Pressing and dragging turns the ball too. The area is a 300 pixel square with a transparent background.
You may be looking for this if you asked for something like
- a spinning ball of logos for the tech I use
- 3D floating tech icons for the stack section of my portfolio
- show my app's integrations as a globe of icons
- a sphere of partner logos that spins with the mouse
- that floating 3D icons effect, like a tag cloud
- tool icons spinning around for my online resume
Also known as
- spinning logo ball
- 3D tag cloud
- logo sphere
- tech stack sphere
- rotating icon globe
- interactive icon sphere
When to use
- Tech stack sections in portfolios or online resumes
- SaaS integrations pages with partner logos
- Partner, client or tool blocks with many logos
- Community or event pages with topic icons
When to avoid
- When each logo name must be readable: canvas icons have no accessible text
- Large areas, unless you raise the 300 pixel canvas resolution
- Touch-only audiences: finger dragging does not spin the sphere in the original code
How to ask your AI
Create a 3D sphere of icons on a canvas for our tech section: the logos spin around it, follow the mouse and the clicked icon moves to the front. I want touch support, pausing when off screen and a static version for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Ouriço
Can I use my own tool logos in Ouriço?
Yes. Ouriço takes a list of image URLs in the images prop and crops each one into a 40 pixel circle. Because the images are drawn on a canvas, they must come from the same domain or a server with CORS enabled. The demo uses 30 SVG icons.
Does Ouriço work on phones?
Partly. Ouriço uses only mouse events: on a phone, tapping an icon still brings it to the front, because the browser turns the tap into a click, but dragging with a finger does not spin the sphere. For full touch support, ask your AI to add pointer events.
Does Ouriço respect reduced motion settings?
The original component spins whenever the cursor is away from the center. The THM Componentes prompt asks your AI for a static version for people who reduce motion, which is simple in Ouriço: draw the sphere once and turn it only when someone clicks or drags.
