- Notifications
You must be signed in to change notification settings - Fork0
Transform your logos into mesmerizing liquid metal animations. three.JS / WebGL
License
NotificationsYou must be signed in to change notification settings
Saganaki22/MetalFlow
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
A ported fork ofpaper-design/liquid-logo with enhanced features and optimized layout.
Transform your logos into mesmerizing liquid metal animations! This WebGL-powered tool creates stunning metallic effects that respond to your control. Perfect for creating eye-catching animations for presentations, websites, or just for fun.
Desktop View | Mobile View |
---|---|
![]() | ![]() |
✨ Features
- Liquid Metal Shader: Real-time WebGL shader for that perfect chrome-like finish
- Edge Detection: Smart edge-based feathering that follows your logo's contours
- Dynamic Patterns: Customizable metallic patterns that flow and shift
- Responsive Design: Optimized layouts for both desktop and mobile devices
- Refraction: Adjust the metallic sheen and light distortion
- Edge Feathering: Fine-tune the edge softness (0-1)
- Pattern Blur: Control the smoothness of metallic patterns
- Liquify Effect: Modify the flow and movement intensity
- Animation Speed: Set your perfect tempo
- Pattern Scale: Adjust the metallic pattern size
- Optimized Layout:
- Desktop: Controls panel with 400px width and centered upload button
- Mobile: Compact layout with top-positioned upload button
- Equal padding and spacing across all screen sizes
- Background Options: Multiple presets including metal, white, light grey, black, and custom colors
- Sample Logos: Quick access to pre-loaded logos (Punisher, DC Shoes, GitHub, Linux, Hugging Face)
- Drag & Drop: Easy file uploads on desktop with visual feedback
- Touch Support: Native file picking on mobile devices
- 24fps for smooth animation
- mp4 -> Webm fallback chain
- Custom -25 second duration
- Red pulsing glow effect during generation
- Local worker for better performance
- PNG Export: Instant high-quality static captures
- Visual Feedback: Processing indicators for all operations
- Clone this repository
- Run
npm install
to get dependencies - Start the server with
node server.js
- Visit
http://localhost:3003
in your browser - Upload your logo or choose a sample to begin!
🎯 Pro Tips
- Perfect Loops: Keep animation duration at 5 seconds for smooth loops
- Edge Control: Start with edge value at 0.4 for balanced results
- Mobile Upload: Use the upload button for the best mobile experience
- Pattern Mixing: Combine pattern scale and blur for unique effects
- Quick Exports: Use PNG for instant captures, mp4 / webm for animations
🛠️ Technical Stack
- WebGL: Core rendering engine
- Three.js: 3D graphics library
- Custom Shaders: GLSL for metallic effects
- Responsive Design: Optimized for all screen sizes
🎨 Default Settings
Optimal starting parameters:
{refraction:0.015,// Metallic sheen (0 - 0.03)edge:0,// Edge softness (0 - 1)patternBlur:0.005,// Pattern smoothness (0 - 0.02)liquid:0.07,// Flow intensity (0 - 0.2)speed:0.3,// Animation speed (0 - 0.5)patternScale:2// Pattern size (0.5 - 5)}
c22e2d6d-ea00-47f5-ac80-22e00603c8ab.webm
MIT License - Feel free to use in your projects!
Made with ⚡ bySaganaki22
About
Transform your logos into mesmerizing liquid metal animations. three.JS / WebGL