feat: hero name glitch effect on homepage

Chromatic aberration glitch on h1.hero-name. Gravatar moved from
markdown shortcode to template. JS fires randomly every 4-11s.
Respects prefers-reduced-motion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 171 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 2455103..e5ebf14 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1993,3 +1993,68 @@ html.theme-light .prose-invert .cta-block a {
   font-family: monospace;
   display: block;
 }
+
+/* Hero name glitch effect */
+.hero-name {
+  font-family: var(--font-head);
+  font-size: clamp(3rem, 12vw, 7rem);
+  font-weight: 800;
+  line-height: 0.95;
+  letter-spacing: -0.04em;
+  color: var(--text);
+  text-shadow: 0 0 80px rgba(168,85,247,0.18), 0 0 120px rgba(168,85,247,0.08);
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+html.theme-light .hero-name {
+  text-shadow: 0 0 80px rgba(124,58,237,0.12), 0 0 120px rgba(124,58,237,0.05);
+}
+
+.hero-name::before,
+.hero-name::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.hero-name::before { color: #ff2b6d; }
+.hero-name::after  { color: #00e5ff; }
+
+.hero-name.is-glitching::before {
+  opacity: 0.8;
+  animation: glitch-red 0.45s steps(3) forwards;
+}
+.hero-name.is-glitching::after {
+  opacity: 0.8;
+  animation: glitch-cyn 0.45s steps(3) forwards;
+}
+
+@keyframes glitch-red {
+  0%   { transform: translate(-5px, 1px);  clip-path: inset(8% 0 78% 0); }
+  33%  { transform: translate(4px, -2px);  clip-path: inset(42% 0 38% 0); }
+  66%  { transform: translate(-3px, 2px);  clip-path: inset(68% 0 12% 0); }
+  100% { transform: translate(0);          clip-path: inset(0 0 100% 0); opacity: 0; }
+}
+
+@keyframes glitch-cyn {
+  0%   { transform: translate(5px, -1px);  clip-path: inset(22% 0 62% 0); }
+  33%  { transform: translate(-4px, 2px);  clip-path: inset(55% 0 28% 0); }
+  66%  { transform: translate(3px, -2px);  clip-path: inset(15% 0 70% 0); }
+  100% { transform: translate(0);          clip-path: inset(0 0 100% 0); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-name::before,
+  .hero-name::after { display: none; }
+}
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 056f17d..ac8360d 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -4733,6 +4733,112 @@ html.theme-light .prose-invert .cta-block a {
   display: block;
 }
 
+/* Hero name glitch effect */
+
+.hero-name {
+  font-family: var(--font-head);
+  font-size: clamp(3rem, 12vw, 7rem);
+  font-weight: 800;
+  line-height: 0.95;
+  letter-spacing: -0.04em;
+  color: var(--text);
+  text-shadow: 0 0 80px rgba(168,85,247,0.18), 0 0 120px rgba(168,85,247,0.08);
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+html.theme-light .hero-name {
+  text-shadow: 0 0 80px rgba(124,58,237,0.12), 0 0 120px rgba(124,58,237,0.05);
+}
+
+.hero-name::before,
+.hero-name::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.hero-name::before {
+  color: #ff2b6d;
+}
+
+.hero-name::after  {
+  color: #00e5ff;
+}
+
+.hero-name.is-glitching::before {
+  opacity: 0.8;
+  animation: glitch-red 0.45s steps(3) forwards;
+}
+
+.hero-name.is-glitching::after {
+  opacity: 0.8;
+  animation: glitch-cyn 0.45s steps(3) forwards;
+}
+
+@keyframes glitch-red {
+  0%   {
+    transform: translate(-5px, 1px);
+    clip-path: inset(8% 0 78% 0);
+  }
+
+  33%  {
+    transform: translate(4px, -2px);
+    clip-path: inset(42% 0 38% 0);
+  }
+
+  66%  {
+    transform: translate(-3px, 2px);
+    clip-path: inset(68% 0 12% 0);
+  }
+
+  100% {
+    transform: translate(0);
+    clip-path: inset(0 0 100% 0);
+    opacity: 0;
+  }
+}
+
+@keyframes glitch-cyn {
+  0%   {
+    transform: translate(5px, -1px);
+    clip-path: inset(22% 0 62% 0);
+  }
+
+  33%  {
+    transform: translate(-4px, 2px);
+    clip-path: inset(55% 0 28% 0);
+  }
+
+  66%  {
+    transform: translate(3px, -2px);
+    clip-path: inset(15% 0 70% 0);
+  }
+
+  100% {
+    transform: translate(0);
+    clip-path: inset(0 0 100% 0);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-name::before,
+  .hero-name::after {
+    display: none;
+  }
+}
+
 .hover\:bg-surface:hover {
   background-color: var(--surface);
 }