💎 3D Luxury Button Bar: Cinematic UI Experience

✨ Project Goal

A breathtaking 5-button horizontal luxury bar that looks like it was carved from real crystal and polished metal. The entire UI is designed to feel extremely premium, cinematic, and "wow" to instantly grab attention and showcase a $10,000 design aesthetic.

🚀 Live Demo

Live Demo Placeholder

📸 Screenshot/GIF Recommendation

Capture a short (15-25 seconds) high-quality video or GIF showcasing the smooth background animation, the subtle particle effects, and especially the luxurious liquid metal/gold fill effect on button hover. Focus on the volumetric lighting, specular reflections, and the overall 3D depth to highlight the premium feel.

🌟 Features

• Ultra-Premium Aesthetic: Dark luxury design with glassmorphic and 3D elements.
• Dynamic Background: Smooth animated gradient shifting between deep dark purple and rich gold, complemented by a subtle moving noise/velvet texture and glowing bokeh orbs.
• 3D Crystal/Metal Buttons: Five perfectly centered horizontal buttons with strong bevel and emboss effects, realistic volumetric lighting, true specular reflections, and subtle inner refraction.
• Gold Metallic Edges: Buttons feature elegant gold metallic edges with purple undertones.
• Luxurious Hover Effects: Buttons "explode" outward with a gentle scale and lift, accompanied by a mesmerizing liquid metal/gold fill effect flowing from the center. Volumetric light intensifies with a bright flare.
• Micro-Delay Interactions: Each button reacts independently with micro-delays for a refined, premium feel.
• Mouse-Following Glow: A subtle light reflection follows the mouse movement across the button bar, adding an extra touch of luxury.
• Responsive Design: Fully optimized for seamless viewing and interaction on both mobile and desktop devices.
• Buttery Smooth Animations: All animations run at a consistent 60fps, ensuring a fluid and high-end user experience.

🛠️ Tech Stack

• HTML5: Semantic structure for the button bar and overall page layout.
• CSS3: Advanced styling with modern CSS features (@property, 3D transforms, multiple box-shadows, backdrop-filter, variables) for visual effects and animations.
• JavaScript (Vanilla): Powers interactive elements, background particles (Canvas), and the liquid fill effect (Canvas).
• HTML5 Canvas: Utilized for high-performance and visually stunning particle effects and liquid fill animations.

⚙️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/ICodingStack/3D-Luxury-Button-Bar.git

2. Navigate to the project directory:

   cd 3D-Luxury-Button-Bar

3. Open index.html: Simply open the index.html file in your preferred web browser. No local server is required as it's a pure static HTML/CSS/JS project.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

👨‍💻 Credit

Created by BlackBirdo.