Liquid Glass Hero

Summary

A Three.js hero section featuring a real-time fluid simulation with iridescent liquid glass forms that morph and react to cursor movement against a dark storm cloud backdrop.

Visual description

A full-bleed monochrome photograph of billowing storm clouds fills a dark hero, with translucent glass-like blobs and splashes of rainbow chromatic edge fringing floating across the upper and middle area. A very large white grotesque headline sits at the lower left on two lines, with a tiny uppercase eyebrow above it and a short paragraph beneath with a thin vertical accent mark. A multicolor hairline progress strip runs along the bottom, and a small prismatic orb with a tiny caption sits at the bottom right. A small cursor is visible mid-left.

Key takeaway

Overlay refractive glass shapes with iridescent edges on a grayscale photo, then keep the type pure white and oversized so the only color in the layout comes from the glass.

Reuse notes

Reach for this as a ui screen reference. Pairs with experimental, 3d directions. Original by Shader Development Studio.