by getToTheChopin on 3/4/25, 8:30 PM with 0 comments
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