Liquid Glass Vue

A WebGL liquid glass refraction effect project based on Vue3 + Vite.

🌐 Live Demo: [http://liquid-glass.liziyang.design]

Tech Stack

• Vue 3 - Modern frontend framework
• Vite - Fast build tool
• WebGL2 - Hardware-accelerated graphics rendering
• GLSL ES 3.0 - Shader language
• SDF (Signed Distance Field) - Geometric shape definition

Quick Start

Install Dependencies

npm install

Development Mode

npm run dev

Visit http://localhost:3000 to see the effect

Build for Production

npm run build

Preview Production Build

npm run preview