✨ Give us a star on GitHub Help us grow by starring the project and sharing your feedback.

Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Wavy Text

Animated text component that creates a wavy motion effect with each character moving up and down in sequence.

W

a

v

y

T

e

x

t

import { WavyText } from "@/registry/eldoraui/wavy-text"

export function WavyTextDemo() {
  return (
    <WavyText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Wavy Text"
    />
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/wavy-text

Usage

import { WavyText } from "@/components/eldoraui/wavy-text"

<WavyText text="Wavy Text" className="text-blue-600" />

Props

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to display with wavy animation
`className`	`string`	`""`	Additional CSS classes to apply to the element

Testimonial Slider Word Pull Up Text

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Trusted by 1,000+ developers