Scryer

Scryer es una plantilla fotográfica documental para firmas de investigación en ciberseguridad, prácticas de threat intelligence y boutiques de asesoría. Ocho rutas cubren el dossier de inicio, una página extendida de metodología, un archivo de briefings filtrable con case files individuales, un roster de analistas con páginas de perfil completas, un formulario de consulta seguro y un 404 en estilo dossier. Cada posición de scroll está compuesta como un frame cinematográfico: una placa de fondo con color grading, una capa media de grilla blueprint y un sujeto recortado en primer plano hacen parallax a velocidades distintas bajo un ScrollTrigger con scrub. La página de metodología pinnea el viewport y desplaza seis paneles de principios en horizontal, cada uno con su propia entrada por containerAnimation. Veintisiete fotografías reales con licencia más cuatro texturas de papel, documento, topo y blueprint pasan por el pipeline AVIF/WebP de Astro, y tres skins, drenched, dossier, midnight, cambian toda la paleta desde una sola prop.

Qué incluye

• 8 rutas, Inicio, Metodología, Archivo de Briefings, Case File, Roster de Analistas, Perfil de Analista, Contacto, 404
• Hero cinematográfico de tres capas, placa de fondo, grilla blueprint y sujeto recortado con parallax de -6%, -12% y -20% con scrub
• Scroll horizontal pinneado en la página de metodología, 6 paneles de principios avanzan lateralmente con triggers containerAnimation por panel
• Reveals de líneas y palabras con GSAP SplitText en 11 secciones, practice, capacidades, metodología, briefings, analistas, contacto y páginas de detalle (el hero usa máscaras de línea hechas a mano)
• Filas de capacidades con revelado de imagen clip-path inset(100% 0 0 0) y counter-scale de 1.3× en la imagen
• Numerales de case file que cuentan 00 → 05 cuando su fila entra vía IntersectionObserver

La firma

El hero está compuesto como una fotografía, no apilado como una página web: una placa de sala de servidores con color grading al fondo, una grilla blueprint arquitectónica en el medio y una silueta recortada de analista al frente, cada una con parallax a distinta velocidad mediante un ScrollTrigger con scrub, de modo que el frame gana profundidad real al moverte. Después, la página de metodología pinnea el viewport y arrastra seis paneles de principios en horizontal, animando numeral, título y cuerpo de cada panel con triggers containerAnimation a medida que entran en cuadro.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/scryer/. 8 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.