A sleek and interactive before/after image comparison component that allows users to dynamically reveal differences between two images. Perfect for showcasing transformations, design iterations, or any visual comparisons in your Framer projects.

✨ Key Features

• Interactive Comparison: Choose between hover or drag interaction modes
• Smooth Animations: Fluid transitions with precise image revealing
• Customizable Handle: Beautiful gradient glow effects with configurable colors
• Autoplay Mode: Optional automatic sliding animation for hands-free demonstrations
• Responsive Design: Adapts seamlessly to any container size
• Touch Support: Full mobile device compatibility

💡 Pro Tips

1. Use similar image compositions for the most effective comparisons
2. Enable autoplay for engaging landing page demonstrations
3. Customize the handle colors to match your brand identity
4. Use the hover mode for quick comparisons, drag mode for precise control
5. Adjust the initial slider percentage to highlight specific areas of comparison
6. Consider using WebP images for optimal performance

🎨 Styling Options

• Handle Design: Customize colors for the handle bar, dots, and line
• Glow Effects: Two-color gradient glow customization
• Border Radius: Adjustable card corners for different visual styles
• Interaction Mode: Toggle between hover and drag modes
• Autoplay Settings: Configurable duration and behavior

This component provides a professional way to showcase before/after comparisons in your Framer projects, with extensive customization options and smooth interactions that work across all devices. Perfect for portfolios, product showcases, or any project requiring visual comparisons.