@jack
I've never seen anything like this before. It's amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jane
I'm at a loss for words. This is amazing. I love it.
@jenny
I'm at a loss for words. This is amazing. I love it.
@james
I'm at a loss for words. This is amazing. I love it.
@jane
I'm at a loss for words. This is amazing. I love it.
@jenny
I'm at a loss for words. This is amazing. I love it.
@james
I'm at a loss for words. This is amazing. I love it.
@jane
I'm at a loss for words. This is amazing. I love it.
@jenny
I'm at a loss for words. This is amazing. I love it.
@james
I'm at a loss for words. This is amazing. I love it.
@jane
I'm at a loss for words. This is amazing. I love it.
@jenny
I'm at a loss for words. This is amazing. I love it.
@james
I'm at a loss for words. This is amazing. I love it.
Installation
Run the following command:
npx magicui-cli add marqueeUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
marquee: "marquee var(--duration) linear infinite",
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
},
keyframes: {
marquee: {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"marquee-vertical": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
},
},
},
},
};Examples
Vertical
@jack
I've never seen anything like this before. It's amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jack
I've never seen anything like this before. It's amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
@jill
I don't know what to say. I'm speechless. This is amazing.
@john
I'm at a loss for words. This is amazing. I love it.
3D
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | The class name to apply to the component. | |
| reverse | boolean | false | Whether or not to reverse the direction of the marquee. |
| pauseOnHover | boolean | false | Whether or not to pause the marquee when the user hovers over the component. |
| vertical | boolean | false | Whether or not to display the marquee vertically. |
| children | node | The content to display in the marquee. | |
| repeat | number | 1 | The number of times to repeat the content. |