Cipher
Sitio de inteligencia de amenazas dark-terminal con hero de peso variable y cursor scan-line
- Plantilla
- Cipher
- Sector
- Cybersecurity
- Año
- 2026
- Hecho con
- Astro 6, React 19, Tailwind CSS v4
- Páginas
- 7
Cipher es una plantilla dark-terminal para firmas de inteligencia de amenazas, equipos de red team y prácticas de investigación en seguridad. Siete páginas cubren el home, una página de servicios con cuatro capacidades en profundidad, about, una biblioteca de research con seis briefs en Markdown, las páginas de cada brief, contacto y 404. El hero mide 200vh y queda pinneado mientras el peso de la fuente variable del titular hace scrub de ‘wght’ 100 a 800 con el scroll, la tipografía engorda literalmente mientras bajas. Una línea de escaneo de 1px sigue al cursor por el viewport, las capacidades viven en una grilla bento de vidrio asimétrica y las estadísticas de amenazas hacen count-up al entrar. Grano de película, dot grid, tipografía fantasma en outline y un borde shimmer con conic-gradient completan una estética de sala de operaciones que nunca se lee como SaaS genérico.
Qué incluye
- 7 páginas, Inicio, Servicios, About, Índice de Research, Brief de Research, Contacto, 404
- Scrub de peso variable, el titular del hero pinneado de 200vh muta de ‘wght’ 100 a 800 atado al progreso de ScrollTrigger
- Cursor scan-line, una línea de 1px a todo el ancho hace lerp hacia la Y del puntero a 0.12 y se desactiva en dispositivos de puntero grueso
- Preview de research que sigue al cursor, gsap.quickTo mueve un thumbnail 16:9 con lag power3 de 0.35s al hacer hover en cada fila
- Estadísticas de amenazas con count-up (3.847 · 99,4% · 140ms · 12 años) animadas una sola vez al entrar en scroll
- Grilla bento de capacidades asimétrica, una card destacada 2×2 más tres cards glassmorphic sobre fondos de imagen
La firma
El hero es un wrapper de 200vh con una pantalla sticky dentro: al hacer scroll, ScrollTrigger hace scrub de un valor proxy hacia el font-variation-settings del titular, llevando ‘WE MAKE THE INVISIBLE VISIBLE’ desde un ‘wght’ 100 finísimo hasta un 800 sólido. La tipografía se vuelve más pesada según baja la página, sin ningún fade de opacidad. En paralelo, una línea de escaneo de 1px sigue la Y del puntero por todo el viewport con un lerp de 0.12, así que la página se siente como una consola de monitoreo en vivo y no como un sitio de marketing.
Verlo en vivo
La demo es pública: https://fpsjago.github.io/cipher/. 7 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.