frutjam/dist/components/marquee.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.marquee-fade{position:relative;&:after,&:before{content:"";pointer-events:none;position:absolute;inset-block:0;z-index:1;width:4rem}&:before{inset-inline-start:0;background:linear-gradient(to right,var(--color-base),transparent)}&:after{inset-inline-end:0;background:linear-gradient(to left,var(--color-base),transparent)}}.marquee-track{display:flex;flex-shrink:0;gap:var(--marquee--gap);min-width:100%;animation:marquee-scroll var(--marquee--duration) linear infinite;animation-play-state:var(--marquee--play-state);animation-direction:var(--marquee--direction);@media (prefers-reduced-motion:reduce){animation-play-state:paused}}.marquee{--marquee--duration:20s;--marquee--gap:1rem;--marquee--play-state:running;--marquee--direction:normal;--marquee--axis:calc(-100% - var(--marquee--gap)) 0%;display:flex;gap:var(--marquee--gap);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.marquee-vertical{flex-direction:column;--marquee--axis:0% calc(-100% - var(--marquee--gap));:where(&) :where(.marquee-track){flex-direction:column;min-height:100%;min-width:unset}}.marquee-fast{--marquee--duration:10s}.marquee-normal{--marquee--duration:20s}.marquee-pause{&:hover{--marquee--play-state:paused}}.marquee-reverse{--marquee--direction:reverse}.marquee-slow{--marquee--duration:40s}@keyframes marquee-scroll{0%{translate:0 0}to{translate:var(--marquee--axis)}}