4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tbad,export type Testimonial = { quote: string; name: string; role: string; company: string; }; export const testimonialItems: Testimonial[] = [ { quote: "We installed six hero blocks in an afternoon — motion felt authored, not pasted from a template kit.", name: "Sarah Chen", role: "VP Product", company: "Northwind", }, { quote: "Copy Prompt handoff cut our design-to-registry loop in half. Devs stopped re-explaining spacing tokens.", name: "Marcus Webb", role: "Engineering Lead", company: "Vertex", }, { quote: "The Pro registry paid for itself the first week — one pricing block replaced a contractor sprint.", name: "Elena Rossi", role: "COO", company: "Lumen", }, { quote: "Preview-before-install is the feature. We ship landing pages without gambling on block quality.", name: "James Okonkwo", role: "Design Director", company: "Atlas", }, { quote: "Motion tags map to real patterns in our codebase — onboarding designers finally speaks dev language.", name: "Priya Nair", role: "Head of Design", company: "Relay", }, { quote: "We replaced three SaaS section libraries with Nusaiba. One CLI, one motion vocabulary, zero glue.", name: "Tomás Álvarez", role: "Founder", company: "Parcel", }, ]; export const testimonialsGridCopy = { title: "Loved by product teams", description: "Real feedback from teams shipping registry-native landing pages.", } as const; export const testimonialsSpotlightCopy = { eyebrow: "Social proof", title: "Teams ship faster with the registry", } as const; export const testimonialsMarqueeCopy = { title: "What builders say", description: "Rolling quotes from teams who install blocks instead of rebuilding sections.", } as const; export const testimonialsSplitCopy = { title: "Featured story", description: "One quote up front — a short stack of voices beside it.", } as const; export const testimonialsFeaturedCopy = { eyebrow: "Customer story", title: "One install changed their launch timeline", metric: "2,400+", metricLabel: "blocks installed last quarter", } as const; export const testimonialsListCopy = { title: "Voices from the catalog", description: "Compact rows for dense social proof without a carousel.", } as const; export const testimonialsMetricCopy = { title: "Proof in the numbers", description: "Teams report faster ship loops after standardizing on registry blocks.", } as const; export const testimonialsBentoCopy = { title: "Wall of praise", description: "Asymmetric bento — one flagship quote with supporting voices.", } as const; export const testimonialsFilmstripCopy = { title: "Swipe the quotes", description: "Horizontal filmstrip with scroll-snap — pause on the story that fits.", } as const; export const testimonialsFramedCopy = { eyebrow: "Pro customers", title: "Editorial proof panel", description: "Framed quote cycle for premium landing pages — slow, intentional, readable.", } as const; 52:T194e,"use client"; import { StarIcon } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { useRef, type ReactNode } from "react"; import { defaultSpring, motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import type { Testimonial } from "./testimonials-data"; const spring = { type: "spring" as const, duration: 0.3, bounce: 0 }; export function getInitials(name: string) { return name .split(/\s+/) .map((part) => part[0]) .join("") .slice(0, 2) .toUpperCase(); } export function useTestimonialItemVariants() { const reduceMotion = useReducedMotion(); return reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 8 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; } export function TestimonialStagger({ children, className, }: { children: ReactNode; className?: string; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return ( {children} ); } export function TestimonialStaggerItem({ children, className, }: { children: ReactNode; className?: string; }) { const itemVariants = useTestimonialItemVariants(); return ( {children} ); } export function TestimonialSectionHeader({ eyebrow, title, description, className, align = "center", }: { eyebrow?: string; title: string; description?: string; className?: string; align?: "center" | "left"; }) { return ( {eyebrow ? (

{eyebrow}

) : null}

{title}

{description ? (

{description}

) : null} ); } export function TestimonialStars({ className }: { className?: string }) { return (

{Array.from({ length: 5 }).map((_, index) => ( ))}

); } export function TestimonialAvatar({ name, className, size = "md", }: { name: string; className?: string; size?: "sm" | "md"; }) { const box = size === "sm" ? "size-8 text-[10px]" : "size-10 text-xs"; return ( {getInitials(name)} ); } export function TestimonialQuoteCard({ item, className, compact = false, }: { item: Testimonial; className?: string; compact?: boolean; }) { return (

“{item.quote}”

{item.name}

{item.role}, {item.company}

); } export function TestimonialAttribution({ item, className, }: { item: Testimonial; className?: string; }) { return (

{item.name} {" · "} {item.role}, {item.company}

); } export function TestimonialSelector({ items, active, onSelect, className, chipClassName, }: { items: Testimonial[]; active: number; onSelect: (index: number) => void; className?: string; chipClassName?: string; }) { return (

{items.map((item, index) => { const isActive = index === active; return ( ); })}

); } export function TestimonialQuoteReveal({ item, className, }: { item: Testimonial; className?: string; }) { return (

“{item.quote}”

); } 53:T940,"use client"; import { useEffect, useState } from "react"; import { AnimatePresence } from "motion/react"; import { DecorIcon } from "@/components/decor-icon"; import { GridPattern } from "@/components/ui/grid-pattern"; import { SectionShell, ContentRail } from "@/components/layout-contract"; import { testimonialItems, testimonialsSpotlightCopy, } from "../testimonials-data"; import { TestimonialQuoteReveal, TestimonialSectionHeader, TestimonialSelector, TestimonialStagger, TestimonialStaggerItem, } from "../testimonials-primitives"; export function TestimonialsSpotlightSection() { const [active, setActive] = useState(0); const activeItem = testimonialItems[active]!; useEffect(() => { const timer = setInterval(() => { setActive((current) => (current + 1) % testimonialItems.length); }, 5200); return () => clearInterval(timer); }, []); return (

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@nusaiba/foundation","@nusaiba/decor-icon","@magicui/grid-pattern"]}]]}],["$","$L4f",null,{"sourceUrl":"https://nusaiba.dev/r/base-nova/testimonials-2.json","proxyUrl":"https://shadcnregistry.com/r/nusaiba/testimonials-2","itemId":"@nusaiba/testimonials-2"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/blocks/testimonials/testimonials-data.ts","content":"$51","type":"registry:lib"},{"path":"registry/blocks/testimonials/testimonials-primitives.tsx","content":"$52","type":"registry:lib"},{"path":"registry/blocks/testimonials/2/testimonials-section.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Testimonials 2

Installation

Files

lib

components

Styles