react
Featured
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It combines a custom liquid-glass GLSL refraction lens, zero-asset audio synthesis, and polished scroll/touch physics into a single luxury brand-experience demo, deployed live on Vercel.
Who it is for
- WebGL/Three.js developers interested in shader and interaction techniques
- Creative developers building luxury brand or portfolio sites
- Frontend engineers exploring Next.js + WebGL integration
- Designers seeking interactive case-study presentation patterns
Use cases
- Luxury product or portfolio showcase
- Interactive case study gallery with category filtering
- WebGL demonstration of custom refraction shaders and post-processing
- Cinematic auto-tour or kiosk-style brand experience
Strengths
- Custom liquid-glass refraction shader with chromatic dispersion, nova core, and shape masking
- Seamless infinite horizontal carousel with velocity-based touch/flick physics and no cropping
- Entire soundscape generated live with Web Audio API, no external audio files
- Includes six interactive theme presets, keyboard shortcuts, and a Shader Tuning Studio via lil-gui
Considerations
- Requires a WebGL-capable browser and likely a reasonably powerful GPU for smooth post-processing effects
- No fallback or low-power mode is described for environments without WebGL support
- Primarily a showcase rather than a reusable library; customization relies on editing project constants
README quick start
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.
Description
PRISM... WebGL Liquid Glass Interactive Showcase built with Three.js, GSAP, and Next.js
Related repositories
Similar projects matched by category, topics, and programming language.
TanStack
Featured
router
TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.
NUber-dev
Featured
YTubic
YTubic is a fast, responsive, open-source YouTube Music desktop client for Windows, Linux, and macOS that uses direct InnerTube API communication and aggressive caching to provide instant navigation and playback.