50: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"] 51:I[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 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:T2824,// Hairline UI · testimonials · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * TESTIMONIALS: one quote, chosen by its people * * choose a row of faces; the chosen one comes forward and * the rest step back * change the quote's height eases to the new words while * they cross-fade through a soft blur; the name * morphs letter by letter * autoplay a ring draws itself around the chosen face as the * timer; when it closes, the next person speaks. * Pointing at it pauses * * The faces are a radio group: arrow keys move between people. * ───────────────────────────────────────────────────────── */ export interface Testimonial { quote: string; name: string; role?: string; /** A photo URL; without one, tinted initials. */ avatar?: string; } export interface TestimonialsProps extends React.HTMLAttributes { items: Testimonial[]; /** Move to the next person every this many ms. */ autoplay?: number; defaultIndex?: number; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const MORPH = 520; const SIZE = 36; const RING = 2 * Math.PI * (SIZE / 2 + 4); const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function hue(text: string) { let h = 0; for (let i = 0; i < text.length; i++) h = (h * 31 + text.charCodeAt(i)) % 360; return h; } function Face({ item }: { item: Testimonial }) { const [failed, setFailed] = React.useState(false); if (item.avatar && !failed) return

setFailed(true)} className="size-full rounded-full object-cover" />; const h = hue(item.name); const initials = item.name .split(/\s+/) .map((w) => w[0]) .slice(0, 2) .join(""); return ( {initials} ); } function Quote({ text, leaving, reduced, quoteRef }: { text: string; leaving: boolean; reduced: boolean; quoteRef?: React.Ref }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced) return; const animation = leaving ? el.animate( [ { opacity: 1, filter: "blur(0px)", transform: "none" }, { opacity: 0, filter: "blur(8px)", transform: "translateY(-8px)" }, ], { duration: MORPH * 0.55, easing: EASE, fill: "forwards" } ) : el.animate( [ { opacity: 0, filter: "blur(8px)", transform: "translateY(10px)" }, { opacity: 1, filter: "blur(0px)", transform: "none" }, ], { duration: MORPH, easing: EASE, delay: 90, fill: "backwards" } ); return () => animation.cancel(); }, [leaving, reduced]); return (

{ ref.current = el; if (typeof quoteRef === "function") quoteRef(el); else if (quoteRef) (quoteRef as React.MutableRefObject).current = el; }} aria-hidden={leaving || undefined} className="absolute inset-x-0 top-0 text-balance text-[22px] font-medium leading-[1.35] tracking-[-0.02em] text-foreground" > {text}

); } export function Testimonials({ items, autoplay, defaultIndex = 0, className = "", ...props }: TestimonialsProps) { const reduced = useReducedMotion(); const [index, setIndex] = React.useState(defaultIndex); const [leaving, setLeaving] = React.useState<{ text: string; key: number }[]>([]); const [height, setHeight] = React.useState(null); const [paused, setPaused] = React.useState(false); const [cycle, setCycle] = React.useState(0); const quoteRef = React.useRef(null); const faceRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const counter = React.useRef(0); const current = items[index]; const choose = (next: number, focus = false) => { const i = (next + items.length) % items.length; setCycle((c) => c + 1); if (focus) faceRefs.current[i]?.focus(); if (i === index) return; setLeaving((l) => [...l, { text: items[index].quote, key: ++counter.current }]); setIndex(i); }; React.useEffect(() => { if (!leaving.length) return; const timer = window.setTimeout(() => setLeaving([]), MORPH); return () => window.clearTimeout(timer); }, [leaving]); // The quote area takes the height of the words now showing. React.useLayoutEffect(() => { const el = quoteRef.current; if (!el) return; const measure = () => setHeight((h) => (h === el.offsetHeight ? h : el.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [index]); const onKeyDown = (e: React.KeyboardEvent) => { const moves: Record = { ArrowRight: index + 1, ArrowDown: index + 1, ArrowLeft: index - 1, ArrowUp: index - 1, Home: 0, End: items.length - 1 }; if (!(e.key in moves)) return; e.preventDefault(); choose(moves[e.key], true); }; const playing = Boolean(autoplay) && !reduced && !paused; if (!current) return null; return (

setPaused(true)} onPointerLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && setPaused(false)} {...props} >

{leaving.map((l) => ( ))}

{current.name} {current.role && ( {current.role} )}

{items.map((item, i) => { const selected = i === index; return ( ); })}

); } 4f:["$","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,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-ring-fill {\n\tfrom {\n\t\tstroke-dashoffset: var(--ui-ring);\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/testimonials.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]