# Ciclorama

Tall image panels arranged in a ring that keeps turning around you and can be dragged by hand.

> Ciclorama is a THM Componentes component that places images on tall panels around a ring and keeps it turning, one full lap every 20 seconds. Dragging with a mouse or finger turns the ring, and rotation resumes on release. Built with Three.js and CSS 3D transforms, it suits product and case study showcases.

- Category: 3D and space
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue, Three.js
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/ciclorama/

## What it looks like

It feels like standing in the middle of a fairground carousel, surrounded by tall photo panels drifting past. The images, with rounded corners, sit on a slightly tilted ring seen from inside, so the panels curve away in perspective. The ring completes a lap every 20 seconds at a steady pace. Press and drag sideways and the rotation stops and follows your hand; let go and it starts turning again. The background is transparent, and the component takes 60% of the screen height by default.

## You may be looking for this if you asked for something like

- “a 3D image carousel that spins by itself”
- “photos rotating in a circle around the screen”
- “a product showcase wheel people can drag”
- “case studies spinning in 3D for an agency page”
- “that carousel that makes you feel like you are inside it”
- “large images looping past with a sense of depth”

## Also known as

3D photo ring, rotating image carousel, perspective image wheel, circular 3D gallery, spinning carousel, image ring

## When to use

- Product or collection showcases with portrait photos
- Case study or portfolio sections on agency pages
- Event or launch openers with strong images

## When to avoid

- When people need to click an image: the panels have no link or text
- Pages where constant motion gets in the way of reading
- Small screens, unless you adjust the panel width and height

## How to ask your AI

```text
Create a 3D image carousel arranged in a ring for my product showcase, turning slowly in a loop and responding to mouse and touch drags. I want it paused off screen, a static version for reduced motion and panel sizes adjusted for phones.
```

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 Ciclorama

### Does Ciclorama use WebGL?

No. Even though it uses Three.js, Ciclorama places the images as HTML elements with CSS 3D transforms, with no WebGL context. It is still rated Heavy in THM Componentes: it loads Three.js and an animation library and updates the scene every frame while it spins.

### Can I drag Ciclorama on a phone?

Yes. Ciclorama handles touch events: dragging a finger sideways turns the ring, and automatic rotation restarts on release. While the finger drags over it, page scrolling is blocked. Panels are 450 by 600 pixels by default, so lower width and height on small screens.

### Does Ciclorama respect reduced motion settings?

The original component always spins. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion and for the animation to pause off screen, which is simple in Ciclorama: skip the continuous rotation and keep dragging as the only way to turn it.

## Related components

- [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.
- [Porta-retrato](https://vibecode.thmtecnologia.com/en/components/porta-retrato/): A cube that turns as you drag it, showing a photo or a video on each face.
- [Arcada](https://vibecode.thmtecnologia.com/en/components/arcada/): Photos in a row along a curve that glide when you drag or scroll and ripple slightly as they move.
- [Prateleira](https://vibecode.thmtecnologia.com/en/components/prateleira/): A row of tall photo cards that scrolls sideways and opens each card in a panel over the page.
- [Guirlanda](https://vibecode.thmtecnologia.com/en/components/guirlanda/): Photos, logos or icons arranged in a ring that keep turning around the center and can pause on hover.

---
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).