# Monóculo Um círculo de aumento segue o mouse sobre a foto e mostra os detalhes ampliados, sem sair do lugar. > Monóculo é um componente do THM Componentes que coloca uma lupa sobre qualquer conteúdo: ao passar o mouse, um círculo de 170 pixels segue o cursor e mostra aquela região ampliada 1,5 vez. Funciona com foto, vídeo ou HTML, tem um modo fixo num ponto e serve para detalhe de produto, plantas e imagens técnicas. - 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, Motion for Vue - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/monoculo/ ## Como ele é Funciona como uma lupa de mão passando sobre uma foto. Quando o mouse entra na área, surge um círculo que cresce de leve e acompanha o cursor; dentro dele, o mesmo conteúdo surge ampliado, com o ponto sob o ponteiro parado no lugar e o entorno aumentado. Fora do círculo, a imagem continua normal. Quando o mouse sai, a lupa some. Diâmetro e aumento são ajustáveis, 170 pixels e 1,5 vez por padrão, e um modo fixo mantém a lupa sempre visível num ponto escolhido. Na demo, a foto fica num card escuro com raios de luz roxos, e o texto abaixo desfoca enquanto a lupa está ativa. ## Você pode estar procurando isto se pediu algo assim - “lupa para ver detalhes da foto do produto passando o mouse” - “zoom na imagem quando passo o cursor por cima” - “círculo de aumento que segue o mouse sobre a foto” - “mostrar os detalhes de uma planta de apartamento sem abrir outra página” - “efeito de lente de aumento em imagem para loja virtual” - “ampliar parte de um gráfico ou de uma imagem técnica com o mouse” ## Também chamado de lupa de imagem, image magnifier, zoom on hover, lente de aumento, magnifying glass effect, hover zoom, zoom de imagem ## Quando usar - Fotos de produto em que textura, acabamento ou costura fazem diferença - Plantas de imóveis, mapas e imagens técnicas com detalhes pequenos - Portfólio de fotografia, ilustração ou arquitetura - Imagens de exames e laudos com áreas que pedem inspeção de perto ## Quando evitar - Sites acessados sobretudo pelo celular, já que a lupa depende do mouse - Imagens pequenas ou de baixa resolução, que ficam borradas ao ampliar ## Como pedir para a sua IA ```text Adicione uma lupa de imagem na foto do produto: ao passar o mouse, um círculo segue o cursor e mostra a região ampliada em 2 vezes, com uma alternativa de toque no celular, versão sem animação para movimento reduzido e texto alternativo descritivo. ``` 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 Monóculo ### Monóculo funciona no celular? O componente Monóculo foi feito para mouse: reage ao cursor entrando, se movendo e saindo da área, e não tem eventos de toque próprios. No celular, o resultado depende de como cada navegador converte o toque. Se o público usa mais o celular, peça à IA um modo de toque ou use o modo fixo, que mantém a lupa visível num ponto. ### Dá para usar Monóculo em vídeo ou em qualquer conteúdo? Sim. Monóculo duplica o conteúdo que você coloca dentro do componente e mostra a cópia ampliada dentro do círculo, então serve para foto, vídeo ou um bloco de HTML. Com vídeo, são dois elementos tocando ao mesmo tempo, o que pesa mais; para fotos, prefira arquivos em alta resolução para o detalhe sair nítido. ### Como ajustar o tamanho e o aumento de Monóculo? Monóculo tem duas props para isso: lensSize define o diâmetro do círculo, 170 pixels por padrão, e zoomFactor define o aumento, 1,5 vez por padrão. Com isStatic, a lupa fica parada na posição definida em position, o que ajuda a destacar um detalhe sem depender do mouse. ## Componentes relacionados - [Mostruário](https://vibecode.thmtecnologia.com/componentes/mostruario/): Foto principal com lupa que amplia o detalhe ao passar o mouse, miniaturas embaixo e tela cheia com zoom. - [Miragem](https://vibecode.thmtecnologia.com/componentes/miragem/): Uma placa de vidro arredondada desliza sobre a foto e curva a imagem nas bordas, como uma lente de verdade. - [Lambe-lambe](https://vibecode.thmtecnologia.com/componentes/lambe-lambe/): A foto vira pontinhos de impressão, como jornal ou gibi, e uma lupa mostra a imagem original. - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. --- 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.