design-infraReport a problem or share feedback← Catalog
Liquid Glass (@samasante/liquid-glass)
curatedfreeliquidglass/liquid-glass
Headless React lens that refracts what's behind it — Apple-style Liquid Glass with frost, tint, rim light, dispersion and an edge 'bend'; can also refract a copy of a node, an image, video or canvas.
$
pnpm add @samasante/liquid-glassnpm deps: @samasante/liquid-glass
Our notes
Wrap any styled box in <Glass> (your translucent background is the tint; children stay crisp; optics via the optics prop). True refraction of the live page is Chrome/Edge only (backdrop-filter: url()); Safari/Firefox fall back to frost + tint + edge light. To bend in every browser, give it geometry (size + center) to refract its own children, or refract={copy} / src for images, video and canvas (WebGL). Headless — tint it with your tokens. v0.1.x: pin the version; use one or two lenses per screen and check text contrast over busy backgrounds. React >=18 peer, zero runtime deps, MIT.- Source
- Liquid Glass (@samasante/liquid-glass)
- Kind
- package
- Categories
- card, button, navigation
- Use as
- wrapper — wraps your existing element
- Applies to
- cardbuttonnavigationtoast
- Motion
- on cursor · subtle · svg · medium cost
- Tags
- npm, mit, glassmorphism, refraction, svg-filter
- Licence
- MIT (npm @samasante/liquid-glass, github.com/samasante/liquid-glass).
- Live demo
- glass.samasante.com
- Docs
- glass.samasante.com
Similar
Compare all 4 →- Moving Borderaceternity/moving-borderA border that moves around the container. Perfect for making your buttons stand out.
- Glowing Effectaceternity/glowing-effectCursor-style border glow that follows the pointer. Works on any card.
- Border Beamlibrariesdev/border-beamUse on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.