From 70aa6f96d86d255952bba60ba0e95fc978b0c067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 29 Apr 2026 10:47:34 +0200 Subject: [PATCH] feat: add bloom pulse animation to header logo, glitch text-only MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Counter-rotating rings now also pulse outward from center (inner→outer ripple) - Use standalone `rotate`/`scale` CSS properties so animations don't conflict - Glitch animation scoped to logo text span only, not the SVG - Footer logo remains static (logo-static) Co-Authored-By: Claude Sonnet 4.6 --- assets/css/main.css | 44 ++++++++++++++++++++++++++++-------- layouts/partials/footer.html | 2 +- layouts/partials/nav.html | 4 ++-- 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index d631066..590ef98 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -573,7 +573,7 @@ 94% { transform: translate(0); clip-path: none; } } -.logo-glitch:hover { +a:hover .logo-glitch { animation: glitch-clip 2.5s steps(1) infinite; } @@ -630,13 +630,39 @@ footer nav a.label:hover svg { transform-box: fill-box; transform-origin: 50% 50%; } -.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; } -.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; } -.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; } -.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; } -.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; } -.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; } +/* Rotation — use standalone `rotate` so `scale` can animate independently */ +.logo-bloom:not(.logo-static) .logo-r1 { + animation: logo-cw 30s linear infinite, logo-bloom-r1 6s ease-in-out 2s infinite; +} +.logo-bloom:not(.logo-static) .logo-r2 { + animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite; +} +.logo-bloom:not(.logo-static) .logo-r3 { + animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite; +} -@keyframes logo-cw { to { transform: rotate(360deg); } } -@keyframes logo-ccw { to { transform: rotate(-360deg); } } +/* Speed up rotation on hover */ +.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s, 6s; } +.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s, 6s; } +.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s, 6s; } + +@keyframes logo-cw { to { rotate: 360deg; } } +@keyframes logo-ccw { to { rotate: -360deg; } } + +/* Bloom pulse — inner first, ripples outward */ +@keyframes logo-bloom-r3 { + 0%, 100% { scale: 1; } + 40% { scale: 1.06; } + 60% { scale: 1.06; } +} +@keyframes logo-bloom-r2 { + 0%, 100% { scale: 1; } + 40% { scale: 1.05; } + 60% { scale: 1.05; } +} +@keyframes logo-bloom-r1 { + 0%, 100% { scale: 1; } + 40% { scale: 1.04; } + 60% { scale: 1.04; } +} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c240035..30c2745 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -12,7 +12,7 @@
- + {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto logo-static") -}}

{{ .Site.Params.description }}

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 57bd1c2..dcb4e7c 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -10,9 +10,9 @@ :class="$store.nav.open || scrolled ? 'bg-ink/95 backdrop-blur-md shadow-[0_1px_0_var(--color-zinc)]' : ''" > - + {{- partial "logo.html" (dict "id" "nav" "class" "h-10 w-auto flex-shrink-0") -}} - + {{- .Site.Params.logoText -}}