Description
Liquid Logo is a free, open source browser tool that turns an uploaded logo into a flowing liquid metal animation. A fragment shader detects the edges of the image, builds a vector field from them, and applies simplex noise together with fluid dynamics to create a flowing motion along the contour, rendered with a metallic sheen and a freely adjustable color palette. A dice button randomizes all parameters at once, and a control panel in the top right then allows fine tuning of color, speed, noise intensity, and animation pattern individually. Several built-in presets serve as starting points to experiment with, to quickly find a suitable starting variation for the logo.
The tool is not a component to integrate into a codebase but a standalone generator: it runs either through the hosted demo in the browser or locally from the cloned repository through a simple HTTP server, because WebGL does not work reliably over the file:// protocol. It works best with PNG images that have clean edges and little background noise, ideally with a transparent or solid color background; cropping the image or removing the background beforehand further improves edge detection. The computation is resource intensive and can lag on weaker hardware, with many open browser tabs, or on low battery, and the built-in video export does not work reliably in every browser environment, for which the provider itself names an external screen recording tool as a fallback.
Compared to general 3D or shader libraries for developers, Liquid Logo is deliberately narrow in scope: it delivers no component to integrate, only finished image or video files for a single subject, the logo itself. Anyone who wants a permanent, interactive animation built directly into the code of a website or app needs a different solution. Anyone who instead wants to generate a one-off brand asset for social media, an intro video, or a landing page gets a ready-to-use result in a few clicks, without working with shaders directly.
