Cipher

Cipher is a dark-terminal template for threat intelligence firms, red teams, and security research practices. Seven pages cover the homepage, a services page with four capability deep-dives, an about page, a research library backed by six Markdown intelligence briefs, individual brief pages, contact, and a 404. The hero is 200vh tall and stays pinned while the headline’s variable font weight scrubs from ‘wght’ 100 to 800 on scroll, the type physically thickens as you descend. A 1px accent scan line trails the cursor down the viewport, capabilities sit in an asymmetric glass bento grid, and threat statistics count up on entry. Film grain, a dot grid, outlined ghost type, and a conic-gradient shimmer border complete a console-room aesthetic that never reads as generic SaaS.

What’s inside

• 7 pages, Home, Services, About, Research index, Research brief, Contact, 404
• Variable font-weight scrub, the pinned 200vh hero headline morphs from ‘wght’ 100 to 800 tied to ScrollTrigger progress
• Scan-line cursor, a full-width 1px accent line lerps toward the pointer Y at 0.12 and disables itself on coarse-pointer devices
• Cursor-following research preview, gsap.quickTo drives a 16:9 thumbnail with a 0.35s power3 lag on row hover
• Count-up threat stats (3,847 · 99.4% · 140ms · 12yr) animated once on first scroll entry
• Asymmetric bento capabilities grid, a 2×2 featured card plus three glassmorphic cards over image backdrops

The signature

The hero is a 200vh wrapper with a sticky screen inside: as you scroll, ScrollTrigger scrubs a proxy value into the headline’s font-variation-settings, taking ‘WE MAKE THE INVISIBLE VISIBLE’ from hairline ‘wght’ 100 to a solid 800. The type gets heavier as the page descends, no opacity fade involved. Meanwhile a 1px accent scan line tracks your pointer’s Y across the whole viewport with a 0.12 lerp, so the page reads like a live monitoring console rather than a marketing site.

See it live

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