MERCURY Ecosystem
MERCURY is a bespoke, high-performance digital framework built from the ground up by EZZPEE. Transcending traditional web design, this project is a chronological evolution of structural purity, spatial UI interaction, and zero-bloat architecture.
---
The Core Philosophy
MERCURY rejects the modern reliance on heavy frameworks (React, Vue) and CSS utility libraries (Tailwind, Bootstrap). It is a manifesto of Artisanal Web Development, ensuring:
- Zero Bloatware: Millisecond load times achieved through pure, hand-coded logic.
- Universal Accessibility: Flawless scaling across desktops, tablets, and mobile interfaces using strictly calculated CSS Grids and Touch-Detection protocols.
- Parametric Aesthetics: High-end UI (Volumetric Glassmorphism) rendered purely through mathematical CSS masks, layers, and negative Z-indexing.
---
The Iterations (V1 to V7)
This repository serves as an archive of the entire evolutionary process of the MERCURY framework. Each folder is a distinct milestone in the architectural journey.
v1- The Prototype: The genesis. A skeletal HTML/CSS structure acting as a conceptual canvas for a fictional luxury watch brand.v2&v3- Modular Expansion: The introduction of the component directory (/cards) and the foundation of the strict Dark Mode Core. Debt refactoring.v4&v5- Translataut & Sophistication: Introduction of bespoke multi-language architecture ("TRANSLATAUT") native to the JS logic, without third-party plugins.v6- The Digital Space: The integration of spatial 3D interactivity, simulated ambient lighting, advanced volumetric cards, and smooth inertial scrolling (Lenis.js).v7- Universal Access (The Masterpiece): A ruthless optimization of V6. Features a completely re-engineered CSS pure-grid to guarantee ultra-fluid responsiveness across all viewports. Includes deep(hover: none)touch-detection to prevent sticking states on mobile devices.v7 LITE- Performance Core: The definitive corporate cut. Retains the indestructible universal grid and layout of V7, but strips away the heaviest experiential/3D elements to achieve a guaranteed 100/100 Lighthouse Score.
---
The Advanced Cards System (Since V6)
Our UI components are not just markup containers; they are interactive, spatial artifacts engineered with extreme precision:
- LUIS (Luminous UI Surface): A masterclass in volumetric glassmorphism. It features a rotating bezel that reacts to light, delivering a premium, tactile presence.
- GMRC (Glass Morphic Refraction Card): Mimics the physical bending of light, creating an organic "lens" distortion effect over the background layers.
- KAGC (Kinetic Aura Glass Card): An immersive exercise in motion and luminosity, balancing an energetic backdrop with the cold, refined structure of the glass surface.
- M3DSF (Magnetic 3D Slab Flip): A study in spatial interaction. This 3D block rejects 2D web flatness, responding with a physical sense of "magnetic" weight upon cursor interaction.
---
Technology Stack
- Markup & Layout: HTML5 semantic structure, Advanced CSS3 (Custom Properties, Grid/Flexbox architectures, Masking, Backdrop Filters).
- Interactivity: Vanilla JavaScript (ES6+), intersection observers, and advanced DOM manipulation.
- Physics Engine: Lenis.js specifically integrated for raw, uncompromised inertial scrolling.
- AI Symbiosis: Architecture and complex problem-solving assisted globally by AI engines (Gemini / ChatGPT) for structural mastery.
---
Origins
Originally conceptualized in 2025 as a school business plan project (a conceptual high-end watch brand) deployed on a local Apache2 server. It rapidly grew out of its original scope, mutating into a sandbox for extreme front-end experimentation and finally settling as a top-tier UI/UX architectural asset.
---
Author
Designed, architected, and coded entirely by EZZPEE.
"Fusing human vision with uncompromised technical purity."