About this component

Instead of one card, multiple tiny glass droplets float in a loose arrangement. Each droplet contains a fragment of content, magnified and inverted. Hover attracts droplets together, merging them into a larger, more complete card. Clicking splits a merged droplet back into its components. The surface tension between merging droplets creates a beautiful, brief liquid bridge.

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/suspended-droplet-constellation-card.