# Translado Você clica num card da galeria e a foto e o título crescem suavemente até virar a página de detalhe. > Translado é um componente exclusivo do THM Componentes que liga uma galeria de cards à vista de detalhe com uma transição contínua: ao clicar, a foto e o título do card crescem até as posições do detalhe, como num app nativo. Usa a View Transitions API, com reserva em FLIP, e serve para portfólios, catálogos e cases. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/translado/ ## Como ele é Lembra abrir uma foto no app de galeria do celular: em vez de a tela piscar, a miniatura cresce até ocupar o lugar dela. A galeria mostra cards com foto de cantos arredondados, categoria, ano e título. No clique, a foto se estica até virar a imagem grande do detalhe e o título viaja até o cabeçalho, enquanto selo de categoria, texto, local, ano e botão de voltar surgem logo depois, subindo de leve. Ao voltar, o caminho se inverte e a foto encolhe de volta ao card de origem. Ao passar o mouse, a foto do card cresce um pouco. ## Você pode estar procurando isto se pediu algo assim - “card que se abre e vira a página de detalhe sem piscar a tela” - “transição tipo app de celular entre a lista e o produto” - “foto da galeria que cresce até ocupar a tela quando clico” - “portfólio em que o projeto abre com uma animação contínua” - “catálogo de produtos com transição suave para a página do item” - “aquele efeito em que a imagem viaja de um lugar para o outro” ## Também chamado de view transition, View Transitions API, shared element transition, transição de elemento compartilhado, card expand, FLIP animation, transição de página ## Quando usar - Portfólio com página de detalhe para cada projeto - Catálogo de produtos que abre a ficha do item - Lista de cases, artigos ou imóveis com vista de detalhe - Galerias em que manter o contexto entre lista e detalhe ajuda a navegar ## Quando evitar - Quando cada detalhe precisa de endereço próprio: a troca acontece dentro do componente, sem mudar de rota - Listas longas e densas, como tabelas, em que a pessoa compara itens lado a lado ## Como pedir para a sua IA ```text Crie uma galeria de cards que se expande para a vista de detalhe com a View Transitions API: a foto e o título do card viajam até o detalhe, com reserva em FLIP, Esc para voltar, foco que retorna ao card e troca instantânea para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Translado ### Translado funciona em navegadores sem View Transitions API? Funciona. Translado verifica se o navegador tem a View Transitions API; quando não tem, faz a mesma ideia com animação FLIP pela Web Animations API, medindo a foto e o título antes e depois da troca. A prop forceFallback força esse modo para testes. O nome de transição só vai para o card ativo, o que evita conflitos na página. ### Translado funciona pelo teclado? Funciona. Cada card de Translado é um botão: Enter ou Espaço abrem o detalhe, e o foco vai para o botão de voltar. Esc ou esse botão fecham, e o foco retorna ao card de origem, o que mantém a posição de quem navega por teclado ou com leitor de tela. Com movimento reduzido, a troca é instantânea, sem animação. ### Translado muda a URL ou a rota no Nuxt? Não. Em Translado, a galeria e o detalhe vivem dentro do próprio componente, sem trocar de rota nem de endereço. Se cada item precisa de página própria no Nuxt, peça à IA para levar a mesma transição para a navegação entre rotas, mantendo o nome de transição só no card clicado. ## Componentes relacionados - [Cortiça](https://vibecode.thmtecnologia.com/componentes/cortica/): Fotos de alturas diferentes encaixadas em colunas, com filtros por categoria que reorganizam tudo com animação. - [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. - [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. - [Postal](https://vibecode.thmtecnologia.com/componentes/postal/): Janela que se levanta da tela com um giro em 3D e um leve quique, sobre um fundo escurecido e desfocado. - [Persiana](https://vibecode.thmtecnologia.com/componentes/persiana/): Fotos lado a lado em faixas verticais; a que está sob o mouse se alarga e as outras se estreitam. --- 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.