Marquee**
An infinite scrolling component that can be used to display text, images, or videos.
utils
config
Demos
1. Horizontal
2. Vertical
3. 3D
About
The original idea of the <Marquee /> component is coming from magicui.design website.
Installation
Run the following command:
npx ever-ui-clx@0.2.1 add demo-marqueeYou can easily install the demos running the following commands:
npx ever-ui-clx@0.2.1 add demo-demos/motion/demo-marquee
npx ever-ui-clx@0.2.1 add demo-demos/motion/demo-marquee-vertical
npx ever-ui-clx@0.2.1 add demo-demos/motion/demo-marquee-3dUpdate tailwind.config.ts
Modify your tailwind.config.ts as follows:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
keyframes: {
marquee: {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"marqueeVertical": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
},
},
animation: {
marquee: "marquee var(--duration) linear infinite",
"marqueeVertical": "marqueeVertical var(--duration) linear infinite",
},
},
},
};Usage