---
title: "Liquid Metal Logo — Free Framer component · Best of Framer"
description: "Free Framer component · by Fred Moon · Effects. Made possible thanks to paper.design and their shaders library."
canonical: "https://framer.elliotli.dev/component/liquid-metal-logo"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Metal Logo

# Liquid Metal Logo

[View on Framer](https://framer.com/marketplace/components/liquid-metal-logo/?via=elliot-li)

![Liquid Metal Logo preview image 1](https://framer.elliotli.dev/og/component/liquid-metal-logo/0ebde1fcedabd4ef/1600x1200.jpg)

## Summary

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

## Description

Made possible thanks to [paper.design](https://paper.design) and their [shaders library](https://github.com/paper-design/shaders).

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 [How rankings work →](/terms#rankings)

-   All · #556

## Details

- **Author**: Fred Moon
- **Published**: 2025-08-21
- **Updated**: 2025-08-22
- **Added**: 2025-08-15
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows