Scroll Reel Testimonials

Testimonials 1.1K

About

Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.

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

Code

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

Usage.tsx

import { ScrollReelTestimonials } from "@/components/ui/scroll-reel-testimonials";

const TESTIMONIALS = [
  {
    quote: "Big effort - high quality. Best Framer content out there.",
    author: "Jan Dittrich",
    image:
      "https://cdn.21st.dev/assets/mirror/52/5216da152597678ee4f7cab615388a50ee8aa802c43e5faba6bcf909fe0efafc.jpg",
    alt: "Portrait of Jan Dittrich",
  },
  {
    quote:
      "I'm building a new website and it's absolutely ridiculous how valuable your content has been.",
    author: "Michael Riddering",
    image:
      "https://cdn.21st.dev/assets/mirror/c0/c0c060c53a1cd5b3d59a402b9b361d3fb8fdec13271d174282c6700cb7258bdd.jpg",
    alt: "Portrait of Michael Riddering",
  },
  {
    quote: "Way too much value for free to be honest.",
    author: "James Traf",
    image:
      "https://cdn.21st.dev/assets/mirror/37/37f69283028651a2e72bc9ed9486be14d8101f1d8444d4ea23462964a5c68d22.jpg",
    alt: "Portrait of James Traf",
  },
];

export default function DemoOne() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-8">
      <ScrollReelTestimonials testimonials={TESTIMONIALS} />
    </div>
  );
}