DEV Community

Cover image for Interactive WebGL Image Gallery with Distortion Effect
jQueryScript
jQueryScript

Posted on

Interactive WebGL Image Gallery with Distortion Effect

WebGL Concave Gallery: a vanilla JavaScript class that renders an infinite, draggable image grid with a real-time concave distortion effect computed in GLSL shaders.

Key features:

  • Infinite scrollable grid with mouse, touch, and scroll wheel support
  • Live concave warp via a custom vertex shader (no CSS transforms)
  • Adjustable distortion strength and radius with keyboard shortcuts
  • Inertia-based panning with automatic momentum decay
  • Built-in fullscreen toggle

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)