from Hacker News

Show HN: Turning logos into liquid metal animations (real-time open source tool)

by getToTheChopin on 3/4/25, 8:30 PM with 0 comments

I built a free open source tool which turns logos into a liquid metal animations -- in real-time in the browser. Upload a photo, then use the controls to adjust the colors, speed, noise intensity, animation pattern, and more.

Click the dice button underneath the canvas (or use the [r] key) to randomize all input parameters, this can give interesting colour / movement styles. You can then open the controls at the top right of the screen to fine-tune the parameters one-by-one.

This program works best with input logo images in png format, with a transparent background (or with a solid white / black color background). Consider cropping your image or running a background removal before inputting into this tool -- this might help to pick out the key edges of your image.

How this works: this tool uses WebGL shaders / javascript to create a real-time animation that moves around the edges of the logo, creating a liquid-metal aesthetic.

You can export your creation as an image or video afterwards.

This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.

Github repo: https://github.com/collidingScopes/liquid-logo

Credit to XorDev on Twitter, whose shader work served as my starting point for the animation style: https://x.com/XorDev/status/1894123951401378051