Liquid Glass Player UI

An experimental UI exploration utilizing heavy refraction and chromatic distortion to create a highly tactile, physical audio widget.

Redefining Digital Tactility

Standard media players prioritize extreme minimalism, often feeling flat and lifeless. This experimental project explores how advanced visual distortion and material simulation can make a digital widget feel like a heavy, premium physical object.

The Flatness of Modern UI

Lack of Materiality: Flat design has sterilized digital interfaces. Users interact with media that evokes deep emotion, but the controls themselves feel like uninspired, weightless vectors.

Predictable Overlays: Traditional translucent overlays (standard frosted glassmorphism) have become a saturated trend, failing to create a memorable or striking visual impact against diverse album art.

Tackling the Problem

Simulating Liquid Optics: We engineered a custom "liquid glass" effect. Instead of a simple blur, we introduced refractive distortion along the edges, mimicking a thick, cast-glass lens resting on the screen.

Chromatic Aberration: To heighten the realism and visual tension, we embedded subtle color-splitting at the distortion points, giving the UI a raw, slightly retro-futuristic edge.

High-Contrast Minimalism: Because the widget's material is highly complex and active, we kept the internal typography and playback controls stark, white, and ruthlessly minimal to ensure perfect legibility.

The Solution

**Neon Distortion:** Against the vibrant *Arcane* background, the liquid edge heavily distorts the neon blues and purples, creating a highly engaging, cyberpunk-esque visual tension.

**High-Contrast Warping:** The stark red background and detailed portrait are warped smoothly through the widget's lens, proving the effect holds up against bold, human-centric photography.

**Shadow Refraction:** The widget seamlessly bends the dark, concert-style lighting, demonstrating how the refractive edges dynamically adapt to deep shadows and stage highlights.

**Textured Integration:** The earthy greens and textured backdrop are pulled into the glass edge, giving the digital interface an almost physical, tactile presence against the grunge aesthetic.

**Atmospheric Bleed:** Warm, moody orange tones bleed beautifully into the chromatic distortion, creating a sultry, highly atmospheric visual wrap around the crisp playback controls.

**Stylized Clash:** Pushing the effect over 2D comic art creates a fascinating, eye-catching clash between flat illustration and hyper-realistic 3D lens refraction.

The grayscale, heavily textured background art is stretched and warped, highlighting the widget's ability to add significant visual depth to even colorless imagery.

**High-Key Dynamics:** The bright blue sky and dynamic movement are refracted cleanly through the lens, proving the UI feels lightweight and energetic against vibrant, outdoor photography.

Want to work with us?

Clarity drives every design decision — paired with bold ideas and intent. We love working on projects that move people forward.

Let’s start with a quick form to understand what you need.

Get in touch