Flag Wave

Characters animate in wave motion creating a flag-like undulation.

Main Features of Flag Wave

How to Use Flag Wave in Next.js

Installation Guide for Flag Wave

Props

Customize the component with these props

PropertyTypeDefaultDescription
text
stringUNDULATIONText to display
backgroundColor
stringbg-zinc-950Background color of the component
textColor
stringtext-blue-400Color of the text
textSize
stringtext-8xlSize of the text
waveAmplitude
number20Amplitude of the wave motion
animationDuration
number1.5Animation duration in seconds
delayMultiplier
number0.1Delay multiplier per character
className
stringAdditional CSS classes

When to Use

Excellent for maritime-themed sites, travel blogs, and Next.js applications that want to emphasize flow and movement. Use this React component for titles that need an organic, rhythmic animation as if blowing in the wind.

Best Practices

Follow React best practices by setting the `waveAmplitude` to a subtle value (e.g., 10-20px) to maintain readability. Maintain scalable component architecture by using the `delayMultiplier` to create a smooth, continuous wave effect across the entire word. Optimize for performance by using simple CSS transforms for the character movement.

Why This Component Matters in Modern UI Development

Fluid motion and wave physics are difficult to implement manually. This production-ready component provides a robust framework for complex temporal offsets, adding visual interest and semantic authority to your real-world application architecture.

Frequently Asked Questions

QCan I use it for multiple lines of text?

Yes, but for the best effect, it's recommended to apply it per-line to maintain the individual character wave offsets.

QIs the wave speed adjustable?

The `animationDuration` prop allows you to control exactly how fast the undulation is, from a slow breeze to a fast flutter.

QDoes it work with special characters?

Absolutely! The wave effect treats every character independently, including spaces and symbols.

Flag Wave - React Text Animation & Reveal | Uilora