Craft UI - Beautiful React Components

Marquee - Basic

The component is using svg icons as marquee content. If you want to use these icons you can visit svgl.app. Or you can copy and paste the file which contains all the icons from here.

Marquee - Reverse

Usage Guide

Install the clsx and tailwind-merge packages:

npm install clsx tw-merge

Next, add cn utility:

import { twMerge } from "tailwind-merge";
import { clsx, type ClassValue } from "clsx";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Copy and paste the following component source.

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface MarqueeProps {
    duration?: number;
    repeat?: number;
    className?: string;
    pauseOnHover?: boolean;
    children: React.ReactNode;
    direction?: "left" | "right";
    gap?: number;
}

export default function Marquee({
    children,
    className,
    duration = 20,
    repeat = 2,
    direction = "left",
    pauseOnHover = true,
    gap = 0
}: MarqueeProps) {
    return (
        <>
            <div
                className={cn(
                    "group relative flex overflow-hidden",
                    "before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-0 before:w-[50px] before:bg-gradient-to-r before:from-background before:to-transparent before:z-10",
                    "after:content-[''] after:absolute after:top-0 after:bottom-0 after:right-0 after:w-[50px] after:bg-gradient-to-l after:from-background after:to-transparent after:z-10",
                    "dark:before:from-background dark:after:from-background",
                    className
                )}
            >
                {Array(repeat)
                    .fill(0)
                    .map((_, index) => (
                        <div
                            key={index}
                            className={cn(
                                `marquee-${direction}`,
                                "w-max md:w-full flex shrink-0 items-center justify-around text-foreground dark:text-foreground",
                                {
                                    "group-hover:[animation-play-state:paused]": pauseOnHover
                                }
                            )}
                            style={{
                                gap: `${gap}px`,
                                ...(index === 1 && direction === "left"
                                    ? { marginLeft: `${gap}px` }
                                    : { marginRight: `${gap}px` })
                            }}
                        >
                            {children}
                        </div>
                    ))}
            </div>

            <style jsx>{`
                @keyframes marquee-left {
                    0% {
                        transform: translateX(0);
                    }
                    100% {
                        transform: translateX(-100%);
                    }
                }

                @keyframes marquee-right {
                    0% {
                        transform: translateX(-100%);
                    }
                    100% {
                        transform: translateX(0);
                    }
                }

                .marquee-left {
                    animation: marquee-left ${duration}s linear infinite;
                }

                .marquee-right {
                    animation: marquee-right ${duration}s linear infinite;
                }
            `}</style>
        </>
    );
}

Props

Prop	Type	Description	Default
children	ReactNode	The content to be rendered inside the component	_
className	string	Custom class to apply to the component.	_
duration	number	Duration of the animation in seconds	20
repeat	number	Number of times the animation should repeat.	2
direction	"left" or "right"	Direction of the animation.	"left"
pauseOnHover	boolean	Whether the animation pauses on hover.	true
gap	number	Space between the animated items in pixels.	0