Liquid Cards (Gel Flow)

Liquid Cards (Gel Flow)

Auto-rotating image cards with a “liquid” feel: the current card fades out with blur while the next scales in; the active card gets an overlay of animated blurred blobs for a gel-like effect.

How it works

• Card transition — GSAP timeline blurs and fades out the current card and scales in the next.
• Liquid mask — Each card has a .liquid-mask with several .blob divs; on reveal, blobs are positioned randomly and animated (scale, opacity, then drift) for a soft, organic overlay.
• Interval meter — A progress bar reflects the time until the next transition.

When to use it

• Hero or feature carousels where you want a softer, more editorial look
• Campaign or brand sections that benefit from a “fluid” visual language
• Any image carousel where a subtle overlay animation adds polish