Liquid Metal Logo

Made possible thanks to paper.design and their shaders library.

Transform any logo into a liquid metal surface with this advanced WebGL component. Your brand mark becomes a flowing, chromatic animation with realistic metallic reflections, dynamic light patterns, and smooth fluid motion that continuously loops.

Powered by distance field processing and Poisson solver algorithms, this component automatically optimizes any logo shape for liquid metal rendering.

Key Features

• Automatic logo optimization - upload any PNG, SVG, or image format for instant processing

• Advanced distance field generation using Poisson solver for realistic beveled edges

• Chromatic aberration effects with adjustable dispersion for premium visual quality

• Dynamic stripe patterns that flow seamlessly across your logo surface

• Infinite animation loops with no visual repetition or cycling artifacts

• WebGL2-powered rendering for hardware-accelerated performance

• Mobile-optimized precision with specialized floating-point handling

• Transparent background support preserving original logo alpha channels

Fully Configurable

• Real-time dispersion control (0-0.06 range) for chromatic effects

• Edge sharpness adjustment (0-100%) for different logo styles

• Pattern blur intensity for subtle or dramatic metallic textures

• Liquify strength (0-100%) for fluid distortion effects

• Animation speed control from static to fast-flowing motion

• Pattern scale adjustment (1-10x) for fine or broad metallic stripes

Technical

• Smart image processing - automatically detects shapes vs text for optimal results

• Caching system - processed logos load instantly on repeat visits

• Default logo preview - see the effect immediately without uploading

• Error handling - graceful fallbacks ensure component never breaks

• Memory management - efficient WebGL cleanup and texture handling

• Cross-platform compatibility - works on all modern devices and browsers