Uma referência bonita.Um design para entender.
Organize sites e investigue sua linguagem visual.
Lê o design de sites de referência e mede o movimento.
- Tauri 2
- React 19
- Node.js
- Playwright
Galeriasde referênciaStack
e brandingPesquisa
organizada
Uma referência bonita.Um design para entender.
Organize sites e investigue sua linguagem visual.
- Tauri 2
- React 19
- Node.js
- Playwright
Lê o design de sites de referência e mede o movimento.
- Tauri 2
- React 19
- Node.js
- Playwright
A gravação
Uma foto não mostra como a página se mexe.
Parte das animações de um site roda por um caminho que o navegador não lista, as molas, principalmente. Por isso o motor lê a posição de cada peça a cada quadro e mede o que viu: quanto durou, se passou do ponto e qual curva é. Grave uma das três curvas: a medição abaixo é feita agora, nesta página, com a mesma regra.
Medição ao vivo
Escolha uma curva: a peça anda e o traço aparece enquanto ela se move.
O que o teste do projeto registrou
- Mola, 600 ms600 ms · passou 15,1% do ponto
- Linear, 300 ms300 ms · confiança alta
- Ease-out cúbico, 400 ms367 ms · cerca de 8% curto
O ease-out sai curto de propósito: ele chega a 99,9% do caminho aos 90% do tempo, e o motor mede quando o movimento para, não o número que alguém digitou. A leitura tem incerteza de um quadro (16,7 ms).
As passadas
Cada site, lido camada por camada.
Para cada endereço da fila, o motor abre a página e passa por ela várias vezes, cada vez procurando uma coisa. Escolha uma passada para ver o que ela lê e o formato em que o resultado vai para o relatório.
- Estrutura
- Cor e letra
- Movimento
As nove passadas
O que ela lêCom o que a página foi feita: Framer, GSAP e ScrollTrigger, Lenis, Motion, Three.js, WebGL, Lottie e a etiqueta de quem gerou o site.
Trecho do relatório (valores de exemplo)
{"tipo":"stack","dados":{"framer":true,"gsap":false,
"scrollTrigger":false,"lenis":true,"motion":true,
"three":false,"webgl":false,"lottie":false,
"generator":"Framer"}}Cada site gera uma pasta com o relatório para ler, os dados completos, a página inteira em foto e o arquivo de tokens de design. Os trechos acima mostram o formato; os valores são de exemplo.
Cores. Fontes. Movimento. Cada detalhe conta.
Uma leitura de stack, branding e interações.
StackBrandingAnimações e interaçõesA passada de identidade conta cada cor, letra e canto que aparece na página, e o motor grava o resultado num arquivo de tokens no formato aberto que as ferramentas de design leem. Abaixo, a mesma leitura feita agora, sobre esta página.
As cores desta página, por uso
Lendo a página…
A letra
Os cantos
design-tokens.json
O motor não inventa papel para as cores ("principal", "destaque"): o nome é a posição no ranking e o código da cor, porque dar papel seria um palpite.
O cursor
Quatro paradas para achar o efeito.
Cartões que se movem com o mouse não aparecem parados. A sonda leva o cursor ao centro, à esquerda, à direita e à esquerda de novo, e compara: mexeu entre esquerda e direita e voltou igual? Segue o cursor. Mexeu mas não voltou igual? Anda sozinho. Toque ou passe o mouse no palco e depois rode a sonda.
- Centro
- Esquerda
- Direita
- Esquerda de novo
O que a sonda concluiu
- As luzes do fundoEsperando a sonda.
- O cartãoEsperando a sonda.
- O anelEsperando a sonda.
- As linhas de textoEsperando a sonda.
A conta e os limites são os do código do projeto (reação mínima de 1,5 px ou 0,4°; a segunda esquerda precisa repetir com metade disso). Rodando aqui, ela mede as camadas deste palco.
Defina a análise. Acompanhe cada etapa.
Parâmetros de viewport, hover e scroll, com modo passo a passo.
Viewport configurávelHover e scrollModo passo a passoO painel monta a configuração, chama o motor e lê o que ele escreve, uma linha por acontecimento. Com o modo passo ligado, a fila para em cada site já carregado e espera um Continuar. Rode a fila de exemplo.
Os ajustes
- Tamanho da janela
- 1440 × 900
- Paradas de rolagem
- 8
- Alvos de hover
- 12
- Espera entre sites
- 3 – 8 s
O que o motor escreve · o que o painel mostra
O motor ainda não falou nada.
As telas
As linhas seguem o contrato de eventos do projeto (um teste falha se o motor e o painel divergirem). A espera entre sites é de propósito e não deve ser zerada; os sites da fila são endereços de exemplo.
As tecnologias
Do que é feito, peça por peça
Um painel de computador que comanda um motor: a tela é React 19 dentro do Tauri 2, o Rust abre o processo do motor e repassa cada linha que ele escreve, e o motor em Node.js abre as páginas num navegador de verdade (Playwright) para medir o que elas fazem. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
11tecnologias, em 3 camadas
Painel
Janela
Motor
Ferramentas para criação e desenvolvimentoModuleForge