Scryer

Sobre Este Template

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.

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.

Características

• 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
• 2 colecciones de contenido con glob loader — briefings (4 case files) y analysts (6 perfiles), tipadas con Zod
• Archivo de briefings con filtros por clasificación (public / subscriber) y año, con crossfade blur de GSAP entre estados
• Preloader con contador 000 → 100, controlado por sessionStorage para que corra una vez por sesión y se salte con reduced motion
• 3 tiers de suscripción con listas completas de features — Watchpoint $24.000/año, Vantage $72.000/año, Forensic a medida
• Página de contacto con formulario de consulta segura (select de industria, reveals escalonados de campos) y cards con tilt 3D al mouse
• Muro Cited-In — 12 wordmarks de publicaciones en dos filas que scrollean en sentidos opuestos, mezclando serif y grotesque
• 3 skins de color desde una prop de BaseLayout — drenched (default), dossier pergamino, midnight acero
• 31 assets de imagen con licencia — 27 fotografías documentales más texturas de papel, documento, topo y blueprint, servidas como AVIF/WebP por el image service de Astro
• Fuentes self-hosted vía la Fonts API de Astro — Fraunces e Inter Tight con preload, JetBrains Mono diferida
• View transitions con ClientRouter de Astro, smooth scroll con Lenis, sitemap, JSON-LD Organization y fallback noscript para reveals

Despliegue