{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonial-wall","type":"registry:block","title":"Testimonial Wall","description":"Testimonial wall of quote cards with names, roles, initials avatars and optional star ratings, laid out in masonry-like columns that scroll vertically in alternating directions behind fade masks, pause on hover or focus, fall back to a static masonry under reduced motion, offer a static grid variant, and pick their column count from the block's own container width.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/testimonial-wall.tsx","type":"registry:component","target":"@components/motion/testimonial-wall.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/testimonial-wall\n\nimport { Star } from \"lucide-react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { Marquee } from \"@/components/motion/marquee\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Testimonial {\n id: string;\n quote: ReactNode;\n name: string;\n role?: ReactNode;\n /** Image URL. Falls back to initials derived from `name`. */\n avatar?: string;\n /** Override the derived initials. */\n initials?: string;\n /** 0–5 stars. Omit to hide the rating row. */\n rating?: number;\n}\n\nexport interface TestimonialWallProps {\n testimonials: Testimonial[];\n /** \"marquee\" scrolls columns in alternating directions; \"grid\" is static. */\n variant?: \"marquee\" | \"grid\";\n /** Maximum number of columns at the widest container size (1–4). Default 3. */\n columns?: 1 | 2 | 3 | 4;\n /** Seconds for one loop of the first column. Others vary slightly. Default 40. */\n speed?: number;\n /** Height of the marquee viewport. Default 32rem. Ignored by `grid`. */\n height?: number | string;\n /** Pause a column while it is hovered or holds focus. Default true. */\n pauseOnHover?: boolean;\n eyebrow?: ReactNode;\n heading?: ReactNode;\n description?: ReactNode;\n className?: string;\n}\n\n// Show/hide classes for the 1/2/3/4-lane layouts. Lane counts step up with\n// the block's own container width (not the viewport): 2 at @md, 3 at @3xl,\n// 4 at @5xl. Spelled out in full so Tailwind can see every class.\nconst SHOW_AT = [\"flex\", \"hidden @md:flex\", \"hidden @3xl:flex\", \"hidden @5xl:flex\"];\nconst HIDE_AT = [\"\", \"@md:hidden\", \"@3xl:hidden\", \"@5xl:hidden\"];\nconst GRID_COLUMNS = [\n \"columns-1\",\n \"columns-1 @md:columns-2\",\n \"columns-1 @md:columns-2 @3xl:columns-3\",\n \"columns-1 @md:columns-2 @3xl:columns-3 @5xl:columns-4\",\n];\n\nconst FADE_MASK =\n \"[mask-image:linear-gradient(to_bottom,transparent,black_14%,black_86%,transparent)]\";\n\nfunction initialsOf(name: string) {\n return name\n .split(/\\s+/)\n .filter(Boolean)\n .slice(0, 2)\n .map((part) => part[0]?.toUpperCase() ?? \"\")\n .join(\"\");\n}\n\n/** Deterministic palette slot so a person keeps the same avatar tint. */\nfunction tintOf(name: string) {\n let hash = 0;\n for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;\n return (hash % 5) + 1;\n}\n\nfunction distribute(items: T[], lanes: number): T[][] {\n const out: T[][] = Array.from({ length: lanes }, () => []);\n items.forEach((item, index) => {\n out[index % lanes]?.push(item);\n });\n return out;\n}\n\n/** Repeat a short lane until it has at least `min` cards. */\nfunction fillLane(lane: T[], min = 4) {\n const out: { item: T; copy: number }[] = lane.map((item) => ({ item, copy: 0 }));\n if (lane.length === 0) return out;\n let copy = 1;\n while (out.length < min) {\n for (const item of lane) {\n if (out.length >= min) break;\n out.push({ item, copy });\n }\n copy += 1;\n }\n return out;\n}\n\nexport function TestimonialCard({\n testimonial,\n className,\n}: {\n testimonial: Testimonial;\n className?: string;\n}) {\n const { quote, name, role, avatar, rating } = testimonial;\n const tint = tintOf(name);\n const stars =\n rating === undefined ? null : Math.max(0, Math.min(5, Math.round(rating)));\n\n return (\n \n {stars !== null ? (\n
\n {`Rated ${stars} out of 5`}\n {[0, 1, 2, 3, 4].map((i) => (\n \n ))}\n
\n ) : null}\n
\n {quote}\n
\n
\n {avatar ? (\n // biome-ignore lint/performance/noImgElement: library component; consumers may not use next/image.\n \n ) : (\n \n {testimonial.initials ?? initialsOf(name)}\n \n )}\n
\n
\n {name}\n
\n {role ? (\n
{role}
\n ) : null}\n
\n
\n \n );\n}\n\n/**\n * Testimonial wall: masonry-like columns of quote cards. The marquee variant\n * scrolls each column vertically in alternating directions behind top and\n * bottom fade masks, pausing a column on hover or focus; reduced motion and\n * `variant=\"grid\"` render the same cards as a static masonry. Column count\n * follows the block's own container width.\n */\nexport function TestimonialWall({\n testimonials,\n variant = \"marquee\",\n columns = 3,\n speed = 40,\n height = \"32rem\",\n pauseOnHover = true,\n eyebrow,\n heading,\n description,\n className,\n}: TestimonialWallProps) {\n const reduce = useReducedMotion();\n const maxLanes = Math.max(1, Math.min(4, columns));\n const animated = variant === \"marquee\" && !reduce;\n\n const header =\n eyebrow || heading || description ? (\n
\n {eyebrow ? (\n

\n {eyebrow}\n

\n ) : null}\n {heading ? (\n

\n {heading}\n

\n ) : null}\n {description ? (\n

\n {description}\n

\n ) : null}\n
\n ) : null;\n\n const grid = (\n
\n {testimonials.map((t) => (\n \n ))}\n
\n );\n\n return (\n
\n {header}\n {variant === \"grid\" ? (\n grid\n ) : !animated ? (\n // Reduced motion: same viewport, static masonry that scrolls by hand.\n \n
{grid}
\n \n ) : (\n
\n {Array.from({ length: maxLanes }, (_, i) => i + 1).map((laneCount) => (\n \n {distribute(testimonials, laneCount).map((lane, laneIndex) => (\n div]:w-full [&>div]:items-stretch\",\n pauseOnHover &&\n \"[&:focus-within>div]:[animation-play-state:paused]\",\n )}\n >\n {fillLane(lane).map(({ item, copy }) =>\n copy ? (\n // Padding copies only exist so a short lane still\n // covers the viewport; hide them from assistive tech.\n
\n \n
\n ) : (\n \n ),\n )}\n \n ))}\n
\n ))}\n \n )}\n
\n );\n}\n"},{"path":"components/motion/marquee.tsx","type":"registry:component","target":"@components/motion/marquee.tsx","content":"import { Children, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MarqueeProps {\n children: ReactNode;\n direction?: \"left\" | \"right\" | \"up\" | \"down\";\n speed?: number;\n pauseOnHover?: boolean;\n gap?: string;\n className?: string;\n fade?: boolean;\n}\n\nexport function Marquee({\n children,\n direction = \"left\",\n speed = 30,\n pauseOnHover = true,\n gap = \"1rem\",\n className,\n fade = true,\n}: MarqueeProps) {\n const vertical = direction === \"up\" || direction === \"down\";\n const reverse = direction === \"right\" || direction === \"down\";\n const items = Children.toArray(children);\n\n return (\n \n {[0, 1].map((dup) => (\n \n {items.map((child, i) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: Marquee duplicates static child slots; item order is not mutated.\n
\n {child}\n
\n ))}\n \n ))}\n \n );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}