fix: make marquee loop infinitely

src/app/page.css

@@ -217,6 +217,9 @@ h1 {
 	background: var(--pink-accent);
 }
 
+/*
+	marquee stuff at the bottom
+*/
 .marquee {
 	width: 100%;
 	overflow: hidden;
@@ -233,19 +236,23 @@ h1 {
 	background: linear-gradient(to right, transparent, rgba(255, 214, 245, 0.3), transparent);
 }
 
-.marquee span {
-	display: inline-block;
-	padding-left: 100%;
-	animation: marquee 25s linear infinite;
+.marquee-track {
+	display: flex;
+	width: max-content;
+	animation: marquee-loop 10s linear infinite;
 }
 
-@keyframes marquee {
+.marquee-track span {
+	padding-right: 2rem;
+}
+
+@keyframes marquee-loop {
 	0% {
-		transform: translate(0, 0);
+		transform: translate3d(0, 0, 0);
 	}
 
 	100% {
-		transform: translate(-100%, 0);
+		transform: translate3d(-50%, 0, 0);
 	}
 }
 

src/app/page.tsx

@@ -14,6 +14,8 @@ function Content() {
 
 	const toggleModal = () => setIsOpen(!isOpen);
 
+	const marqueeText = "✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\\ ✧ ฅ/ᐠ. ̫ .ᐟ\\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\\ﾉ ✧";
+
 	return (
 		<>
 			<div className="main-frame">
@@ -61,9 +63,11 @@ function Content() {
 
 				<footer>
 					<div className="marquee">
-						<span>✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\ ✧ ฅ/ᐠ. ̫ .ᐟ\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\ﾉ ✧</span>
+						<div className="marquee-track">
+							<span>{marqueeText}</span>
+							<span>{marqueeText}</span>
+						</div>
 					</div>
-					{/* <p style={{ fontSize: '0.65rem', opacity: 0.5 }}>✼　 ҉ 　✼　 ҉ 　✼　 ҉ 　✼</p> */}
 				</footer>
 
 				{isOpen && (