About this Component
Add a clean WebGL scanning effect to your images using a depth map. This component creates a moving scan animation across your image while adding subtle mouse-based movement for a more interactive feel. You can adjust the scan speed, pattern density, intensity, brightness, opacity, image fit, and corner radius directly inside Framer.
It works with a main image and a matching grayscale depth map. The better the depth map, the better the final result.
Perfect For:
Creative hero sectionsPortfolio visualsProduct highlightsInteractive backgroundsExperimental UI designs
Key Features:
Fully responsive across screen sizesWebGL-powered scan animationDepth map based movementSubtle mouse interactionCover and contain image fit modesAdjustable scan speed and progressCustomizable cross patternBrightness, opacity, and intensity controlsDepth invert option
How to Use:
Upload your main imageUpload a matching grayscale depth mapChoose Cover or ContainAdjust the scan and visual settings
Important Note
This component requires a matching grayscale depth map for the best result.
This component requires both a Depth Map and an Edge Map generated from your original image for the effect to work correctly.
These maps are not generated inside the component itself and must be created using a third-party depth/edge map generator before use.
You can create them using free tools and AI depth map generators available online.
Once generated, simply upload the original image along with its matching maps into the component settings.
Questions? Reach out at hasanwali6890@gmail.com
Refund Policy
All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.
Hasan Wali
