Zenith Interface

An instrument of pure focus. Crafted from digital aerospace titanium and sapphire glass.

✦ Overview

Zenith Interface is an ultra-premium, high-fidelity landing page experience designed to push the boundaries of modern web interactivity. Built with Next.js 15, GSAP, and Framer Motion, it embodies an "Upper Class" aesthetic inspired by high-end fashion editorials and architectural precision.

This project demonstrates advanced frontend engineering techniques, including physics-based interactions, WebGL-style distortion (simulated), and cinematic scroll storytelling.

View Live Demo · Report Bug

✦ Key Features

1. High-Fidelity Interactions

• 🧲 Magnetic Physics: Buttons and interactive elements possess a magnetic field, physically pulling towards the cursor for a tactile feel.
• 🔦 Spotlight Intelligence: Feature cards track mouse movement, shedding dynamic light on borders to reveal content.
• 🖱️ Custom Difference Cursor: A custom blend-mode cursor that ensures visibility on any background, adding an avant-garde touch.

2. Cinematic Storytelling

• 🎞️ Dynamic Film Grain: A procedural noise texture that reacts to scroll velocity, intensifying during rapid movement to simulate analog film speed.
• 📜 Editorial Typography: Massive, tight-tracking headers paired with generous whitespace, mimicking luxury print media.
• 🔓 Text Scramble Decryption: Key headers "decrypt" themselves upon entry, emphasizing the high-tech, secure nature of the product.

3. Advanced Motion

• 🌌 Parallax Image Masks: Images move at different velocities within their containers, creating a "window into another world" depth effect.
• 🌊 Infinite Kinetic Marquee: A seamless, high-performance scrolling band that adds constant horizontal energy.
• ⏱️ Cinematic Preloader: A minimalist counter sequence that builds anticipation before the interface is revealed.

✦ Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Animation: Framer Motion & GSAP ScrollTrigger
• Smooth Scroll: Lenis
• UI Primitives: Shadcn UI
• Icons: Lucide React

✦ Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/Pusri27/zenith-interface.git
   cd zenith-interface

2. Install dependencies:

   npm install
   # or
   pnpm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

✦ Author

Pusri27

• GitHub: @Pusri27