Vaso

A beautiful liquid glass distortion effect component for React that creates stunning visual magnification and warping effects.

Installation

npm add vaso

Quick Start

import { Vaso } from 'vaso'

function App() {
  return (
    <Vaso radius={16} depth={1.2} blur={0.5} outset={12}>
      <p>This text sits under a liquid glass</p>
    </Vaso>
  )
}

API Reference

Props

Prop	Type	Default	Range	Description
children	React.ReactNode	-	-	Content rendered on top of the glass. Without children, set width and height to size the glass
component	string | React.ComponentType	'div'	-	The element or component to render as the glass root, e.g. 'span' for inline glass
width	number	undefined	-	Explicit width of the glass element (overrides child element size)
height	number	undefined	-	Explicit height of the glass element (overrides child element size)
outset	number | { x, y, top, right, bottom, left }	0	-	Extends the glass beyond the element without affecting layout. A number applies to every side; sides take precedence over axes
px / py	number	0	-	Deprecated, use outset={{ x, y }}
radius	number	inherited	0-∞	Border radius of the glass. Defaults to the element's computed border-radius, so classes like rounded-full just work
depth	number	0	-5.0 to 5.0	Refraction strength at the bezel (negative values create a concave, compressing glass)
blur	number	0.1	0-10	Backdrop blur in pixels
dispersion	number | false	0.5	0-3.0	Spectral (rainbow) dispersion along the refracting edge, like Figma's glass. Scales with the glass size and fades out as depth approaches 0
specular	number | false	0.5	0-1.0	Intensity of the specular rim highlight

Browser Support

The refraction is rendered with an SVG filter inside backdrop-filter, which is currently only supported by Chromium based browsers (Chrome, Edge, Arc, Opera, ...).

Safari and Firefox don't render those, so Vaso refracts a copy of what's behind the glass instead, with no extra setup:

• It clones the nearest ancestor with visible content (text, images, video, canvas or a background), leaving out every glass layer and anything stacked above this glass.
• The clone is kept aligned every frame, so dragging, scrolling and transitions stay in sync. Videos and canvases are mirrored into it frame by frame.
• DOM changes re-clone it, swapping only once the new clone's images and videos have loaded. Style changes (themes, late stylesheets) refresh it without cloning.
• Transparent areas are filled with the color behind the content, so nothing shows through twice.

Limits: sources larger than 400 elements aren't cloned (the glass keeps its blur and rim instead), and CSS that depends on an ancestor outside the cloned element may style the copy differently. Glass far outside the viewport pauses its copy until it scrolls back near it.

Examples

Glass around content

The glass sizes itself to its children. outset lets it reach past them without moving anything.

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

Lens with an explicit size

Without children, give the glass a size and place it over whatever it should refract.

<div style={{ position: 'relative' }}>
  <img src="/photo.jpg" />
  <Vaso
    width={120}
    height={120}
    radius={60}
    depth={2.5}
    style={{ position: 'absolute', left: 40, top: 40 }}
  />
</div>

Concave lens

A negative depth compresses what's behind the glass instead of magnifying it.

<Vaso width={60} height={60} radius={30} depth={-4} dispersion={1.5} />

Radius from CSS

Leave out radius and the glass follows the element's own border-radius.

<Vaso className="rounded-full" depth={1.4} outset={4}>
  <span>Dark</span>
</Vaso>

Frosted panel

A high blur with a bright rim reads as frosted glass.

<Vaso radius={20} depth={0.3} blur={6} specular={0.9}>
  <div className="p-4">Settings</div>
</Vaso>

License

MIT