TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

3 pointsby getToTheChopin2 months ago
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.<p>Click the dice button underneath the canvas (or use the [r] key) to randomize all input parameters, this can give interesting colour &#x2F; movement styles. You can then open the controls at the top right of the screen to fine-tune the parameters one-by-one.<p>This program works best with input logo images in png format, with a transparent background (or with a solid white &#x2F; 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.<p>How this works: this tool uses WebGL shaders &#x2F; javascript to create a real-time animation that moves around the edges of the logo, creating a liquid-metal aesthetic.<p>You can export your creation as an image or video afterwards.<p>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.<p>Github repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;collidingScopes&#x2F;liquid-logo">https:&#x2F;&#x2F;github.com&#x2F;collidingScopes&#x2F;liquid-logo</a><p>Credit to XorDev on Twitter, whose shader work served as my starting point for the animation style: <a href="https:&#x2F;&#x2F;x.com&#x2F;XorDev&#x2F;status&#x2F;1894123951401378051" rel="nofollow">https:&#x2F;&#x2F;x.com&#x2F;XorDev&#x2F;status&#x2F;1894123951401378051</a>

no comments

no comments