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.
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
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
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
Fred Moon
