Description
Add a thin animated progress line along the bottom edge of the header (FindMy GSoC navbar) that fills/animates as the user scrolls down the page — a common pattern for signaling reading/scroll progress and adding a subtle polish touch to an otherwise static dark header.
Motivation
The current header is clean but static — nothing visually communicates scroll position or gives the header a sense of life/motion as the user moves through the page. A scroll-linked accent line is a low-cost way to add that without cluttering the UI.
Proposed Behavior
A 1–2px line spans the full width of the header's bottom edge.
On page load / top of page, the line is either hidden or shown at 0% fill.
As the user scrolls down, the line fills left-to-right proportional to scroll progress (0% at top of page, 100% at bottom).
Color should use the existing accent (the orange from the "GSoC" wordmark / logo block) so it reads as intentional branding, not decorative noise.
Should respect prefers-reduced-motion — either disable the animation transition or make the fill instant for users with that preference set.
Line should not interfere with the header's backdrop-blur/sticky behavior already in place.
Acceptance Criteria
Line renders at 0% width at the top of the page
Line fill updates smoothly as the user scrolls (no jank/jumpiness)
Line reaches 100% width when the user reaches the bottom of the page
Line color matches brand accent (orange) and has sufficient contrast against the dark header background
Animation is disabled/instant when prefers-reduced-motion: reduce is set
No layout shift or interference with existing sticky header behavior
Screenshot
Description
Add a thin animated progress line along the bottom edge of the header (FindMy GSoC navbar) that fills/animates as the user scrolls down the page — a common pattern for signaling reading/scroll progress and adding a subtle polish touch to an otherwise static dark header.
Motivation
The current header is clean but static — nothing visually communicates scroll position or gives the header a sense of life/motion as the user moves through the page. A scroll-linked accent line is a low-cost way to add that without cluttering the UI.
Proposed Behavior
A 1–2px line spans the full width of the header's bottom edge.
On page load / top of page, the line is either hidden or shown at 0% fill.
As the user scrolls down, the line fills left-to-right proportional to scroll progress (0% at top of page, 100% at bottom).
Color should use the existing accent (the orange from the "GSoC" wordmark / logo block) so it reads as intentional branding, not decorative noise.
Should respect prefers-reduced-motion — either disable the animation transition or make the fill instant for users with that preference set.
Line should not interfere with the header's backdrop-blur/sticky behavior already in place.
Acceptance Criteria
Line renders at 0% width at the top of the page
Line fill updates smoothly as the user scrolls (no jank/jumpiness)
Line reaches 100% width when the user reaches the bottom of the page
Line color matches brand accent (orange) and has sufficient contrast against the dark header background
Animation is disabled/instant when prefers-reduced-motion: reduce is set
No layout shift or interference with existing sticky header behavior
Screenshot