From 79c47a3632a05d7453c447a66d6700f0c257e6bb Mon Sep 17 00:00:00 2001
From: neru <neru@neru.rip>
Date: Sun, 31 May 2026 11:43:58 -0300
Subject: [PATCH] fix: make marquee loop infinitely

---
 src/app/page.css | 21 ++++++++++++++-------
 src/app/page.tsx |  8 ++++++--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/page.css b/src/app/page.css
index 5c6185a..ecd1631 100644
--- a/src/app/page.css
+++ b/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);
 	}
 }
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8d49622..49bf1ac 100644
--- a/src/app/page.tsx
+++ b/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 && (