Nash LLM
O harness de modelo.
Card
A superfície de leitura: placa de texto a 72% com o vidro desfocado atrás, stroke de 1,5 por dentro a branco 18%, raio 20, padding 24, coluna de conteúdo com gap 16. O Figma desenha um tamanho e um estado (ponto, título, texto, meta e atalho); a peça define o resto: hover, pressão no cartão clicável, selecionado (aria-selected ou aria-current) com halo e aura, ocupado (aria-busy), foco, desabilitado, três densidades. O accent é o do modo, a mesma tabela das quatro peças anteriores. Os nomes são os do mapa de vocabulário.
NaXX Design
aria-current: o item atual, com o halo e a aura.
Imagem
Gerando: a luz varre o cartão em laço.
Nash LLM
data-size="small"
modo no ar: Chatúltimo gesto: nenhumpasse o cursor · aperte · Tab
Os estados
O quadro do Figma, congelado: não respondem ao ponteiro. Default como a referência desenhou; ao lado, o Hover, o Pressed e o Selecionado que a peça define e o Figma ainda não desenha. Em código, data-state e aria-selected.
Default
Hover · pendente
Pressed · pendente
Selecionado · pendente
Nash LLM
O harness de modelo.
Nash LLM
Anel de accent a 70%; o ponto a 55%.
Nash LLM
Anel, halo e aura no accent.
Anatomia
Selecionado, ampliado 1,1×. Numerado é o que o CSS desenha; cotado é o que o Figma mede.
320 × 151 · raio 20 · padding 24 · gap 16
stroke 1,5 por dentro · título 18 · texto 15 · rodapé mono 11
Nash LLM
O harness de modelo.
- A placa.#0D0F12 a 72% com o vidro desfocado atrás (blur 28): a placa de texto do Figma, --nash-placa-texto. No cartão clicável, #080A0D a 72% apertada. Raio 20; 12 no small, 24 no large.
- O stroke, 1,5px por dentro.Branco 18% uniforme, como o Figma anota, pela máscara da família; apaga quando selecionado. Por cima, o anel de accent 45 › 18 › 6 › 0: 70% sob o ponteiro, 1 selecionado ou em foco.
- O conteúdo.nash-card-header (o ponto de 6 do kit e o título 18/500), nash-card-text (15/400 a 55%), nash-card-footer (mono 11/500 em caixa alta, espaçado 0,18em: meta à esquerda, atalho à direita). Todas opcionais; a página escreve o que quiser.
- A aura e o halo.Selecionado, o halo da borda (box-shadow de 24px a 48%) e a aura (um elemento que segue o contorno, 24px além) respiram juntos; ao desselecionar a aura é comida de dentro pra fora.
- A luz do cursor.Névoa de 220px no accent a 10% e o anel aceso de 140px no ponto mais perto do ponteiro. Só existe com o ponteiro em cima; em ocupado vira a varredura.
- O lampejo.nash-card-sweep: um traço de luz branca a 6%, 42% de largura, a 8°, que atravessa o cartão uma vez quando o ponteiro entra, pelo lado por onde entrou (--nash-runtime-sweep-direction), em 640. Não repete enquanto o ponteiro fica.
O que o Figma diz e o que a peça faz
Coluna a coluna: a medida do Figma, o que o kit já tinha, e o que a peça adotou. O identificador sai do mapa de vocabulário; o Figma dá a base.
| Figma 329:2821 | O kit | A peça |
|---|---|---|
| 320 × 151 · raio 20 · padding 24 · gap 16 | .nash-card: r4, e4, e3 | iguais; a largura é da página. data-size="small|medium|large" e --nash-card-padding/-gap/-radius pra densidade (o telemetria usa small) |
| Placa --nash-placa-texto rgba(13,15,18,.72) · blur 28 | nash-surface (a placa de 32%) | a placa de leitura a 72% (--nash-card-plate); blur --nash-vidro-blur com fallback 28 |
| Stroke 1,5 por dentro, branco 18% | o anel em degradê da .nash-surface | o stroke do Figma no ::before; o anel de accent no ::after |
| Ponto 6 + título 18/500 · texto 15/400 a 55% · rodapé mono 11/500 caixa alta | — | nash-card-header, -title, -text, -footer › -meta + -shortcut; o ponto é o .nash-dot do kit |
| Um estado | :hover::after acende | hover, pressão (a, button), aria-selected / aria-current, aria-busy, :focus-visible, aria-disabled. Pendentes no Figma |
| — | nash-fx-sweep + nash-surface-sweep no repouso | a varredura é o laço de aria-busy; em repouso o cartão não varre |
| Nomes: Cartão de vidro/peq, ponto, título, texto, meta, atalho | — | .nash-card, data-size, nash-card-<parte>, --nash-card-*, --nash-runtime-*, nash:select. O identificador é do mapa (docs/vocabulario-mapa.json) |
| Escala de tempo | --nash-escala | --nash-card-time-scale, com --nash-escala da família como fallback |
| Movimento reduzido | .nash-reduzido | [data-motion="reduced"] num ancestral, o nome do vocabulário |
O que se move
Toda curva é a de saída do kit. Dois laços, cada um preso a um estado: a respiração de aria-selected (um número, --nash-card-breath, que o halo e a aura leem; ao desselecionar ele pausa onde está) e a varredura de aria-busy.
Ponteiro entra hover
O anel de accent sobe a 70% em 260, a luz do cursor acende em 260 e o ponto vai a branco 55% em 160. A placa sobe a #1F2128 76% em 180, o stroke branco acende a 28% e o texto vai a branco em 140; um lampejo de luz a 6% atravessa o cartão uma vez, pelo lado por onde o ponteiro entrou, em 640.
Passe o cursor
O anel, a luz e o ponto.
Pressão a, button
Só o cartão clicável: a placa desce a #080A0D 72% e a casca vai a 0,99 em 100ms; solta em 160. Um article não aperta.
Selecionar e desselecionar aria-selected
Selecionar: o stroke branco apaga em 180, o anel de accent acende em 260, o ponto toma o accent em 160; o halo da borda espera 120 e vai a 32px antes de assentar em 24 — a curva do ponto da aba — com uma onda que se abre a 18px, e a aura se abre até 24px em 420. Total: 540ms. Depois respira: halo e aura, laço de 1,8s. Desselecionar: stroke, anel e ponto voltam nos mesmos tempos; o halo apaga em 320; a aura é comida de dentro pra fora em 600 e a respiração pausa onde está. setSelected marca por programa e emite nash:select; o clique não seleciona (isso é OptionCard).
Nash LLM
O harness de modelo.
Selecionar · 540ms
Desselecionar · 600ms
Ocupado aria-busy
A luz do cursor vira uma varredura do accent a 14% que atravessa o cartão em 1,8s; o conteúdo baixa a 60%; o clique é segurado. Termina com o estado.
Entrada nash-card-enter
Opacidade 0 → 1 e 8px de baixo em 420ms, backwards; irmãos entram escalonados por --nash-runtime-index × 60ms (o mountAll escreve pela ordem). As variantes congeladas não entram.
1
2
3
Como usar
Dois arquivos do kit. O CSS desenha tudo; o JS completa a aura e a luz, escreve a luz do cursor, cuida de aria-selected e aria-busy, e escalona a entrada.
<link rel="stylesheet" href="css/nash-card.css" />
<script src="js/nash-card.js"></script>
<article class="nash-card" data-mode="chat">
<div class="nash-card-header"><i class="nash-dot"></i><h3 class="nash-card-title">Nash LLM</h3></div>
<p class="nash-card-text">O harness de modelo.</p>
<div class="nash-card-footer"><span class="nash-card-meta">Harness</span><span class="nash-card-shortcut">⌘8</span></div>
</article>
const card = NashCard.mount('#c', { onSelect }) // o clique não seleciona: isso é OptionCard
card.setSelected(true) // aria-selected: anel, halo, aura; emite nash:select { selected }
card.setBusy(true) // aria-busy: varredura, clique segurado
NashCard.mountAll() // todo .nash-card; --nash-runtime-index pela ordem entre irmãos
Decisões
O que fugiu do Figma ou do kit, e por quê.
- O nome é do mapa de vocabulário.Os nomes do Figma (Cartão de vidro/peq, ponto, título, meta, atalho) dão a base, não o identificador. A peça é .nash-card; parte nash-card-<parte> (halo, spotlight, header, title, text, footer, meta, shortcut); variante data-<eixo> (size, mode); estado por ARIA; token --nash-card-<parte>; o que o JS escreve em --nash-runtime-*; evento nash:select. A composição de quatro classes e o modificador --small saíram.
- Placa de leitura.O Figma desenha o cartão a 72% porque ele carrega texto; as cascas de ação da família usam 32%. A peça guarda o token do Figma (--nash-placa-texto) com o fallback do desenho.
- O stroke é uniforme.Branco 18% sem degradê, como o Figma anota, pela mesma máscara das irmãs; o degradê fica para o anel de accent.
- A varredura saiu do repouso.nash-fx-sweep continua no kit para quem mais o usa; no cartão é o laço de ocupado.
- Card nunca hospeda um widget emitido.Isso é a casca Block; e o cartão de opção selecionável é OptionCard (mapa, /componentes/62). Aqui aria-selected é o cartão marcado num conjunto, aria-current o item atual.
- A luz vai embora comida de dentro pra fora.A aura é um elemento que segue o contorno (a técnica do Button): a borda de dentro é o tamanho, a de fora o desfoque, os dois tokens registrados. A respiração é um número registrado numa animação que já existe em repouso, parada: desselecionar pausa em vez de remover.