An infinite scrolling component that can be used to display text, images, or videos.
The original idea of the <Marquee /> component is coming from magicui.design website.
<Marquee />
Run the following command:
npx ever-ui-clx@0.2.1 add demo-marquee
You 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-3d
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", }, }, }, };