Testimonials 1

Renders a rotating block of testimonials with auto-advanced cards. Displays a quote, name, and role with animated transitions. Use to showcase customer feedback in a dynamic way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/testimonials-1

npx layro-cli add @educlopez/testimonials-1

npx layro-cli add @educlopez/testimonials-1

bunx layro-cli add @educlopez/testimonials-1

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { getAvatarUrl, getTestimonials } from "@/lib/smoothui-data";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";

const TESTIMONIAL_COUNT = 4;
const AVATAR_SIZE = 96;
const DURATION = 5000; // ms
const BAR_WIDTH = 50;
const CIRCLE_SIZE = 12;
const BORDER_RADIUS_ACTIVE = 8;
const BORDER_RADIUS_INACTIVE = 999;
const MILLISECONDS_TO_SECONDS = 1000;