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.
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. |
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an interactive 'Grid Distortion' aesthetic. Use this shader effect for an immersive experience where images warp and 'melt' based on cursor movement.
Best Practices
Follow React best practices by pairing this with high-contrast, bold imagery. Maintain consistent spacing within your design system by keeping the grid resolution balanced. Optimize for performance by managed the Three.js relaxation cycle.
Why This Component Matters
Interactive grid distortion creates a sense of digital 'Fluidity' and spatial power. This production-ready UI template helpsคุณ build an interface that feels responsive and high-end, adding a unique architectural signature to your brand imagery.
FAQ
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.
Related Components
404 Page
Interactive 404 error page featuring a cinematic canyon layout with multi-layered parallax cacti. Built with SVG and custom mouse-tracking logic for a deep 3D immersive feel.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.