Components
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.
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>
);
}