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

Development Mode

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

Build for Production

Preview Production Build

npm run preview