TextWave Text

Wave Text

Animates each letter in a wave pattern using Framer Motion.

Wave animation for your text!
Higher amplitude wave
Faster wave speed

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/wave-text.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/wave-text-demo.json"

How to use

Demo.tsx

"use client"

import WaveText from "@/components/smoothui/ui/WaveText"

export default function WaveTextDemo() {
  return (
    <div className="relative max-w-md space-y-6">
      <div>
        <WaveText>Wave animation for your text!</WaveText>
        <div>
          <WaveText amplitude={16} className="text-brand text-lg font-bold">
            Higher amplitude wave
          </WaveText>
        </div>
        <div>
          <WaveText speed={0.1} className="text-2xl font-semibold">
            Faster wave speed
          </WaveText>
        </div>
      </div>
    </div>
  )
}

Props

PropTypeDescription
childrenstringThe text to animate.
amplitude?numberHeight of the wave (default: 8).
speed?numberAnimation speed (default: 0.3).
className?stringOptional additional class names.
Typewriter Text
Animates text as if being typed out, letter by letter. Supports custom speed and looping.
Reveal Text
Reveals text with a fade or slide-in effect, optionally triggered on scroll into view.