Marquee

An infinite scrolling component that can be used to display text, images, or videos.

Usage

Code

import React from "react";


export interface MarqueeProps {
  children: React.ReactNode
}


export const Marquee: React.FC<MarqueeProps> = ({
  children
}) => {
  return (
    <div className="w-full overflow-hidden sm:mt-24 mt-10 z-10">
      <div className="relative flex max-w-[90vw] overflow-hidden py-5">
        <div className="flex w-max animate-marquee [--duration:30s]">
          {children}
          {children}
        </div>
      </div>
    </div>
  )
};

Update tailwind.config.js

Add the following animations to your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration, 30s) linear infinite",
      },
      keyframes: {
         marquee: {
          to: { transform: 'translateX(-50%)' }
        },
      },
    },
  },
};

Props

AttributeTypeDescriptionDefault
childrenReact.ReactNotechildren componentundefined
Animated CursorLines