From 90ffa3c98add94f3eea169b2b198f375e0171099 Mon Sep 17 00:00:00 2001
From: Jack Tench <79285604+JackTench@users.noreply.github.com>
Date: Mon, 3 Nov 2025 17:43:44 +0000
Subject: [PATCH 1/5] [berlix] Install text scramble

---
 src/components/ui/text-scramble.tsx | 62 +++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/ui/text-scramble.tsx

diff --git a/src/components/ui/text-scramble.tsx b/src/components/ui/text-scramble.tsx
new file mode 100644
index 0000000..e302061
--- /dev/null
+++ b/src/components/ui/text-scramble.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { motion } from "framer-motion";
+
+interface TextScrambleProps {
+  children: string;
+  speed?: number;
+  characterSet?: string;
+  className?: string;
+}
+
+const DEFAULT_CHARS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+function getRandomChar(charSet: string) {
+  return charSet[Math.floor(Math.random() * charSet.length)];
+}
+
+export const TextScramble = ({
+  children,
+  speed = 50,
+  characterSet = DEFAULT_CHARS,
+  className,
+  ...motionProps
+}: TextScrambleProps) => {
+  const [text, setText] = useState(children);
+
+  useEffect(() => {
+    let step = 0;
+    const interval = setInterval(() => {
+      let scrambled = "";
+
+      for (let i = 0; i < children.length; i++) {
+        if (i < step) {
+          scrambled += children[i];
+        } else if (children[i] === " ") {
+          scrambled += " ";
+        } else {
+          scrambled += getRandomChar(characterSet);
+        }
+      }
+
+      setText(scrambled);
+      step++;
+
+      if (step > children.length) {
+        clearInterval(interval);
+        setText(children);
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [children, speed, characterSet]);
+
+  return (
+    <motion.span className={className} {...motionProps}>
+      {text}
+    </motion.span>
+  );
+};

From d393f4b76b850f2ff79b218cb2b0925077d9070d Mon Sep 17 00:00:00 2001
From: Jack Tench <79285604+JackTench@users.noreply.github.com>
Date: Mon, 3 Nov 2025 17:51:32 +0000
Subject: [PATCH 2/5] Add hero component

---
 src/app/home.tsx                      |  4 +++-
 src/components/libresplit/AppHero.tsx | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/components/libresplit/AppHero.tsx

diff --git a/src/app/home.tsx b/src/app/home.tsx
index 003fabb..a04dc54 100644
--- a/src/app/home.tsx
+++ b/src/app/home.tsx
@@ -1,8 +1,10 @@
 import { AppGitHubReadme } from "@/components/libresplit/AppGitHubReadme";
+import { AppHero } from "@/components/libresplit/AppHero";
 
 export function Home() {
   return (
-    <div>
+    <div className="flex w-screen flex-col items-center justify-center">
+      <AppHero />
       <AppGitHubReadme />
     </div>
   );
diff --git a/src/components/libresplit/AppHero.tsx b/src/components/libresplit/AppHero.tsx
new file mode 100644
index 0000000..3b84fb0
--- /dev/null
+++ b/src/components/libresplit/AppHero.tsx
@@ -0,0 +1,12 @@
+import { TextScramble } from "../ui/text-scramble";
+
+export function AppHero() {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <p className="text-bold text-6xl">LibreSplit</p>
+      <TextScramble characterSet="_" speed={28}>
+        Free speedrun timer with auto splitting and load removal for Linux.
+      </TextScramble>
+    </div>
+  );
+}

From 3830e60651c97c8873a2498dd1644fdc657df3da Mon Sep 17 00:00:00 2001
From: Jack Tench <79285604+JackTench@users.noreply.github.com>
Date: Mon, 3 Nov 2025 17:53:42 +0000
Subject: [PATCH 3/5] Add image to hero

---
 src/components/libresplit/AppHero.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/libresplit/AppHero.tsx b/src/components/libresplit/AppHero.tsx
index 3b84fb0..85171aa 100644
--- a/src/components/libresplit/AppHero.tsx
+++ b/src/components/libresplit/AppHero.tsx
@@ -3,6 +3,11 @@ import { TextScramble } from "../ui/text-scramble";
 export function AppHero() {
   return (
     <div className="flex flex-col items-center justify-center">
+      <img
+        src="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/assets/libresplit.svg"
+        alt="LibreSplit"
+        className="w-64"
+      />
       <p className="text-bold text-6xl">LibreSplit</p>
       <TextScramble characterSet="_" speed={28}>
         Free speedrun timer with auto splitting and load removal for Linux.

From 7bc4a8e9be4a38524a442e5799f56c0306d2cebf Mon Sep 17 00:00:00 2001
From: Jack Tench <79285604+JackTench@users.noreply.github.com>
Date: Mon, 3 Nov 2025 17:55:02 +0000
Subject: [PATCH 4/5] Fix centering on main page

---
 src/app/home.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/home.tsx b/src/app/home.tsx
index a04dc54..c11e654 100644
--- a/src/app/home.tsx
+++ b/src/app/home.tsx
@@ -3,7 +3,7 @@ import { AppHero } from "@/components/libresplit/AppHero";
 
 export function Home() {
   return (
-    <div className="flex w-screen flex-col items-center justify-center">
+    <div className="flex flex-col items-center justify-center">
       <AppHero />
       <AppGitHubReadme />
     </div>

From 91c4749ca37c7113af5065e4e32443de7e1d7148 Mon Sep 17 00:00:00 2001
From: Jack Tench <79285604+JackTench@users.noreply.github.com>
Date: Mon, 3 Nov 2025 17:56:42 +0000
Subject: [PATCH 5/5] Fix centering on nav bar

---
 src/components/libresplit/AppNav.tsx | 30 +++++++++++++++-------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/libresplit/AppNav.tsx b/src/components/libresplit/AppNav.tsx
index fee0ea7..88a6061 100644
--- a/src/components/libresplit/AppNav.tsx
+++ b/src/components/libresplit/AppNav.tsx
@@ -15,21 +15,23 @@ export function AppNav() {
         <LeftNav />
       </div>
 
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link to="/">Home</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
+      <div className="absolute left-1/2 -translate-x-1/2">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link to="/">Home</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
 
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link to="/converter">Converter</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link to="/converter">Converter</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
 
       <div className="flex items-center">
         <RightNav />