O quadro do Figma, congelado: cinco modos por três estados. Estas abas não respondem ao ponteiro; são a referência que o trilho acima tem de reproduzir viva.
Uma aba aberta, ampliada 2,4×. O que está numerado é o que o CSS desenha; o que está cotado é o que o Figma mede.
Cada gesto responde a uma pergunta: o que este movimento diz a quem usa? Toda curva é a de saída do kit, que entra rápido e assenta devagar. Nada balança, nada quica. Uma luz em laço só existe onde há estado que a justifique.
A placa sobe, o anel branco acende, o rótulo vai a branco e o ponto a 55%. Ao sair, tudo volta no mesmo tempo, sem pressa.
| propriedade | de → para | tempo |
|---|---|---|
| placa | nada → #1F2128 40% | 180ms |
| anel branco | 0 → 1 | 180ms |
| rótulo | 60% → 100% | 140ms |
| ponto | 30% → 55% | 160ms |
O vidro pega a luz de onde o ponteiro está: uma névoa de 80px na cor do modo por dentro da aba, e o anel da borda aceso no ponto mais próximo. Numa aba fechada a luz anuncia a cor do modo antes de ele abrir; na aba aberta ela é mais forte. O trilho também responde, em branco, só na borda. A luz escorrega atrás do cursor em 70ms e demora 260 pra deixar o vidro.
| camada | cor | tempo |
|---|---|---|
| névoa da aba | accent 16% (aberta 22%, apertada 28%) | 260ms · segue em 70 |
| anel da aba | accent 85%, 64px | 260ms |
| névoa do trilho | branco 5%, 120px | 260ms |
| anel do trilho | branco 45%, 96px | 260ms |
A aba encolhe a 0,98 em 100ms e a placa assenta no #080A0D. O ponto encolhe a 0,8 enquanto o dedo está em cima: é a carga. Soltar numa aba fechada dispara a passagem, e o ponto floresce dali.
| propriedade | de → para | tempo |
|---|---|---|
| aba | scale 1 → 0,98 | 100ms · solta em 160 |
| placa | → #080A0D 32% | 100ms |
| ponto | scale 1 → 0,8 | 100ms · solta em 160 |
| luz do cursor | 16% → 28% | imediato |
Uma placa só, atrás das abas, vai de A a B. A aresta da frente chega em 85% do tempo e a de trás em 115%: a cápsula estica na direção do destino e assenta. Enquanto viaja, o anel dela troca de cor (o azul do Chat vira o roxo do Design no caminho) e deixa um halo por fora. A aba que fecha apaga no zero; a que abre acende o rótulo no zero e espera 120ms pra acender o ponto, que floresce a 24px antes de assentar em 16. Total: 440ms.
Setas, Home e End trocam de aba por corte: a placa aparece no destino, sem viagem. Quem navega por teclado já sabe pra onde foi; o movimento só atrasaria. O foco visível é um anel de 2px no accent do modo.
| tecla | faz |
|---|---|
| ← ↑ | a aba anterior, dando a volta |
| → ↓ | a próxima, dando a volta |
| Home · End | a primeira · a última |
| Tab | entra e sai do trilho pela aba aberta (tabindex que anda) |
O halo da aba aberta respira entre 55% e 90% da força, a cada 3,6 segundos, e nunca apaga. É o único laço da peça: o que faz o modo no ar parecer ligado, não pintado. Sob o ponteiro o halo abre um pouco mais.
| propriedade | de → para | tempo |
|---|---|---|
| halo (filho do ponto) | opacidade 0,55 ↔ 0,9 | 3600ms, ease-in-out, laço |
| halo | scale 1 ↔ 1,12 | 3600ms |
| ponto sob o ponteiro | halo 16px → 20px | 320ms |
Ao montar, o trilho sobe 6px e assenta em 420ms; cada aba chega 40ms depois da anterior. O ponto da aba aberta floresce quando a fila termina, com a mesma animação da passagem.
| quem | de → para | tempo |
|---|---|---|
| trilho | opacidade 0 → 1 · y 6 → 0 · scale 0,985 → 1 | 420ms |
| aba n | opacidade 0 → 1 · y 4 → 0 | 420ms, começa em 60 + 40·n |
| ponto da aberta | floresce | 320ms, começa em 120 |
Dois arquivos do kit, e é a única aba da casa: a coluna do Nash Workspace, os trilhos da Voz e da Música, o Nash Code, o PWA e a navegação do site são esta peça. Carregar o JS basta pra ter a placa e a luz: todo .nash-tab-bar da página é montado sozinho, deixando o estado com a página.
<link rel="stylesheet" href="css/nash-tab-bar.css" /> ← depois de nash-componentes.css
<nav class="nash-tab-bar" id="modos" aria-label="Modo"></nav>
<script src="js/nash-tab-bar.js"></script>
// a peça manda no estado: monta as abas da tabela, troca no clique e nas setas
const trilho = NashTabBar.montar('#modos', {
ativa: 'chat', // ou a aba com aria-selected no HTML
aoTrocar(modo, p) { /* p.de, p.para, p.direcao, p.origem, p.duracao */ }
})
trilho.ativar('design') // pela API: viaja
trilho.el.addEventListener('nash-tab-troca', (e) => e.detail)
// variante congelada, pra documentação — não responde ao ponteiro:
<button class="nash-tab" data-mode="imagem" data-state="hover">
<i class="nash-tab-alvo"></i><i class="nash-tab-luz"></i><i class="nash-dot"></i>
<span class="nash-tab-rotulo">Imagem</span>
</button>
// a página manda no estado (o que a montagem automática faz):
NashTabBar.montar(el, { estado: 'pagina' }) // segue aria-selected, aria-pressed ou aria-current
// no trilho: data-passagem="corte" · data-pulso="off" · nash-tab-bar--coluna · --nash-tab-accent: … · --nash-tab-escala: 4
// na aba: data-mode="chat|voz|design|imagem|social" · data-avulsa="true" (interruptor fora da placa que viaja)