Scroll Progress Bar — Long-Form Lesson Wayfinding Variant

What it does

• Fade-in on scroll — the bar stays hidden until the learner scrolls past the lesson's start sentinel, then quietly appears at the top of the page
• Smooth scrubbed fill — the bar grows from empty to full as the learner scrolls, with a slight lag that makes the motion feel buttery rather than twitchy
• Hover-to-reveal section markers — moving the cursor onto the bar grows it taller and reveals labeled markers spaced along its length
• Click-to-jump navigation — each marker shows a section number and label tooltip; clicking smooth-scrolls the learner to that section
• Click-anywhere proportional jump — clicking anywhere else on the bar jumps proportionally to that point in the lesson
• Accessibility-aware — proper progress-bar semantics for screen readers, plus an instant snap mode for learners who prefer reduced motion

Best use cases

• Long-form teaching essays — four to eight sections of dense reading where progress signal matters
• Sales pages, webinar replay pages, and launch pages inside courses
• Multi-section lessons that are too short for a sticky table of contents
• Module overview pages with five to ten expandable sections
• Course-policy and onboarding lessons (refund terms, code of conduct) that benefit from a quiet 'this won't take all day' reassurance

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — one primary fill color does the heavy lifting, with three optional companions for the track, hover state, and marker dots. Default is a warm terracotta on near-black, but any single brand color drops in.
• Fonts — inherits the host page's typography, no required font additions
• Copy — section labels populated from the markers attached to each section element on the page; demo sections fully replaceable
• Images — none required; this is a pure UI enhancement
• Behavior — scroll-fill smoothness, click-to-jump speed, bar height in default and hover states, and the boundaries that define what counts as 'the lesson body'