# Arcada

Fotos em fileira sobre uma curva, que deslizam com arrasto ou rolagem e ondulam de leve ao se mover.

> Arcada é um componente do THM Componentes que mostra fotos em fileira sobre um arco 3D desenhado em WebGL: a imagem central fica de pé e as das pontas descem e inclinam. A galeria desliza em loop com arrasto, toque ou roda do mouse e encaixa na foto mais próxima. Funciona em portfólios e vitrines de projetos.

- 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, WebGL, OGL
- Interação: Mouse, Toque, Rolagem
- URL: https://vibecode.thmtecnologia.com/componentes/arcada/

## Como ele é

Imagine fotos coladas no alto de uma roda enorme, vista de frente. A do meio fica reta e mais alta; as dos lados descem e tombam acompanhando a curva, que a prop bend deixa mais ou menos acentuada. Cada foto tem cantos arredondados e pode trazer um título embaixo, em branco por padrão. As imagens ondulam de leve o tempo todo. Ao arrastar ou girar a roda do mouse, a fileira desliza com suavidade, a ondulação aumenta e, ao parar, a foto mais próxima se encaixa no centro. O fundo é transparente e a lista recomeça sem fim.

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

- “galeria de fotos curvada que desliza quando arrasto”
- “carrossel de imagens em arco para o portfólio”
- “fotos em fileira que andam com a rolagem do mouse e encaixam no centro”
- “vitrine de projetos com efeito 3D, meio curvada”
- “galeria infinita de imagens que ondula ao mexer”
- “mostrar os cases da agência de um jeito diferente de um slider comum”

## Também chamado de

galeria curva, curved gallery, galeria em arco, carrossel curvo de fotos, WebGL image gallery, infinite image carousel, galeria infinita

## Quando usar

- Portfólio de fotógrafo, designer ou estúdio
- Vitrine de projetos ou de cases de agência
- Destaques de coleção em loja de moda ou de decoração
- Página de evento com fotos das edições anteriores

## Quando evitar

- Páginas longas: a galeria escuta a roda do mouse e o arrasto na janela inteira
- Conteúdo em que cada imagem precisa de link ou de texto alternativo
- Páginas que já têm outro efeito pesado em WebGL

## Como pedir para a sua IA

```text
Crie uma galeria de imagens curva em WebGL para o portfólio: fotos em arco que deslizam em loop com arrasto, toque ou roda do mouse e encaixam no centro. Quero que ela só reaja com o cursor sobre a galeria, pause fora da tela e tenha versão estática para movimento reduzido.
```

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 Arcada

### Arcada atrapalha a rolagem da página?

Pode atrapalhar. No código original, Arcada escuta a roda do mouse, o arrasto e o toque na janela inteira, então rolar a página em qualquer ponto também faz a galeria avançar, sempre no mesmo sentido. Em páginas longas, peça à IA que limite esses eventos à área do componente.

### Posso usar minhas próprias fotos em Arcada?

Sim. Arcada recebe uma lista de itens com imagem e texto, e cada foto é cortada para preencher o cartão. Como viram textura WebGL, as imagens precisam vir do mesmo domínio ou de um servidor com CORS liberado; a curvatura, os cantos, a cor e a fonte do título também são props.

### Arcada respeita quem prefere menos movimento?

O componente original não trata essa preferência e mantém uma leve ondulação nas fotos o tempo todo. O prompt do THM Componentes pede à IA uma versão estática para quem reduz movimento no sistema e que a animação pause fora da tela, já que Arcada redesenha a cena a cada quadro.

## Componentes relacionados

- [Alameda](https://vibecode.thmtecnologia.com/componentes/alameda/): Um corredor sem fim com quadros nas duas paredes, que você percorre com a roda do mouse, arrastando ou pelas setas.
- [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.
- [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.
- [Ciclorama](https://vibecode.thmtecnologia.com/componentes/ciclorama/): Painéis de imagem grandes dispostos em anel, girando sem parar à sua volta, que você pode arrastar.
- [Deriva](https://vibecode.thmtecnologia.com/componentes/deriva/): Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique.

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