WaveTextCanvas

A React component that renders bold, “WAVES” lettering as a flowing wave effect on HTML5 canvas. It uses a mask to detect text pixels and draws vertical scanlines that oscillate inside the letters with a larger amplitude and thicker stroke, while lines outside the text ripple subtly in a contrasting color. Perfect for hero titles, interactive headings, or generative text animations.

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

import WavesText from "@/components/ui/wave-text-canvas";

const settings = {
  text: "21st.dev",
  fontSize: 300,
  amplitude: 30,
  frequency: 0.03,
  speed: 0.003,
  spacingX: 6,
  outsideColor: "rgba(0, 255, 255, 0.3)",
  insideColor: "rgba(255, 0, 255, 1)",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center overflow-hidden">
      <WavesText {...s} />
    </div>
  );
}