01 Sector · Región
Tarjeta de caso
Resultado
Enmarcado por resultado, anonimizado.
Sistema visual
Sistema de diseño
Escala tipográfica
Space Grotesk · 600 Display / H1
Space Grotesk · 500 Heading / H3
IBM Plex Sans · 400 Cuerpo de texto — lectura cómoda y neutral.
IBM Plex Mono · 400 01 — Etiqueta / Kicker
Tokens de color
Componentes
Lectura externa
Tarjeta de noticia
Curaduría con enlace, sin republicación.
Botones
Conectar en LinkedIn Enviar un correo [email protected]
Movimiento
Cinco estados de movimiento, en vivo. El interruptor de arriba simula prefers-reduced-motion en este bloque, sin tocar la configuración del sistema.
Casi todo es CSS puro. La única excepción es un fallback de ~30 líneas con IntersectionObserver (un archivo .js autoalojado) para navegadores sin animation-timeline: view(); si JS no se ejecuta, este contenido sigue siendo visible por defecto. Las transiciones entre páginas usan el <ClientRouter /> de Astro, agrupado en un archivo externo (script-src 'self', sin scripts en línea).
01 — Revelado al hacer scroll
Sube y baja esta fila fuera y dentro de la vista: el encabezado y las tarjetas suben 16px y aparecen, con un desfase de ~60ms entre tarjetas. Con el interruptor activado, solo hay fundido de opacidad — sin desplazamiento.
0 1 Sector · Demo
Tarjeta de revelado 1
Resultado
Subrayado y elevación bajo hover.
0 2 Sector · Demo
Tarjeta de revelado 2
Resultado
Subrayado y elevación bajo hover.
0 3 Sector · Demo
Tarjeta de revelado 3
Resultado
Subrayado y elevación bajo hover.
0 4 Sector · Demo
Tarjeta de revelado 4
Resultado
Subrayado y elevación bajo hover.
02 — Hover de tarjeta
Pasa el cursor sobre cualquier tarjeta de arriba: se eleva -4px, aparece un resplandor de acento y un subrayado se dibuja de izquierda a derecha bajo el título.
03 — Botón dinámico
Un glitch de aberración cromática restringido, de un solo disparo (~250ms, separación de canal de ~2px), que se asienta solo. Marcos de referencia abajo; el botón real responde al hover.
Pasar el cursor Reposo
Pasar el cursor Glitch (~32%)
Pasar el cursor Asentado
04 — Progreso de scroll
La línea de acero de 2px en el borde superior de esta página es real — se llena con tu posición de scroll. Vinculada 1:1 al scroll del usuario, permanece activa incluso con movimiento reducido.