Scratch Reveal is an interactive Framer component that lets visitors uncover a second image and text layer by moving their cursor or finger across the screen.

On mobile, users can activate scratch mode through a dedicated button, so normal page scrolling remains smooth and uninterrupted.

Key features:

• Interactive scratch-to-reveal effect

• Separate base and reveal images

• Separate headlines and descriptions for both layers

• Fully responsive desktop and mobile layouts

• Independent desktop and mobile spacing controls

• Custom text position, alignment, offsets, and maximum widths

• Adjustable scratch radius and softness

• Custom gradient overlays for both layers

• Configurable overlay color, opacity, angle, and position

• Optional Restart button

• Dedicated mobile Scratch and Done controls

• Flexible mobile button stack positioning

• Optional CTA on the base layer, reveal layer, or both

• Functional CTA links with optional new-tab behavior

• Custom CTA colors, typography, borders, radius, height, and padding

• Custom button colors, typography, blur, borders, and spacing

• Editable typography for headlines and paragraphs

• Easy image replacement directly from the Framer properties panel

The reveal layer, including its text and CTA, is part of the scratch interaction. This makes the transition feel natural and visually consistent instead of simply showing a separate overlay.

Scratch Reveal can be used for:

• Before and after transformations

• Architectural concepts and final renders

• Brand redesigns

• Product reveals

• Portfolio case studies

• Photography comparisons

• Visual storytelling

• Interactive hero sections

• Creative landing pages

Everything can be edited directly inside Framer without touching the code.

For the best experience, use images with the same dimensions and composition so both layers align correctly.

Need help setting it up or found an issue? Feel free to contact me at ancagabrielauiux@gmail.com.