Animated Testimonial Card

testimonialfrom Community Creative

Live

AI Usage Rules

Use TestimonialCard for social proof sections. Display in a grid (2-3 columns) or marquee. Include star ratings for credibility. Avatar fallback shows initials with a gradient. Keep quotes under 3 sentences.

Code Template

interface TestimonialCardProps extends React.ComponentProps<"div"> {
  quote: string
  author: string
  role: string
  avatarUrl?: string
  rating?: number
}

export function TestimonialCard({ quote, author, role, avatarUrl, rating = 5, className, ...props }: TestimonialCardProps) {
  return (
    <div className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 p-6 backdrop-blur-md transition-all duration-500 hover:border-white/20 hover:-translate-y-1 hover:shadow-[0_20px_60px_-15px_rgba(99,102,241,0.2)] ${className ?? ""}`} {...props}>
      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-transparent to-purple-500/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
      <div className="relative z-10">
        <div className="mb-4 flex gap-1">
          {Array.from({ length: rating }).map((_, i) => (
            <svg key={i} className="h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
          ))}
        </div>
        <blockquote className="text-sm leading-relaxed text-gray-300">"{quote}"</blockquote>
        <div className="mt-4 flex items-center gap-3">
          {avatarUrl ? (
            <img src={avatarUrl} alt={author} className="h-10 w-10 rounded-full object-cover ring-2 ring-white/10" />
          ) : (
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 text-sm font-bold text-white">
              {author.split(" ").map(n => n[0]).join("")}
            </div>
          )}
          <div>
            <p className="text-sm font-semibold text-white">{author}</p>
            <p className="text-xs text-gray-500">{role}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

Props Schema

Property	Type	Default
role	string	—
quote	string	—
author	string	—
rating	number	—
avatarUrl	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "role": {
      "type": "string"
    },
    "quote": {
      "type": "string"
    },
    "author": {
      "type": "string"
    },
    "rating": {
      "type": "number"
    },
    "avatarUrl": {
      "type": "string"
    }
  }
}