Pixel Distorsion Shader
An interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect for creating engaging and immersive visual effects on images.
Installation
Usage
import dynamic from "next/dynamic";
const PixelDistorsionScene = dynamic(
() => import("@/components/ui/pixel-distorsion-scene"),
{
ssr: false,
loading: () => (
<div className="h-full w-full bg-zinc-100 dark:bg-neutral-950">
{/* Skeleton loader */}
</div>
),
},
);
<div className="w-full max-w-[620px] h-auto">
<PixelDistorsionScene imageSrc="/images/shaders/medusa-image.webp" />
</div>
You can use a placeholder while loading, to avoid potential issues, consider using dynamic imports.
The component is designed to automatically adjust based on the parent's width while maintaining the original image's aspect ratio. The height is always calculated dynamically.
By default, the shader is automatically disabled on mobile and replaced with a static image.
Props
pixel-distorsion-scene props.
Prop | Type | Default | Description |
---|---|---|---|
imageSrc | string | (required) | The source URL of the image used in the shader. |
alt | string | undefined | Alternative text for the image (used when the fallback <img> is displayed on mobile). |
grid | number | 20 | The resolution of the distortion grid. Higher values result in finer distortions. |
mouse | number | 0.25 | The influence of the mouse on the distortion effect. |
strength | number | 0.2 | The intensity of the distortion effect applied to the image. |
You can increase the
grid
andstrength
props significantly to achieve a liquid-like effect. (Be mindful of performance—setting these values too high may impact rendering speed.)
Resources
Here are some of the key resources that helped me learn about shaders. If you're interested in exploring shaders further, these are great places to start!
Version Requirements
If you are using Next.js 14 or earlier, install these packages instead: @react-three/[email protected] @react-three/[email protected] gsap
Changelog
2025-04-27
- Fixed a critical THREE.WebGLRenderer: Context Lost error occurring on Next.js 15 projects.
- Improved WebGL context handling for better stability across modern browsers.
- Adjusted recommended package versions to ensure compatibility with Next.js 14.
- Updated installation instructions to clearly differentiate requirements between Next.js 14 and 15 environments.