Como ele é
Pense no dock do Mac com um toque de ímã. Uma barra de vidro fosco, clara e arredondada, flutua perto da base da área com oito ícones de traço fino dentro de quadrados brancos. Quando o cursor se aproxima, os ícones vizinhos crescem numa curva suave, o do centro chega a quase o dobro do tamanho, e o ícone sob o ponteiro se desloca na direção dele, como se fosse atraído. Tudo assenta com molas, sem tranco. O ícone ativo ganha um gradiente de anil para ciano, com um pontinho embaixo, e dá um pequeno salto quando é clicado. Um rótulo escuro aparece acima do ícone em foco.
Você pode estar procurando isto se pediu algo assim
- menu de ícones que crescem quando passo o mouse, igual ao do Mac
- barra flutuante embaixo da tela com os atalhos do app
- ícones que parecem atraídos pelo cursor, tipo ímã
- dock bonito para a navegação do meu painel
- aquele efeito da Apple em que o ícone aumenta perto do mouse
- menu de navegação com efeito de mola que dá vontade de clicar
- barra de ícones com o nome aparecendo em cima quando passo o mouse
Também chamado de
- dock estilo macOS
- ícones que crescem perto do cursor
- dock magnification
- efeito ímã
- magnetic hover
- floating dock
- barra de navegação flutuante
Quando usar
- Navegação principal de app web ou painel com poucas seções
- Menu flutuante de landing page ou de portfólio
- Barra de ferramentas de editor, quadro ou ferramenta criativa
- Atalhos fixos na base da tela em apresentações de produto
Quando evitar
- Menus com muitos itens ou rótulos longos, que pedem texto sempre visível
- Navegação principal de sites pensados para celular, em que não há cursor para ampliar os ícones
Como pedir para a sua IA
Crie um dock de navegação estilo macOS com efeito magnético no rodapé do meu painel: ícones que ampliam pela distância do cursor e são puxados por ele, com animação de mola, rótulos ao passar o mouse, navegação pelas setas do teclado e sem animação 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 Bússola
Bússola funciona no celular?
Funciona como barra de botões. A ampliação pela distância e o efeito ímã de Bússola dependem do cursor; no celular, tocar num ícone ativa o item, que ganha o destaque em gradiente e o pequeno salto. O prompt do THM Componentes pede à IA um teste em mobile, comparando LCP e INP antes e depois.
Dá para trocar os ícones e as cores de Bússola?
Dá. Cada item de Bússola tem um rótulo e um ícone escolhido entre oito desenhos em SVG que vêm no componente: início, busca, projetos, mensagens, agenda, métricas, nuvem e ajustes. Para outros ícones, peça à IA novos traçados. As cores de destaque, dos ícones e do fundo são props, e o prompt do THM Componentes manda usar os tokens do projeto.
Bússola funciona pelo teclado e com menos movimento?
Sim. Bússola é uma barra de ferramentas com um único ponto de foco: Tab entra, setas, Home e End trocam de ícone, e Enter ou Espaço ativam, com a ampliação e o rótulo acompanhando o foco. Com a preferência de reduzir movimento, os ícones mudam de tamanho sem mola, sem o puxão do ímã e sem o salto ao clicar.
