Vaso

Liquid Glass Effect for React

Examples

Theme switch
Resizable glass · drag the handle
Quick start:
import { Vaso } from 'vaso'
Vaso was blessed by the SVG filter and became a powerful glass.
Lens · drag it anywhere on the page

Drag the glass anywhere

Depth
Frosted glass · toggle frost on every glass
--:--
Frosted
Segmented control · the pill bounces into place
Color picker · drag the lens around the wheel
#ffba66
Outset · how far the glass reaches past the letter
i
6
i
12
i
{ x: 20, y: 14 }
i
{ x: 28, y: 14, top: 32 }
Notification
Design review
Starts in 10 minutes

Installation

npm install vaso

Usage

Import the <Vaso> component in your React application and wrap it around any content you want to apply the glass effect to.

Tune it with`depth``blur``dispersion``radius``specular`
toolbar.tsx
import { Vaso } from 'vaso'

export function Toolbar() {
  return (
    <Vaso radius={24} depth={1.2} blur={0.5} dispersion={0.6} outset={{ x: 8, y: 4 }}>
      <button>Share</button>
    </Vaso>
  )
}