2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1b04,"use client"; import { memo, useCallback, useRef, useState } from "react"; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { IconChevronDown } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; export type FocusReview = { id: string | number; author: string; /** e.g. "Verified buyer". */ role?: string; /** e.g. product or collection name. */ context?: string; quote: string; /** Local image only; initials render when omitted. */ avatarSrc?: string; }; export type FocusTestimonialsProps = { reviews: FocusReview[]; /** How many reviews show before the "read all" toggle. */ initialCount?: number; className?: string; }; function initials(name: string) { return name .split(/\s+/) .slice(0, 2) .map((w) => w[0]) .join("") .toUpperCase(); } const ReviewSpan = memo(function ReviewSpan({ review, isFocused, hasFocus, reduce, onFocus, }: { review: FocusReview; isFocused: boolean; hasFocus: boolean; reduce: boolean; onFocus: (id: string | number) => void; }) { const stateClass = !hasFocus ? "text-muted-foreground" : isFocused ? "text-foreground opacity-100 blur-none" : "text-muted-foreground/70 opacity-40 blur-[2px]"; const avatarClass = !hasFocus ? "opacity-90 saturate-75" : isFocused ? "scale-110 opacity-100 saturate-100" : "scale-95 opacity-40 saturate-0 blur-[1px]"; return ( onFocus(review.id)} onFocus={() => onFocus(review.id)} tabIndex={0} className={cn( "inline cursor-pointer transition-[opacity,filter,color] duration-200 ease-out select-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", reduce && "transition-none", stateClass, )} > {review.avatarSrc ? : null} {initials(review.author)} {review.quote}{" "} ); }); /** * Customer reviews as one flowing paragraph: hovering or focusing a quote * pulls it into focus while the rest blur back. A springy author chip * follows the cursor; a toggle reveals the full list. */ export function FocusTestimonials({ reviews, initialCount = 4, className }: FocusTestimonialsProps) { const [focusedId, setFocusedId] = useState(null); const [expanded, setExpanded] = useState(false); const containerRef = useRef(null); const reduce = useReducedMotion() ?? false; const rawX = useMotionValue(0); const rawY = useMotionValue(0); const x = useSpring(rawX, { damping: 30, stiffness: 320, mass: 0.45 }); const y = useSpring(rawY, { damping: 30, stiffness: 320, mass: 0.45 }); const active = focusedId !== null ? reviews.find((r) => r.id === focusedId) : null; const visible = expanded ? reviews : reviews.slice(0, initialCount); const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!containerRef.current || reduce) return; const rect = containerRef.current.getBoundingClientRect(); rawX.set(e.clientX - rect.left); rawY.set(e.clientY - rect.top); }, [rawX, rawY, reduce], ); const handleFocus = useCallback((id: string | number) => setFocusedId(id), []); const toggle = useCallback(() => { setExpanded((prev) => { if (prev) setFocusedId(null); return !prev; }); }, []); const hasFocus = focusedId !== null; return (

setFocusedId(null)} data-slot="focus-testimonials" className={cn( "relative z-10 flex w-full flex-col rounded-brand border border-border/60 bg-card p-6 text-card-foreground shadow-sm select-none sm:p-10", className, )} > {active && !reduce ? ( {active.avatarSrc ? : null} {initials(active.author)} {active.author} {active.role || active.context ? ( {[active.role, active.context].filter(Boolean).join(" · ")} ) : null} ) : null}

{visible.map((review) => ( ))}

{reviews.length > initialCount ? (

) : null}

); } export default FocusTestimonials; 32:Tdff,"use client"; import { FocusTestimonials, type FocusReview } from "./focus-testimonials"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { demoProduct } from "../../../lib/commerce/fixtures"; const SHOP_REVIEWS: FocusReview[] = [ { id: "r1", author: "Maya R.", role: "Verified buyer", context: "Heavyweight Tee", quote: "The heavyweight tee fits exactly like the size chart says, and the print has survived a dozen washes without cracking." }, { id: "r2", author: "Devon K.", role: "Verified buyer", context: "Friday drop", quote: "Ordered on Tuesday night and wore it on Friday. The fastest drop-to-door I have seen from an independent shop." }, { id: "r3", author: "Priya S.", role: "Verified buyer", context: "Boxy hoodie", quote: "Boxy cut, dense fleece, no loose threads. Customer care answered my sizing question within the hour." }, { id: "r4", author: "Jonas L.", role: "Verified buyer", context: "Long sleeve", quote: "Second order this year. Colors match the photos and the collar still sits flat after months of wear." }, { id: "r5", author: "Alba M.", role: "Verified buyer", context: "Crewneck", quote: "Bought one for my brother after stealing his. The garment-dyed colorway looks even better in person." }, { id: "r6", author: "Theo B.", role: "Verified buyer", context: "Cap", quote: "Structured crown, clean embroidery, adjustable strap that actually stays put. My daily driver now." }, { id: "r7", author: "Nadia F.", role: "Verified buyer", context: "Gift order", quote: "Sent as a gift with a note at checkout. It arrived wrapped, on time, and two sizes were exchanged without fuss." }, { id: "r8", author: "Chris D.", role: "Verified buyer", context: "Hoodie", quote: "I compared four shops on fabric weight alone. Nothing else came close at this price." }, ]; export function FocusTestimonialsDemo({ brand }: { brand?: string }) { void brand; const productReviews: FocusReview[] = [ { id: "p1", author: "Sam W.", role: "Verified buyer", context: demoProduct.title, quote: "True to size with room to layer. The product photos showed the exact shade I received." }, { id: "p2", author: "Elena G.", role: "Verified buyer", context: demoProduct.title, quote: "Washed cold three times, zero shrinkage. The tagless print inside is a small detail I appreciate." }, { id: "p3", author: "Marcus T.", role: "Verified buyer", context: demoProduct.title, quote: "Between sizes and sized down — perfect boxy drape. Delivery tracking was accurate to the day." }, { id: "p4", author: "June A.", role: "Verified buyer", context: demoProduct.title, quote: "Third piece from this collection. Consistent quality every single time." }, { id: "p5", author: "Omar H.", role: "Verified buyer", context: demoProduct.title, quote: "Customer care swapped my size in one email, no return label gymnastics." }, ]; return ( ); } export default FocusTestimonialsDemo; 33:T43e,import type { BlockMeta } from "../../../lib/block-meta"; export const focusTestimonialsMeta: BlockMeta = { slug: "focus-testimonials", title: "Focus testimonials", description: "Customer reviews as one flowing paragraph: the hovered or focused quote sharpens while the rest blur back, with a cursor-following author chip on Kobra Avatar and a Kobra Button toggle for the full list.", group: "sections", kobraDeps: ["avatar", "button"], files: [ "blocks/sections/focus-testimonials/focus-testimonials.tsx", "blocks/sections/focus-testimonials/demo.tsx", "blocks/sections/focus-testimonials/meta.ts", ], props: [ { name: "reviews", type: "FocusReview[]", description: "{ id, author, role?, context?, quote, avatarSrc? } per review." }, { name: "initialCount", type: "number", default: "4", description: "Reviews shown before the read-all toggle." }, ], tags: ["reviews", "testimonials", "social-proof"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/focus-testimonials", license: "MIT" }, }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#sections","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Sections"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Focus testimonials"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Focus testimonials"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Customer reviews as one flowing paragraph: the hovered or focused quote sharpens while the rest blur back, with a cursor-following author chip on Kobra Avatar and a Kobra Button toggle for the full list."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"focus-testimonials","group":"sections","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/sections/focus-testimonials/focus-testimonials.tsx","code":"$31"},{"path":"blocks/sections/focus-testimonials/demo.tsx","code":"$32"},{"path":"blocks/sections/focus-testimonials/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]