From 253910d1883d170097c496963b67f07143d4fd15 Mon Sep 17 00:00:00 2001
From: durga710 <152849649+durga710@users.noreply.github.com>
Date: Wed, 22 Jul 2026 16:06:05 -0400
Subject: [PATCH] fix: make landing scroll-reveals trigger earlier and finish
 faster

Sections sat invisible while scrolling because reveals waited for deep
viewport intersection and ran long animations:

- LandingPage .rh-rv: observe at 6% visibility (was 15% + -8% rootMargin),
  transition 0.45s/12px (was 0.6s/16px), stagger delays tightened
- RayVerifySection: framer-motion viewport amounts 0.2-0.3 (was 0.4-0.6),
  durations 0.4-0.5s (was 0.5-0.7s), per-stage stagger 0.07s (was 0.12s)

Worst case was the dark RayVerify band: pipeline stages needed 60%
visibility plus ~1.7s of staggered animation, reading as an empty box.
---
 .../web/src/features/landing/LandingPage.tsx  | 14 ++++++------
 .../src/features/landing/RayVerifySection.tsx | 22 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/features/landing/LandingPage.tsx b/packages/web/src/features/landing/LandingPage.tsx
index 5d82d526..0bf87de5 100644
--- a/packages/web/src/features/landing/LandingPage.tsx
+++ b/packages/web/src/features/landing/LandingPage.tsx
@@ -427,11 +427,11 @@ button.rh-btn{border:0; cursor:pointer; font-family:inherit;}
 
 /* staggered scroll-reveal, cards in a row cascade in rather than snapping
    as a block */
-.rh-roles .rh-rv:nth-child(2){transition-delay:.07s;}
-.rh-roles .rh-rv:nth-child(3){transition-delay:.14s;}
-.rh-roles .rh-rv:nth-child(4){transition-delay:.21s;}
-.rh-pricing .rh-rv:nth-child(2){transition-delay:.07s;}
-.rh-pricing .rh-rv:nth-child(3){transition-delay:.14s;}
+.rh-roles .rh-rv:nth-child(2){transition-delay:.05s;}
+.rh-roles .rh-rv:nth-child(3){transition-delay:.1s;}
+.rh-roles .rh-rv:nth-child(4){transition-delay:.15s;}
+.rh-pricing .rh-rv:nth-child(2){transition-delay:.05s;}
+.rh-pricing .rh-rv:nth-child(3){transition-delay:.1s;}
 
 /* hover-lift for the pricing + EVV mockup cards, matching the role cards */
 .rh-price{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
@@ -441,7 +441,7 @@ button.rh-btn{border:0; cursor:pointer; font-family:inherit;}
 .rh-evvi:hover{border-color:var(--accent); background:var(--accent-tint); transform:translateY(-1px);}
 
 /* reveal */
-.rh-rv{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
+.rh-rv{opacity:0; transform:translateY(12px); transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);}
 .rh-rv.in{opacity:1; transform:none;}
 @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .rh-rv{opacity:1; transform:none; transition:none;} .rh-btn,.rh-rolecard,.rh-price,.rh-evvi{transition:none;} .rh-eyebrow .pip,.rh-hero-bloom,.rh-herotext > *,.rh-heromedia,.rh-theater-map .pin::after,.rh-theater-inner,.rh-spotvis .status-dot,.rh-theater-inner .status-dot{animation:none;} }
 `,
@@ -635,7 +635,7 @@ export function LandingPage() {
     if (!els || !('IntersectionObserver' in window)) { els?.forEach((e) => e.classList.add('in')); return; }
     const io = new IntersectionObserver(
       (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }),
-      { threshold: 0.15, rootMargin: '0px 0px -8% 0px' },
+      { threshold: 0.06, rootMargin: '0px 0px 0px 0px' },
     );
     els.forEach((e) => io.observe(e));
     return () => io.disconnect();
diff --git a/packages/web/src/features/landing/RayVerifySection.tsx b/packages/web/src/features/landing/RayVerifySection.tsx
index b75a1911..89183020 100644
--- a/packages/web/src/features/landing/RayVerifySection.tsx
+++ b/packages/web/src/features/landing/RayVerifySection.tsx
@@ -120,10 +120,10 @@ export function RayVerifySection() {
     reduce
       ? { initial: { opacity: 1 }, whileInView: { opacity: 1 } }
       : {
-          initial: { opacity: 0, y: 24 },
+          initial: { opacity: 0, y: 16 },
           whileInView: { opacity: 1, y: 0 },
-          transition: { duration: 0.7, ease, delay },
-          viewport: { once: true, amount: 0.4 },
+          transition: { duration: 0.5, ease, delay },
+          viewport: { once: true, amount: 0.2 },
         };
 
   return (
@@ -160,10 +160,10 @@ export function RayVerifySection() {
                 <motion.li
                   key={s.label}
                   className="rvfy-stage"
-                  initial={reduce ? { opacity: 1 } : { opacity: 0, x: -16 }}
+                  initial={reduce ? { opacity: 1 } : { opacity: 0, x: -12 }}
                   whileInView={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.5, ease, delay: 0.12 * i }}
-                  viewport={{ once: true, amount: 0.6 }}
+                  transition={{ duration: 0.4, ease, delay: 0.07 * i }}
+                  viewport={{ once: true, amount: 0.3 }}
                 >
                   <span className="rvfy-node">{icon(s.glyph)}</span>
                   <span className="rvfy-stagetext">
@@ -177,10 +177,10 @@ export function RayVerifySection() {
               ))}
               <motion.li
                 className="rvfy-stage rvfy-verified"
-                initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.9 }}
+                initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.94 }}
                 whileInView={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.55, ease, delay: 0.12 * PIPELINE.length }}
-                viewport={{ once: true, amount: 0.6 }}
+                transition={{ duration: 0.45, ease, delay: 0.07 * PIPELINE.length }}
+                viewport={{ once: true, amount: 0.3 }}
               >
                 <span className="rvfy-node rvfy-node-ok">{icon(<path d="M20 6 9 17l-5-5" />)}</span>
                 <span className="rvfy-stagetext">
@@ -194,13 +194,13 @@ export function RayVerifySection() {
           {/* Value layers */}
           <div className="rvfy-layers">
             {LAYERS.map((l, i) => (
-              <motion.div key={l.t} className="rvfy-layer" {...rise(0.1 + 0.08 * i)}>
+              <motion.div key={l.t} className="rvfy-layer" {...rise(0.06 + 0.06 * i)}>
                 <p className="rvfy-layerk">{l.k}</p>
                 <h3 className="rvfy-layert">{l.t}</h3>
                 <p className="rvfy-layerb">{l.b}</p>
               </motion.div>
             ))}
-            <motion.div className="rvfy-cta" {...rise(0.34)}>
+            <motion.div className="rvfy-cta" {...rise(0.26)}>
               <Link to="/rayverify" className="rvfy-btn">
                 Learn about RayVerify
                 {icon(<path d="M5 12h14M13 6l6 6-6 6" />)}