LANDING PAGE
KERNEL
A high-end scroll-triggered digital experience built on React and GSAP. Employs a 'Prism & Glass' design system featuring a 40px blueprint grid and glowing cyan (#00ffcc) accents over a void navy (#0a0f1a) background.
Overview
Overview
KERNEL is a sophisticated React-based framework designed for immersive, scroll-driven storytelling. It blends a 'Terminal-Glass' aesthetic with elite performance, serving as the core engine for high-end digital experiences.
Architecture
Architecture
Tech Stack
Tech Stack
React 19
TypeScript
Vite 6
Tailwind CSS 4
Vercel
Motion Engine
Motion Engine
GSAP 3.14
Lenis
Framer Motion
SplitType
Vercel
Engineering Decisions
Engineering Decisions
GSAP Viewport Pining — A critical viewport override was implemented—enforcing overflow-x: hidden strictly on the <html> tag—to prevent positioning recalculation errors and broken layouts during complex fixed-pinning phases.
Lenis Integration — Synchronized native GSAP scroll triggers with Lenis to ensure ultra-smooth, deterministic hardware-accelerated interpolation.
Audio-Active Sensory Loop — Implemented real-time synchronization between the user's scroll velocity and ambient acoustic humming for deep immersion.
Design System
Design System
Color Palette
Color Palette
#0a0f1a — Void Navy (Deep atmospheric canvas)
#00ffcc — Neon Cyan (Primary interactive pulse)
rgba(0,255,204,0.2) — Translucent Accent (Glass layers)
Typography & Grid
Typography & Grid
Blueprint Geometry — Relies on a strict 40px background grid generated purely via CSS linear-gradients to maintain the technical schematic aesthetic.
Applied AI Engineering
Applied AI Engineering
This project serves as an exercise in rapid prototyping via strict LLM constraint prompting. To prevent AI component hallucination, a rigorous Master System Prompt was engineered to lock the model into specific DOM architectures, responsive breakpoints, and motion physics. You can view the raw AI Directive used for this build by clicking the Skills.md button at the top of this case study.