Cipher

About This Template

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.

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.

Features

• 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
• 4-step process section with a sticky left label column and staggered horizontal reveals
• Infinite client-logo marquee with gradient edge fades that pauses on hover
• Research collection — 6 Markdown briefs via the glob loader, with typed categories (Threat Intel, Vulnerability, Red Team, Advisory, Incident)
• Every image built to AVIF + WebP picture sources through Astro's getImage() at build time
• Fixed scroll counter (00–99 %) in the top-right corner, recalculated on every scroll event
• Conic-gradient shimmer border on primary CTAs, animated with a registered @property --shimmer-angle
• Atmosphere layer — fractalNoise film grain at 3%, accent dot grid, outlined ghost headlines, and fixed edge fades
• Optional 'frost' light skin — a complete light token set switchable through the layout's skin prop
• Lenis smooth scroll wired into the GSAP ticker and re-initialized on astro:page-load with View Transitions
• TypeScript strict mode, skip link, and a noscript fallback that forces every reveal visible

Deployment