Docs

Infinite Ribbon

A dynamic and customizable sliding ribbon component that enhances UI experiences with smooth scrolling animations.

Build fast, responsive, and beautiful interfaces with ready-to-use components. Designed for developers who demand the best.

Installation

Install dependencies

npm install

npm install clsx tailwind-merge

Add utils file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Add the following code in your tailwind.config.js file

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "infinite-ribbon": 'infinite-ribbon var(--ribbon-duration) linear infinite',
        "infinite-ribbon-reverse": 'infinite-ribbon-reverse var(--ribbon-duration) linear infinite',
      },
      keyframes: {
        "infinite-ribbon": {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-100%)' },
        },
        "infinite-ribbon-reverse": {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
    },
  },
};

Copy the source code

infinite-ribbon.tsx

import * as React from "react";
import { cn } from "@/lib/utils";
 
interface InfiniteRibbonProps {
  repeat?: number;
  duration?: number;
  reverse?: boolean;
  rotation?: number;
  children: React.ReactNode;
  className?: string;
}
 
export default function InfiniteRibbon({
  repeat = 5,
  duration = 10,
  reverse = false,
  rotation = 0,
  children,
  className,
}: InfiniteRibbonProps) {
  const animationClass = reverse
    ? "animate-infinite-ribbon-reverse"
    : "animate-infinite-ribbon";
 
  return (
    <div
      className={cn(
        "overflow-hidden max-w-full bg-zinc-100 dark:bg-zinc-800 text-black dark:text-white py-1 text-lg",
        className
      )}
      style={{ transform: `rotate(${rotation}deg)` }}
    >
      <div
        className={cn("whitespace-nowrap flex", animationClass)}
        style={{ "--ribbon-duration": `${duration}s` } as React.CSSProperties}
      >
        {Array.from({ length: repeat }, (_, index) => (
          <span key={index} className="inline-block mr-8 select-none">
            {children}
          </span>
        ))}
      </div>
    </div>
  );
}

Props

Prop	Type	Description	Default
repeat	Number	Defines how many times the content is repeated in the sliding animation.	5
duration	Number	The duration of the sliding animation in seconds.	10
reverse	Boolean	Reverses the direction of the sliding animation if set to "true".	false
rotation	Number	Rotates the entire sliding ribbon by a specified angle (in degrees).	0
children	React.ReactNode	The content inside the sliding ribbon.	-
className	String	Additional custom classes for styling the component.	-