diff --git a/oneinai.html b/oneinai.html
index 92392bf..5f338e8 100644
--- a/oneinai.html
+++ b/oneinai.html
@@ -20,6 +20,7 @@
     width: 100%;
     min-height: 100vh;
     overflow: hidden;
+    overflow: clip;
     color: var(--ink);
     background: var(--paper);
     font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
@@ -70,6 +71,27 @@
     margin: 0 auto;
   }
 
+  .scroll-progress {
+    position: fixed;
+    top: clamp(88px, 12vh, 132px);
+    right: max(14px, calc((100vw - 1360px) / 2));
+    z-index: 20;
+    width: 2px;
+    height: min(28vh, 220px);
+    overflow: hidden;
+    background: rgba(62, 164, 236, 0.14);
+    pointer-events: none;
+  }
+
+  .scroll-progress::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, var(--cyan), var(--red), var(--violet));
+    transform: scaleY(1);
+    transform-origin: top;
+  }
+
   .hero {
     display: grid;
     grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
@@ -464,12 +486,27 @@
   }
 
   .workflow-list {
+    position: relative;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     border-top: 1px solid var(--ink);
     border-bottom: 1px solid var(--line);
   }
 
+  .workflow-list::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    height: 2px;
+    background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
+    transform: scaleX(1);
+    transform-origin: left;
+    pointer-events: none;
+  }
+
   .workflow-step {
     position: relative;
     display: flex;
@@ -715,12 +752,100 @@
 
   @keyframes scroll-reveal {
     from {
-      opacity: 1;
-      transform: translateY(24px);
+      opacity: 0;
+      transform: translate3d(0, 72px, 0) scale(0.965);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes title-reveal {
+    from {
+      opacity: 0;
+      clip-path: inset(0 0 100% 0);
+      transform: translate3d(0, 58px, 0);
+    }
+    to {
+      opacity: 1;
+      clip-path: inset(0 0 0 0);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes reveal-from-right {
+    from {
+      opacity: 0;
+      transform: translate3d(68px, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes reveal-from-left {
+    from {
+      opacity: 0;
+      transform: translate3d(-64px, 42px, 0) rotate(-1.5deg);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0);
+    }
+  }
+
+  @keyframes reveal-from-right-card {
+    from {
+      opacity: 0;
+      transform: translate3d(64px, 42px, 0) rotate(1.5deg);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0);
+    }
+  }
+
+  @keyframes line-draw {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes page-progress {
+    from {
+      transform: scaleY(0);
+    }
+    to {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes number-rise {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 64px, 0) scale(0.88);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes panel-unfold {
+    from {
+      opacity: 0;
+      clip-path: inset(24% 0 34% 0 round 24px);
+      transform: translate3d(0, 84px, 0) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      clip-path: inset(0 0 0 0 round 24px);
+      transform: translate3d(0, 0, 0) scale(1);
     }
   }
 
@@ -729,13 +854,118 @@
     transform: none;
   }
 
-  @supports (animation-timeline: view()) and (animation-range: entry 8% cover 34%) {
-    .reveal-on-scroll {
-      animation: scroll-reveal linear both;
-      animation-timeline: view();
-      animation-range: entry 8% cover 34%;
-      will-change: opacity, transform;
+  @supports (animation-timeline: view()) {
+    .scroll-progress::after {
+      animation: page-progress linear both;
+      animation-timeline: scroll(root);
     }
+
+    .reveal-on-scroll {
+      animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 38%;
+    }
+
+    .section-heading.reveal-on-scroll {
+      animation-range: entry 0% cover 32%;
+    }
+
+    .section-heading .section-title {
+      animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 4% cover 34%;
+    }
+
+    .section-heading .section-description {
+      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 12% cover 40%;
+    }
+
+    .capability-row:nth-child(1) {
+      animation-name: reveal-from-left;
+      animation-range: entry 0% cover 34%;
+    }
+
+    .capability-row:nth-child(2) {
+      animation-range: entry 8% cover 42%;
+    }
+
+    .capability-row:nth-child(3) {
+      animation-name: reveal-from-right-card;
+      animation-range: entry 16% cover 50%;
+    }
+
+    .workflow-list::before {
+      animation: line-draw linear both;
+      animation-timeline: view();
+      animation-range: entry 8% cover 58%;
+    }
+
+    .workflow-step::before {
+      animation: line-draw linear both;
+      animation-timeline: view();
+      animation-range: entry 12% cover 38%;
+      transform-origin: left;
+    }
+
+    .workflow-step:nth-child(1) {
+      animation-range: entry 0% cover 30%;
+    }
+
+    .workflow-step:nth-child(2) {
+      animation-range: entry 10% cover 40%;
+    }
+
+    .workflow-step:nth-child(3) {
+      animation-range: entry 20% cover 50%;
+    }
+
+    .pricing-layout {
+      animation-name: panel-unfold;
+      animation-range: entry 0% cover 44%;
+    }
+
+    .price-main {
+      animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 10% cover 38%;
+    }
+
+    .price-fact {
+      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+    }
+
+    .price-fact:nth-child(1) {
+      animation-range: entry 8% cover 30%;
+    }
+
+    .price-fact:nth-child(2) {
+      animation-range: entry 16% cover 38%;
+    }
+
+    .price-fact:nth-child(3) {
+      animation-range: entry 24% cover 46%;
+    }
+
+    .docs-panel {
+      animation-name: panel-unfold;
+      animation-range: entry 0% cover 42%;
+    }
+
+    .docs-panel .section-title {
+      animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 8% cover 38%;
+    }
+
+    .doc-link {
+      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-timeline: view();
+      animation-range: entry 18% cover 46%;
+    }
+
   }
 
   @media (max-width: 920px) {
@@ -802,6 +1032,12 @@
   }
 
   @media (max-width: 620px) {
+    .scroll-progress {
+      top: 88px;
+      right: 5px;
+      height: 144px;
+    }
+
     .page {
       width: calc(100% - 28px);
     }
@@ -951,10 +1187,31 @@
       scroll-behavior: auto !important;
       transition-duration: 0.01ms !important;
     }
+
+    .scroll-progress {
+      display: none;
+    }
+
+    .reveal-on-scroll,
+    .section-heading .section-title,
+    .section-heading .section-description,
+    .workflow-list::before,
+    .workflow-step::before,
+    .price-main,
+    .price-fact,
+    .docs-panel .section-title,
+    .doc-link {
+      opacity: 1 !important;
+      clip-path: none !important;
+      transform: none !important;
+      animation: none !important;
+      will-change: auto !important;
+    }
   }
 </style>
 
 <div class='oneinai-root'>
+  <span class='scroll-progress' aria-hidden='true'></span>
   <main class='page' id='top'>
     <section class='hero'>
       <div class='hero-copy'>