Skip to content

Liquid Glass Media

Animated fluted glass distortion

Liquid Glass Media preview image 1

Summary

Animated fluted glass distortion

Description

Features

  • Realistic fluted glass distortion powered by WebGL shaders

  • Supports animated shaders, images, and video backgrounds

  • Smooth chromatic aberration and optical refraction effects

  • Adjustable flute angle, density, and directional movement

  • Procedural animated liquid gradients with cinematic color blending

  • Optimized rendering with viewport detection and cleanup handling

  • Responsive scaling with accurate aspect-ratio correction

  • High-performance Three.js implementation for Framer projects

Customization Options

  • Switch between shader, image, or video media sources

  • Customize four ambient shader colors

  • Control flute count and flute rotation angle

  • Animate flute movement direction and speed

  • Adjust refraction intensity and edge distortion

  • Fine-tune RGB split chromatic aberration

  • Control shader animation speed and ambient scale

  • Toggle live editor preview inside Framer canvas

Use Cases

  • Hero sections with premium glassmorphism visuals

  • Interactive landing page backgrounds

  • Luxury SaaS and AI product websites

  • Creative portfolio showcases

  • Modern media cards and visual containers

  • Futuristic UI overlays and navigation panels

  • Experimental immersive web experiences

Rank history How rankings work →

12001400144758/149/59/2710/1911/11
  • All · #2342

Details

More like this