Add use-scramble dependency and refactor link components

- Added `use-scramble` package to enhance text animation effects.
- Refactored `Link` component to utilize `use-scramble` for interactive text scrambling on hover.
- Updated `Footer` and `Header` components to use the new `Link` component for navigation.
- Introduced metadata in the home page for improved SEO.

Author: valebearzotti

package.json

@@ -13,7 +13,8 @@
     "ogl": "^1.0.11",
     "prettier": "^3.5.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "use-scramble": "^2.2.15"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

pnpm-lock.yaml

@@ -1,4 +1,10 @@
 import { HeroASCII } from "@/components/hero";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Home"
+};
 
 export default function Home() {
   return (

src/app/page.tsx

@@ -1,7 +1,7 @@
 import SpiralLogo from "@/assets/spiral.svg";
 import Image from "next/image";
-import Link from "next/link";
-
+import NextLink from "next/link";
+import { Link } from "../link";
 export const Footer = () => {
   return (
     <div className="flex flex-col-reverse md:flex-row justify-between items-center m-4 dashed-top dashed-bottom after:hidden md:after:block md:h-[84px]">
@@ -15,14 +15,17 @@ export const Footer = () => {
       <div className="flex items-center gap-8 dashed-left before:hidden lg:before:block h-full lg:px-10">
         <div className="flex flex-col md:flex-row items-center gap-2 py-8 md:py-0">
           <span className="text-white font-mono text-sm flex gap-4">
-            <Link href="/" className="uppercase text-white font-mono text-sm">
+            <NextLink
+              href="/"
+              className="uppercase text-white font-mono text-sm"
+            >
               <Image
                 src={SpiralLogo}
                 alt="Spiral Logo"
                 width={15}
                 height={18}
               />
-            </Link>
+            </NextLink>
             <span>
               Made by <Link href="https://spiraldb.com">Spiral</Link>.
             </span>

src/components/layout/footer.tsx

@@ -1,19 +1,20 @@
 import Logo from "@/assets/logo.svg";
 import Image from "next/image";
-import Link from "next/link";
+import NextLink from "next/link";
+import { Link } from "../link";
 
 export const Header = () => {
   return (
     <div className="flex justify-between items-center m-4 mb-2 dashed-top dashed-bottom h-[108px]">
-      <Link
+      <NextLink
         href="/"
         className="flex items-center gap-4 dashed-right h-full px-8"
       >
         <Image src={Logo} alt="Logo" width={44} height={44} />
         <h1 className="text-4xl font-funnel text-white hidden md:inline-block">
           Vortex
         </h1>
-      </Link>
+      </NextLink>
       <div className="flex items-center gap-8 flex-1 justify-end md:flex-none dashed-left before:hidden md:before:block h-full px-10">
         <Link
           href="/"

src/components/layout/header.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import NextLink from "next/link";
+import { useScramble } from "use-scramble";
+
+interface LinkProps extends React.ComponentProps<typeof NextLink> {
+  children: string;
+}
+
+export const Link = ({ href, children, ...props }: LinkProps) => {
+  const { ref, replay } = useScramble({
+    text: children,
+    speed: 0.5,
+    tick: 1,
+    step: 1,
+    scramble: 4,
+    seed: 0,
+    playOnMount: false
+  });
+
+  return (
+    <NextLink href={href} ref={ref} onMouseOver={replay} {...props}>
+      {children}
+    </NextLink>
+  );
+};