---
title: "SurfaceReveal — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Rashid Iqbal · Effects. Cursor Image reveal"
canonical: "https://framer.elliotli.dev/component/surfacereveal"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/SurfaceReveal

# SurfaceReveal

Cursor Image reveal

[View on Framer](https://framer.com/marketplace/components/surfacereveal/?via=elliot-li)

![SurfaceReveal preview image 1](https://framer.elliotli.dev/og/component/surfacereveal/26858636a7dce8f5/1600x1200.jpg)

## Summary

Cursor Image reveal

## Description

**Surface Reveal** is an interactive Framer Code Component that combines **normal-map lighting with an organic, persistent cursor reveal**. Move your cursor across the surface to reveal the underlying texture with dynamic lighting and a natural, evolving trail.

**Key Features:**

-   **Interactive Normal-Map Lighting:** Dynamic cursor-based lighting creates realistic depth and surface detail.
    
-   **Persistent Cursor Reveal:** Reveal the surface as you move, with a trail that naturally fades and evolves over time.
    
-   **Organic Brush Effect:** Noise, grain, distortion, and swirling effects create a natural, non-uniform reveal.
    
-   **Animated Intro Reveal:** Add a smooth, directional dissolve when the component enters the viewport.
    
-   **Custom Textures:** Use your own base texture, normal map, overlay, reveal mask, and cloud texture.
    
-   **Responsive:** Supports different aspect ratios and responsive image controls for desktop and mobile.
    
-   **Optimized Rendering:** Uses a shared WebGL renderer and cached textures to keep multiple instances efficient.
    
-   **Framer Controls:** Easily adjust brush size, reveal behavior, intro direction, and responsive settings directly from Framer.
    

**Use Cases**

-   **Product Showcases:** Reveal product surfaces, materials, and textures interactively.
    
-   **Portfolio Websites:** Add a tactile, premium interaction to project imagery.
    
-   **Hero Sections:** Create an atmospheric reveal effect that responds naturally to the cursor.
    
-   **Creative Galleries:** Let visitors explore images through interactive lighting and texture.
    
-   **Brand Websites:** Add subtle depth and motion without relying on heavy UI animations.
    

**Exceptions:**

1.  **Technical Defects:** The component is materially defective or does not function as described, and our support team is unable to resolve the issue.
    
2.  **Duplicate Purchase:** You accidentally purchased the exact same item twice.
    

For support or assistance, please contact us before requesting a refund. We’re committed to making sure the component works properly for your project.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8763

## Details

- **Author**: Rashid Iqbal
- **Price**: $6.00
- **Published**: 2026-09-03
- **Updated**: 2026-09-20
- **Added**: 2026-09-03
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo