<aside> ⌨️

KERNEL is a futuristic frontend/landing-page experiment focused on technical visual language, scroll choreography, blueprint geometry, glass layers, and synchronized motion.

</aside>

1. Project overview

Kernel was built as a frontend practice project for exploring an operating-system-inspired visual experience rather than a conventional product site.

The implementation combines React, a strict technical design system, CSS-generated geometry, smooth scrolling, and GSAP-led animation.

Stack: React 19, TypeScript, Vite 6, Tailwind CSS 4, GSAP 3.14, Lenis, Framer Motion, SplitType, Vercel.

2. Visual objective

The design language is intended to feel like a technical interface or data layer rather than a standard marketing template.

Core characteristics include:

• deep void/navy surfaces;
• cyan luminous accents;
• blueprint/grid geometry;
• transparent glass panels;
• monospace/technical labels;
• large display typography;
• motion synchronized tightly with scroll.

3. Page composition

flowchart TD
    GRID["Fixed blueprint grid"] --> HERO["Full-viewport hero"]
    HERO --> PANELS["Glass panel system"]
    PANELS --> DATA["Technical / data sections"]
    DATA --> TERMINAL["Terminal-inspired interface"]
    TERMINAL --> CLOSE["Closing statement"]

A fixed visual environment sits behind content so sections feel like states within one technical system rather than unrelated cards.

4. CSS blueprint grid