Saganaki22/MetalFlow

• 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, , 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

• 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

• WebGL: Core rendering engine
• Three.js: 3D graphics library
• Custom Shaders: GLSL for metallic effects
• Responsive Design: Optimized for all screen sizes

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)
}