Components
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.
npx @21st-dev/cli add dhileepkumargm/wave-text-canvasLoading preview...
import React from 'react'
import WavesText from '@/components/ui/wave-text-canvas'
export default function DemoOne() {
return (
<div className="container">
<WavesText />
</div>
)
}