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
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.
