Plainform

The Testimonials component displays customer testimonials from Twitter/X in an infinite scrolling marquee. It fetches content from the locale file and renders embedded tweets with gradient fade effects.

Usage

Basic Implementation

@/app/(base)/page.tsx

import { Testimonials } from '@/components/Testimonials';

export default function HomePage() {
  return (
    <main>
      <Testimonials />
    </main>
  );
}

Locale Configuration

Configure testimonials in locales/en.json:

@/locales/en.json

{
  "homePage": {
    "testimonialsSection": {
      "title": "What our customers say",
      "description": "Real feedback from real users",
      "cta": {
        "text": "Share your feedback",
        "href": "https://twitter.com/intent/tweet?text=@yourusername"
      },
      "testimonials": [
        { "tweetId": "1234567890123456789" },
        { "tweetId": "9876543210987654321" },
        { "tweetId": "1111222233334444555" }
      ]
    }
  }
}

Features

Twitter/X Integration: Embeds real tweets using tweet IDs
Infinite Scroll: Marquee animation with configurable speed
Pause on Hover: Users can pause scrolling to read testimonials
Gradient Fade: Smooth fade effects on left and right edges
Responsive Design: Adapts to all screen sizes
CTA Button: Links to Twitter for users to share feedback

Implementation Details

Marquee Configuration

The component uses the Marquee component with these settings:

pauseOnHover - Pauses animation when user hovers
repeat={4} - Repeats testimonials 4 times for seamless loop
[--duration:35s] - 35-second animation duration
[--gap:3rem] - 3rem gap between testimonials

Tweet Component

Each testimonial is rendered using the Tweet component:

@/components/Tweet.tsx

<Tweet id={testimonial.tweetId} />

The Tweet component handles:

Fetching tweet data from Twitter/X API
Rendering tweet content, author, and metadata
Responsive layout and styling

Gradient Overlays

The component adds gradient overlays to create fade effects:

Gradient Implementation

{/* Left fade */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-[15%] bg-gradient-to-r from-surface" />

{/* Right fade */}
<div className="pointer-events-none absolute inset-y-0 right-0 w-[15%] bg-gradient-to-l from-surface" />

Customization

Changing Animation Speed

Modify the --duration CSS variable:

Faster Animation

<Marquee
  pauseOnHover
  repeat={4}
  className="[--duration:20s] [--gap:3rem]"
>
  {/* testimonials */}
</Marquee>

Adjusting Repeat Count

Change the repeat prop for more or fewer loops:

More Repetitions

<Marquee
  pauseOnHover
  repeat={6}
  className="[--duration:35s] [--gap:3rem]"
>
  {/* testimonials */}
</Marquee>

Custom Gradient Width

Adjust the gradient overlay width:

Wider Gradients

<div className="pointer-events-none absolute inset-y-0 left-0 w-[25%] bg-gradient-to-r from-surface" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-[25%] bg-gradient-to-l from-surface" />

Getting Tweet IDs

To add testimonials:

Find the tweet on Twitter/X
Copy the tweet URL (e.g., https://twitter.com/user/status/1234567890123456789)
Extract the ID from the URL (the numbers at the end)
Add to locales/en.json: