High-Performance Commerce Interface
Designed & Engineered by Alfaz Mahmud Rizve
🔗 Live Demo · 🌐 Portfolio · 📦 GitHub
SPECTRE is a cinematic e-commerce frontend that demonstrates Agentic AI capabilities in modern web development. Every pixel is intentional. Every scroll frame is computed. This is not a template — it is a fully engineered, scroll-driven product experience built from scratch with a "Cyberpunk / Stealth" design language.
The project showcases how AI-assisted development can produce production-grade interfaces with complex scroll mechanics, real-time canvas rendering, and immersive audio — all while maintaining clean, maintainable architecture.
spectre/
├── app/ # Next.js App Router (Pages, API Routes, Layout)
│ ├── api/ # RESTful endpoints (Auth, Products, Orders)
│ ├── checkout/ # Secure terminal checkout flow
│ ├── dashboard/ # Admin command center
│ └── product/[slug]/ # Dynamic product detail pages
├── components/ # UI components (Canvas, Overlays, Sidebar, Navbar)
├── hooks/ # Custom hooks (Canvas Sequence, Media Query, Loader)
├── store/ # Zustand stores (Cart, Product State)
├── prisma/ # Database schema and seed data
├── public/ # Static assets (Product frame sequences, sounds)
└── data/ # Type exports and data layer
Scroll-controlled frame interpolation on an HTML5 <canvas>. Product images are loaded in two phases (critical-first, background-fill) for fast perceived performance. Spring-smoothed scroll progress ensures silk-smooth frame transitions without jank.
Command-center style inventory management with real-time product CRUD, image upload, and order tracking. Designed for operators, not consumers.
A terminal-inspired, form-based checkout flow that maintains the stealth aesthetic end-to-end.
Interactive audio testing station for keyboard switch acoustics. Supports Linear (Stealth) and Tactile (Cyber) profiles with live waveform visualization.
Full mobile support with adaptive canvas scaling, hamburger navigation, touch-optimized scroll parameters, and portrait-aware product framing.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Server Components) |
| Language | TypeScript |
| Styling | Tailwind CSS + Custom Design Tokens |
| Animation | Framer Motion (Springs, Transforms, AnimatePresence) |
| Scroll | Lenis (Smooth Scrolling) |
| Canvas | HTML5 Canvas (Scroll-Driven Frame Rendering) |
| Audio | Howler.js |
| State | Zustand (Persisted Cart & Settings) |
| Auth | NextAuth.js |
| Database | Prisma ORM (PostgreSQL) |
| Fonts | Space Grotesk + Inter (Google Fonts) |
| Deployment | Vercel |
# Clone
git clone https://github.com/AlfazMahmudRizve/spectre.git
cd spectre
# Install
npm install
# Environment
cp .env.example .env.local
# Configure DATABASE_URL, NEXTAUTH_SECRET, and NEXTAUTH_URL
# Database
npx prisma generate
npx prisma db push
npx prisma db seed
# Dev
npm run devOpen http://localhost:3000.
Navigate to /login and sign in with the seeded admin credentials. The Dashboard link appears in the navbar for admin users.
© 2026 Alfaz Mahmud Rizve. All Systems Nominal.