Animated Blurry Testimonials
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
Installation
Understanding the Component
The AnimatedBlurTestimonials component displays a list of testimonials with animated transitions. Here’s how it works:
Automatic Cycling
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.
Animation Effects
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:
- initial - Testimonial starts offset and blurred.
- animate - Testimonial transitions into view (zero offset and blur, full opacity).
- exit - Testimonial exits with an offset in the opposite direction, blurring out.
Responsive Height
A ResizeObserver tracks the height of the testimonial content, ensuring the container resizes dynamically to fit the content.
Props
| 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. |