Grid Distortion
a customizable webgl component for images and videos with adjustable grid size, distortion strength, and smooth hover response. lightweight, stylish, and seamless.
Make it with Workshop
Build your own component with AI
a customizable webgl component for images and videos with adjustable grid size, distortion strength, and smooth hover response. lightweight, stylish, and seamless.
Make it with Workshop
Build your own component with AI
Hover. Distort. Reveal. — A WebGL-powered grid effect that transforms ordinary images and videos into interactive, cinematic moments.
A lightweight, customizable hover effect designed for both images and videos. Built with WebGL, it introduces a subtle yet powerful grid-based distortion that reacts instantly to user interaction. Smooth, GPU-accelerated, and fully adjustable to match your brand’s aesthetic — perfect for designers who want their media to feel alive.
Why it works for your project
Instant immersion — bring static visuals to life with responsive grid distortion on hover.
Modern web aesthetic — perfect for portfolios, creative showcases, and landing pages.
Seamless integration — lightweight effect that blends smoothly with your existing design.
Feature Highlights:
Image & Video support — apply the same effect across multiple media types.
Grid customization — adjust grid density and distortion strength to your liking.
Hover interactivity — distortion responds dynamically to mouse position.
Smooth relaxation — fine-tune how quickly distortion resets after hover.
Performance-ready — GPU-accelerated WebGL ensures fluid motion at all times.
Framer controls — tweak properties like strength, grid size, and relaxation directly in the panel.
Refund Policy
Try it risk-free: 7-day money-back guarantee if you’re not fully satisfied.
Support
Need help or have questions? Reach out anytime at [your email/contact here].
Minimal in setup, maximal in impact — this WebGL Grid Distortion effect gives your media an immersive edge while keeping your workflow clean and simple.
