Cipher

Sobre Este Template

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.

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.

Características

• 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
• Sección de proceso en 4 pasos con columna de etiqueta sticky a la izquierda y reveals horizontales escalonados
• Marquee infinito de logos de clientes con fades en los bordes que se pausa al hover
• Colección research — 6 briefs en Markdown vía glob loader, con categorías tipadas (Threat Intel, Vulnerability, Red Team, Advisory, Incident)
• Todas las imágenes generadas como sources AVIF + WebP con getImage() de Astro en tiempo de build
• Contador de scroll fijo (00–99 %) en la esquina superior derecha, recalculado en cada evento de scroll
• Borde shimmer con conic-gradient en los CTA principales, animado con un @property --shimmer-angle registrado
• Capa de atmósfera — grano fractalNoise al 3%, dot grid con el acento, titulares fantasma en outline y edge fades fijos
• Skin claro 'frost' opcional — set completo de tokens en claro conmutable con la prop skin del layout
• Smooth scroll con Lenis conectado al ticker de GSAP y reinicializado en astro:page-load con View Transitions
• TypeScript en modo estricto, skip link y fallback noscript que fuerza todos los reveals a visibles

Despliegue