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