Marquees
Component that supports infinite scrolling, allowing for the seamless display of text, images, or videos
Component that supports infinite scrolling, allowing for the seamless display of text, images, or videos
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)))' },},},},},};
1import { cn } from '@/lib/utils';23interface MarqueeProps {4className?: string;5reverse?: boolean;6pauseOnHover?: boolean;7children?: React.ReactNode;8vertical?: boolean;9repeat?: number;10[key: string]: any;11}1213export default function Marquee({14className,15reverse,16pauseOnHover = false,17children,18vertical = false,19repeat = 4,20...props21}: MarqueeProps) {22return (23<div24{...props}25className={cn(26'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',27{28'flex-row': !vertical,29'flex-col': vertical,30},31className32)}33>34{Array(repeat)35.fill(0)36.map((_, i) => (37<div38key={i}39className={cn('flex shrink-0 justify-around [gap:var(--gap)]', {40'animate-marquee flex-row': !vertical,41'animate-marquee-vertical flex-col': vertical,42'group-hover:[animation-play-state:paused]': pauseOnHover,43'[animation-direction:reverse]': reverse,44})}45>46{children}47</div>48))}49</div>50);51}