LiqvuedLiquid Glass Effects for Vue 3

Realistic SVG displacement map refraction via SVG filter primitives — zero runtime dependencies beyond Vue.

🔬

Surface Refraction

Per-pixel displacement maps computed from mathematical surface profiles — each shape produces a distinct refraction pattern.

🎨

Choose from convex, concave, and lip profiles — each producing a distinct glass shape and edge distortion.

⚡

Displacement maps are generated on-the-fly via Canvas API and injected as an inline SVG filter primitive.

🧩

Built as a Vue 3 component with full TypeScript support. Slot-based content lets you wrap any element in glass.

🎛️

Control corner radius, bezel width, displacement thickness, refraction index, blur, and surface type through component props.

🌐

Zero runtime dependencies beyond Vue. Just pure math, Canvas, and SVG.