---
title: "Depth Shadow Reveal — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Hasan Wali · Sections. Interactive depth-based relighting"
canonical: "https://framer.elliotli.dev/component/depth-shadow-reveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Depth Shadow Reveal

# Depth Shadow Reveal

Interactive depth-based relighting

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

![Depth Shadow Reveal preview image 1](https://framer.elliotli.dev/og/component/depth-shadow-reveal/7d18d519b04d1ca9/1600x1200.jpg)

## Summary

Interactive depth-based relighting

## Description

**About this Component** Haytham Depth Light transforms a flat image into an interactive, depth-aware lighting experience using a matching grayscale depth map. Move your cursor across the image to dynamically relight the surface, revealing depth, texture, highlights, and realistic self-shadowing in real time.

**Perfect For** Hero sections, portfolios, product showcases, editorial layouts, photography, artwork, immersive landing pages, and interactive visual experiences.

**Key Features** • Upload your own image and matching depth map • Real-time cursor-following light • Depth-based displacement and surface normals • Fine surface detail from the source image • Soft, depth-aware self-shadowing • Light color, brightness, radius, elevation, and ambient controls • Adjustable depth smoothing and threshold • Pointer smoothing controls • Responsive cover-style image fitting • Optimized rendering and asset caching • Automatically pauses when offscreen • Static Framer Canvas/export fallback • Fully scoped interactions with no global page or scroll manipulation

**How It Works** Upload your source image, then add a matching grayscale depth map where lighter areas represent surfaces closer to the viewer and darker areas represent areas farther away. Customize the lighting and surface settings, then move your cursor across the component to relight the image.

**Questions?** Reach out at [hasanwali6890@gmail.com](mailto:hasanwali6890@gmail.com)

**Refund Policy** All sales are final. Refunds are only available for critical technical failures that prevent the component from functioning as described and cannot be resolved through support. Refunds are not provided for buyer’s remorse, aesthetic preferences, compatibility with custom modifications, or changes made after purchase. Any confirmed technical failure must be reported with supporting evidence within 14 days of purchase.

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

-   All · #9591

## Details

- **Author**: Hasan Wali
- **Price**: $9.00
- **Published**: 2026-08-25
- **Updated**: 2026-09-03
- **Added**: 2026-08-25
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes