# Guirlanda

Photos, logos or icons arranged in a ring that keep turning around the center and can pause on hover.

> Guirlanda is a THM Componentes component that spaces images, logos or icons around a circle and keeps them turning around the center, always upright. A full turn takes 10 seconds by default, and the rotation can pause when the mouse moves over it. It suits logo walls, product showcases and team galleries.

- Category: Images and media
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Light: CSS or light JavaScript, no noticeable cost
- Technology: Vue 3, TypeScript, Tailwind CSS v4
- Interaction: Mouse
- URL: https://vibecode.thmtecnologia.com/en/components/guirlanda/

## 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

```text
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.

## Related components

- [Planetário](https://vibecode.thmtecnologia.com/en/components/planetario/): Icons or small elements circling around a center point, like planets around the sun.
- [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection.
- [Freguesia](https://vibecode.thmtecnologia.com/en/components/freguesia/): A strip of your client logos gliding slowly in a single color, below a short title.
- [Ouriço](https://vibecode.thmtecnologia.com/en/components/ourico/): A ball of round icons spinning in 3D that follows the mouse and brings the clicked icon to the front.
- [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).