valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine logo animation — bloom shrink + outer ring slow spin

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-29 18:08:39 +02:00
parent 70aa6f96d8
commit 99a41ad127
2 changed files with 16 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+11 -20
View File
@@ -631,38 +631,29 @@ footer nav a.label:hover svg {
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
/* Rotation — use standalone `rotate` so `scale` can animate independently */ /* Inner two rings spin + breathe; outer ring blooms */
.logo-bloom:not(.logo-static) .logo-r1 { .logo-bloom:not(.logo-static) .logo-r3 {
animation: logo-cw 30s linear infinite, logo-bloom-r1 6s ease-in-out 2s infinite; animation: logo-cw 12s linear infinite, logo-breath-r3 5s ease-in-out 1.2s infinite;
} }
.logo-bloom:not(.logo-static) .logo-r2 { .logo-bloom:not(.logo-static) .logo-r2 {
animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite; animation: logo-ccw 20s linear infinite, logo-breath-r2 5s ease-in-out 0.6s infinite;
} }
.logo-bloom:not(.logo-static) .logo-r3 { .logo-bloom:not(.logo-static) .logo-r1 {
animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite; animation: logo-cw 40s linear infinite, logo-bloom-r1 5s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite;
} }
/* 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-cw { to { rotate: 360deg; } }
@keyframes logo-ccw { to { rotate: -360deg; } } @keyframes logo-ccw { to { rotate: -360deg; } }
/* Bloom pulse — inner first, ripples outward */ @keyframes logo-breath-r3 {
@keyframes logo-bloom-r3 {
0%, 100% { scale: 1; } 0%, 100% { scale: 1; }
40% { scale: 1.06; } 50% { scale: 0.97; }
60% { scale: 1.06; }
} }
@keyframes logo-bloom-r2 { @keyframes logo-breath-r2 {
0%, 100% { scale: 1; } 0%, 100% { scale: 1; }
40% { scale: 1.05; } 50% { scale: 0.92; }
60% { scale: 1.05; }
} }
@keyframes logo-bloom-r1 { @keyframes logo-bloom-r1 {
0%, 100% { scale: 1; } 0%, 100% { scale: 1; }
40% { scale: 1.04; } 50% { scale: 0.85; }
60% { scale: 1.04; }
} }
layouts/partials/nav.html
+1 -1
View File
@@ -11,7 +11,7 @@
> >
<!-- Logotype --> <!-- Logotype -->
<a href="/" class="flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home"> <a href="/" class="flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home">
{{- partial "logo.html" (dict "id" "nav" "class" "h-10 w-auto flex-shrink-0") -}} {{- partial "logo.html" (dict "id" "nav" "class" "h-12 w-auto flex-shrink-0") -}}
<span class="logo-glitch font-display text-2xl md:text-3xl leading-none tracking-wide"> <span class="logo-glitch font-display text-2xl md:text-3xl leading-none tracking-wide">
{{- .Site.Params.logoText -}} {{- .Site.Params.logoText -}}
</span> </span>