52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2104,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "../../utils"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useReducedMotion } from "../../internals/motion/media-query"; import { useSoundCue } from "../../sound/use-sound"; /** * AnimatedTestimonials - Animated testimonial carousel * * Cycles through testimonials with smooth slide animations. * Supports manual navigation and optional autoplay. */ export interface Testimonial { /** The testimonial quote */ quote: string; /** Author's full name */ name: string; /** Author's title or role */ designation: string; /** URL to author's avatar image */ src: string; } export interface AnimatedTestimonialsProps { /** Array of testimonials to display */ testimonials: Testimonial[]; /** Auto-advance testimonials */ autoplay?: boolean; /** Interval between auto-advances (ms) */ interval?: number; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } /** Duration must match the CSS transition duration below */ const TRANSITION_DURATION = 300; export function AnimatedTestimonials({ testimonials, autoplay = false, interval = 5000, className, sound = false, }: AnimatedTestimonialsProps) { const [activeIndex, setActiveIndex] = useState(0); const [direction, setDirection] = useState<"next" | "prev">("next"); const [isAnimating, setIsAnimating] = useState(false); const [isHovered, setIsHovered] = useState(false); const [isFocused, setIsFocused] = useState(false); const playCue = useSoundCue(sound); const reducedMotion = useReducedMotion(); // Mirrors `isAnimating` for the guard inside timer callbacks, where the // state value captured by the closure may be stale. const isAnimatingRef = useRef(false); const navigateTimerRef = useRef | null>(null); const testimonialCount = testimonials.length; // The timeout below outlives the render that scheduled it, so the count it // wraps around has to be read when it FIRES, not when it was captured: a // collection that shrank during the 300ms transition would otherwise land // `activeIndex` past the end of the new list. The Svelte source reads // `testimonials.length` through a reactive prop getter inside the same // callback and gets the live value for free; a React closure captures. const testimonialCountRef = useLiveRef(testimonialCount); const navigate = useCallback( (dir: "next" | "prev", fromUser = false) => { if (isAnimatingRef.current || testimonialCount === 0) return; // Only a gesture is audible. The autoplay interval calls this too — // cueing that turns the carousel into a metronome — and a // single-entry list wraps back onto the testimonial already shown, // so neither one plays. if (fromUser && testimonialCount > 1) playCue("select"); setDirection(dir); isAnimatingRef.current = true; setIsAnimating(true); navigateTimerRef.current = setTimeout(() => { const count = testimonialCountRef.current; setActiveIndex((current) => { if (count === 0) return 0; return dir === "next" ? (current + 1) % count : (current - 1 + count) % count; }); isAnimatingRef.current = false; setIsAnimating(false); navigateTimerRef.current = null; }, TRANSITION_DURATION); }, [testimonialCount, testimonialCountRef, playCue] ); // Reactive autoplay: restarts whenever autoplay, interval, hover state, focus // state or the motion preference changes. Pointer hover and keyboard focus // both hold the rotation, so the auto-updating live region can be stopped // without a pointer, and a reduced-motion preference keeps it from starting. useEffect(() => { if (!autoplay || isHovered || isFocused || reducedMotion || testimonialCount === 0) return; const timer = setInterval(() => navigate("next"), interval); return () => clearInterval(timer); }, [autoplay, isHovered, isFocused, reducedMotion, interval, testimonialCount, navigate]); // Cleanup navigate timeout on destroy useEffect(() => { return () => { if (navigateTimerRef.current) clearTimeout(navigateTimerRef.current); }; }, []); const activeTestimonial = testimonials.length > 0 ? testimonials[activeIndex] : null; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} role="region" aria-label="Testimonials" > {testimonials.length === 0 ? (

No testimonials available.

) : (

{/* Image column */}

{testimonials.map((testimonial, index) => (

))}

{/* Content column */}

{activeTestimonial?.quote}

{activeTestimonial?.name}

{activeTestimonial?.designation}

{/* Navigation */}

)}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/animated-testimonials/AnimatedTestimonials.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/animated-testimonials/AnimatedTestimonials.tsx"},{"path":"react/src/components/animated-testimonials/index.ts","content":"\"use client\";\n\nexport { AnimatedTestimonials } from \"./AnimatedTestimonials\";\nexport type { AnimatedTestimonialsProps, Testimonial } from \"./AnimatedTestimonials\";\n","type":"registry:ui","target":"@ui/fancy/components/animated-testimonials/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]