Wavy Shader Animation

A full-screen React component that uses three.js and a custom GLSL fragment shader to render a dynamic, metallic, wavy surface animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wavy Shader Animation to your project and fits it to your theme.

import WavyShader from "@/components/ui/wavy-shader-animation";

const settings = { speed: 0.01 };

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <WavyShader speed={s.speed} />
    </div>
  );
}