The Edge-Scrub Reveal is built for editorial layouts that need to feel reactive and alive. While standard reveals simply "fade in," this engine uses a Simplex 2D Noise Solver to physically warp the image pixels based on the user's proximity to the component.

The secret lies in the Edge-Distance Math. The component calculates the distance from the viewport's top and bottom edges simultaneously. As an image enters the screen, it "melts" into view; as it leaves, it "warps" away. This creates a perpetual cycle of motion that rewards the user for exploring the page in both directions.

✨ Key Highlights

• Bi-Directional Logic: The reveal isn't a one-way trigger. The distortion resolves as the image reaches the center of the screen and re-warps as it exits either the top or bottom of the viewport.

• Simplex Liquid Shaders: Utilizing a custom GLSL fragment shader, the "Distortion" effect mimics organic fluid. Lower the Noise Scale for large, wavy oceanic movements, or crank it up for fine, high-frequency liquid ripples.

• Grayscale-to-Color Resolve: Includes a built-in saturation engine. The image starts in high-contrast B&W while distorted and gradually bleeds into full vibrant color as the pixels snap into their final coordinates.

• Smooth Lerp Tracking: Integrated with a Linear Interpolation (Lerp) system. This decouples the animation from the "jerkiness" of a mouse wheel, providing a buttery-smooth, delayed reaction that feels expensive and weighted.

• GPU-Optimized Object-Fit: The engine calculates aspect ratios internally ($uImageResolution / uResolution$). This ensures your images always "Cover" the container perfectly without stretching, regardless of the device's screen size.

• Zero-Impact Performance: Built with an Intersection Observer, the WebGL context only executes when the component is visible, keeping your site’s frame rate at a locked 60FPS.

⚙️ Professional Control Suite

• Distortion Strength: Control the "Violence" of the initial warp. From a subtle shimmer to a complete molecular breakdown.

• Reveal Distance: Define exactly how much scroll travel is required to fully resolve the image (e.g., 0.35 means the image is fully clear once it has traveled through 35% of the viewport).

• Smoothing (Lerp Speed): Fine-tune the "Buttery" feel. Lower values create a high-inertia, cinematic lag; higher values lock the distortion directly to the user's scroll position.