Docs
Scrolling Testimonials

Scrolling Testimonials

A dynamic and visually engaging scrolling testimonials section

Installation

Update tailwind.config.js

theme: {
    extend: {
     colors: {
        foreground: "hsl(var(--foreground))",
     }
    },
  },

Install dependencies

This uses Marquee for the text. Install it by following the instructions here.

Run the following command

It will create a new file called scrolling-testimonials.tsx inside the components/animata/container directory.

mkdir -p components/animata/container && touch components/animata/container/scrolling-testimonials.tsx

Paste the code

Open the newly created file and paste the following code:

import Marquee from "@/animata/container/marquee";
 
interface Testimonial {
  name: string;
  image: string;
  description: string;
}
 
interface TestimonialProps {
  data: Testimonial[];
}
 
function TestimonialCard({
  testimonial: { image, name, description },
}: {
  testimonial: Testimonial;
}) {
  return (
    <div
      className="flex h-44 w-96 overflow-hidden rounded-xl border bg-background dark:border-zinc-700"
      key={name}
    >
      <div className="relative h-full w-32 flex-shrink-0 overflow-hidden">
        <img src={image} alt={name} className="h-full w-full object-cover" />
      </div>
      <div className="px-4 py-2">
        <span className="block text-lg font-bold text-foreground">{name}</span>
        <span className="-mt-1 mb-1 block text-sm font-medium leading-loose text-muted-foreground">
          Founder of BAC
        </span>
        <span className="block text-sm text-foreground">{description} </span>
      </div>
    </div>
  );
}
 
export default function ScrollingTestimonials({ data }: TestimonialProps) {
  return (
    <div className="w-full">
      <Marquee className="[--duration:25s]" pauseOnHover applyMask={false}>
        {data.map((testimonial) => (
          <TestimonialCard key={testimonial.name} testimonial={testimonial} />
        ))}
      </Marquee>
 
      <Marquee reverse className="[--duration:25s]" pauseOnHover applyMask={false}>
        {data.map((testimonial) => (
          <TestimonialCard key={testimonial.name} testimonial={testimonial} />
        ))}
      </Marquee>
 
      <Marquee className="[--duration:25s]" pauseOnHover applyMask={false}>
        {data.map((testimonial) => (
          <TestimonialCard key={testimonial.name} testimonial={testimonial} />
        ))}
      </Marquee>
    </div>
  );
}

Credits

Built by Bibek Bhattarai

Edit this page on GitHub
Nav TabsShift Tabs