Ink Mask Reveal

Ink Mask Reveal is an interactive reveal component that overlays your content with a solid color or custom image, allowing users to gradually "erase" the mask using a realistic…

Ink Mask Reveal is an interactive reveal component that overlays your content with a solid color or custom image, allowing users to gradually "erase" the mask using a realistic ink brush effect. It can be controlled by mouse movement, dragging, or taps on touch devices ; every interaction feels fluid, responsive, and satisfying. Perfect for hero sections, portfolio reveals, product showcases, image galleries, landing pages, creative websites, and interactive storytelling . Inspired by Aayush Duhan's work. ⚡ Features Organic ink brush reveal animation Reveal content using hover, drag, or tap Supports both solid color and image-based masks Natural brush edges with adjustable wobble Configurable fade behavior for disappearing brush marks Touch-friendly tap-to-reveal support Optional cursor hiding for a seamless illusion Fully responsive and performance optimized Ideal for images, videos, text, and creative layouts 🖌️ Customisations Mask Settings Mask Color Optional Mask Image Brush Controls Brush Size Brush Spacing Maximum Visible Marks Animation Fade Time Fade Curve (Center, Mid, Edge) Organic Edge Smoothness Edge Wobble Amount Brush Start Radius Radius Variation Brush Softness Interaction Enable or Disable Tap-to-Reveal Show or Hide Cursor 🚀 Usage Place Ink Mask Reveal above the content you want to conceal. Choose a Mask Color or upload a custom Mask Image . Adjust the properties to achieve your preferred reveal style. Preview and watch your content come to life through realistic ink-based interactions. After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it.

Hover ink reveal effect