A React component that’s smooth and sweet, showing testimonials that can’t be beat. With blurry transitions, sleek and clear, it auto-cycles through each cheer. Click the avatars or tap those arrows, motion magic keeps it smooth and narrow.
Was suspicious of Daddy. Now my boss respects me, my ex is jealous, and strangers nod at me. Thanks, Daddy
The component uses an interval (set to a default delay of 8 seconds) to cycle through testimonials. Each cycle increases the testimonial index and resets the direction to forward.
It uses the Motion library to animate testimonial text. The animation includes a horizontal translation, a blur effect, and opacity changes. The ani configuration defines three animation states:
A ResizeObserver tracks the height of the testimonial content, ensuring the container resizes dynamically to fit the content.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | TestimonialInterface[] | none | Array containing testimonial details. |
| light | boolean | none | Optional; toggles between light/dark themes. |
| delayDuration | number | 8 | Time interval (in seconds) between auto rotations. |
| _duration | number | 0.4 | Duration of animation transitions. |
TestimonialInterface (exported)
| Prop | Type | Default | Description |
|---|---|---|---|
| message | React.ReactNode | none | Testimonial message content. |
| avatar | {src?: string; fallback?: string} | none | Avatar image URL or fallback text. |
AProps (exported)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | none | URL of the avatar image. |
| fallback | string | none | Text displayed if no image URL. |