BadtzUIBeta
Docs
Pixel Distorsion Shader

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

pnpm dlx shadcn@latest add to-setup

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>

Note
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.
In the next update, I will pass most of the uniforms as props to allow for advanced customization.

Props

pixel-distorsion-scene props.

PropTypeDefaultDescription
imageSrcstring(required)The source URL of the image used in the shader.
altstringundefinedAlternative text for the image (used when the fallback <img> is displayed on mobile).
gridnumber20The resolution of the distortion grid. Higher values result in finer distortions.
mousenumber0.25The influence of the mouse on the distortion effect.
strengthnumber0.2The intensity of the distortion effect applied to the image.

💡 Tip
You can increase the grid and strength 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!

  • Akella's repo
  • The Book Of Shaders

  • ThreeJS Journey
  • Pulse ShaderMouse Wave Shader