A free, open-source tool for creating animated logos using a liquid metal aesthetic. Transform static logos and images into flowing animations.
Try it in real-time in the browser: Liquid Logo Tool
- Upload your own images or use one of the demo logos
- Real-time customization of key parameters
- Export as PNG or MP4 video
- Fully client-side processing - your images never leave your device
This tool leverages WebGL shaders to create real-time animations that interact with the edges of your logo. It creates flowing patterns that follow the contours of your image, giving a liquid metal aesthetic.
The animation is powered by a fragment shader that:
- Detects the edges of your logo
- Generates a vector field around these edges
- Applies fluid dynamics and noise to create the flowing effect
- Renders with a metallic sheen and customizable color palette
- WebGL for hardware-accelerated graphics rendering
- GLSL shaders for the liquid metal animation effect
- Simplex noise for organic movement patterns
- JavaScript for UI and application logic
- HTML5 Canvas for drawing and video export
- MP4 Muxer for video encoding
- dat.GUI for the control interface
- Upload an image of your logo (works best with clean, high-contrast images)
- Use the Randomize button (🎲) to generate interesting variations
- Fine-tune the animation using the control panel at the top-right of the page
- Export your logo animation as an image or video
- [Space]: Pause/play the animation
- [R]: Randomize all inputs
- [S]: Save a screenshot
- [V]: Start/stop video recording
- Use images with clean edges and minimal background noise
- Experiment with presets to find the best starting point for your logo
-
Clone the repository:
git clone https://github.com/collidingScopes/liquid-logo.git -
Navigate to the project directory:
cd liquid-logo -
Run a local server (you can use Python's built-in server):
# Python 3 python -m http.server # Python 2 python -m SimpleHTTPServer -
Open your browser and navigate to
http://localhost:8000
This project is licensed under the MIT License - feel free to use it for personal or commercial purposes.
Check out my other free, open-source creative tools:
- Particular Drift: Turn photos into flowing particle animations
- Video-to-ASCII: Convert videos into ASCII pixel art
- Shape Shimmer: Transform photos into funky wave animations
- Colliding Scopes: Create kaleidoscope animations from photos
- Force-Field Animation: Generate particle animations from photos
- Manual Brick Breaker: Play brick breaker by waving your hands around
- Enormous thanks to XorDev on Twitter, whose "Plasma" shader work served as a starting point for this tool.
Feel free to reach out for questions, suggestions, or just to share what you've created!
If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!
