Wave Flow
Dark gradient edtech testimonials with animated SVG wave streams and floating avatars.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | #818cf8 | Wave stroke, heading accent, and avatar ring color (hex, rgb, or hsl). |
| backgroundColor | string | #0f0c29 | Gradient start color (hex, rgb, or hsl). |
When to Use
Perfect for edtech platforms, SaaS products, and Uilora pages that want a high-energy testimonial section that communicates scale and momentum. The flowing wave streams visualize the network effect of thousands of users.
Best Practices
Keep the background dark — the wave and avatar effects lose impact on light backgrounds. The 3-column card grid works best with quotes under 40 words to prevent uneven card heights.
Why This Component Matters
Wave streams suggest connection and flow, not static content. When testimonials are embedded in a living visual system, readers feel they are joining something in motion — not reading marketing copy.
FAQ
QHow do the avatars float?
Each avatar is a motion.div with animate={{ y: [0, -8, 0] }} on an infinite loop, staggered by index * 0.35s delay so they ripple asynchronously along the wave.
QCan I add more testimonial cards?
The TESTIMONIALS array is baked as a module constant. Add items to the array — the grid auto-expands. For more than 3, switch the grid to grid-cols-2 for better readability.
QWhat is the arrow button in the middle card?
A navigation affordance for the active/featured testimonial. Wire it to a modal or expanded view in your implementation.