I built this from scratch using vanilla HTML, CSS, and JavaScript, no build tools, no frameworks, no npm packages. It's a single-file static site that runs offline with zero dependencies, and it's meant to feel like a high-fidelity enterprise product page with a clean, engineering-focused aesthetic.

The visual language is called "Precision Grid", think white canvas with bone-gray accents and one electric-lime accent color (#DCF986) that pops like a circuit trace. The hero section features a dynamic SVG-based security console mockup that animates a live line chart using stroke-dashoffset, with pulsing status dots and count-up metrics that update without triggering any external libraries. The display type uses Clash Grotesk for headers and Satoshi for body, both chosen to match the tech-savvy, minimalist vibe.

Motion is subtle but intentional: staggered fade-and-rise on load, scroll-triggered reveals using IntersectionObserver, and a floating "real-time monitoring" pill that slides in with a slight bounce. I made sure to respect prefers-reduced-motion so it works for everyone, even those with accessibility needs.

The real engineering challenge? Making sure the SVG chart's animation stayed in sync with the scroll position while the page was being viewed. I had to manually track scroll velocity and adjust the stroke-dashoffset value based on a smoothed delta over time, using a simple exponential decay formula to prevent jitter. The fix was: currentOffset = previousOffset + (velocity * 0.05), a small but effective way to keep the animation fluid without overcomplicating it.

This project felt like a quiet victory, building something that feels like it's made for engineers, not for pixels. I love the precision, the calm tension, and the way the animations feel like they're breathing with the user's scroll.

🔥 😊