Add cool animations to title

Author: foxeddev

app/globals.css

@@ -83,6 +83,16 @@ h1 {
   font-weight: 800;
 }
 
+h1 .char {
+  transition: 0.1s;
+  text-shadow: 0 0 0 rgba(0, 0, 0, 0.6);
+}
+
+h1 .char:hover {
+  transform: translate(0, -20px);
+  text-shadow: 0 20px 20px rgba(0, 0, 0, 0.6);
+}
+
 @media screen and (max-width: 900px) {
   h1 {
     font-size: 96;

app/page.tsx

@@ -12,6 +12,7 @@ import toast from "react-hot-toast";
 import headerIconStyles from "@/styles/headerIcon.module.css";
 import titleStyles from "@/styles/title.module.css";
 import cardStyles from "@/styles/card.module.css";
+import SplitType from "split-type";
 
 export default function Home() {
   const copy = (text: string) => {
@@ -28,7 +29,13 @@ export default function Home() {
           <Logo className={headerIconStyles.icon} />
           <div className={titleStyles.title}>
             <p className={titleStyles.tagline}>Hi, I&apos;m</p>
-            <h1>FOXED</h1>
+            <h1
+              ref={(el) => {
+                if (el) new SplitType(el, { split: "chars" });
+              }}
+            >
+              FOXED
+            </h1>
             <p className={titleStyles.subtitle}>
               I&apos;m a Minecraft data pack creator and web developer from
               Germany.