About this component

A suspended droplet of ultra-slow-moving liquid glass. Content is refracted and magnified through the curved surface. Hover makes the droplet wobble slightly, distorting the content beneath in real-time. Clicking pulls the droplet downward, stretching it into a thin strand before it snaps back with a ripple. The droplet's thickness and refractive index are adjustable as a theme setting.

Difficulty

Expert

Style

Apple Liquid Glass

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/viscosity-drop-card.