---
title: "WebGL Depth Scan 03 — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hasan Wali · Effects. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/webgl-depth-scan-03"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/WebGL Depth Scan 03

# WebGL Depth Scan 03

Edge Scan Effect

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

![WebGL Depth Scan 03 preview image 1](https://framer.elliotli.dev/og/component/webgl-depth-scan-03/460c1e4111c30c90/1600x1200.jpg)

## Summary

Edge Scan Effect

## Description

**About this Component**

Create a clean neon edge scan effect using WebGL.

This component uses both a depth map and an edge map to generate a glowing scan that highlights the outlines of your image. The result is sharp, futuristic, and perfect for modern UI designs.

It also includes subtle mouse-based movement, adding depth and interaction without being overwhelming.

You can fully control the scan behavior, intensity, brightness, and neon tint to match your design style.

**Perfect For:**

Futuristic UI designsCyberpunk-style visualsPortfolio highlightsProduct showcasesInteractive backgrounds

**Key Features:**

Fully responsive across all screen sizesWebGL-powered neon edge scanUses both depth map and edge mapClean glowing outline effectSubtle mouse interactionCustomizable scan speed and softnessFull control over neon color (RGB)Adjustable brightness, opacity, and intensityDepth and edge invert options

**How to Use:**

Upload your main imageUpload a matching depth mapUpload an edge mapAdjust scan and color 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](mailto:reem@ireem.net)

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

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

-   All · #8519

## Details

- **Author**: Hasan Wali
- **Price**: $10.00
- **Published**: 2026-05-14
- **Updated**: 2026-09-03
- **Added**: 2026-04-29
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows