# Arquipélago Uma fileira de abas grudadas como um líquido, em que a aba escolhida se desprende como uma gota. > Arquipélago é um componente do THM Componentes que transforma uma fileira de abas numa peça só, com aparência de líquido: ao clicar numa aba, ela se afasta das vizinhas e se desprende como uma gota, enquanto o resto continua grudado. O efeito vem de um filtro SVG e de uma transição CSS, e diferencia a navegação entre seções. - Categoria: Navegação e scroll - 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, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/arquipelago/ ## Como ele é Pense em gotas de mercúrio encostadas numa mesa. As abas ficam lado a lado, na cor primária do tema, e um filtro de desfoque com contraste funde as bordas, de modo que a fileira parece uma única peça de cantos arredondados. Ao escolher uma aba, ela ganha uma margem de 20 pixels de cada lado numa transição de meio segundo, e o líquido se estica até a gota se soltar das vizinhas; a aba anterior volta a grudar no grupo. O texto continua nítido por cima do efeito. O arredondamento depende da intensidade do desfoque, ajustável por prop. ## Você pode estar procurando isto se pediu algo assim - “abas que se grudam e se separam como líquido” - “menu de abas com efeito de gota quando clico” - “seletor de seções diferente do padrão, meio gelatinoso” - “botões lado a lado que viram uma peça só e o escolhido se solta” - “tabs com efeito gooey para o topo do portfólio” - “navegação entre categorias com animação de líquido” ## Também chamado de abas que viram gota, gooey tabs, abas com efeito líquido, gooey effect, metaball tabs, abas animadas ## Quando usar - Troca de categorias numa vitrine, portfólio ou cardápio - Seletor de seções em landing pages de produto com identidade marcante - Alternar entre planos, períodos ou modos de visualização - Navegação de sites de agência, estúdio ou marca jovem ## Quando evitar - Muitas abas ou rótulos longos, que deixam a fileira larga demais no celular - Interfaces sóbrias, como painéis financeiros, em que o efeito chama atenção demais ## Como pedir para a sua IA ```text Crie abas com efeito gooey para alternar as categorias do meu portfólio: botões grudados como líquido, em que a aba ativa se separa das vizinhas como uma gota, nas cores da minha marca, com papéis de aba acessíveis, setas do teclado e troca sem animação 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 Arquipélago ### Arquipélago funciona com teclado e leitor de tela? Em parte. Cada aba de Arquipélago é um botão nativo, então recebe foco pelo Tab e ativa com Enter ou espaço. Os papéis de aba e o estado selecionado não vêm marcados, e o destaque é só visual. Vale pedir à IA para incluir role tab, aria-selected e navegação pelas setas. ### Dá para trocar as cores e o arredondamento de Arquipélago? Sim. Arquipélago usa as cores primária e de fundo do tema, então segue os tokens do projeto e acompanha o modo claro e o escuro quando o tema os define. O arredondamento vem da prop blurStdDeviation, 6 por padrão, e valores maiores deixam as formas mais moles; a prop margin define quanto a aba ativa se afasta. ### Arquipélago funciona no celular? Sim. As abas de Arquipélago são botões comuns, então o toque funciona como um clique, e o efeito vem de um filtro SVG aplicado pelo navegador. Em telas estreitas, prefira poucas abas com rótulos curtos e teste em aparelhos mais simples, porque filtros SVG com desfoque podem pesar durante a transição. ## Componentes relacionados - [Fichário](https://vibecode.thmtecnologia.com/componentes/fichario/): Abas em que um fundo arredondado desliza até a opção escolhida, com o conteúdo num maço de cartões. - [Bonde](https://vibecode.thmtecnologia.com/componentes/bonde/): Um menu de cabeçalho em que um único painel desliza e muda de tamanho ao passar de um item para outro. - [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. - [Atol](https://vibecode.thmtecnologia.com/componentes/atol/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. - [Passarela](https://vibecode.thmtecnologia.com/componentes/passarela/): Barra de ícones translúcida em que cada ícone cresce quando o mouse se aproxima, como no Mac. --- 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.