A premium, interactive 3D web experience for Cue Club Coventry, featuring fluid smooth-scrolling, cinematic lighting, and custom glassmorphism UI. Built with React Three Fiber and GSAP.
⭐ 0 stars💬 0 comments
Files
📄 .gitignore
253 B
📄 .oxlintrc.json
231 B
📄 README.md
3.4 KB
📁 dist
📄 index.html
356 B
📄 main123.py
15 B
📄 package-lock.json
94.2 KB
📄 package.json
631 B
📁 public
📁 src
📄 vite.config.js
161 B
README
# Cue Club Coventry
A premium, next-generation web experience designed for Cue Club Coventry. This project pushes the boundaries of modern web design by seamlessly blending high-end UI/UX principles with interactive 3D elements.
## 🎨 Design Approach
The aesthetic of the Cue Club website is built around a **Premium Dark Mode** philosophy, utilizing deep blacks (`#0a0a0c`) contrasted with vibrant, glowing neon accents (Cyan `#00e5ff` and Deep Crimson `#ff003c`).
Key design elements include:
- **Glassmorphism**: Navigation menus, booking cards, and UI elements utilize frosted glass effects (`backdrop-filter: blur`) to create depth and hierarchy without relying on solid, heavy borders.
- **Fluid Typography**: Leveraging modern geometric fonts (Outfit and Inter) with fluid CSS clamping ensures the text scales elegantly from massive 4K monitors down to mobile screens.
- **Micro-Animations**: Every interaction features subtle GSAP-powered micro-animations, hover effects, and parallax scrolling to make the interface feel alive and responsive.
- **Mobile-First Responsiveness**: The design gracefully adapts. On mobile, complex grid layouts transform into readable columns, horizontal galleries stack vertically, and the navigation collapses into a beautiful full-screen frosted glass overlay.
## 🛠 Technical Approach
This project is built using a modern, high-performance web stack:
### Core Stack
- **React 18**: For declarative UI architecture and component management.
- **Vite**: For lightning-fast Hot Module Replacement (HMR) and optimized, highly compressed production builds.
- **Vanilla CSS**: Used deliberately over utility frameworks to maintain absolute, pixel-perfect control over complex glassmorphism effects and custom animations.
### 3D Integration (WebGL)
- **Three.js & React Three Fiber (R3F)**: The core engine driving the interactive 3D background.
- **@react-three/drei**: Utilized for cinematic environmental lighting (`Environment` HDRs) and camera controls