diff --git a/oneinai.html b/oneinai.html
index b38aa5a..a92cb77 100644
--- a/oneinai.html
+++ b/oneinai.html
@@ -388,10 +388,24 @@
}
.section {
+ position: relative;
padding: clamp(56px, 7vw, 88px) 0;
border-bottom: 1px solid var(--line);
}
+ .section::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: -1px;
+ left: 0;
+ height: 2px;
+ background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
+ transform: scaleX(1);
+ transform-origin: left;
+ pointer-events: none;
+ }
+
.section-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
@@ -750,6 +764,28 @@
}
}
+ @keyframes hero-copy-scroll {
+ from {
+ opacity: 1;
+ transform: translate3d(0, 0, 0) scale(1);
+ }
+ to {
+ opacity: 0.18;
+ transform: translate3d(-76px, -84px, 0) scale(0.95);
+ }
+ }
+
+ @keyframes hero-proof-scroll {
+ from {
+ opacity: 1;
+ transform: translate3d(0, 0, 0) scale(1);
+ }
+ to {
+ opacity: 0.2;
+ transform: translate3d(72px, -44px, 0) scale(0.93);
+ }
+ }
+
@keyframes scroll-reveal {
from {
opacity: 0;
@@ -796,6 +832,28 @@
}
}
+ @keyframes detail-rise {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 32px, 0);
+ }
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+ }
+
+ @keyframes tag-reveal {
+ from {
+ opacity: 0;
+ transform: translate3d(-28px, 0, 0) scale(0.9);
+ }
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0) scale(1);
+ }
+ }
+
@keyframes reveal-from-left {
from {
opacity: 0;
@@ -867,14 +925,36 @@
@supports (animation-timeline: view()) {
.scroll-progress::after {
- animation: page-progress linear both;
+ animation: page-progress 1s linear both;
animation-timeline: scroll(root);
}
- .reveal-on-scroll {
- animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ .hero-copy {
+ animation:
+ rise-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
+ hero-copy-scroll 1s linear both;
+ animation-timeline: auto, view();
+ animation-range: normal, exit 0% exit 100%;
+ }
+
+ .hero-proof {
+ animation:
+ rise-in 720ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
+ hero-proof-scroll 1s linear both;
+ animation-timeline: auto, view();
+ animation-range: normal, exit 0% exit 100%;
+ }
+
+ .section::after {
+ animation: line-draw 1s linear both;
animation-timeline: view();
- animation-range: entry 25% entry 100%;
+ animation-range: cover 55% cover 80%;
+ }
+
+ .reveal-on-scroll {
+ animation: scroll-reveal 1s linear both;
+ animation-timeline: view();
+ animation-range: entry 25% cover 50%;
}
.section-heading.reveal-on-scroll {
@@ -882,105 +962,183 @@
}
.section-heading .section-kicker {
- animation: kicker-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: kicker-reveal 1s linear both;
animation-timeline: view();
- animation-range: entry 25% entry 90%;
+ animation-range: entry 25% cover 32%;
}
.section-heading .section-title {
- animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: title-reveal 1s linear both;
animation-timeline: view();
- animation-range: entry 32% contain 6%;
+ animation-range: entry 35% cover 48%;
}
.section-heading .section-description {
- animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: reveal-from-right 1s linear both;
animation-timeline: view();
- animation-range: entry 48% contain 14%;
+ animation-range: entry 50% cover 58%;
}
.capability-row:nth-child(1) {
animation-name: reveal-from-left;
- animation-range: entry 12% entry 100%;
+ animation-range: entry 20% cover 45%;
}
.capability-row:nth-child(2) {
- animation-range: entry 35% contain 10%;
+ animation-range: entry 40% cover 54%;
}
.capability-row:nth-child(3) {
animation-name: reveal-from-right-card;
- animation-range: entry 58% contain 20%;
+ animation-range: entry 60% cover 63%;
+ }
+
+ .capability-row .row-index,
+ .capability-row .row-title,
+ .capability-row .row-detail,
+ .capability-row .row-tag {
+ animation: detail-rise 1s linear both;
+ animation-timeline: view();
+ }
+
+ .capability-row .row-index {
+ animation-range: entry 20% cover 30%;
+ }
+
+ .capability-row .row-title {
+ animation-range: entry 35% cover 38%;
+ }
+
+ .capability-row .row-detail {
+ animation-range: entry 45% cover 48%;
+ }
+
+ .capability-row .row-tag {
+ animation-name: tag-reveal;
+ animation-range: entry 55% cover 58%;
}
.workflow-list::before {
- animation: line-draw linear both;
+ animation: line-draw 1s linear both;
animation-timeline: view();
- animation-range: entry 20% contain 40%;
+ animation-range: entry 25% cover 75%;
}
.workflow-step::before {
- animation: line-draw linear both;
+ animation: line-draw 1s linear both;
animation-timeline: view();
- animation-range: entry 35% contain 20%;
+ animation-range: entry 35% cover 55%;
transform-origin: left;
}
.workflow-step:nth-child(1) {
- animation-range: entry 12% entry 100%;
+ animation-range: entry 20% cover 45%;
}
.workflow-step:nth-child(2) {
- animation-range: entry 35% contain 10%;
+ animation-range: entry 40% cover 54%;
}
.workflow-step:nth-child(3) {
- animation-range: entry 58% contain 20%;
+ animation-range: entry 60% cover 63%;
+ }
+
+ .workflow-step .workflow-index,
+ .workflow-step .workflow-title,
+ .workflow-step .workflow-detail,
+ .workflow-step .workflow-meta {
+ animation: detail-rise 1s linear both;
+ animation-timeline: view();
+ }
+
+ .workflow-step .workflow-index {
+ animation-range: entry 25% cover 32%;
+ }
+
+ .workflow-step .workflow-title {
+ animation-range: entry 35% cover 42%;
+ }
+
+ .workflow-step .workflow-detail {
+ animation-range: entry 45% cover 52%;
+ }
+
+ .workflow-step .workflow-meta {
+ animation-name: tag-reveal;
+ animation-range: entry 60% cover 62%;
}
.pricing-layout {
animation-name: panel-unfold;
- animation-range: entry 28% contain 12%;
+ animation-range: entry 25% cover 60%;
+ }
+
+ .price-label,
+ .price-note {
+ animation: detail-rise 1s linear both;
+ animation-timeline: view();
+ }
+
+ .price-label {
+ animation-range: entry 25% cover 35%;
}
.price-main {
- animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: number-rise 1s linear both;
animation-timeline: view();
- animation-range: entry 52% contain 18%;
+ animation-range: entry 40% cover 50%;
+ }
+
+ .price-note {
+ animation-range: entry 50% cover 58%;
}
.price-fact {
- animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: reveal-from-right 1s linear both;
animation-timeline: view();
}
.price-fact:nth-child(1) {
- animation-range: entry 38% entry 100%;
+ animation-range: entry 35% cover 46%;
}
.price-fact:nth-child(2) {
- animation-range: entry 52% contain 10%;
+ animation-range: entry 50% cover 57%;
}
.price-fact:nth-child(3) {
- animation-range: entry 66% contain 18%;
+ animation-range: entry 65% cover 68%;
}
.docs-panel {
animation-name: panel-unfold;
- animation-range: entry 30% contain 12%;
+ animation-range: entry 25% cover 62%;
+ }
+
+ .docs-panel .section-kicker,
+ .docs-panel .section-description {
+ animation: detail-rise 1s linear both;
+ animation-timeline: view();
+ }
+
+ .docs-panel .section-kicker {
+ animation-range: entry 30% cover 38%;
}
.docs-panel .section-title {
- animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: title-reveal 1s linear both;
animation-timeline: view();
- animation-range: entry 48% contain 16%;
+ animation-range: entry 40% cover 52%;
+ }
+
+ .docs-panel .section-description {
+ animation-range: entry 52% cover 60%;
}
.doc-link {
- animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+ animation: reveal-from-right 1s linear both;
animation-timeline: view();
- animation-range: entry 62% contain 22%;
+ animation-range: entry 65% cover 72%;
}
}
@@ -1210,14 +1368,29 @@
}
.reveal-on-scroll,
+ .hero-copy,
+ .hero-proof,
+ .section::after,
.section-heading .section-kicker,
.section-heading .section-title,
.section-heading .section-description,
+ .capability-row .row-index,
+ .capability-row .row-title,
+ .capability-row .row-detail,
+ .capability-row .row-tag,
.workflow-list::before,
.workflow-step::before,
+ .workflow-step .workflow-index,
+ .workflow-step .workflow-title,
+ .workflow-step .workflow-detail,
+ .workflow-step .workflow-meta,
+ .price-label,
.price-main,
+ .price-note,
.price-fact,
+ .docs-panel .section-kicker,
.docs-panel .section-title,
+ .docs-panel .section-description,
.doc-link {
opacity: 1 !important;
clip-path: none !important;