What it looks like
It is like a Ferris wheel seen from the front: items are evenly spaced on a circle and keep turning around the center, yet each stays upright, like the cabins. By default the radius is 100 pixels and a full turn takes 10 seconds at a steady pace; you can reverse the direction and change the speed and the easing. With pause on hover turned on, the whole wheel stops when the mouse is over an item and resumes when it leaves. The component has no colors or background of its own: the look comes from the images or logos you place inside.
You may be looking for this if you asked for something like
- photos spinning in a circle in the middle of the page
- client logos rotating around a center point
- a ring gallery that stops when I hover
- icons orbiting like a Ferris wheel
- show the team with photos turning in a circle
- something other than a carousel to display products
- a circle of images slowly rotating in the hero
Also known as
- Ferris wheel gallery
- rotating gallery
- orbit animation
- orbiting images
- logo ring
- circular carousel
When to use
- A clients or partners section with rotating logos
- A team section with small photos in a ring
- A product or integrations showcase in a hero
- A portfolio page that wants a highlight outside the usual grid
When to avoid
- Many items or large items, which overlap on a small radius
- Content people need to read or click calmly, since everything keeps moving
How to ask your AI
Create a ring of client logos turning around the center, each one upright, pausing on hover, with a smaller radius on phones, space reserved for the circle in the layout and a still 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 Guirlanda
Why does Guirlanda take no space on the page?
Because the root element of Guirlanda has zero size and only marks the center of the circle; the items turn around it with absolute positioning. Place the component centered inside a container wide and tall enough for the diameter plus the item size, as the demo does.
Does Guirlanda work on phones?
Yes, since the rotation in Guirlanda is a CSS transform animation that is light on the device. On narrow screens, lower the radius so the circle fits: the demo uses 80 pixels on phones instead of 120 on desktop. Pause on hover was designed for the mouse.
Does Guirlanda respect reduced motion settings?
The original component always spins and does not read that preference. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion; with Guirlanda, it is enough to pause the CSS animation and keep the items still on the ring.
