PRISM — Liquid Glass WebGL Showcase

An infinite, scroll and touch-driven luxury WebGL interactive experience rendered with three.js, animated with GSAP, synthesized with Web Audio API soundscapes, and finished with a custom liquid-glass refraction lens shader. .

🌐 Live Production Experience: https://liquid-glass-carousel-taupe.vercel.app

---

💎 Key Features & Innovations

1. Infinite Spatial Viewport

• Flat 3D panel row rendered with an orthographic camera (1 world unit = 1 pixel).
• Seamless horizontal looping around total viewport width with zero cropping or distortion.
• Automatic texture aspect ratio measurement and dynamic slot spacing.

2. Touch & Multi-Device Physics

• Native drag & touch gesture handling for mobile smartphones, tablets, and desktop displays.
• Velocity-based lerp physics (CONFIG.EASE) with single-glide settle snapping onto panel centers.
• Dynamic panel shrink effect during high-speed drag or wheel movement for tactile inertia feedback.

3. Liquid Glass Refraction Shader

• Post-process GLSL lens shader rendering through an offscreen framebuffer (FBO) sized in physical device pixels (W * dpr).
• Refraction features: Inward zoom pull, chromatic dispersion, central white nova core, blue shimmer ring, fluid wave rim displacement, and shape masking (circle / rounded box).
• Zero-Artifact Fade (uLensFx): Master lens opacity factor ensuring crystal-clear card transition during focus mode without black lens artifacts.

4. 6 Interactive Theme Presets

Real-time GSAP uniform interpolation between curated luxury glass aesthetics:

• Ocean Sapphire (#009dff) — Deep arctic refraction with blue shimmer.
• Emerald Cyber (#00ff9d) — Futuristic matrix aura with vibrant green glow.
• Amethyst Quartz (#b800ff) — Royal purple crystalline dispersion.
• Liquid Gold (#ffaa00) — Warm metallic luxury shimmer.
• Crimson Ruby (#ff0055) — High-energy neon ruby refraction.
• Prism Obsidian (#ffffff) — Pure monochrome glass prism dispersion.

5. Synthesized Web Audio Soundscape

• Zero external audio file dependencies — all sounds are generated live using browser Web Audio API oscillators.
• Dynamic acoustic feedback:
  • Soft glass tick on panel traversal.
  • Resonant glass pop on card selection.
  • Low-frequency sweep on theme switching and focus closing.
  • Interactive Mute toggle (M key).

6. Interactive Case Study Drawer & Category Navigation

• Category Filter Chips: Quick navigation across All, WebGL, Spatial UI, Automotive, Fashion, and Hardware.
• Extended Case Study Drawer: Displays project title, category, year, high-res preview, technical stack pills, performance metrics, and direct live experience links.
• Cinematic Auto-Tour Exhibition Mode: Automatic presentation mode that glides smoothly through projects every 4.5 seconds.

---

🎮 Controls & Keyboard Shortcuts

Input	Action
Mouse Wheel / Trackpad	Traverse carousel row smoothly
Touch Drag / Swipe	Scroll carousel with velocity inertia
Click Card	Center card & open focus mode
[← / →] Arrow Keys	Jump to previous / next project
[Esc] Key	Exit Focus Mode / Close Case Study Drawer
[M] Key	Toggle Web Audio Soundscape
[G] Key	Toggle Shader Tuning Studio (lil-gui)
Auto Tour Button	Toggle automatic gallery presentation mode

---

📁 Repository Structure

app/
  globals.css                 Global styles, typography, and backdrop-blur utilities
  layout.js                   Root Next.js layout (Google Fonts Plus Jakarta Sans & JetBrains Mono)
  page.js                     Entry point mounting CarouselSection
Components/
  CarouselSection.jsx         Main React controller for WebGL engine, overlay UI, & keyboard shortcuts
  Navbar.jsx                  Top header: brand identity, category chips, auto-tour, presets, & audio
  ProjectModal.jsx            Glassmorphic extended case study drawer overlay
lib/carousel/
  audio.js                    Synthesized Web Audio API sound engine
  config.js                   Project catalog metadata, theme presets, & tunable constants
  engine.js                   WebGL render loop, infinite row, touch physics, GLSL lens shader
  gui.js                      Shader Studio dev panel (lil-gui)
public/                       High-resolution project demonstration media

---

🛠️ Developer Quickstart

# 1. Clone the repository
git clone https://github.com/enabled404/prism-liquid-glass.git

# 2. Navigate to project root
cd prism-liquid-glass

# 3. Install dependencies
npm install

# 4. Start local dev server
npm run dev

Open http://localhost:3000 in your browser.

---

⚙️ Customization Guide

Adding New Projects

Edit PROJECTS in lib/carousel/config.js:

{
  id: "my-project",
  src: "/my-image.png",
  aspect: null, // auto-measures aspect ratio
  brand: "Brand Name",
  title: "Project Title",
  desc: "Short Subtitle",
  category: "Digital Product",
  year: "2025",
  fullDesc: "Extended case study description...",
  tags: ["Three.js", "WebGL", "React"],
  metrics: "Featured Case Study",
  link: "https://example.com",
}

Tuning Lens Shaders & Physics

All constants live in lib/carousel/config.js and can be tweaked live in browser by pressing G to open the Shader Studio.

---

📄 License & Credits

• Source Code: Licensed under the MIT License.
• Developed & Engineered: Saad Khalid (saadkhalid2000@outlook.com).
• Concept Inspiration: Original WebGL liquid glass architecture inspired by Yousuf Soomro.