From 607e378eb98dcfc4b649cb79cf55710e73a304cc Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@jger.nl>
Date: Thu, 26 Mar 2026 22:53:00 +0100
Subject: [PATCH] Add hero name fill animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SVG text background of "Jonathan" in outline that slowly fills in on
page load. Uses CSS fill-opacity animation (0 → 1 over 2s, 0.3s delay)
so the stroke appears immediately and the fill bleeds in gradually.

Light mode: zinc-200/300. Dark mode: zinc-800. Both stay recessive so
the effect is atmospheric, not distracting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/globals.css     | 17 +++++++++++++++++
 components/Hero.tsx | 23 ++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index 1914c40..1daa215 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,3 +9,20 @@
 body {
   font-family: var(--font-sans);
 }
+
+@keyframes name-fill-in {
+  from { fill-opacity: 0; }
+  to   { fill-opacity: 1; }
+}
+
+.name-outline-fill {
+  fill: #e4e4e7;           /* zinc-200 */
+  stroke: #d4d4d8;         /* zinc-300 */
+  fill-opacity: 0;
+  animation: name-fill-in 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
+}
+
+.dark .name-outline-fill {
+  fill: #27272a;            /* zinc-800 */
+  stroke: #27272a;          /* zinc-800 */
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
index a7074b8..2246c60 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -2,7 +2,28 @@ import Link from 'next/link'
 
 export default function Hero() {
   return (
-    <section className="mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+    <section className="relative overflow-hidden mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+
+      {/* Background name — outline fills in on load */}
+      <svg
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 h-full w-full"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <text
+          x="50%"
+          y="55%"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          fontFamily="var(--font-geist-sans), sans-serif"
+          fontSize="22vw"
+          fontWeight="700"
+          strokeWidth="1"
+          className="name-outline-fill"
+        >
+          Jonathan
+        </text>
+      </svg>
 
       {/* Eyebrow label */}
       <div className="mb-10 flex items-center gap-4">