Draggable Reveal
Draggable Reveal displays an image with blur and dark mask effects that are progressively removed as the user drags, revealing the image in its clear state.
About this Component
Draggable Reveal is an interactive image component that reveals a clear portion of an image through a movable focus container. The image remains blurred and darkened by default, while only the area inside the draggable container appears sharp.
As the container moves, the clear area follows it and previously revealed regions immediately return to their blurred state. This creates a controlled, cursor-like interaction where focus is always temporary and tied to the current position.
Features
Movable focus container
Temporary image reveal (non-persistent)
Blur and dark mask outside the focus area
Smooth drag interaction
Fully responsive
No-code customization
Ideal for
Highlighting image details
Guided visual exploration
Interactive hero sections
Minimal visual interactions
