Liquid Glass WebGL

A high-performance, iOS 26-inspired liquid glass effect demo, powered by WebGL.

Live Demo

Run Demo

# Install dependencies
pnpm install

# Start the dev server
pnpm dev

Components Usage

The demo consists of two main components: GlassContainer (which holds the background image and context) and LiquidGlass (the glass element itself).

import { GlassContainer } from './components/GlassContainer'
import { LiquidGlass } from './components/LiquidGlass'
import bgImage from './assets/background.jpg'

function App() {
  return (
    // 1. Wrap your scene in GlassContainer and provide the background image
    <GlassContainer 
      imageSrc={bgImage} 
      style={{ width: '100vw', height: '100vh' }}
    >
      
      {/* 2. Place LiquidGlass components anywhere inside */}
      <LiquidGlass
        blurRadiusPx={16}
        edgeMapStart={0.85} // Start mapping at 85% of the border radius
        style={{
          width: 300,
          height: 200,
          borderRadius: 24, // The effect automatically adapts to this
          margin: '100px auto',
          color: 'white'
        }}
      >
        <div style={{ padding: 20 }}>
          <h2>Glass Content</h2>
          <p>This content sits on top of the glass effect.</p>
        </div>
      </LiquidGlass>

    </GlassContainer>
  )
}

License

MIT