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
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.
