Docs
Marquee Card

Marquee Card

Use animation to marquee cards.

Loading...

Installation

Copy and paste the cn util code into your project.

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

Update tailwind.config.js

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
         "marquee-x": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-y": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      }
      animation: {
        "marquee-horizontal": "marquee-x var(--duration) infinite linear",
        "marquee-vertical": "marquee-y var(--duration) linear infinite",
        },
    },
  },
}

Copy and paste the Marquee Card code into your project.

API Reference

Props

PropTypeDescription
verticalbooleanShould the marquee scroll horizontally or vertically.
repeatnumberThe number of times to repeat the children.
reversebooleanReverse the marquee direction.
pauseOnHoverbooleanPause the marquee animation on hover.
speednumberthe speed of the marquee animation.
styleReact.CSSPropertiesAdditional style for the Dot.
gradientbooleanWhether to show the gradient or not
gradientWidthnumber | stringThe width of the gradient on either side
Twitter DisplayProfile Card