Marquee Card

Docs

Marquee Card

Use animation to marquee cards.

Installation

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

Prop	Type	Description
vertical	boolean	Should the marquee scroll horizontally or vertically.
repeat	number	The number of times to repeat the children.
reverse	boolean	Reverse the marquee direction.
pauseOnHover	boolean	Pause the marquee animation on hover.
speed	number	the speed of the marquee animation.
style	React.CSSProperties	Additional style for the Dot.
gradient	boolean	Whether to show the gradient or not
gradientWidth	number \| string	The width of the gradient on either side

Counter Card Profile Card

Marquee Card

Use animation to marquee cards.

Installation

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

Prop	Type	Description
vertical	boolean	Should the marquee scroll horizontally or vertically.
repeat	number	The number of times to repeat the children.
reverse	boolean	Reverse the marquee direction.
pauseOnHover	boolean	Pause the marquee animation on hover.
speed	number	the speed of the marquee animation.
style	React.CSSProperties	Additional style for the Dot.
gradient	boolean	Whether to show the gradient or not
gradientWidth	number \| string	The width of the gradient on either side

Marquee Card

Installation

Update tailwind.config.js

Copy and paste the Marquee Card code into your project.

API Reference

Props

Marquee Card

Installation

Update tailwind.config.js

Copy and paste the Marquee Card code into your project.

API Reference

Props

Update `tailwind.config.js`

Update `tailwind.config.js`