home page animations

dickeyy · Jun 26, 2024 · 307ca3b · 307ca3b
1 parent 8658b06
commit 307ca3b
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 20 deletions.
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -9,8 +9,10 @@ import posthog from "posthog-js";
 import { useEffect } from "react";
 import Navbar from "../components/navbar";
 import { Badge } from "@/components/ui/badge";
+import { motion } from "framer-motion";
+import TypingText from "@/components/typing-text";
 
-export default function Page() {
+export default function HomePage() {
     const { isLoaded, isSignedIn } = useAuth();
 
     useEffect(() => {
@@ -22,41 +24,92 @@ export default function Page() {
 
     return (
         <div className="flex min-h-screen flex-col items-center justify-center overflow-y-hidden ">
-            <Navbar active="home" />
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, ease: "easeInOut", delay: 0.75 }}
+                className="sticky top-4 w-fit"
+            >
+                <Navbar active="home" />
+            </motion.div>
             <div className="flex w-full max-w-[35rem] flex-1 flex-grow flex-col items-center justify-center gap-4 px-4">
-                <Badge
-                    variant="default"
-                    className="mb-4 h-fit gap-1 rounded-full border-2 border-dotted border-green-500 bg-green-500/10 px-4 py-0 text-[14px] text-green-500 hover:bg-green-500/30"
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, ease: "easeInOut", delay: 0.25 }}
                 >
-                    Beta
-                </Badge>
-                <h1 className="text-center font-serif text-5xl font-extrabold">
-                    Diary<span className="text-foreground/20 text-[18px] italic">.</span>
-                    <Link
-                        href="https://kyle.so"
-                        target="_blank"
-                        className="text-foreground/20 hover:text-foreground text-[18px] italic transition-all duration-150 hover:underline"
-                        onClick={() => posthog.capture("home_page_portfolio_link_click")}
+                    <Badge
+                        variant="default"
+                        className="mb-4 h-fit gap-1 rounded-full border-2 border-dotted border-green-500 bg-green-500/10 px-4 py-0 text-[14px] text-green-500 hover:bg-green-500/30"
                     >
-                        kyle.so
-                    </Link>
-                </h1>
+                        Beta
+                    </Badge>
+                </motion.div>
+                <ExpandingTitle />
                 <p className="text-foreground/60 text-center text-sm">
                     A private place to keep track of your thoughts. <br />
                     All entries are encrypted at rest and in transit.
                 </p>
 
-                <div className="mt-8 flex w-full flex-col items-center justify-center gap-4 sm:flex-row">
+                <motion.div
+                    className="mt-8 flex w-full flex-col items-center justify-center gap-4 sm:flex-row"
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, ease: "easeInOut", delay: 0.25 }}
+                >
                     <Button className="w-full" asChild>
                         <Link href="/sign-up">Get Started</Link>
                     </Button>
                     <Button variant={"outline"} className="w-full" asChild>
                         <Link href="/sign-in">Sign in</Link>
                     </Button>
-                </div>
+                </motion.div>
             </div>
 
-            <Footer />
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, ease: "easeInOut", delay: 0.75 }}
+                className="w-screen"
+            >
+                <Footer />
+            </motion.div>
         </div>
     );
 }
+
+const ExpandingTitle = () => {
+    const expandVariants = {
+        hidden: { width: 0, opacity: 0 },
+        visible: {
+            width: "auto",
+            opacity: 1,
+            transition: {
+                duration: 0.5,
+                delay: 1.25
+            }
+        }
+    };
+
+    return (
+        <h1 className="flex items-baseline justify-center text-center font-serif text-5xl font-extrabold">
+            <span>Diary</span>
+            <motion.span
+                className="text-foreground/20 overflow-hidden whitespace-nowrap text-[18px] italic"
+                variants={expandVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                <span className="mr-1">.</span>
+                <Link
+                    href="https://kyle.so"
+                    target="_blank"
+                    className="hover:text-foreground transition-all duration-150 hover:underline"
+                    onClick={() => posthog.capture("home_page_portfolio_link_click")}
+                >
+                    kyle.so
+                </Link>
+            </motion.span>
+        </h1>
+    );
+};
diff --git a/apps/web/bun.lockb b/apps/web/bun.lockb
diff --git a/apps/web/components/typing-text.tsx b/apps/web/components/typing-text.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { motion, stagger } from "framer-motion";
+
+export default function TypingText({
+    text,
+    className,
+    speed = 1
+}: {
+    text: string;
+    className?: string;
+    speed?: number;
+}) {
+    const characters = text.split("");
+
+    const container = {
+        hidden: { opacity: 0 },
+        visible: (i = 1) => ({
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1 / speed,
+                delayChildren: (i * 0.1) / speed
+            }
+        })
+    };
+
+    const child = {
+        visible: {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            transition: {
+                type: "spring",
+                damping: 12,
+                stiffness: 100,
+                duration: 0.1 / speed
+            }
+        },
+        hidden: {
+            opacity: 0,
+            x: -20,
+            y: 10,
+            transition: {
+                type: "spring",
+                damping: 12,
+                stiffness: 100,
+                duration: 0.1 / speed
+            }
+        }
+    };
+
+    return (
+        <motion.span variants={container} initial="hidden" animate="visible" className={className}>
+            {characters.map((char, index) => (
+                <motion.span key={char + "-" + index} variants={child}>
+                    {char}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.30.10",
+    "framer-motion": "^11.2.12",
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
     "lucide-react": "^0.379.0",