Edge Distortion Gall

An infinite gallery. A new perspective.

Edge Distortion Gallery is an interactive WebGL image gallery that transforms ordinary image grids into an immersive visual experience.

Built with Three.js, it combines seamless infinite scrolling, smooth drag interactions, cinematic fisheye distortion, and RGB chromatic aberration. Images continuously flow across the canvas while the edges bend, stretch, and split into subtle color channels.

Designed for creative portfolios, visual storytelling, and experimental websites built in Framer.

Great For

• Creative portfolios and photography showcases

• Design studios and creative agencies

• Fashion and editorial websites

• Art direction and visual storytelling

• Experimental landing pages

• Interactive image collections

• Immersive website backgrounds

Preview: https://edgedistortiongallery.framer.website/

Infinite movement. Distorted edges. Endless exploration.

Features

• Infinite Image Grid — Seamlessly repeating images in every direction.

• WebGL Fisheye Distortion — Dynamic barrel distortion around the viewport edges.

• Chromatic Aberration — RGB color separation creates a cinematic optical effect.

• Interactive Dragging — Explore naturally using mouse, touch, or pen.

• Smooth Inertia — Momentum-based movement after releasing a drag.

• Automatic Drift — Subtle diagonal movement keeps the gallery alive.

• Rounded Image Cards — Clean, customizable corners.

• Responsive Layout — Automatically adjusts grid coverage to different screen sizes.

• Performance Controls — Adjustable texture resolution and device pixel ratio.

• Reduced-Motion Support — Respects system accessibility preferences.

Support

Need help, have feedback, or want to share what you've created?

• X (Twitter): @karimsaif0

• Email: karimsaif010@gmail.com