Mouse Wave Shader

Installation

pnpm dlx shadcn@latest add https://badtz-ui.com/r/mouse-wave.json

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.

Credits

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!