# Fotograma Uma foto grande por vez, que sai deslizando e dá lugar à próxima, crescendo a partir do centro. > Fotograma é um componente do THM Componentes que mostra uma foto grande por vez: a atual sai deslizando e a próxima cresce a partir do centro. A troca vem do teclado, do gesto de deslizar ou de um intervalo automático, e um título com botão pode ficar por cima. Serve para heros de imobiliária, turismo e eventos. - Categoria: Imagem e mídia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/fotograma/ ## Como ele é Pense num painel de fotos que vira de página. Cada foto aparece grande e centralizada, e o componente ocupa todo o espaço que você reservar para ele, como o topo da página. A cada troca, a foto atual sai deslizando do quadro, na vertical por padrão ou para o lado no modo horizontal, e em seguida a próxima surge pequenina no centro e cresce até o tamanho normal, em cerca de 300 milissegundos. Uma camada opcional por cima recebe título e botão, que descem suavemente até o lugar quando todas as imagens terminam de carregar. Na demo, um degradê escuro na base ajuda na leitura do texto. ## Você pode estar procurando isto se pediu algo assim - “fotos grandes trocando sozinhas no topo do site” - “slideshow de imagens em tela cheia para a página inicial” - “banner de fotos que passa quando deslizo o dedo no celular” - “galeria de imagens que troca com as setas do teclado” - “topo do site de imobiliária com as fotos dos imóveis passando” - “imagem de fundo que muda de tempos em tempos com título por cima” - “carrossel de fotos de tela inteira para site de eventos” ## Também chamado de slideshow em tela cheia, fullscreen image slider, hero slider, carrossel de imagens, banner rotativo, image carousel, slider de fotos ## Quando usar - Hero de imobiliária mostrando fachadas e ambientes dos imóveis - Páginas de turismo, hotéis e pousadas com fotos do destino - Sites de eventos e casamentos que vivem de imagem - Abertura de portfólio de fotógrafo ou de arquiteto ## Quando evitar - Quando a mensagem principal depende de uma única imagem que todo mundo precisa ver - Páginas que precisam carregar rápido em rede móvel, já que todas as fotos são baixadas antes de o título aparecer ## Como pedir para a sua IA ```text Crie um slideshow de fotos em tela cheia no topo da página inicial: uma imagem por vez, a atual sai deslizando e a próxima cresce do centro, troca automática a cada 5 segundos, setas do teclado e gesto de deslizar no celular, com troca sem animação para quem prefere menos movimento. ``` 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 Fotograma ### Fotograma funciona no celular? Sim. Fotograma troca de foto com o gesto de deslizar o dedo e pausa o intervalo automático enquanto a pessoa desliza. Como o componente baixa todas as fotos antes de mostrar a primeira e o título, use imagens comprimidas no tamanho certo e compare o LCP antes e depois, como pede o prompt do THM Componentes. ### Dá para navegar em Fotograma pelo teclado? Sim. Fotograma recebe foco pelo Tab, mostra um contorno fino de foco e responde às quatro setas: cima e esquerda voltam, baixo e direita avançam. As fotos não ganham texto alternativo por padrão, então vale pedir à IA que inclua uma descrição para cada imagem. ### Fotograma respeita quem prefere menos movimento? O componente original sempre anima a troca e não lê a preferência do sistema. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, o que em Fotograma pode significar trocar as fotos sem deslizar nem crescer e só quando a pessoa pedir. ## Componentes relacionados - [Claquete](https://vibecode.thmtecnologia.com/componentes/claquete/): Sequência de fotos que troca de imagem com ondas, pixels, redemoinho, queima, glitch ou círculo. - [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. - [Tirinha](https://vibecode.thmtecnologia.com/componentes/tirinha/): Cartões verticais em tela de celular que passam sozinhos, com barrinhas de progresso no topo e toque para avançar. - [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. - [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. --- 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.