Smudge

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

Description

Smudge creates an interactive canvas where users can distort images using a smudge effect. The component works by manipulating image pixels in real-time as users interact with it. The effect creates a liquid-like distortion that follows the cursor or touch input, similar to smudge tools in photo editing software.

Use Cases

1. Interactive Galleries - Add playful interaction to image displays

2. Creative Portfolios - Showcase photography with artistic manipulation

3. Product Exploration - Create engaging product image interactions

4. Artistic Websites - Add unique visual effects to image content

5. Educational Tools - Demonstrate image manipulation concepts

Customizations

• Image Source - Any image to apply the smudge effect to

• Interaction Mode - Choose between hover or drag-based interaction

• Smudge Strength - Adjust the intensity of the distortion effect

• Smudge Size - Control the radius of the affected area

• Responsive Design - Adapts to container dimensions