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