Skip to main content

​
Overview

Design Testimonials is a premium testimonial component featuring cinematic typography, magnetic parallax effects, and word-by-word text animations. It includes auto-cycling navigation and provides a sophisticated, design-forward presentation of customer feedback.

​
Usage

<template>
  <DesignTestimonials
    title="Client Feedback"
    :testimonials="testimonials"
    :duration="6000"
  />
</template>

<script setup>
const testimonials = [
  {
    quote: "Working with this team transformed our entire approach to product development.",
    author: "Sarah Johnson",
    role: "VP of Engineering",
    company: "TechCorp"
  },
  {
    quote: "The attention to detail and innovative solutions exceeded all our expectations.",
    author: "Michael Chen",
    role: "CTO",
    company: "InnovateLabs"
  },
  {
    quote: "A game-changing partnership that delivered results beyond what we imagined.",
    author: "Emily Rodriguez",
    role: "Product Director",
    company: "FutureScale"
  }
]
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
titlestring"Testimonials"Vertical label shown on the left side of the layout.
durationnumber6000Time (in ms) before automatically switching to the next testimonial.
testimonialsTestimonialItem[]requiredList of testimonial entries to render and animate.

​
TestimonialItem Object

Each testimonial must follow this structure:
PropertyTypeDescription
quotestringThe testimonial text, animated word-by-word.
authorstringName of the testimonial author.
rolestringRole or designation of the author.
companystringCompany or organization name (used in badge and ticker).

​
Features

  • Word-by-word animations: Testimonial text animates in word by word for dramatic effect
  • Magnetic parallax: Interactive parallax effects create depth and engagement
  • Auto-cycling navigation: Automatically transitions between testimonials
  • Cinematic typography: Premium, design-forward text styling
  • Motion-powered animations: Smooth, performant animations using motion-v

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us