remarqueeble/dist/lite.css

Custom element tribute to the cursed glory of marquee.

/*! remarqueeble v0.6.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
.re-marquee {
	--re-marquee-duration: 20s;
	--re-marquee-play-state: running;
	--re-marquee-timing-function: linear;

	display: block;
	overflow: hidden;
	white-space: nowrap;
}

.re-marquee__track {
	animation: re-marquee-scroll var(--re-marquee-duration)
		var(--re-marquee-timing-function) infinite;
	animation-play-state: var(--re-marquee-play-state);
	display: inline-block;
	min-inline-size: max-content;
	padding-inline-start: 100%;
	will-change: transform;
}

.re-marquee--reverse > .re-marquee__track {
	animation-direction: reverse;
}

.re-marquee--paused {
	--re-marquee-play-state: paused;
}

.re-marquee--pause-on-hover:hover {
	--re-marquee-play-state: paused;
}

.re-marquee--vertical {
	block-size: 12rem;
	white-space: normal;
}

.re-marquee--vertical > .re-marquee__track {
	animation-name: re-marquee-scroll-y;
	display: inline-flex;
	flex-direction: column;
	min-inline-size: auto;
	padding-inline-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.re-marquee {
		overflow: auto;
	}

	.re-marquee__track {
		animation: none;
		padding-inline-start: 0;
		transform: none;
		will-change: auto;
	}
}

@keyframes re-marquee-scroll {
	from {
		transform: translateX(var(--re-marquee-start-pos, 0));
	}

	to {
		transform: translateX(var(--re-marquee-end-pos, -100%));
	}
}

@keyframes re-marquee-scroll-y {
	from {
		transform: translateY(var(--re-marquee-start-pos, 100vh));
	}

	to {
		transform: translateY(var(--re-marquee-end-pos, -100%));
	}
}