From 50f1ba47503efcf1d67dceac5a4b792cbaebfba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= <benatespina@gmail.com>
Date: Mon, 9 Nov 2026 20:39:56 +0100
Subject: [PATCH] feat: a reading progress line at the top of each post

A 2px ochre line at the top of the view grows from the article's top
reaching the top of the view to its end reaching the bottom. It is a
CSS scroll-driven animation of a transform: no script, no scroll
listener, nothing on the main thread. Browsers without scroll-driven
animations show no line.
---
 src/components/blog/post-page.astro | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/components/blog/post-page.astro b/src/components/blog/post-page.astro
index c175c6d..061bc32 100644
--- a/src/components/blog/post-page.astro
+++ b/src/components/blog/post-page.astro
@@ -59,6 +59,7 @@ const structuredData = {
   </Fragment>
   <Nav />
   <main id="main-content" class="post">
+    <div class="progress" aria-hidden="true"></div>
     <article class="wrap column">
       <header class="head">
         <p class="label crumbs">
@@ -145,6 +146,46 @@ const structuredData = {
     padding: clamp(112px, 16vh, 160px) 0 0;
   }
 
+  /*
+   * How much of the post is left: a hairline at the top of the view, driven by the scroll itself.
+   * No script and no scroll listener; it animates a transform, which the compositor handles, so it
+   * costs nothing on the main thread. It runs from the article's top reaching the top of the view to
+   * its end reaching the bottom, and browsers without scroll-driven animations simply show none.
+   */
+  .progress {
+    display: none;
+  }
+
+  @supports (animation-timeline: view()) {
+    .post {
+      timeline-scope: --post;
+    }
+
+    article {
+      view-timeline: --post block;
+    }
+
+    .progress {
+      display: block;
+      position: fixed;
+      inset: 0 0 auto;
+      z-index: 30;
+      height: 2px;
+      background: var(--accent);
+      transform: scaleX(0);
+      transform-origin: 0 50%;
+      animation: read linear both;
+      animation-timeline: --post;
+      animation-range: contain 0% contain 100%;
+    }
+  }
+
+  @keyframes read {
+    to {
+      transform: scaleX(1);
+    }
+  }
+
   article {
     position: relative;
     min-width: 0;