ReviewMarquee

A smooth, continuously scrolling testimonial marquee designed for displaying customer reviews, feedback, and social proof.

It supports infinite looping, customizable scrolling speed, multiple hover behaviors, configurable scroll direction, optional edge fade effects, and responsive layouts.

Features

Infinite scrolling reviews
Seamless looping animation
Left or right scroll direction
Pause on hover support
Slow on hover support
Adjustable animation speed
Optional edge fade overlays
Responsive layout
Customizable review card styling
Built with Framer Motion
Automatic review duplication for seamless scrolling

Import the component using:

import ReviewMarquee from "@/components/ui/reviewMarquee";

Preview

Basic Example

import ReviewMarquee from "@/components/ui/reviewMarquee";
 
export default function Example() {
  return (
    <ReviewMarquee
      reviews={[
        {
          id: "1",
 
          image: "/images/users/john.jpg",
 
          name: "John Doe",
 
          role: "Founder, Acme",
 
          review:
            "This product completely transformed our workflow.",
 
          noOfStars: 5,
        },
 
        {
          id: "2",
 
          image: "/images/users/sarah.jpg",
 
          name: "Sarah Johnson",
 
          role: "Product Designer",
 
          review:
            "Excellent experience from start to finish.",
 
          noOfStars: 5,
        },
 
        {
          id: "3",
 
          image: "/images/users/alex.jpg",
 
          name: "Alex Brown",
 
          role: "Software Engineer",
 
          review:
            "Very easy to integrate and customize.",
 
          noOfStars: 4,
        },
      ]}
    />
  );
}

Props

ReviewMarqueeProps

interface ReviewMarqueeProps {
  /**
   * Reviews displayed in the marquee
   */
  reviews: ReviewItem[];
 
  /**
   * Animation duration.
   * Lower values scroll faster.
   *
   * @default 25
   */
  speed?: number;
 
  /**
   * Hover interaction behavior
   *
   * pause = Stops animation
   * slow = Reduces speed
   * none = No effect
   *
   * @default "none"
   */
  actionOnHover?: "pause" | "slow" | "none";
 
  /**
   * Scroll direction
   *
   * @default "left"
   */
  scrollDirection?: "left" | "right";
 
  /**
   * Additional wrapper classes
   */
  className?: string;
 
  /**
   * Additional ReviewCard classes
   */
  cardClassName?: string;
 
  /**
   * Displays edge fade overlays
   *
   * @default true
   */
  showFade?: boolean;
}

ReviewItem

interface ReviewItem {
  /**
   * Unique identifier
   */
  id: string;
 
  /**
   * Customer image
   */
  image: string;
 
  /**
   * Customer name
   */
  name: string;
 
  /**
   * Customer role or company
   */
  role?: string;
 
  /**
   * Review content
   */
  review: string;
 
  /**
   * Star rating
   */
  noOfStars?: number;
}

Pause On Hover

<ReviewMarquee
  actionOnHover="pause"
  reviews={reviews}
/>

Slow On Hover

<ReviewMarquee
  actionOnHover="slow"
  reviews={reviews}
/>

Disable Hover Interaction

<ReviewMarquee
  actionOnHover="none"
  reviews={reviews}
/>

Scroll Right

<ReviewMarquee
  scrollDirection="right"
  reviews={reviews}
/>

Faster Animation

<ReviewMarquee
  speed={12}
  reviews={reviews}
/>

Slower Animation

<ReviewMarquee
  speed={40}
  reviews={reviews}
/>

Hide Fade Effect

<ReviewMarquee
  showFade={false}
  reviews={reviews}
/>

Custom Card Styling

<ReviewMarquee
  cardClassName="max-w-md border-primary"
  reviews={reviews}
/>

Custom Wrapper Styling

<ReviewMarquee
  className="py-12"
  reviews={reviews}
/>

Review Item Example

{
  id: "1",
 
  image: "/images/users/john.jpg",
 
  name: "John Doe",
 
  role: "Founder, Acme",
 
  review:
    "This platform helped us launch our product significantly faster.",
 
  noOfStars: 5
}

Example Data

const reviews = [
  {
    id: "1",
 
    image: "/images/users/john.jpg",
 
    name: "John Doe",
 
    role: "Founder, Acme",
 
    review:
      "Outstanding product with an amazing developer experience.",
 
    noOfStars: 5,
  },
 
  {
    id: "2",
 
    image: "/images/users/sarah.jpg",
 
    name: "Sarah Johnson",
 
    role: "Product Designer",
 
    review:
      "Setup only took a few minutes and everything worked perfectly.",
 
    noOfStars: 5,
  },
 
  {
    id: "3",
 
    image: "/images/users/alex.jpg",
 
    name: "Alex Brown",
 
    role: "Software Engineer",
 
    review:
      "Our team's productivity improved immediately after switching.",
 
    noOfStars: 4,
  },
];

Best Practices

Use at least 4 reviews for seamless scrolling.
Keep review text concise and readable.
Use consistent image dimensions.
Keep customer names short.
Use meaningful role information.
Enable fade effects for a cleaner visual appearance.
Use slower speeds for longer reviews.
Use pause-on-hover when reviews contain substantial text.

Accessibility

Hover interactions do not affect content visibility.
Reviews remain readable while scrolling.
Responsive across all device sizes.
Motion is used only for presentation.
Fade overlays do not interfere with interaction.
Compatible with keyboard navigation inside review cards.

Ideal Use Cases

Customer testimonials
SaaS landing pages
Social proof sections
Marketing websites
Startup websites
Agency websites
Product launch pages
Case study sections
Customer success stories
Brand credibility sections

Notes

Reviews are automatically duplicated internally to create a seamless infinite loop.
Lower speed values result in faster scrolling.
When actionOnHover="slow", the animation duration is multiplied while hovering.
When actionOnHover="pause", scrolling stops completely during hover.
Fade overlays are rendered on both sides of the marquee when showFade is enabled.