Scryer

About This Template

Scryer is a documentary-photographic template for cybersecurity research firms, threat-intelligence practices, and advisory boutiques. Eight routes cover the home dossier, an extended methodology page, a filterable briefings archive with individual case files, an analyst roster with full profile pages, a secure inquiry form, and a dossier-styled 404. Every scroll position is composed as a cinematic frame: a graded background plate, a blueprint grid mid-layer, and a cut-out analyst foreground all parallax at different speeds under a scrubbed ScrollTrigger. The methodology page pins the viewport and drives six principle panels sideways, each with its own containerAnimation entrance. Twenty-seven real licensed photographs plus four paper, document, topo and blueprint textures ship through Astro's AVIF/WebP pipeline, and three color skins — drenched, dossier, midnight — swap the whole palette from one prop.

Signature

The hero is composed like a photograph, not stacked like a webpage: a color-graded server-room plate at the back, an architectural blueprint grid in the middle, and a cut-out analyst silhouette in front, each parallaxed at a different rate by a scrubbed ScrollTrigger so the frame gains real depth as you move. The methodology page then pins the viewport and drags six principle panels horizontally, each panel's numeral, title and body animating in off containerAnimation triggers as it slides into frame.

Features

• 8 routes — Home, Methodology, Briefings archive, Briefing case file, Analyst roster, Analyst profile, Contact, 404
• Three-layer cinematic hero — background plate, blueprint grid, cut-out foreground subject parallaxed at -6%, -12% and -20% on scrub
• Pinned horizontal scroll on the methodology page — 6 principle panels advance sideways with per-panel containerAnimation triggers
• GSAP SplitText line and word reveals across 11 sections — practice, capabilities, methodology, briefings, analysts, contact and detail pages (the hero uses hand-authored line masks)
• Capability rows with clip-path inset(100% 0 0 0) image reveals and a 1.3× counter-scale on the image
• Case-file numerals that count up 00 → 05 when their row enters via IntersectionObserver
• 2 content collections via glob loader — briefings (4 case files) and analysts (6 profiles), fully typed with Zod
• Briefings archive with classification (public / subscriber) and year filters, GSAP blur crossfade between filter states
• Preloader with a 000 → 100 counter, gated by sessionStorage so it plays once per session and skips on reduced motion
• 3 subscription tiers with full feature lists — Watchpoint $24,000/yr, Vantage $72,000/yr, Forensic custom
• Contact page with a secure-inquiry form (industry select, staggered field reveals) and 3D mouse-tilt info cards
• Cited-In wall — 12 publication wordmarks in two counter-scrolling rows mixing serif and grotesque styles
• 3 color skins set from a BaseLayout prop — drenched (default), dossier parchment, midnight steel
• 31 licensed image assets — 27 documentary photographs plus paper, document, topo and blueprint textures, served as AVIF/WebP through Astro's image service
• Self-hosted fonts via the Astro Fonts API — Fraunces and Inter Tight preloaded, JetBrains Mono deferred
• Astro ClientRouter view transitions, Lenis smooth scroll, sitemap, JSON-LD Organization, noscript reveal fallback

Deployment