TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

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

3 点作者 getToTheChopin2 个月前
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>

暂无评论

暂无评论