Draw to Reveal for Framer

An interactive and fully customizable reveal effect for Framer. Whether you want a smooth drag effect, a hover-triggered reveal, or a soft fading transition, this component gives you the flexibility to create engaging interactions with ease.

Try it out – Demo

What Can You Do with Draw to Reveal?

Drag to Reveal – Click and drag to gradually uncover hidden content.
Hover to Reveal – Reveal content dynamically as the cursor moves over it.
Fade Reveal – A smooth fading effect for a more subtle transition.

Customize everything – Adjust stroke size, smoothness, fade intensity, and more for a personalized experience.

Reveal Effects

Drag to Reveal

The classic method for uncovering hidden images or videos. Click and drag to reveal content in a smooth and natural way.

Hover to Reveal

Content is revealed as the cursor moves over it, creating an interactive hover effect. Perfect for engaging micro-interactions.

Fade Reveal

A softer and more gradual reveal where strokes fade into the content, allowing for elegant transitions.

Full Customization with Property ControlsGeneral Settings

• Reveal Type – Choose between Drag to Reveal, Hover to Reveal, or Fade Reveal.

• Stroke Size – Adjust how thick the reveal strokes are.

• Smoothness – Control how soft or defined the stroke edges appear.

Fade Reveal Controls

• Fade Trigger – Choose whether the fade reveal activates on drag or hover.

• Fade Intensity – Adjust how strong or subtle the fade effect is.

Image & Video Controls

• Content Type – Select whether to reveal an image or a video.

• Object Fit – Set the image/video fit to Cover, Contain, or Fill.

• Opacity Control – Adjust the transparency of the revealed content.

A Personal Note

Thanks for using Draw to Reveal! I hope this component helps enhance your designs with dynamic and interactive effects. If you have any suggestions or run into any issues, feel free to reach out.

📧 Email me at: [email protected]

Check out more of my components – harshworks.framer.website