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[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"] 54: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"] 55: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"] 56:T2ad3,'use client'; import React, { useEffect, useState, useCallback, useMemo } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; interface Testimonial { name: string; handle: string; review: string; avatar: string; } interface TestimonialCardProps { testimonial: Testimonial; index: number; cardClassName?: string; avatarClassName?: string; } interface KineticTestimonialProps { testimonials?: Testimonial[]; className?: string; cardClassName?: string; avatarClassName?: string; desktopColumns?: number; tabletColumns?: number; mobileColumns?: number; speed?: number; title?: string; subtitle?: string; } interface TestimonialWithId extends Testimonial { uniqueId: string; } const TestimonialCard: React.FC = React.memo( ({ testimonial, index, cardClassName = '', avatarClassName = '' }) => { const [isHovered, setIsHovered] = useState(false); const gradients = [ 'from-pink-500 via-purple-500 to-orange-400', 'from-blue-500 via-teal-500 to-green-400', 'from-purple-500 via-pink-500 to-red-400', 'from-indigo-500 via-blue-500 to-cyan-400', 'from-orange-500 via-red-500 to-pink-400', 'from-emerald-500 via-blue-500 to-purple-400', 'from-rose-500 via-fuchsia-500 to-indigo-400', 'from-amber-500 via-orange-500 to-red-400', ]; const gradientClass = gradients[index % gradients.length]; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {isHovered && (

)}

"{testimonial.review}"

{testimonial.name .split(' ') .map((n) => n[0]) .join('')}

{testimonial.name}

{testimonial.handle}

); }, ); TestimonialCard.displayName = 'TestimonialCard'; const KineticTestimonial: React.FC = ({ testimonials = [], className = '', cardClassName = '', avatarClassName = '', desktopColumns = 6, tabletColumns = 3, mobileColumns = 2, speed = 1, title = 'What developers are saying', subtitle = 'Hear from the developer community about their experience with ScrollX-UI', }) => { const [actualMobileColumns, setActualMobileColumns] = useState(mobileColumns); useEffect(() => { const updateColumns = () => { const width = window.innerWidth; if (width < 400) { setActualMobileColumns(1); } else { setActualMobileColumns(mobileColumns); } }; updateColumns(); window.addEventListener('resize', updateColumns); return () => window.removeEventListener('resize', updateColumns); }, [mobileColumns]); const createColumns = useCallback( (numColumns: number) => { if (!testimonials || testimonials.length === 0) { return []; } const columns: TestimonialWithId[][] = []; const testimonialsPerColumn = 10; for (let i = 0; i < numColumns; i++) { const columnTestimonials: TestimonialWithId[] = []; for (let j = 0; j < testimonialsPerColumn; j++) { const testimonialIndex = (i * 11 + j * 3) % testimonials.length; columnTestimonials.push({ ...testimonials[testimonialIndex], uniqueId: `${i}-${j}-${testimonialIndex}`, }); } columns.push([...columnTestimonials, ...columnTestimonials]); } return columns; }, [testimonials], ); const desktopColumnsData = useMemo( () => createColumns(desktopColumns), [createColumns, desktopColumns], ); const fiveColumnsData = useMemo(() => createColumns(5), [createColumns]); const fourColumnsData = useMemo(() => createColumns(4), [createColumns]); const tabletColumnsData = useMemo( () => createColumns(tabletColumns), [createColumns, tabletColumns], ); const mobileColumnsData = useMemo( () => createColumns(actualMobileColumns), [createColumns, actualMobileColumns], ); const renderColumn = useCallback( ( columnTestimonials: TestimonialWithId[], colIndex: number, prefix: string, containerHeight: number, ) => { const moveUp = colIndex % 2 === 0; const animationDuration = (40 + colIndex * 3) / speed; return (

{columnTestimonials.map((testimonial, index) => ( ))}

); }, [speed, cardClassName, avatarClassName], ); return (

{title}

{subtitle}

{testimonials && testimonials.length > 0 && ( <>

{desktopColumnsData.map((columnTestimonials, colIndex) => renderColumn(columnTestimonials, colIndex, 'desktop', 800), )}

{createColumns(Math.max(desktopColumns - 1, 3)).map( (columnTestimonials, colIndex) => renderColumn(columnTestimonials, colIndex, 'five', 800), )}

{createColumns(Math.max(desktopColumns - 2, 2)).map( (columnTestimonials, colIndex) => renderColumn(columnTestimonials, colIndex, 'four', 800), )}

{tabletColumnsData.map((columnTestimonials, colIndex) => renderColumn(columnTestimonials, colIndex, 'tablet', 800), )}

{mobileColumnsData.map((columnTestimonials, colIndex) => renderColumn(columnTestimonials, colIndex, 'mobile', 600), )}

)}

); }; export default KineticTestimonial; 57:T93b,'use client'; import * as React from 'react'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; import { cn } from '@/lib/utils'; type AvatarProps = React.ComponentPropsWithoutRef< typeof AvatarPrimitive.Root > & { variant?: 'close-friends' | 'normal' | 'none'; }; const Avatar = React.forwardRef< React.ComponentRef, AvatarProps >(({ className, variant = 'none', ...props }, ref) => { const ringClass = variant === 'close-friends' ? 'bg-linear-to-tr from-green-400 to-green-600' : variant === 'normal' ? 'bg-[conic-gradient(at_top_right,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433)]' : ''; return variant === 'none' ? ( ) : (

); }); Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; export { Avatar, AvatarImage, AvatarFallback }; 58:T7d2,import * as React from 'react'; import { cn } from '@/lib/utils'; function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-avatar",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-avatar","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-avatar"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L52",null,{"namespace":"@scrollxui","registryDependencies":["@scrollxui/avatar","@scrollxui/card"]}]]}],["$","$L53",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":["$","$L54",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@layer utilities {\n\t.animate-scroll-up {\n\t\tanimation: scroll-up-smooth linear infinite;\n\t}\n\t.animate-scroll-down {\n\t\tanimation: scroll-down-smooth linear infinite;\n\t}\n}\n\n@keyframes scroll-up-smooth {\n\t0% {\n\t\ttransform: translateY(0%);\n\t}\n\t100% {\n\t\ttransform: translateY(-50%);\n\t}\n}\n\n@keyframes scroll-down-smooth {\n\t0% {\n\t\ttransform: translateY(-50%);\n\t}\n\t100% {\n\t\ttransform: translateY(0%);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L55",null,{"files":[{"path":"components/ui/kinetic-testimonials.tsx","content":"$56","type":"registry:ui"},{"path":"components/ui/avatar.tsx","content":"$57","type":"registry:ui"},{"path":"components/ui/card.tsx","content":"$58","type":"registry:ui"},{"path":"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}","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]