From dc6182bbd03bcc6d6b1060207bc059f89403d235 Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Mon, 9 Mar 2026 23:09:23 -0500 Subject: [PATCH] feat(docs): animate gradient fill across hero title on page load The gradient sweeps left-to-right across "Centralized Management" after a 0.3s delay, transitioning from plain text to the teal-burgundy gradient over 1.2s. Co-Authored-By: Claude Opus 4.6 --- docs/website/style.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/website/style.css b/docs/website/style.css index 7230a1b..2131f3c 100644 --- a/docs/website/style.css +++ b/docs/website/style.css @@ -369,10 +369,18 @@ ul, ol { } .hero-title .gradient-text { - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); + background: linear-gradient(90deg, var(--text-primary) 50%, var(--accent) 50%, var(--accent-secondary) 100%); + background-size: 200% 100%; + background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; + animation: gradient-fill 1.2s ease-out 0.3s forwards; +} + +@keyframes gradient-fill { + from { background-position: 100% 0; } + to { background-position: 0% 0; } } .hero-subtitle {