diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index c1a17d2..bdbc9a7 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -75,7 +75,7 @@
           <h1 class="cl-hero__title">
             C/C++ pull requests<br>
             that arrive<br>
-            <span class="cl-circled"><svg class="cl-circled__ring" viewBox="0 0 400 100" preserveAspectRatio="none" aria-hidden="true"><path d="M 318 10 C 236 -4, 92 0, 36 22 C -4 38, 4 84, 108 92 C 214 100, 378 90, 394 56 C 402 36, 384 20, 350 12"/></svg><span class="cl-circled__text">already checked</span><svg class="cl-circled__check" viewBox="0 0 64 52" aria-hidden="true"><path d="M 6 28 L 22 44 L 58 6"/></svg></span>.
+            <span class="cl-circled"><svg class="cl-circled__ring" viewBox="0 0 400 100" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M 318 10 C 236 -4, 92 0, 36 22 C -4 38, 4 84, 108 92 C 214 100, 378 90, 394 56 C 402 36, 384 20, 350 12"/></svg><span class="cl-circled__text">already checked</span><svg class="cl-circled__check" viewBox="0 0 64 52" aria-hidden="true"><path pathLength="1" d="M 6 28 L 22 44 L 58 6"/></svg></span>.
           </h1>
           <p class="cl-lead">
             cpp-linter runs clang-format and clang-tidy on the files each pull
@@ -99,7 +99,7 @@ <h1 class="cl-hero__title">
         </div>
 
         <div class="cl-visual" role="img" aria-label="A review comment from cpp-linter-action suggests a clang-tidy fix, and auto-fix pushes the clang-format fixes as a commit.">
-          <svg class="cl-visual__ring" viewBox="0 0 600 600" preserveAspectRatio="none" aria-hidden="true"><path d="M 512 112 C 460 56, 380 30, 300 30 C 150 30, 36 146, 36 300 C 36 452, 150 570, 302 570 C 454 570, 566 452, 566 300 C 566 250, 552 206, 532 172"/></svg>
+          <svg class="cl-visual__ring" viewBox="0 0 600 600" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M 512 112 C 460 56, 380 30, 300 30 C 150 30, 36 146, 36 300 C 36 452, 150 570, 302 570 C 454 570, 566 452, 566 300 C 566 250, 552 206, 532 172"/></svg>
           <span class="cl-visual__pin"><span class="cl-ico">{% include ".icons/octicons/pin-16.svg" %}</span>clang-format 21 · clang-tidy 21</span>
           <div class="cl-review">
             <div class="cl-review__file">
@@ -132,7 +132,7 @@ <h1 class="cl-hero__title">
               </div>
             </div>
           </div>
-          <svg class="cl-visual__check" viewBox="0 0 140 120" aria-hidden="true"><path d="M 14 70 L 44 100 L 128 12"/></svg>
+          <svg class="cl-visual__check" viewBox="0 0 140 120" aria-hidden="true"><path pathLength="1" d="M 14 70 L 44 100 L 128 12"/></svg>
           <div class="cl-fixchip">
             <span class="cl-fixchip__icon">{% include ".icons/material/check-bold.svg" %}</span>
             <span class="cl-fixchip__text">
diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css
index 553b494..108677e 100644
--- a/docs/stylesheets/home.css
+++ b/docs/stylesheets/home.css
@@ -961,6 +961,138 @@
     }
 }
 
+/*
+ * Hero entrance, played once on load: the review card rises, the diff and the
+ * clang-tidy suggestion come in, "Commit suggestion" is pressed, the auto-fix
+ * commit pops up, and the rings and checks are drawn. It ends on the static
+ * picture; with reduced motion the picture is shown as is.
+ */
+@media (prefers-reduced-motion: no-preference) {
+    .cl-hero .cl-circled__ring path,
+    .cl-hero .cl-circled__check path,
+    .cl-visual__ring path,
+    .cl-visual__check path {
+        animation: cl-draw 1s cubic-bezier(0.6, 0, 0.3, 1) both;
+    }
+
+    .cl-hero .cl-circled__ring path {
+        animation-duration: 0.8s;
+        animation-delay: 0.3s;
+    }
+
+    .cl-hero .cl-circled__check path {
+        animation-duration: 0.35s;
+        animation-delay: 1.05s;
+    }
+
+    .cl-visual__ring path {
+        animation-duration: 1.1s;
+        animation-delay: 0.1s;
+    }
+
+    .cl-visual__check path {
+        animation-duration: 0.4s;
+        animation-delay: 2s;
+    }
+
+    .cl-visual__pin {
+        animation: cl-slide-in 0.4s 0.35s ease-out both;
+    }
+
+    .cl-review {
+        animation: cl-rise 0.55s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+    }
+
+    .cl-review__diff .cl-diff__line {
+        animation: cl-slide-in 0.35s ease-out both;
+    }
+
+    .cl-review__diff .cl-diff__line:nth-child(1) {
+        animation-delay: 0.45s;
+    }
+
+    .cl-review__diff .cl-diff__line:nth-child(2) {
+        animation-delay: 0.55s;
+    }
+
+    .cl-review__diff .cl-diff__line:nth-child(3) {
+        animation-delay: 0.65s;
+    }
+
+    .cl-comment {
+        animation: cl-rise 0.5s 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+    }
+
+    .cl-comment .cl-fake-btn--primary {
+        animation: cl-press 0.7s 1.45s ease-out both;
+    }
+
+    .cl-fixchip {
+        animation: cl-pop 0.5s 1.7s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
+    }
+}
+
+/*
+ * The paths have pathLength="1", but their strokes do not scale with the SVG,
+ * so on screen a path is 0.7 to 1.3 times that length. A dash of 1.5 covers
+ * it, and the last frame drops the dashes to end on the static stroke.
+ */
+@keyframes cl-draw {
+    0% {
+        stroke-dasharray: 1.5 1.5;
+        stroke-dashoffset: 1.55;
+    }
+
+    99% {
+        stroke-dasharray: 1.5 1.5;
+        stroke-dashoffset: 0;
+    }
+
+    100% {
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes cl-rise {
+    from {
+        opacity: 0;
+        transform: translateY(18px);
+    }
+}
+
+@keyframes cl-slide-in {
+    from {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+}
+
+@keyframes cl-pop {
+    from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.92);
+    }
+}
+
+@keyframes cl-press {
+    0% {
+        box-shadow: 0 0 0 0 rgba(64, 81, 181, 0.45);
+    }
+
+    30% {
+        transform: scale(0.95);
+    }
+
+    60% {
+        transform: scale(1);
+    }
+
+    100% {
+        box-shadow: 0 0 0 10px rgba(64, 81, 181, 0);
+    }
+}
+
 /* Tools */
 
 .cl-tools {