monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): animate gradient fill across hero title on page load

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-09 23:09:23 -05:00
parent e2813116da
commit dc6182bbd0
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/website/style.css
View File

@@ -369,10 +369,18 @@ ul, ol {
} }
.hero-title .gradient-text { .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; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -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 { .hero-subtitle {