# Ciclorama

Painéis de imagem grandes dispostos em anel, girando sem parar à sua volta, que você pode arrastar.

> Ciclorama é um componente do THM Componentes que dispõe imagens em painéis altos ao redor de um anel, girando sem parar, uma volta a cada 20 segundos. Arrastar com o mouse ou o dedo gira o anel, e a rotação volta ao soltar. Usa Three.js e transformações CSS 3D e serve para vitrines de produtos e cases.

- Categoria: 3D e espaço
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue, Three.js
- Interação: Mouse, Toque
- URL: https://vibecode.thmtecnologia.com/componentes/ciclorama/

## Como ele é

É como estar no centro de um carrossel de parque, cercado por painéis de fotos altos que passam devagar. As imagens, com cantos arredondados, ficam numa roda levemente inclinada, vista por dentro, então os painéis se curvam em perspectiva. O anel completa uma volta a cada 20 segundos, em velocidade constante. Ao segurar e arrastar para os lados, a rotação para e o anel segue a mão; ao soltar, volta a girar sozinho. O fundo é transparente, e o componente ocupa 60% da altura da tela por padrão.

## Você pode estar procurando isto se pediu algo assim

- “carrossel de imagens em 3D que gira sozinho”
- “fotos girando em círculo ao redor da tela”
- “vitrine de produtos em roda que dá para arrastar”
- “galeria de cases girando em 3D para a página da agência”
- “aquele carrossel que parece que você está dentro dele”
- “imagens grandes passando em loop com efeito de profundidade”

## Também chamado de

roda de imagens 3D, anel de fotos, carrossel giratório, rotating image carousel, carrossel em anel, galeria circular 3D

## Quando usar

- Vitrine de produtos ou de coleção com fotos verticais
- Seção de cases ou de portfólio em página de agência
- Abertura de evento ou de lançamento com imagens fortes

## Quando evitar

- Quando a pessoa precisa clicar numa imagem: os painéis não têm link nem texto
- Páginas em que o movimento contínuo atrapalha a leitura
- Telas pequenas, sem ajustar a largura e a altura dos painéis

## Como pedir para a sua IA

```text
Crie um carrossel de imagens em anel, em 3D, para a vitrine de produtos, girando devagar em loop e respondendo ao arrasto com mouse e toque. Quero pausa fora da tela, versão estática para movimento reduzido e tamanho dos painéis ajustado ao celular.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Ciclorama

### Ciclorama usa WebGL?

Não. Apesar de usar o Three.js, Ciclorama posiciona as imagens como elementos HTML com transformações CSS 3D, sem contexto WebGL. Ainda assim, tem a classificação Pesado no THM Componentes: carrega o Three.js e uma biblioteca de animação e atualiza a cena a cada quadro enquanto gira.

### Posso arrastar Ciclorama no celular?

Pode. Ciclorama trata eventos de toque: arrastar o dedo para os lados gira o anel e, ao soltar, a rotação automática recomeça. Enquanto o dedo arrasta sobre o anel, a rolagem da página fica bloqueada. Os painéis têm 450 por 600 pixels por padrão, então vale reduzir width e height em telas pequenas.

### Ciclorama respeita quem prefere menos movimento?

O componente original gira sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema e que a animação pause fora da tela, o que em Ciclorama é simples: basta não iniciar a rotação contínua e deixar o arrasto como única forma de girar.

## Componentes relacionados

- [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão.
- [Porta-retrato](https://vibecode.thmtecnologia.com/componentes/porta-retrato/): Um cubo que gira com o arraste e mostra uma foto ou um vídeo em cada face.
- [Arcada](https://vibecode.thmtecnologia.com/componentes/arcada/): Fotos em fileira sobre uma curva, que deslizam com arrasto ou rolagem e ondulam de leve ao se mover.
- [Prateleira](https://vibecode.thmtecnologia.com/componentes/prateleira/): Uma fileira de cartões altos com foto que rola para o lado e abre cada cartão num painel por cima da página.
- [Guirlanda](https://vibecode.thmtecnologia.com/componentes/guirlanda/): Fotos, logos ou ícones dispostos em roda que giram sem parar em volta do centro e podem pausar com o mouse.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.