From 5460ac3a0144a1fdfa7cd4e423e6b658cb2797ad Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Fri, 3 Jul 2026 11:26:45 +0200
Subject: [PATCH] website: Add micro-animations including scroll progress bar,
nav logo entrance spin, and button shine sweeps
---
website/app.js | 15 ++++++++++
website/style.css | 67 +++++++++++++++++++++++++++++++++++++++++++
website/template.html | 3 +-
3 files changed, 84 insertions(+), 1 deletion(-)
diff --git a/website/app.js b/website/app.js
index 8c4435d..7d57eb9 100644
--- a/website/app.js
+++ b/website/app.js
@@ -25,6 +25,21 @@ document.addEventListener('DOMContentLoaded', () => {
console.warn(err);
}
+ // Scroll Progress Indicator
+ try {
+ const progressBar = document.querySelector('.scroll-progress-bar');
+ if (progressBar) {
+ window.addEventListener('scroll', () => {
+ const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+ const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ const scrolled = height > 0 ? (winScroll / height) * 100 : 0;
+ progressBar.style.width = scrolled + '%';
+ }, { passive: true });
+ }
+ } catch (err) {
+ console.warn(err);
+ }
+
const safeGetLocalStorage = (key) => {
try {
return localStorage.getItem(key);
diff --git a/website/style.css b/website/style.css
index 0305a49..848ee22 100644
--- a/website/style.css
+++ b/website/style.css
@@ -4061,3 +4061,70 @@ header[id] {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-16px); }
}
+
+/* --- High Fidelity Micro-Animations & Identity additions --- */
+
+/* Scroll progress bar glowing line at the top */
+.scroll-progress-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--accent), #a855f7, #ec4899);
+ z-index: 9999;
+ width: 0%;
+ transition: width 0.1s ease-out;
+ box-shadow: 0 0 8px var(--accent-glow);
+}
+
+/* Navigation logo pop & spin */
+.nav-logo-img {
+ animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+ transform-origin: center;
+ transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+ will-change: transform, opacity;
+}
+
+.nav-logo-img:hover {
+ transform: scale(1.15) rotate(360deg);
+}
+
+@keyframes logo-entrance {
+ 0% {
+ transform: scale(0) rotate(-180deg);
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1) rotate(0deg);
+ opacity: 1;
+ }
+}
+
+/* Glowing reflection sweep on buttons */
+.btn-primary, .btn-firefox, .btn-secondary {
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.25) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ transform: skewX(-25deg);
+ transition: none;
+ pointer-events: none;
+}
+
+.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
+ left: 100%;
+ transition: left 0.8s ease-in-out;
+}
diff --git a/website/template.html b/website/template.html
index 6ceebd9..0d87d0b 100644
--- a/website/template.html
+++ b/website/template.html
@@ -201,6 +201,7 @@
+
Skip to main content
@@ -213,7 +214,7 @@