Grid Distortion
WebGL-based grid distortion effect that warps images based on mouse interaction. Features Three.js shader materials, configurable grid size, and smooth relaxation effects.
Main Features of Grid Distortion
How to Use Grid Distortion in Next.js
Installation Guide for Grid Distortion
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
grid | number | 20 | Grid size for distortion effect. |
mouse | number | 0.3 | Mouse influence strength. |
strength | number | 0.15 | Distortion strength multiplier. |
relaxation | number | 0.1 | Relaxation speed for smooth transitions. |
imageSrc | string | undefined | Source URL of the image to distort. |
className | string | undefined | Additional CSS classes for custom styling. |
Related Components
404 Page
Animated 404 error page with a floating astronaut illustration. Features smooth motion animations, interactive hover effects, and a clean retro-futuristic design with framer-motion.
Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is 'Relaxation'?
The `relaxation` prop (0.1) controls how fast the grid 'recoils' back to its original state after the cursor ceases movement, ensuring smooth motion.
QCan I adjust the grid density?
Yes, the `grid` prop (default 20) allows you to control how 'chunky' or 'fluid' the distortion feels across the image surface.
QHow heavy is the shader?
The component uses localized vertex shaders that are optimized for high performance, ensuring 60FPS even with complex interactive warping on modern GPUs.