Una referencia bonita.Un diseño para entender.
Organiza sitios e investiga su lenguaje visual.
Lee el diseño de sitios de referencia y mide su movimiento.
- Tauri 2
- React 19
- Node.js
- Playwright
Galeríasde referenciaStack y
brandingInvestigación
organizada
Una referencia bonita.Un diseño para entender.
Organiza sitios e investiga su lenguaje visual.
- Tauri 2
- React 19
- Node.js
- Playwright
Lee el diseño de sitios de referencia y mide su movimiento.
- Tauri 2
- React 19
- Node.js
- Playwright
La grabación
Una captura no muestra cómo se mueve la página.
Parte de las animaciones de un sitio corre por un camino que el navegador no lista, los resortes, sobre todo. Por eso el motor lee la posición de cada pieza en cada cuadro y mide lo que vio: cuánto duró, si se pasó del punto y qué curva es. Graba una de las tres curvas: la medición de abajo se hace ahora, en esta página, con la misma regla.
Medición en vivo
Elige una curva: la pieza se mueve y el trazo aparece mientras avanza.
Lo que registró la prueba del proyecto
- Resorte, 600 ms600 ms · se pasó un 15,1%
- Lineal, 300 ms300 ms · confianza alta
- Ease-out cúbico, 400 ms367 ms · cerca de 8% corto
El ease-out sale corto a propósito: llega al 99,9% del camino al 90% del tiempo, y el motor mide cuándo se detiene el movimiento, no el número que alguien escribió. La lectura tiene la incertidumbre de un cuadro (16,7 ms).
Las pasadas
Cada sitio, leído capa por capa.
Para cada dirección de la cola, el motor abre la página y la recorre varias veces, cada vez buscando una cosa. Elige una pasada para ver qué lee y el formato en que el resultado va al informe.
- Estructura
- Color y letra
- Movimiento
Las nueve pasadas
Lo que leeCon qué se hizo la página: Framer, GSAP y ScrollTrigger, Lenis, Motion, Three.js, WebGL, Lottie y la etiqueta de quien generó el sitio.
Fragmento del informe (valores de ejemplo)
{"tipo":"stack","dados":{"framer":true,"gsap":false,
"scrollTrigger":false,"lenis":true,"motion":true,
"three":false,"webgl":false,"lottie":false,
"generator":"Framer"}}Cada sitio genera una carpeta con el informe para leer, los datos completos, la página entera en foto y el archivo de tokens de diseño. Los fragmentos muestran el formato; los valores son de ejemplo.
Colores. Letras. Movimiento. Cada detalle cuenta.
Una lectura de stack, branding e interacciones.
StackBrandingAnimaciones e interaccionesLa pasada de identidad cuenta cada color, letra y esquina de la página, y el motor graba el resultado en un archivo de tokens en el formato abierto que leen las herramientas de diseño. Abajo, la misma lectura hecha ahora, sobre esta página.
Los colores de esta página, por uso
Leyendo la página…
La letra
Las esquinas
design-tokens.json
El motor no inventa un papel para los colores ("principal", "acento"): el nombre es la posición en el ranking y el código del color, porque asignar un papel sería adivinar.
El cursor
Cuatro paradas para encontrar el efecto.
Las tarjetas que se mueven con el mouse no aparecen quietas. La sonda lleva el cursor al centro, a la izquierda, a la derecha y a la izquierda otra vez, y compara: ¿se movió entre izquierda y derecha y volvió igual? Sigue al cursor. ¿Se movió pero no volvió igual? Se mueve solo. Toca o pasa el mouse por el escenario y después corre la sonda.
- Centro
- Izquierda
- Derecha
- Izquierda otra vez
Lo que concluyó la sonda
- Las luces del fondoEsperando la sonda.
- La tarjetaEsperando la sonda.
- El anilloEsperando la sonda.
- Las líneas de textoEsperando la sonda.
La cuenta y los límites son los del código del proyecto (reacción mínima de 1,5 px o 0,4°; la segunda izquierda debe repetir con la mitad de eso). Corriendo aquí, mide las capas de este escenario.
Define el análisis. Sigue cada etapa.
Parámetros de viewport, hover y scroll, con modo paso a paso.
Viewport configurableHover y scrollModo paso a pasoEl panel arma la configuración, llama al motor y lee lo que escribe, una línea por evento. Con el modo paso activado, la cola se detiene en cada sitio ya cargado y espera un Continuar. Corre la cola de ejemplo.
Los ajustes
- Tamaño de la ventana
- 1440 × 900
- Paradas de desplazamiento
- 8
- Objetivos de hover
- 12
- Espera entre sitios
- 3 – 8 s
Lo que escribe el motor · lo que muestra el panel
El motor todavía no dijo nada.
Las pantallas
Las líneas siguen el contrato de eventos del proyecto (una prueba falla si el motor y el panel divergen). La espera entre sitios es a propósito y no debe ponerse en cero; los sitios de la cola son direcciones de ejemplo.
Las tecnologías
De qué está hecho, pieza por pieza
Un panel de escritorio que comanda un motor: la pantalla es React 19 dentro de Tauri 2, Rust abre el proceso del motor y pasa cada línea que escribe, y el motor en Node.js abre las páginas en un navegador de verdad (Playwright) para medir lo que hacen. Elige una pieza para ver qué hace aquí y en qué archivo está.
11tecnologías, en 3 capas
Panel
Ventana
Motor
Herramientas de creación y desarrolloModuleForge