Scryer

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/scryer/. 8 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.