"Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished."
Sarah Connor
Creative Director • Linear Systems
Overview
While infinite scrolling marquees are great for logos or sheer volume, high-impact quotes often require focus. The TestimonialCarousel puts a single review front and center.
It features AnimatePresence cross-fading, interactive pagination dots, star ratings, and physics-based swipe handling on touch devices (or mouse dragging on desktop).
Usage
import { TestimonialCarousel } from "@/components/creative/testimonial-carousel"
export default function SocialProof() {
const reviews = [
{
id: 1,
author: "Jane Doe",
role: "CEO",
company: "Acme Corp",
avatar: "/avatars/jane.jpg",
text: "This UI library changed everything for us.",
rating: 5
}
// ...
]
return (
<section className="py-20 bg-black">
<TestimonialCarousel testimonials={reviews} autoPlay interval={6000} />
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { TestimonialCarousel } from "@/components/creative/testimonial-carousel";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { TestimonialCarousel } from "@/components/creative/testimonial-carousel";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<TestimonialCarousel
testimonials{/* value */}
autoPlay{true}
interval{10}
/>
</div>
);
}