51: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"] 52: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"] 53: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"] 54: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; 55: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 }; 56: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, }; 4d:["$","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","@radix-ui/react-avatar",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-avatar","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":"@radix-ui/react-avatar"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@scrollxui/avatar","@scrollxui/card"]}]]}],["$","$L52",null,{"sourceUrl":"https://www.scrollxui.dev/registry/kinetic-testimonials.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/kinetic-testimonials","itemId":"@scrollxui/kinetic-testimonials"}],["$","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"}],["$","$L53",null,{"files":[{"path":"components/ui/kinetic-testimonials.tsx","content":"$54","type":"registry:ui"},{"path":"components/ui/avatar.tsx","content":"$55","type":"registry:ui"},{"path":"components/ui/card.tsx","content":"$56","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"}]}]]}],"$L57"]}]

Kinetic Testimonials

Installation

Files

components

lib

Styles