@olives/devos 2.1.0

package/.agents/skills/modern-web-guidance/guides/user-experience/same-document-transitions.md

@@ -0,0 +1,177 @@
+# Same Document Transitions
+
+## The Problem
+
+Web sites often provide multiple views of an object, for instance a list of products, and then a detail page for each product. Navigating between the two views often feels disconnected. When a user clicks a product thumbnail to view its details, the thumbnail disappears and a new, larger image appears instantly elsewhere on the screen. This lack of continuity makes it harder for users to track relationships between elements.
+
+## The Solution
+
+The **View Transitions API** allows you to specify element pairs that exist in different states before and after a transition. When triggering a transition with `document.startViewTransition()` in a Single Page Navigation (SPA), the browser identifies these shared elements by their shared unique `view-transition-name`. It then automatically calculates the difference in their position, size, and styling, and animates them smoothly from the old state to the new state. This transition occurs in the top layer, above even elements with high `z-index` values.
+
+## Implementation Guide
+
+### Step 1: Wrap State Changes in `startViewTransition`
+
+For Single-Page Applications (SPAs) or simple state changes, wrap the logic that updates the DOM in `document.startViewTransition`. The browser captures a snapshot of the current state, runs the update, and then captures the new state. 
+
+```javascript
+function navigate(view) {
+  // MANDATORY: Wrap the update in startViewTransition
+  document.startViewTransition(() => updateDOM(view));
+}
+```
+
+### Step 2: Assign Shared Transition Names
+
+Use the `view-transition-name` CSS property to tell the browser which elements should be morphed. The name can be anything (except `none`). **MANDATORY**: there must be no more than 1 element before and after with a given `view-transition-name`. If there are 2 or more elements with a given `view-transition-name`, the DOM will be updated to the new state immediately, without a transition.
+
+You can use multiple `view-transition-name`s to morph multiple pairs of elements. For example, you may want to transition both the product image and title with separate transitions.
+
+Because there are multiple items on the list view, you can not give the all of them the same `view-transition-name`. This can be solved in two ways in a SPA.
+
+1. **Dynamic detail page:** Assign each item on the list page a unique `view-transition-name`, and then dynamically apply that name to the matching element on the detail page when the list item is selected, as shown here.
+
+```css
+/* In the list view, give each */
+#product-1 { view-transition-name: p1 }
+#product-2 { view-transition-name: p2 }
+#product-3 { view-transition-name: p3 }
+```
+
+```js
+function updateDOM(clickedTransitionName){
+  const hero = document.getElementById("hero");
+  hero.style.viewTransitionName = clickedTransitionName;
+}
+```
+
+2. **Dynamic list item:** Assign the element on the detail page a `view-transition-name`, and apply that name to the item on the list page when it is selected. Remove the `view-transition-name` from the item on the list page when returning to the list page.
+
+The `#hero` element on the detail page and the selected `.thumbnail` element on the list page share a `view-transition-name`. 
+
+```css
+#hero{
+  view-transition-name: hero;
+}
+.thumbnail.selected {
+  view-transition-name: hero;
+}
+```
+
+When a thumbnail is clicked, we need to prepare the list view by assigning the `view-transition-name` using the `.selected` class selector, and making any changes to the DOM before starting the transition.
+
+Then, you can call `document.startViewTransition()`, and apply the changes to transition the page from the detail to list view.
+
+After navigating back to the list view, you must clean up the view transition classes to prevent the next navigation from erroring. You can perform this cleanup after the transition's `finished` promise resolves.
+
+```javascript
+// Function called when a thumbnail is clicked
+function goFromListToDetail(e){
+  e.currentTarget.classList.add("selected");
+  const hero = document.getElementById("hero");
+  const bgColor = getComputedStyle(e.currentTarget).backgroundColor;
+  hero.style.background = bgColor;
+
+  // Trigger the transition, checking for support
+  if (!document.startViewTransition) {
+    document.body.classList.add("detail");
+    // MANDATORY Accessibility Routing: Route focus to the newly revealed heading to announce context and preserve logical tab flow
+    document.getElementById("detail-heading")?.focus();
+    return; // MANDATORY: End function execution if view transitions are not supported.  
+  }
+  const transition = document.startViewTransition(() => {
+    document.body.classList.add("detail");
+  });
+  // MANDATORY Accessibility Routing: Route focus after the view transition resolves
+  transition.finished.finally(() => {
+    document.getElementById("detail-heading")?.focus();
+  });
+}
+
+// Function called when navigating from detail back to list view
+function goFromDetailToList() {
+  if (!document.startViewTransition) {
+    document.body.classList.remove("detail");
+    document.getElementById("list-heading")?.focus();
+    return;
+  }
+  const transition = document.startViewTransition(() => {
+    document.body.classList.remove("detail");
+  });
+  // Clean up the list view and route focus
+  transition.finished.finally(() => {
+    // Route focus back to list view
+    document.getElementById("list-heading")?.focus();
+    // Remove selected classList to remove view-transition-names
+    document.querySelectorAll(".selected").forEach(
+      (element) => {
+        element.classList.remove("selected");
+      },
+    );
+  });
+}
+```
+
+The method you choose will depend on the use case. The dynamic list item requires less repeated CSS, but more manual JavaScript cleanup.
+
+
+### Step 3: Fix Aspect Ratio "Stretching"
+
+By default, the browser cross-fades the old and new snapshots within a group that stretches to fit both. If you are transitioning text, set the width of the text element to `fit-content` on both the old and new views, so that the transitioned element's aspect ratio is stable.
+
+```css
+#list-page .title {
+  width: fit-content;
+}
+
+#detail-page #title {
+  width: fit-content;
+}
+```
+
+If you are transitioning elements that change aspect ratio, you may need to set the height of the old and new pseudo-elements to 100% of the `::view-transition-pair()` pseudo-element.
+
+```css
+::view-transition-old(hero),
+::view-transition-new(hero){
+  height: 100%;
+}
+```
+
+The pseudo-elements are snapshots of the live elements, so you can also use `object-fit` and `object-position` declarations for more control of the transitioning effect.
+
+## Best Practices
+
+-   **DO NOT** specify too many transitions. Only use shared elements for primary content that the user is actively tracking (e.g., hero images, headings).
+-   **DO** remove temporary `view-transition-name` values after the transition finishes to avoid side effects on future transitions.
+-   **DO NOT** transition elements with active animations. View transitions operate on snapshots, so any animations will appear to be paused during the view transition.
+-   **DO** respect user preferences for reduced motion using the `prefers-reduced-motion` media query.
+-   **MANDATORY Accessibility Routing**: View transitions morph page layouts dynamically but do not manage programmatic focus. If focus remains on an element that is hidden or removed during the transition, focus is abandoned, leaving keyboard and assistive technology users without context. Shift focus programmatically to an updated page heading or view container (using `tabindex="-1"`) immediately after the DOM updates or when the view transition's `finished` promise resolves.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+```
+
+## Fallback Strategies
+
+Baseline status for View transitions: Newly available. It's been Baseline since 2025-10-14.
+Supported by: Chrome 111 (Mar 2023), Edge 111 (Mar 2023), Firefox 144 (Oct 2025), and Safari 18 (Sep 2024).
+
+The View Transitions API is designed for progressive enhancement. Browsers that do not support it will simply execute the DOM update immediately without animation.
+
+```javascript
+function navigate(){
+  if (!document.startViewTransition) {
+    // Fallback: Just update the DOM
+    updateDOM();
+  } else {
+    document.startViewTransition(() => updateDOM());
+  }
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/scroll-entry-exit-effects.md

@@ -0,0 +1,173 @@
+# Add entry and exit effects to elements as they enter or exit the scrollport
+
+Entry and exit effects are animations that are triggered when an element enters or leaves the viewport. This can be used to create engaging and dynamic user experiences. For example, you can use an entry effect to fade in an element as it scrolls into view, or an exit effect to scale it down as it scrolls out of view.
+
+## How to implement
+
+To add entry and exit effects to an element, you need to combine a few CSS properties. Here’s a step-by-step guide:
+
+1.  **Create separate `@keyframes` for the entry and exit animations.** The entry animation will be applied as the element enters the viewport, and the exit animation will be applied as it leaves.
+
+    ```css
+    @keyframes slide-in {
+      from { transform: translateX(-100%); }
+    }
+    @keyframes slide-out {
+      to { transform: translateX(100%); }
+    }
+    ```
+
+2.  **Attach the entry and exit keyframes to the element.** You can do this by defining multiple animations in the `animation` property.
+
+    -   Give the entry animation an `animation-fill-mode` of `backwards` so that it applies its initial state before the animation starts.
+    -   Give the exit animation an `animation-fill-mode` of `forwards` so that it maintains its final state after the animation is complete.
+
+    ```css
+    .animated-element {
+      animation:
+        slide-in 1s linear backwards,
+        slide-out 1s linear forwards;
+    }
+    ```
+
+3.  **Create a View Timeline and link it to the animations.** A View Timeline is a type of timeline that is linked to the visibility of an element in the viewport. You can create one using the `view()` function and then apply it to your animations using the `animation-timeline` property.
+
+    ```css
+    .animated-element {
+      animation-timeline: view();
+    }
+    ```
+
+    By default, `view()` tracks the element on the `block` axis. If you need to track it on the `inline` axis, you can use `view(inline)`.
+
+4.  **Limit the animations to the `entry` and `exit` ranges.** The `animation-range` property allows you to specify which part of the timeline an animation should run on.
+
+    -   The `entry` range covers the time from when the element first enters the viewport until it is fully visible.
+    -   The `exit` range covers the time from when the element starts to leave the viewport until it is completely hidden.
+
+    ```css
+    .animated-element {
+      animation-range: entry, exit;
+    }
+    ```
+
+## Example code
+
+This code animates the direct children of the scroller on scroll using an **anonymous view-timeline**:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  @supports ((animation-timeline: view()) and (animation-range: entry)) {
+    @keyframes grow {
+      from {
+        scale: 0.5;
+      }
+    }
+    @keyframes shrink {
+      to {
+        scale: 0.5;
+      }
+    }
+
+    .scroller > * {
+      animation:
+        grow auto linear backwards,
+        shrink auto linear forwards;
+      animation-timeline: view(inline);
+      animation-range: entry, exit;
+    }
+  }
+}
+```
+
+As the elements enter the scrollport the `grow` animation is played, and as they leave the scrollport the `shrink` animation is played.
+
+The following code has the same visual outcome, but animates the direct children of the scroller on scroll using an **named view-timeline**:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  @supports ((animation-timeline: view()) and (animation-range: entry)) {
+    @keyframes grow {
+      from {
+        scale: 0.5;
+      }
+    }
+    @keyframes shrink {
+      to {
+        scale: 0.5;
+      }
+    }
+
+    .scroller > * {
+      view-timeline: --tl inline;
+      animation:
+        grow auto linear backwards,
+        shrink auto linear forwards;
+      animation-timeline: --tl;
+      animation-range: entry, exit;
+    }
+  }
+}
+```
+
+## Best Practices
+
+When using scroll-driven animations, it's important to follow a few best practices to ensure a smooth and accessible experience:
+
+- **DO** include feature detection: Not all browsers support scroll-driven animations. Use `@supports ((animation-timeline: view()) and (animation-range: entry))` to check for support and provide a fallback for browsers that don't support it.
+  - The `(animation-range: entry)` check **MUST** be included here, to filter out browsers with only partial support.
+  - **DO NOT** use the `scroll-timeline-polyfill` package for the fallback strategy as it is not feature complete and has a lot of known issues.
+  - If the animation is only considered to be decorative, opt for Progressive Enhancement and **DO NOT** provide a fallback.
+- **DO** respect user preferences: Some users prefer to have less motion on the web. Use the `prefers-reduced-motion` media query to disable or reduce your animations for these users.
+- **DO** try to animate only performant CSS properties: For the smoothest animations, stick to animating properties that can be handled by the browser's compositor thread, such as `transform` and `opacity`. Animating other properties like `width` or `height` can lead to performance issues.
+- **DO** use the correct declaration order: When using the `animation` shorthand property, declare `animation-timeline` *after* it to prevent the shorthand from resetting the timeline.
+
+When using the `view()` function to create a scroll-driven animation:
+
+- **OPTIONAL** be explicit about the axis to track: When not targeting the default `block` axis (such as in a horizontal scroller), be explicit about which axis to track with `view(block)` or `view(inline)`.
+- When the animation is not applied to the tracked subject itself, use a named view timeline.
+
+When using the `view-timeline` property to create a scroll-driven animation:
+
+- **DO** use a CSS `<dashed-ident>` for the name.
+- **OPTIONAL** be explicit about the axis to track: When not targeting the default `block` axis (such as in a horizontal scroller), be explicit about which axis to track with `view-timeline-axis`.
+- **DO** make sure the scope of the lookup works: When the element that is declaring the `view-timeline` is not a flat tree ancestor of the animated element, hoist up the visibility of the `view-timeline`’s name by using `timeline-scope` on a shared ancestor.
+
+Prefer a named `view-timeline` when multiple elements or children of the tracked subject need to animate.
+
+## Browser support and fallback strategies
+
+Scroll-driven animations has limited availability.
+Supported by: Chrome 115 (Jul 2023), Edge 115 (Jul 2023), and Safari 26 (Sep 2025).
+Unsupported in: Firefox.. Therefore, a fallback strategy is typically required.
+
+For browsers that do not support scroll-driven animations, you can use a fallback to recreate the visual effects. The fallbacks are typically built with either a scroll listener (for ScrollTimeline effects) or the IntersectionObserver API (for ViewTimeline effects).
+
+In browsers with built-in support for scroll-driven animations, ALWAYS use the native CSS implementation as those are more performant.
+
+Note that not every effect can be recreated using the fallbacks approach.
+
+For this use-case specifically, the following script applies the fallback for browsers that do not support scroll-driven animations. It uses an `IntersectionObserver` to track the visibility of the `.wrapper` element and updates the `transform` property of the layers based on the scroll position.
+
+```html
+<script>
+  if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          // This matches the effect as defined in the CSS example above.
+          // Customize this further if needed.
+          entry.target.style.scale = 0.5 + entry.intersectionRatio * 0.5;
+        }
+      },
+      {
+        threshold: Array.from({ length: 101 }, (_, i) => i / 100),
+      }
+    );
+
+    document.querySelectorAll('.scroller > *').forEach((el) => {
+      observer.observe(el);
+    });
+  }
+</script>
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/scroll-position-aware-elements.md

@@ -0,0 +1,128 @@
+## Overview
+
+Improve the user experience of floating buttons, like a "Back to Top" link, by showing them only when they are useful. This guide shows how to build these elements using CSS `container-scroll-state-queries`, which allows styling elements based on the scroll position of their container without relying on JavaScript scroll listeners or observers.
+
+## Implementation
+
+### 1. Establish the Scroll Container
+
+The scroll container must be declared as a scroll-state query container.
+
+```css
+.scroller {
+  overflow-y: auto;
+  /* Establish this element as a scroll-state query container */
+  container-type: scroll-state;
+}
+```
+
+### 2. Style the Floating Element
+
+Place the element inside the container and style it. By default, it should be hidden.
+
+```css
+.back-to-top {
+  position: sticky;
+  bottom: 20px;
+  visibility: hidden;
+  opacity: 0;
+  translate: 0 20px;
+  transition:
+    visibility 0.3s,
+    opacity 0.3s ease,
+    translate 0.3s ease;
+}
+```
+
+> **Important:** Sticky or floating elements hover above the scrollable content. Ensure that the main content has sufficient bottom padding or margin so that the last few elements are not permanently covered by the button when the user scrolls completely to the bottom.
+
+### 3. Respond to the Scroll State
+
+Use the `@container` rule with the `scroll-state` function. To check if the user has scrolled down, check if the container is scrollable to the top.
+
+```css
+/* When the container can be scrolled toward the top, it means the user has scrolled down */
+@container scroll-state(scrollable: top) {
+  .back-to-top {
+    visibility: visible;
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+```
+
+## Fallback strategies
+
+Container scroll-state queries has limited availability.
+Supported by: Chrome 133 (Feb 2025) and Edge 133 (Feb 2025).
+Unsupported in: Firefox and Safari.
+
+### Basic Fallback
+If `container-scroll-state-queries` is not supported, the floating element will remain invisible because of the default `visibility: hidden`. To ensure functionality, you can choose to make the element always visible in unsupported browsers.
+
+```css
+/* Fallback for browsers that do not support the feature */
+.back-to-top {
+  visibility: visible; /* Always visible */
+  opacity: 1;
+}
+
+/* Override for supported browsers to handle dynamic visibility */
+@supports (container-type: scroll-state) {
+  .back-to-top {
+    visibility: hidden;
+    opacity: 0;
+  }
+  
+  @container scroll-state(scrollable: top) {
+    .back-to-top {
+      visibility: visible;
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+}
+```
+
+### Advanced Fallback (Intersection Observer)
+If dynamic visibility is required, use an `IntersectionObserver` to toggle a class when a sentinel element at the top of the scroller goes out of view.
+
+```html
+<!-- Sentinel element placed at the top of the scroller -->
+<div class="scroll-sentinel"></div>
+```
+
+```css
+/* Marker styling to ensure it does not affect layout */
+.scroll-sentinel {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.scrolled .back-to-top {
+  visibility: visible;
+  opacity: 1;
+  translate: 0 0;
+}
+```
+
+```javascript
+if (!CSS.supports('container-type', 'scroll-state')) {
+  const sentinel = document.querySelector('.scroll-sentinel');
+  const scroller = document.querySelector('.scroller');
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      // If the sentinel is NOT intersecting, it means the user has scrolled down
+      if (!entry.isIntersecting) {
+        scroller.classList.add('scrolled');
+      } else {
+        scroller.classList.remove('scrolled');
+      }
+    });
+  }, { root: scroller });
+
+  observer.observe(sentinel);
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/scroll-progress-indicator.md

@@ -0,0 +1,133 @@
+# Build a Scroll Progress Indicator
+
+A scroll progress indicator is a common user interface pattern that visually communicates the user's progress through a scrollable document or container. As the user scrolls, a visual element updates to reflect their position, providing a clear and intuitive sense of how much content has been viewed and how much remains.
+
+## How to implement
+
+To create a scroll progress indicator, you need two things:
+
+1.  An element to act as the progress bar. This element is typically `position: fixed` or `position: absolute` so that it stays in view while the user scrolls.
+2.  An animation that is linked to the scroll position.
+
+Here’s how you can achieve this:
+
+-   First, create an HTML element that will serve as your progress bar. This element can be styled to your liking.
+-   Next, in your CSS, define a `@keyframes` animation that scales the progress bar. A common approach is to scale the element from `scaleX(0)` to `scaleX(1)`.
+-   Finally, apply this animation to your progress bar element and set its `animation-timeline` to a scroll-timeline. This tells the browser to drive the animation's progress based on the scroll position of the nearest ancestor scroller.
+
+## Example code
+
+This code grows the `#progress` element on scroll using an anonymous scroll-timeline, created by the `scroll()` function.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  @supports ((animation-timeline: scroll())) {
+    @keyframes grow-progress {
+      from { transform: scaleX(0); }
+      to { transform: scaleX(1); }
+    }
+
+    #progress {
+      position: fixed;
+      left: 0; top: 0;
+      width: 100%; height: 1em;
+      background: red;
+
+      transform-origin: 0 50%;
+      animation: grow-progress auto linear;
+      animation-timeline: scroll();
+    }
+  }
+}
+```
+
+Because of its location in the DOM, the `scroll()` function will track its neareast ancestor scroller in the `block` direction, which here is the root scroller.
+
+```html
+<body>
+  <!-- MANDATORY: Purely decorative visual scroll progress bars MUST set aria-hidden="true" to remove the empty element from the assistive technology reading tree -->
+  <div id="progress" aria-hidden="true"></div>
+</body>
+```
+
+This code grows the `#progress` element on scroll using a named scroll-timeline, created by the `scroll-timeline` property.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  @supports ((animation-timeline: scroll())) {
+    @keyframes grow-progress {
+      from { transform: scaleX(0); }
+      to { transform: scaleX(1); }
+    }
+
+    :root {
+      scroll-timeline: --tl block;
+    }
+
+    #progress {
+      position: fixed;
+      left: 0; top: 0;
+      width: 100%; height: 1em;
+      background: red;
+
+      transform-origin: 0 50%;
+      animation: grow-progress auto linear;
+      animation-timeline: --tl;
+    }
+  }
+}
+```
+
+## Best Practices
+
+When using scroll-driven animations, it's important to follow a few best practices to ensure a smooth and accessible experience:
+
+- **DO** include feature detection: Not all browsers support scroll-driven animations. Use `@supports (animation-timeline: scroll())` to check for support and provide a fallback for browsers that don't support it.
+  - **DO NOT** use the `scroll-timeline-polyfill` package for the fallback strategy as it is not feature complete and has a lot of known issues.
+  - If the animation is only considered to be decorative, opt for Progressive Enhancement and **DO NOT** provide a fallback.
+- **DO** remove purely decorative elements from assistive technology reading flows: Apply `aria-hidden="true"` to purely visual scroll indicators to ensure screen readers do not encounter empty, unnamed nodes.
+- **DO** respect user preferences: Some users prefer to have less motion on the web. Use the `prefers-reduced-motion` media query to disable or reduce your animations for these users.
+- **DO** try to animate only performant CSS properties: For the smoothest animations, stick to animating properties that can be handled by the browser's compositor thread, such as `transform` and `opacity`. Animating other properties like `width` or `height` can lead to performance issues.
+- **DO** use the correct declaration order: When using the `animation` shorthand property, declare `animation-timeline` *after* it to prevent the shorthand from resetting the timeline.
+
+When using the `scroll()` function to create a scroll-driven animation:
+
+- **OPTIONAL** be explicit about the scroller: When not targeting the nearest ancestor scroller, be explicit about which scroller you want to use with `scroll(root)` or `scroll(self)`.
+  - When `root`, `nearest`, or `self` are not sufficient, use a named scroll-timeline.
+- **OPTIONAL** be explicit about the axis to track: When not targeting the default `block` axis (such as in a horizontal scroller), be explicit about which axis to track with `scroll(block)` or `scroll(inline)`.
+
+When using the `scroll-timeline` property to create a scroll-driven animation:
+
+- **DO** use a CSS `<dashed-ident>` for the name.
+- **OPTIONAL** be explicit about the axis to track: When not targeting the default `block` axis (such as in a horizontal scroller), be explicit about which axis to track with `scroll-timeline-axis`.
+- **DO** make sure the scope of the lookup works: When the element that is declaring the `scroll-timeline` is not a flat tree ancestor of the animated element, hoist up the visibility of the `scroll-timeline`’s name by using `timeline-scope` on a shared ancestor.
+
+## Fallback strategies
+
+Scroll-driven animations has limited availability.
+Supported by: Chrome 115 (Jul 2023), Edge 115 (Jul 2023), and Safari 26 (Sep 2025).
+Unsupported in: Firefox.
+
+For browsers that do not support scroll-driven animations, you can use a fallback to recreate the visual effects. The fallbacks are typically built with either a scroll listener (for ScrollTimeline effects) or the IntersectionObserver API (for ViewTimeline effects).
+
+In browsers with built-in support for scroll-driven animations, ALWAYS use the native CSS implementation as those are more performant.
+
+Note that not every effect can be recreated using the fallbacks approach.
+
+For this use-case specifically, the following script applies the fallback for browsers that do not support scroll-driven animations. It uses a scroll listener to track the scroll position of the root element and updates the `transform` property of the progress bar accordingly.
+
+```html
+<script>
+  if (!CSS.supports('animation-timeline', 'scroll()')) {
+    const progress = document.querySelector('#progress');
+
+    window.addEventListener('scroll', () => {
+      const scrollable = document.documentElement.scrollHeight - window.innerHeight;
+      const scrolled = window.scrollY;
+      const progressPercentage = (scrolled / scrollable);
+
+      progress.style.transform = `scaleX(${progressPercentage})`;
+    });
+  }
+</script>
+```