Animated Testimonials

Testimonials 2.1K

About

Minimal testimonials sections with image and quote. Features: - Image Carousel: Enjoy smooth animated image transitions with cool 3D rotation effects. - Word Animation: Watch text pop up with a fun word-by-word animation. - Navigation Controls: Easily navigate with Previous/Next buttons that have hover animations. - Autoplay Support: Choose to have an automatic slideshow if you want. - Shadcn/ui Integration: Get built-in theme support for a consistent look. - Responsive Layout: It adjusts from a two-column layout on desktop to a single-column view on mobile. - Customizable Styles: Style it your way with easy customization through className props. Example Use Cases: - Customer Reviews: Show off customer feedback along with their photos. - Team Showcase: Highlight team members with their profiles. - Client Testimonials: Present client feedback in a visually appealing way. - Portfolio Reviews: Feature project feedback from clients.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Testimonials to your project and fits it to your theme.

Code

How Animated Testimonials is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedTestimonials } from "@/components/ui/animated-testimonials";

function AnimatedTestimonialsDemo() {
  const testimonials = [
    {
      quote:
        "The attention to detail and innovative features have completely transformed our workflow. This is exactly what we've been looking for.",
      name: "Sarah Chen",
      designation: "Product Manager at TechFlow",
      src: "https://cdn.21st.dev/assets/mirror/b9/b9039c919f4fecd4f45a1d17ab85b9490bd4dda4ceda7bb8f0d511810a362bb9.jpg",
    },
    {
      quote:
        "Implementation was seamless and the results exceeded our expectations. The platform's flexibility is remarkable.",
      name: "Michael Rodriguez",
      designation: "CTO at InnovateSphere",
      src: "https://cdn.21st.dev/assets/mirror/6c/6cb959c66cb50e1adf8665af37243d0364c01ef01eb853ebb617ee86788a374d.jpg",
    },
    {
      quote:
        "This solution has significantly improved our team's productivity. The intuitive interface makes complex tasks simple.",
      name: "Emily Watson",
      designation: "Operations Director at CloudScale",
      src: "https://cdn.21st.dev/assets/mirror/36/3633c785219d210c686d9b88e458288fce4521ec58b6408d85dcb6790b4f1ce0.jpg",
    },
    {
      quote:
        "Outstanding support and robust features. It's rare to find a product that delivers on all its promises.",
      name: "James Kim",
      designation: "Engineering Lead at DataPro",
      src: "https://cdn.21st.dev/assets/mirror/89/891cfcd7cd98261e5059ac74a88886a41467816c00d5af53156490a35ec09e9d.jpg",
    },
    {
      quote:
        "The scalability and performance have been game-changing for our organization. Highly recommend to any growing business.",
      name: "Lisa Thompson",
      designation: "VP of Technology at FutureNet",
      src: "https://cdn.21st.dev/assets/mirror/97/973b22409d3598caeaaa895e82459a6eed4e0fc79a8defeb1e9fec3edc86a262.jpg",
    },
  ];
  return <AnimatedTestimonials testimonials={testimonials} />;
}

export { AnimatedTestimonialsDemo };