Blur Toggle Image is an advanced and fully customizable Framer component that lets you beautifully reveal or hide any image using elegant blur transitions and interactive controls.Perfect for product reveals, premium content teasers, or portfolio showcases — it combines smooth motion, layered overlays, and animated icon feedback to create a polished, professional experience.
🚀 Features
🖼️ Dual Source Support — Use either a Framer image upload or a direct image URL
🌫️ Dynamic Blur Effect — Control blur amount and toggle visibility with one click
🎨 Stylish Overlays — Add gradient and color overlays for extra visual depth
🕶️ Icon Customization — Adjust color, size, hover glow, shake, and pulse animations
🕒 Auto Restore Timer — Automatically re-blur after a set delay
⚡ Smooth Transitions — Customizable transition speed for perfect motion timing
🧊 Rounded Corners — Add a soft border radius for a clean design finish
🪄 Motion-Powered Interactions — Built with Framer Motion for fluid UI dynamics
💡 Use Cases
Before / After image comparisons
Hidden content reveals
Password-protected content previews
Creative portfolio thumbnails
Premium or teaser image blocks
🔧 Properties
Image / Image URL: Use local upload or external image source
Start Blurred: Choose whether the image starts blurred
Blur Amount: Adjust blur intensity
Border Radius: Round the image edges
Overlay Colors: Add color + gradient overlays
Icon Settings: Customize color, size, hover glow, shake & pulse
Transition Speed: Control transition timing
Auto Restore Time:Automatically blur again after N seconds
🧩 Why Designers Love It
This component adds motion and emotion to static images — no code, just creative control.It’s the perfect mix of UX polish and storytelling, helping users focus on what matters most: the reveal.
Cem Atahan
