Como ele é
Lembra a barra de aplicativos do Mac, aquela no pé da tela. Os ícones ficam numa faixa de cantos arredondados, com borda fina e fundo translúcido que desfoca o que está atrás. Em repouso, cada ícone mede 40 pixels; quando o mouse passa, o mais próximo cresce até 100 pixels e os vizinhos crescem menos, conforme a distância, até 140 pixels do centro, o que cria uma onda que acompanha o cursor. A mudança de tamanho leva 200 milissegundos, com freada suave. Separadores finos dividem grupos, e a barra pode ficar em pé, na lateral. Quando o mouse sai, tudo volta ao tamanho inicial.
Você pode estar procurando isto se pediu algo assim
- menu com ícones que crescem quando passo o mouse
- barra de ícones igual à do Mac no meu site
- atalhos do portfólio que aumentam perto do cursor
- aquela barra do macOS com efeito de lupa nos ícones
- menu flutuante de ícones no rodapé da página
- navegação com ícones redondos que fazem onda no hover
- deixar os links das redes sociais mais divertidos
Também chamado de
- barra de aplicativos
- dock estilo macOS
- macOS-style dock
- barra de ícones
- icon magnification
- dock menu
- menu estilo Mac
Quando usar
- Navegação de portfólio pessoal ou de estúdio
- Atalhos fixos para as principais áreas de um app web
- Links para redes sociais e contato no rodapé
- Barra de ferramentas de um editor ou painel com poucos ícones
Quando evitar
- Menus com muitos itens ou sem rótulo, em que só o ícone não diz para onde a pessoa vai
- Sites acessados principalmente no celular, em que não há cursor para ampliar os ícones
Como pedir para a sua IA
Crie um dock estilo macOS fixo no rodapé do portfólio: ícones redondos que crescem conforme o mouse se aproxima, com rótulo acessível em cada link, foco visível no teclado, tamanho normal no celular e versão sem ampliaçã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 Passarela
Passarela funciona no celular?
Funciona como uma barra comum. Passarela amplia os ícones a partir do movimento do mouse, então em telas de toque eles ficam no tamanho de repouso, de 40 pixels, e os links colocados dentro continuam clicáveis com o dedo. No celular, vale manter uma área de toque confortável e rótulos claros.
Dá para usar Passarela na vertical, na lateral da página?
Dá. Com orientation vertical, Passarela empilha os ícones numa coluna de 58 pixels de largura e amplia pela posição vertical do mouse. Um cuidado: o cálculo compara a posição do mouse na página com a do ícone na tela, então numa página rolada a ampliação sai deslocada; peça à IA para usar clientY no lugar de pageY.
Passarela é acessível por teclado?
Passarela em si não cuida disso: cada ícone é uma caixa sem foco, e a ampliação só responde ao mouse. Se você colocar links ou botões dentro de cada DockIcon, eles recebem foco normalmente; peça à IA um aria-label em cada um e um destaque visível no foco, já que o ícone sozinho não diz o destino.
