Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

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

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

og-mf

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.

👀 Preview

Desktop ViewMobile View
image_2025-02-25_01-21-03image

🌐Live Demo

✨ Features

🎨 Core Effects

  • 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

🎮 Interactive Controls

  • 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

📱 Smart UI/UX

  • 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

🎥 Export Options

  • 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

🚀 Getting Started

  1. Clone this repository
  2. Runnpm install to get dependencies
  3. Start the server withnode server.js
  4. Visithttp://localhost:3003 in your browser
  5. 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

📝 License

MIT License - Feel free to use in your projects!


Made with ⚡ bySaganaki22


[8]ページ先頭

©2009-2025 Movatter.jp