Skip to content

component

Liquid Metal Logo

By Fred Moon

Details

Summary

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

Description

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

Rank history

Daily rank per list, from the first snapshot — lower is better.

12014014778/148/228/309/79/15
  • All · #477