# Diorama Fotos e elementos espalhados que se deslocam em velocidades diferentes conforme o mouse, criando profundidade. > Diorama é um componente do THM Componentes que espalha fotos ou ilustrações em camadas e as desloca conforme o mouse ou o dedo, cada uma numa velocidade própria, o que cria sensação de profundidade. O movimento chega com atraso suave, como objetos boiando, e serve para heros com composição ilustrada, portfólios e páginas de lançamento. - Categoria: Interação e física - 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: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/diorama/ ## Como ele é Pense em recortes de papel presos em alturas diferentes dentro de uma caixa: ao inclinar a caixa, os mais próximos andam mais que os do fundo. Aqui, cada elemento recebe uma profundidade e, quando o cursor ou o dedo se move pela tela, todos se deslocam no mesmo sentido do gesto, ou no oposto com sensibilidade negativa, em distâncias proporcionais a essa profundidade. O deslocamento acompanha o ponteiro com um atraso suave, quadro a quadro, sem trancos. Você posiciona cada camada com classes, e o conteúdo é livre. Na demo, oito fotos de tamanhos variados flutuam sobre um fundo preto ao redor de um título central. ## Você pode estar procurando isto se pediu algo assim - “fotos espalhadas que se mexem quando passo o mouse” - “efeito de profundidade no topo do site com imagens flutuando” - “hero com elementos que andam em velocidades diferentes conforme o cursor” - “aquele efeito parallax de mouse de site de agência” - “colagem de fotos que reage ao movimento do dedo no celular” - “deixar a página inicial com sensação 3D sem usar WebGL” ## Também chamado de parallax de mouse, mouse parallax, cursor parallax, efeito de profundidade, floating images, parallax hero, imagens flutuantes ## Quando usar - Hero de agência, estúdio ou portfólio com colagem de fotos - Página de lançamento com ilustrações em camadas - Seções de marcas de moda, gastronomia ou turismo que vivem de imagem - Telas de boas-vindas em que o primeiro impacto importa ## Quando evitar - Páginas com formulários ou texto longo sobre as imagens, porque o movimento distrai - Composições com muitas imagens pesadas, que atrasam o carregamento do topo da página ## Como pedir para a sua IA ```text Crie um hero com parallax de mouse: fotos e ilustrações em camadas com profundidades diferentes que se deslocam suavemente conforme o cursor ou o dedo, com pausa quando a seção sai da tela, versão estática para movimento reduzido e imagens otimizadas. ``` 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 Diorama ### Diorama funciona no celular? Sim. Diorama também escuta o movimento do dedo na tela, então as camadas se deslocam enquanto a pessoa arrasta ou rola a página tocando nela. Sem cursor, o efeito só aparece durante o toque e fica parado no resto do tempo. Defina tamanhos menores para as imagens em telas estreitas, como a demo faz. ### Diorama pesa na página? Tem classificação Leve no THM Componentes, porque só move as camadas com transformações, sem WebGL. O laço de animação de Diorama roda o tempo todo enquanto o componente está montado, mesmo fora da tela, então vale pedir à IA para pausar esse laço quando a seção sai da viewport. O maior custo costuma ser o peso das fotos. ### Como controlar a intensidade de Diorama? Diorama tem duas alavancas no contêiner: sensitivity multiplica o deslocamento de todas as camadas, e valores negativos invertem o sentido; easingFactor, 0,05 por padrão, define a rapidez com que cada camada alcança o cursor. Em cada elemento, a prop depth diz quanto ele anda: mais profundidade, mais movimento. ## Componentes relacionados - [Boia](https://vibecode.thmtecnologia.com/componentes/boia/): Qualquer imagem ou ícone passa a boiar devagar, subindo, descendo e girando de leve, sem parar. - [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. - [Crônica](https://vibecode.thmtecnologia.com/componentes/cronica/): Depoimento em letras grandes que surge palavra por palavra, com um número gigante ao fundo que segue o mouse. - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. - [Alinhavo](https://vibecode.thmtecnologia.com/componentes/alinhavo/): Fotos que surgem uma após a outra atrás do cursor e logo somem, como um rastro de imagens. --- 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.