Régua de liquidez com objetivos arrastáveis

Uma linha do tempo de trinta anos com cinco objetivos de vida em cima dela. A pessoa arrasta cada ficha para o ano em que precisa do dinheiro, e três coisas respondem na hora: a área embaixo redesenha a exigência de liquidez, as três faixas de horizonte recalculam, e a régua abre uma fila nova quando duas fichas ficariam sobrepostas.

É a peça que explica por que uma carteira não pode ser toda de longo prazo — e explica sem uma palavra técnica, porque quem move as fichas é o visitante. O argumento não é dito: é encenado. Arraste a renda vitalícia de vinte e sete anos para três e o pico salta; o mesmo dinheiro, exigido antes, pesa mais.

Quando usar

• Dobra de educação, antes de falar de produto: a peça ensina o conceito de horizonte sem citar nenhum ativo.
• Página de planejamento, sucessão ou aposentadoria, onde a conversa começa por "quando", não por "quanto rende".
• Quando a página já tem prova social e serviço, e falta a peça que faz o visitante pensar antes de clicar.

Quando não usar

• Se o que você precisa é o retrato de uma carteira pronta, e não do calendário dela: dados/painel-patrimonio faz isso melhor, e sem pedir gesto nenhum.
• Se a pergunta é de custo, não de prazo: dados/comparador-cenarios compara dois modelos de remuneração com barras.
• Se o objetivo é qualificar e capturar: conversao/cta-formulario-lead. Esta régua não coleta nada — ela entrega a pessoa àquele formulário.
• Em página que já tem outra ferramenta arrastável. Duas peças que pedem gesto na mesma rolagem cansam, e a segunda quase nunca é usada.

Padrão editorial

Cinco fichas é o número, e não é estético. Quatro deixam a régua vazia entre os marcos; seis põem duas em colisão já no estado inicial, e a peça abre com uma fila empilhada, que é o estado de exceção.

Especificação dos assets

Nenhum. Os cinco ícones são <path> de 18×18 escritos no markup, em stroke:var(--accent) com 1,2px — escudo, casa, capelo, prédio e horizonte. Trocar um ícone é trocar um d; mantenha o mesmo viewBox e nada de fill.

Compliance

O que o consumidor tem de trocar antes de publicar:

1. Os cinco data-liq-valor e os .liq-ficha-val. São ilustrativos e estão marcados com <!-- CONTEÚDO ILUSTRATIVO -->. Os dois têm de andar juntos: o atributo alimenta a conta, o texto alimenta o olho.
2. Os cortes de horizonte, em AJUSTE.curto e AJUSTE.medio no topo do script.js, e os rótulos dos três <li> junto. Se a casa chama médio prazo de 2 a 7 anos, mude os dois.
3. A .liq-nota, com a área de compliance do cliente. O texto que vai aqui diz três coisas e não pode perder nenhuma: é simulação, não é recomendação, cenário passado não garante futuro.

O que a peça não faz, de propósito: não projeta rentabilidade, não diz que carteira montar, não escreve percentual de alocação por classe de ativo. As três leituras são faixa por horizonte — a divisão aritmética dos valores que a própria pessoa posicionou, e nada mais. O eixo vertical da área não tem número nem unidade: é forma, e a legenda embaixo diz isso em voz alta.

Nenhum dado sai do navegador. Não há campo de nome, e-mail ou telefone, não há localStorage, e o que a pessoa posiciona morre no recarregamento.

Como usar

<link rel="stylesheet" href="componentes/dados/regua-liquidez/estilo.css">
<script src="componentes/dados/regua-liquidez/script.js"></script>

Ganchos

Variações

• Régua de 10 anos — --liq-anos no CSS e ANOS no script, mais as marcas do .liq-rail de 2 em 2.
• Sem a área — apague o <svg class="liq-graf"> e a .liq-eixo-nota. As leituras continuam corretas; elas nunca dependeram do gráfico.
• Sem o script — a régua fica inteira e correta, só não arrasta. É o mesmo estado que a peça entrega se o JavaScript falhar.

Gotchas

• A altura da área não é o valor: é o valor dividido pelo tempo de preparo. altura = valor / (0,5 × (subida + descida)), com subida = min(1,2 + 0,28 × ano, 6). Sem isso a régua fica ilegível — os R$ 240 mil da reserva desenhariam 13% da altura dos R$ 1,8 milhão da renda, e quatro dos cinco objetivos sumiriam. Com isso, as alturas medidas ficam entre 185 e 487 numa mesma escala, e a curva ensina o que a peça quer ensinar.
• Os três percentuais fecham em 100 por maior resto, não por arredondamento. 5,17 / 19,40 / 75,43 arredondados sozinhos dão 5 + 19 + 75 = 99. O script arredonda para baixo e distribui o que falta pelos maiores restos. Medido em três configurações diferentes: sempre 100.
• A colisão é medida em pixels, não em anos. folga é 8px além da largura da ficha, e por isso o mesmo par de anos colide ou não dependendo da janela. Medido a 1440px: os vãos entre as cinco fichas são 152, 214, 183 e 275px, todos acima dos 130px do limite. A 1024px caem para 125, 175, 149 e 225 — ainda passam, porque abaixo de 1180px a ficha encolhe para 110px.
• Três filas é o teto confortável; cinco é o limite duro. Uma fila deixa a régua com 128px; três, com 360px; cinco (as cinco fichas no mesmo ano) com 592px, e aí a régua sozinha ocupa dois terços da dobra. É por isso que o padrão editorial fecha em cinco fichas — mais do que isso e o estado empilhado deixa de ser exceção.
• O z-index das fichas DESCE conforme a fila sobe (calc(9 - var(--liq-fila))). A haste de uma ficha da fila 2 atravessa as filas 1 e 0 para chegar à régua; sem essa inversão ela seria desenhada por cima dos cards de baixo, e uma linha de 1px cruzando um card lê como defeito.
• O --liq-ano só é reescrito no texto quando o ano INTEIRO muda. O .liq-ficha-ano é aria-live="polite": reescrevê-lo a cada quadro do arrasto despejaria sessenta anúncios por segundo no leitor de tela. A comparação textContent !== novo antes de escrever é o que segura isso.
• A ficha é um <div> com tabindex posto pelo script, não um <button>, e não tem role="slider". role="slider" seria o papel semanticamente certo, mas anuncia o valor sozinho e duplicaria a região aria-live — duas falas para o mesmo movimento. Ficou o aria-label fixo no elemento (que por ser fixo não reanuncia) mais a região viva no ano. Se um dia a região viva sair, troque por role="slider" com aria-valuenow e aria-valuetext.
• O desempilhamento roda ao SOLTAR, não durante o arrasto. Trocar de fila no meio do gesto faria a ficha saltar 116px sob o dedo — e ela está com transition:none justamente para acompanhar o ponteiro. Durante o arrasto ela passa por cima das outras com z-index:20, que é o que qualquer arrasto faz.
• pointercancel devolve a ficha ao ano de partida. No toque, touch-action:pan-y deixa a página rolar na vertical; quando isso acontece o navegador cancela o gesto, e deixar a ficha onde o dedo raspou seria uma edição que ninguém pediu.
• O preserveAspectRatio="none" do SVG estica o eixo x, e por isso o traço e a grade levam vector-effect="non-scaling-stroke" — sem ele a linha engrossaria proporcionalmente à largura da coluna. O pathLength="1" existe pelo mesmo motivo de robustez: o d muda a cada arrasto, e o dash da entrada não pode depender do comprimento real do caminho.
• A altura da ficha é fixa (--liq-ficha-h), e é o que alinha as filas. Conteúdo medido: 20px de padding + 16 do topo + 8 + 31 do rótulo em duas linhas + 17,5 do valor = 92,5px dentro de 102px úteis. Se o rótulo passar de duas linhas, ou se a --display do tema for mais alta que a fallback, suba --liq-ficha-h e --liq-fila-h juntos — mexer em uma só desalinha ou aperta.
• Abaixo de ~1010px de janela a régua rola de lado dentro do quadro. É o --liq-min funcionando: comprimir trinta anos em 340px poria as cinco fichas a menos de 60px umas das outras, todas colidiriam, e a régua viraria uma pilha vertical de 592px onde a posição no tempo — a única coisa que a peça ensina — deixaria de ser legível. Rolando, cada ano vale os mesmos pixels que no desktop.
• O overflow-x:auto do scroller corta o anel de foco do core (2px a 3px de distância da caixa). O padding-block:10px do .liq-scroll existe só para isso; se você reduzir esse padding, a ficha da fila mais alta perde metade do anel.
• A entrada do traço é delegada ao data-rv do quadro. .liq-linha nasce desenhada e só é escondida por [data-rv] .liq-linha — assim quem tirar o data-rv fica com o traço pronto, e não com uma linha que nunca aparece. Sem o core/motion.js no ar o quadro inteiro fica em opacity:0 de qualquer jeito, o que é condição de toda a biblioteca, não desta peça.

Histórico

Origem. Autoral, sem referência única e sem uma linha copiada. O padrão — objetivos de vida colocados numa linha do tempo arrastável, com uma leitura que se recalcula embaixo — aparece em planejador de banco privado, em ferramenta de goals-based planning de gestora e em simulador de previdência. Nenhum deles serviu de base: a forma veio da família, o arquivo é daqui.

Decisões da tradução para o contrato. A área virou <path> com o d montado por concatenação de string, 61 pontos de 0,5 em 0,5 ano, sem biblioteca de gráfico e sem canvas. A paleta saiu de color-mix sobre --accent, e o degradê de preenchimento virou mask-image — um <linearGradient> exigiria um id, que o contrato não quer. O arrasto é pointer events com setPointerCapture pedida já no pointerdown e limiar de 6px, em vez de biblioteca de drag. O equivalente completo de teclado (setas, Home, End, PageUp/PageDown) foi acrescentado — nenhum dos exemplos da família tinha, e arrasto sozinho não tem equivalente acessível. O eixo vertical perdeu qualquer número, e a leitura passou a ser faixa por horizonte apresentada como consequência aritmética, nunca como recomendação de carteira.