Design Testimonials

The Design Testimonials component displays a set of testimonials with smooth transitions, word-by-word quote animation, a large animated index number, and optional autoplay. Users can also navigate manually using previous/next buttons. A subtle parallax effect is applied based on mouse movement.

Installation

This component uses:

• Vue 3 (<script setup>)
• motion-v for animations
• Tailwind CSS utility classes

Install motion-v:

npm i motion-v

Then install component:

npx shadcn-vue@latest add https://lib.adrianondik.com/r/designtestimonials.json

Usage

<template>
  <DesignTestimonials :testimonials="testimonials" />
</template>

<script setup lang="ts">
import DesignTestimonials from '@/Components/DesignTestimonials';

const testimonials = [
  {
    quote: "This product completely changed how we work.",
    author: "Jane Doe",
    role: "CTO",
    company: "TechCorp",
  },
  {
    quote: "Clean UI, great UX, and super easy to integrate.",
    author: "John Smith",
    role: "Product Designer",
    company: "DesignStudio",
  },
];
</script>

Props

Prop	Type	Description
title	string	Title shown on the left sidebar.
duration	number	Autoplay interval in milliseconds (e.g. 6000).
testimonials	TestimonialItem[]	List of testimonials displayed in the carousel. Required.

TestimonialItem

interface TestimonialItem {
  quote: string;
  author: string;
  role: string;
  company: string;
}

Behavior

• Autoplay transitions every duration ms
• Manual navigation using arrows
• Large animated index number with parallax movement
• Vertical progress line based on active index
• Word-by-word quote animation on slide change

Examples

Custom Title

<template>
  <DesignTestimonials
      title="What clients say"
      :testimonials="testimonials"
  />
</template>

<script setup lang="ts">
import DesignTestimonials from '@/Components/DesignTestimonials';
  
const testimonials = [
  {
    quote: "Fast, beautiful, and easy to maintain.",
    author: "Alex Novak",
    role: "Lead Engineer",
    company: "BuildLab",
  },
];
</script>

Custom Duration

<template>
  <DesignTestimonials
      :duration="3000"
      :testimonials="testimonials"
  />
</template>

<script setup lang="ts">
import DesignTestimonials from '@/Components/DesignTestimonials';

const testimonials = [
  {
    quote: "We saw improvements immediately after launch.",
    author: "Mia Lee",
    role: "Growth Manager",
    company: "ScaleUp",
  },
];
</script>