Draggable Reveal — Interactive image reveal on drag

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