Create an engaging scratch-to-reveal effect that uncovers one image beneath another using the cursor. As visitors move their mouse across the component, a soft-edged mask erases the top image in real time, revealing the image underneath with smooth, natural strokes.
Built for Framer, the component is fully customizable with responsive images, adjustable brush size, soft-edge controls, image fit options, border radius, overlay tints, and aspect ratio settings. The overlay automatically resets when the component leaves the viewport, making it perfect for repeated interactions as users scroll through your site.
Interactive cursor-based image reveal effect
Smooth continuous brush strokes with adjustable follow smoothing
Customizable mask size and soft-edge feathering
Separate base and reveal images
Independent color tint overlays for both images
Cover, Contain, and Fill image fit modes
Optional fixed aspect ratio support
Adjustable border radius
Automatic reset when the component leaves the viewport
Choice of Spring or Tween reset animations with customizable settings
Retina-ready canvas rendering for crisp visuals
Optimized for Framer with responsive image support
Portfolio showcases
Before & after comparisons
Product reveals
Creative landing pages
Photography websites
Agency portfolios
Interactive storytelling
Marketing campaigns
Simply drop the component onto your canvas, add two images, customize the brush and styling, and create an interactive reveal experience in seconds—no code required.
Create an engaging scratch-to-reveal effect that uncovers one image beneath another using the cursor. As visitors move their mouse across the component, a soft-edged mask erases the top image in real time, revealing the image underneath with smooth, natural strokes.
Built for Framer, the component is fully customizable with responsive images, adjustable brush size, soft-edge controls, image fit options, border radius, overlay tints, and aspect ratio settings. The overlay automatically resets when the component leaves the viewport, making it perfect for repeated interactions as users scroll through your site.
Interactive cursor-based image reveal effect
Smooth continuous brush strokes with adjustable follow smoothing
Customizable mask size and soft-edge feathering
Separate base and reveal images
Independent color tint overlays for both images
Cover, Contain, and Fill image fit modes
Optional fixed aspect ratio support
Adjustable border radius
Automatic reset when the component leaves the viewport
Choice of Spring or Tween reset animations with customizable settings
Retina-ready canvas rendering for crisp visuals
Optimized for Framer with responsive image support
Portfolio showcases
Before & after comparisons
Product reveals
Creative landing pages
Photography websites
Agency portfolios
Interactive storytelling
Marketing campaigns
Simply drop the component onto your canvas, add two images, customize the brush and styling, and create an interactive reveal experience in seconds—no code required.
Anugrah Babuji
