BadtzUIBeta
Docs
Mouse Wave Shader

Mouse Wave Shader

An interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect for immersive backgrounds.

Installation

pnpm dlx shadcn@latest add to-setup

Usage

import dynamic from "next/dynamic";
const MouseWaveScene = dynamic(
  () => import("@/components/ui/mouse-wave-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">
  <MouseWaveScene imageSrc="/images/shaders/forest-image.webp" />
</div>

Note
You can use a placeholder while loading
To avoid potential issues, consider using dynamic imports.
If you’d like, you can experiment with the Leva controls for fine-tuning.
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

mouse-wave-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).
marginFactornumber1.05Factor applied to the camera distance to ensure the shader is fully visible. Adjust this if parts of the shader are cut off.

Credits

  • The GLSL shader used in this component was created by @stegu

  • 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
  • Pixel DistorsionAnimated Card 1