Overlays

Infinite Moving Cards

#ticker#marquee#scrolling

“The components are absolutely stunning. Our design system is now 10x better.”
S
Sarah Chen
Lead Designer at Linear
“Finally a library that doesn't look generic. Ships fast and looks premium.”
A
Alex Kim
Founder at Vercel
“I replaced 3 different libraries with this one. Worth every minute.”
M
Marcus Webb
Senior Engineer at Stripe
“The animation quality is unmatched. My clients are blown away every time.”
P
Priya Sharma
Freelance Developer
“Copy-paste components that actually look good out of the box? Dream come true.”
T
Tom Rivera
CTO at Raycast

“Copy-paste components that actually look good out of the box? Dream come true.”
T
Tom Rivera
CTO at Raycast
“The animation quality is unmatched. My clients are blown away every time.”
P
Priya Sharma
Freelance Developer
“I replaced 3 different libraries with this one. Worth every minute.”
M
Marcus Webb
Senior Engineer at Stripe
“Finally a library that doesn't look generic. Ships fast and looks premium.”
A
Alex Kim
Founder at Vercel
“The components are absolutely stunning. Our design system is now 10x better.”
S
Sarah Chen
Lead Designer at Linear

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/infinite-moving-cards

Package Dependencies

Install the npm packages used by this component source.

npm install clsx tailwind-merge

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { useRef, useEffect, useState } from "react";
import { cn } from "@/lib/utils";

interface MovingCardItem {
    quote: string;
    name: string;
    title?: string;
}

interface InfiniteMovingCardsProps {
    items: MovingCardItem[];
    direction?: "left" | "right";
    /** Speed multiplier in seconds per revolution. Default: 40 */
    speed?: number;
    pauseOnHover?: boolean;
    className?: string;
}

export function InfiniteMovingCards({
    items,
    direction = "left",
    speed = 40,
    pauseOnHover = true,
    className,
}: InfiniteMovingCardsProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const scrollerRef = useRef<HTMLUListElement>(null);
    const [started, setStarted] = useState(false);

    useEffect(() => {
        if (!scrollerRef.current) return;
        // Clone items for seamless infinite loop
        const existing = Array.from(scrollerRef.current.children);
        existing.forEach((child) => {
            scrollerRef.current!.appendChild(child.cloneNode(true));
        });
        queueMicrotask(() => setStarted(true));
    }, []);

    return (
        <div
            ref={containerRef}
            className={cn(
                "relative w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_10%,white_90%,transparent)]",
                className
            )}
        >
            <ul
                ref={scrollerRef}
                className={cn(
                    "flex min-w-full gap-4 py-4 w-max flex-nowrap",
                    started && "animate-[marquee_var(--duration)_linear_infinite]",
                    direction === "right" && "[animation-direction:reverse]",
                    pauseOnHover && "hover:[animation-play-state:paused]"
                )}
                style={{ "--duration": `${speed}s` } as React.CSSProperties}
            >
                {items.map((item, i) => (
                    <li
                        key={i}
                        className="w-[350px] max-w-full shrink-0 rounded-2xl border border-white/10 bg-zinc-900/70 px-6 py-5 backdrop-blur-sm"
                    >
                        <blockquote>
                            <p className="text-sm text-zinc-200 leading-relaxed mb-4">
                                &ldquo;{item.quote}&rdquo;
                            </p>
                            <footer className="flex items-center gap-3">
                                <span className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 shrink-0 flex items-center justify-center text-white text-xs font-bold">
                                    {item.name[0]}
                                </span>
                                <div>
                                    <p className="text-sm font-semibold text-white">{item.name}</p>
                                    {item.title && <p className="text-xs text-zinc-500">{item.title}</p>}
                                </div>
                            </footer>
                        </blockquote>
                    </li>
                ))}
            </ul>
        </div>
    );
}

"use client"; import { useRef, useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface MovingCardItem { quote: string; name: string; title?: string; } interface InfiniteMovingCardsProps { items: MovingCardItem[]; direction?: "left" | "right"; /** Speed multiplier in seconds per revolution. Default: 40 */ speed?: number; pauseOnHover?: boolean; className?: string; } export function InfiniteMovingCards({ items, direction = "left", speed = 40, pauseOnHover = true, className, }: InfiniteMovingCardsProps) { const containerRef = useRef<HTMLDivElement>(null); const scrollerRef = useRef<HTMLUListElement>(null); const [started, setStarted] = useState(false); useEffect(() => { if (!scrollerRef.current) return; // Clone items for seamless infinite loop const existing = Array.from(scrollerRef.current.children); existing.forEach((child) => { scrollerRef.current!.appendChild(child.cloneNode(true)); }); queueMicrotask(() => setStarted(true)); }, []); return ( <div ref={containerRef} className={cn( "relative w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_10%,white_90%,transparent)]", className )} > <ul ref={scrollerRef} className={cn( "flex min-w-full gap-4 py-4 w-max flex-nowrap", started && "animate-[marquee_var(--duration)_linear_infinite]", direction === "right" && "[animation-direction:reverse]", pauseOnHover && "hover:[animation-play-state:paused]" )} style={{ "--duration": `${speed}s` } as React.CSSProperties} > {items.map((item, i) => ( <li key={i} className="w-[350px] max-w-full shrink-0 rounded-2xl border border-white/10 bg-zinc-900/70 px-6 py-5 backdrop-blur-sm" > <blockquote> <p className="text-sm text-zinc-200 leading-relaxed mb-4"> “{item.quote}” </p> <footer className="flex items-center gap-3"> <span className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 shrink-0 flex items-center justify-center text-white text-xs font-bold"> {item.name[0]} </span> <div> <p className="text-sm font-semibold text-white">{item.name}</p> {item.title && <p className="text-xs text-zinc-500">{item.title}</p>} </div> </footer> </blockquote> </li> ))} </ul> </div> ); }