The
product
Lumen is a fictional ML infrastructure platform — a design showcase built to answer one question: what does a world-class developer-tool landing page look and feel like when it's executed without compromise? The product concept is serverless GPU compute for machine learning: H100s and A100s on demand, pay-per-second billing, sub-800ms cold starts for 70B models, a single Python decorator to deploy any function. The platform is fictional. The craft is not.
What I was after
Make a developer feel at home immediately — monospace code samples, dark backgrounds, precision typography, real readable Python in the hero that communicates the product's actual DX promise
Demonstrate frontend craft at the implementation level — every animation built from scratch, every transition tuned by hand, no template shortcuts
Dark glassmorphism as the visual system — deep background gradients, glass cards with backdrop blur, subtle border glows, controlled use of color accent
Choices that shaped it
Dual-layer animated hero gradient
Two CSS keyframe animations running simultaneously — one at 16 seconds, one at 22 seconds — producing a slow, organic color drift that never repeats. Different speeds, different directions. Creates depth without any JavaScript. Sets the product's visual register in the first second: this isn't a template.
Custom cursor glow
A radial gradient follows the mouse across the entire page — a soft, colored light tracking cursor position. On touch devices it hides automatically. A detail most users won't consciously register, but it makes the interaction feel alive in a way that's hard to articulate without experiencing it.
Scroll progress bar
Rainbow-gradient progress bar tracks scroll position at the top of the viewport. Communicates page length, rewards exploration, adds visual interest to an interaction (scrolling) that is normally invisible.
3D card tilt on hover
Feature cards respond to mouse position with subtle perspective tilt — perspective(700px) rotateX/Y — that makes cards feel physical rather than flat. Restrained: enough to notice, not enough to distract. Combined with the cursor glow, creates a surface that feels responsive to the user's presence.
SPA transitions between pages
Hash-based routing handles navigation between eight pages — home, use-cases, pricing, blog, docs, company, login, signup. Each transition runs a 220ms fade plus 10px Y-axis slide. Page changes feel like part of a continuous experience rather than reloads.
Billing toggle
Pricing page includes a monthly/annual toggle that swaps prices via data-attribute reads. Instant, no network call, visible annual savings callout. Standard SaaS pattern — but getting the polish right (smooth swap, exact savings math, no flash of unstyled content) is what separates a template-derived pricing page from one that earns trust.
What's inside
Animated hero gradient, code sample with @lumen.gpu decorator, animated stat counters (cold start time, uptime, model support), feature grid, testimonials.
Tabbed panels covering three deployment modes: training, inference, fine-tuning. Each tab swaps content without a page reload, smooth opacity transition.
Three-tier card layout (Starter, Pro, Enterprise), monthly/annual toggle, FAQ accordion. Tier differentiation through feature lists and a single highlighted recommended tier.
Tag-filtered article cards. Clicking a tag filters visible articles by category without a reload.
Sidebar with active-link tracking that highlights the current section as the user scrolls. IntersectionObserver on each section.
About section, team cards, contact form. Minimal auth forms, clean centered layout, no distraction from the core action.
Built with care
Every animation runs on the compositor thread — transforms and opacity only, no layout-triggering properties. The dual-layer hero gradient is pure CSS keyframes. The cursor glow tracks via direct style mutation on mousemove. IntersectionObserver handles both scroll reveals and the docs sidebar's active-section tracking. The result is a product that performs like a static site and looks like a funded startup's marketing page — multi-page SPA navigation, eight fully-built sections, every interaction tuned to load and respond instantly.
What I'd push further
Lumen was the project that pushed my implementation craft furthest. The challenge wasn't designing something that looked good. It was designing something that looked good and then building every interaction with intention — no template shortcuts, no copy-paste components. The docs page is the weakest section — placeholder content, sidebar interaction technically correct but lacking the depth real technical documentation demands. A version with genuine content, a search interface, and versioned API references would complete what is currently the product's most important page for developer credibility.