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
| Property | Type | Default | Description |
|---|---|---|---|
text | string | UNDULATION | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-blue-400 | Color of the text |
textSize | string | text-8xl | Size of the text |
waveAmplitude | number | 20 | Amplitude of the wave motion |
animationDuration | number | 1.5 | Animation duration in seconds |
delayMultiplier | number | 0.1 | Delay multiplier per character |
className | string | Additional CSS classes |
Related Components
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.
