Square WebGL Lens

About this Component

Haytham Square Lens is an interactive WebGL image effect that follows your pointer with a responsive square lens. Use two images and reveal the primary image inside the lens while the secondary image remains outside, creating a smooth, dimensional contrast.

The lens includes CC-style distortion, RGB channel separation, animated wave movement, random distortion, and eased pointer tracking. Every part of the effect is adjustable directly from Framer, from subtle image interactions to bold experimental visuals.

Perfect For: • Creative portfolios • Photography & fashion websites • Agency and studio projects • Interactive hero sections • Product showcases • Experimental landing pages

Key Features: • Two-image WebGL composition • Mouse-following square lens • Responsive at any frame size • Adjustable lens size & distortion • Independent RGB channel shifting • Wave frequency, strength & speed controls • Random distortion controls • Adjustable pointer smoothing • Responsive image uploads • Render quality control • Component-scoped pointer tracking • Automatic off-screen rendering pause • Static Framer Canvas fallback • No external packages

How It Works

Upload an Inside Image and an Outside Image, then place the component at any size. The outside image fills the frame while the square lens follows the pointer and reveals the inside image with distortion and RGB separation. Fine-tune the effect using the included property controls.

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.