@oracle-agent/oracle 0.35.1 → 0.35.2

package/public/oracle-splash/index.html

@@ -46,6 +46,17 @@
  --sans:"Outfit",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
+ --scene-a:#7CC4FF;
+ --scene-b:#50D2C1;
+ --scene-soft:rgba(124,196,255,.14);
+ --scroll-pct:0%;
+ --scroll-shift:0px;
+ --scroll-shift-neg:0px;
+ --scroll-shift-soft:0px;
+ --scroll-drift:0px;
+ --scroll-rot:0deg;
+ --scroll-rot-neg:0deg;
+ --scroll-zoom:.94;
  --pad:clamp(18px,4vw,48px);
 
  --fs-micro:10px;
@@ -89,6 +100,22 @@ img{display:inline-block}
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
 }
 
+.scroll-craft{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.7;mix-blend-mode:screen;contain:layout paint style}
+.scroll-craft::before{content:"";position:absolute;inset:-12%;background:radial-gradient(46% 34% at 72% 22%,var(--scene-soft),transparent 66%),radial-gradient(38% 28% at 12% 76%,rgba(80,210,193,.10),transparent 70%);filter:blur(8px);transform:translate3d(0,var(--scroll-drift),0) scale(1.04)}
+.craft-grid{position:absolute;inset:-8%;opacity:.22;background-image:linear-gradient(rgba(124,196,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,255,.10) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 56% 42%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 56% 42%,#000 0%,transparent 70%);transform:translate3d(var(--scroll-drift),var(--scroll-shift-neg),0)}
+.craft-orbit{position:absolute;right:min(7vw,92px);top:22vh;width:clamp(220px,28vw,430px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(167,216,255,.2);box-shadow:0 0 70px rgba(124,196,255,.1),inset 0 0 42px rgba(124,196,255,.06);transform:translate3d(0,var(--scroll-shift),0) rotate(var(--scroll-rot)) scale(var(--scroll-zoom))}
+.craft-orbit::before,.craft-orbit::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(124,196,255,.18);transform:rotateX(68deg)}
+.craft-orbit::after{inset:24%;border-color:rgba(80,210,193,.2);transform:rotateY(64deg)}
+.craft-orbit.is-b{right:auto;left:-8vw;top:62vh;width:clamp(240px,34vw,520px);opacity:.46;filter:blur(.2px);transform:translate3d(0,var(--scroll-shift-soft),0) rotate(var(--scroll-rot-neg)) scale(.86)}
+.scene-rail{position:fixed;right:18px;top:50%;z-index:29;transform:translateY(-50%);display:grid;gap:11px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(201,218,236,.44)}
+.scene-rail span{position:relative;display:grid;place-items:center;width:30px;height:22px;border:1px solid rgba(124,196,255,.12);border-radius:999px;background:rgba(11,16,24,.40);transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
+body[data-scene="home"] .scene-rail span[data-scene-dot="home"],body[data-scene="orchestration"] .scene-rail span[data-scene-dot="orchestration"],body[data-scene="chains"] .scene-rail span[data-scene-dot="chains"],body[data-scene="cli"] .scene-rail span[data-scene-dot="cli"],body[data-scene="fees"] .scene-rail span[data-scene-dot="fees"]{color:#071018;border-color:rgba(184,240,255,.82);background:linear-gradient(180deg,var(--scene-a),var(--scene-b));transform:translateX(-4px)}
+body[data-scene="home"]{--scene-a:#7CC4FF;--scene-b:#50D2C1;--scene-soft:rgba(124,196,255,.16)}
+body[data-scene="orchestration"]{--scene-a:#A7D8FF;--scene-b:#9945FF;--scene-soft:rgba(153,69,255,.12)}
+body[data-scene="chains"]{--scene-a:#50D2C1;--scene-b:#D7FF4D;--scene-soft:rgba(80,210,193,.13)}
+body[data-scene="cli"]{--scene-a:#F4F9FE;--scene-b:#7CC4FF;--scene-soft:rgba(244,249,254,.12)}
+body[data-scene="fees"]{--scene-a:#D7FF4D;--scene-b:#F0B90B;--scene-soft:rgba(240,185,11,.12)}
+
 /* ── orbital oracle mark ───────────────────────────── */
 .orbital{position:relative;display:inline-block}
 .orbital svg{display:block;overflow:visible;width:100%;height:100%}
@@ -116,9 +143,10 @@ img{display:inline-block}
 
 .progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:35;pointer-events:none;
- background:linear-gradient(90deg,var(--blue),var(--blue2));
+ background:linear-gradient(90deg,var(--scene-a),var(--scene-b));
  transform-origin:0 50%;transform:scaleX(0);
- box-shadow:0 0 12px rgba(124,196,255,.5);
+ box-shadow:0 0 14px var(--scene-soft);
+ transition:background .45s var(--ease),box-shadow .45s var(--ease);
 }
 
 .nav{
@@ -127,9 +155,14 @@ img{display:inline-block}
  grid-template-columns:1fr auto;
  align-items:center;gap:16px;
  padding:14px var(--pad);
- background:rgba(11,16,24,.82);
+ background:linear-gradient(90deg,rgba(11,16,24,.88),rgba(11,16,24,.72));
  border-bottom:1px solid var(--line);
+ box-shadow:0 18px 50px rgba(0,0,0,.22);
+ backdrop-filter:blur(18px);
+ -webkit-backdrop-filter:blur(18px);
+ transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
 }
+body[data-scene="cli"] .nav,body[data-scene="fees"] .nav{border-bottom-color:rgba(184,240,255,.22);box-shadow:0 18px 60px rgba(0,0,0,.34),0 0 42px var(--scene-soft)}
 .brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:var(--fs-lg);font-weight:400;letter-spacing:.02em;
@@ -1037,10 +1070,7 @@ a.chip:hover{border-color:rgba(124,196,255,.3);background:rgba(21,32,49,.6);tran
 .hero-shot-orb video{opacity:0;transition:opacity .6s var(--ease)}
 .hero-shot-orb video.ready{opacity:1}
 .hero-shot-orb video.ready ~ #orb-still{position:absolute;inset:0;opacity:0;pointer-events:none}
-@media (prefers-reduced-motion:reduce){
- .hero-shot-orb video{display:none}
- .hero-shot-orb #orb-still{position:static;opacity:1}
-}
+@media (prefers-reduced-motion:reduce){.hero-shot-orb video{display:none}.hero-shot-orb video.ready~#orb-still{position:static;opacity:1}}
 /* CLI section leads with a real TUI capture; poster is the reduced-motion fallback. */
 .cli-proof{position:relative;aspect-ratio:auto;height:auto;min-height:0;padding:0;
  max-width:868px;margin-inline:auto;line-height:0;display:block}
@@ -1088,6 +1118,20 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
 .js .rv.in{opacity:1;transform:translate3d(0,0,0);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
 .js .rv.done{transform:none;will-change:auto}
 
+
+.section{position:relative}
+.section::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--scene-a),transparent);opacity:.38;transform-origin:0 50%;transform:scaleX(.35);transition:opacity .45s var(--ease),background .45s var(--ease),transform .8s var(--ease)}
+.section.is-scene::before{opacity:.82;transform:scaleX(1)}
+.section-title em,.home-title em{transition:color .45s var(--ease),text-shadow .45s var(--ease)}
+.section.is-scene .section-title em,body[data-scene="home"] .home-title em{color:var(--scene-a);text-shadow:0 0 34px var(--scene-soft)}
+.graph-shell,.hl-surface,.strategy-surface,.cli-proof,.moat-grid,.selfcustody,.motion-lab{transition:box-shadow .55s var(--ease),border-color .55s var(--ease),transform .55s var(--ease)}
+.section.is-scene .graph-shell,.section.is-scene .hl-surface,.section.is-scene .strategy-surface,.section.is-scene .cli-proof,.section.is-scene .moat-grid,.section.is-scene .selfcustody,.section.is-scene .motion-lab{box-shadow:0 34px 120px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--scene-a) 22%,transparent),0 0 80px var(--scene-soft)}
+.premium-motion .strategy-card,.premium-motion .chain,.premium-motion .agent-panel{will-change:transform}
+.premium-motion .route-tree line{stroke-dasharray:10 7;animation:flow-down 2.4s linear infinite}
+.premium-motion .cli-proof{transform-origin:50% 45%}
+@media (max-width:980px){.scene-rail{display:none}.scroll-craft{opacity:.42}.craft-orbit{right:-18vw;top:18vh}.craft-orbit.is-b{display:none}}
+@media (prefers-reduced-motion:reduce){.scroll-craft{display:none}.scene-rail{display:none}.section::before{transform:none}.section.is-scene .graph-shell,.section.is-scene .hl-surface,.section.is-scene .strategy-surface,.section.is-scene .cli-proof,.section.is-scene .moat-grid,.section.is-scene .selfcustody,.section.is-scene .motion-lab{box-shadow:none}.premium-motion .route-tree line{animation:none}}
+
 @media (max-width:960px){
  .home-inner{max-width:760px}
  .hero-stage{min-height:clamp(300px,44vh,460px)}.home-title{font-size:var(--fs-4xl)}
@@ -1173,6 +1217,18 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
 <body>
 <div class="grain" aria-hidden="true"></div>
 <div class="progress" id="progress" aria-hidden="true"></div>
+<div class="scroll-craft" aria-hidden="true">
+ <div class="craft-grid"></div>
+ <div class="craft-orbit is-a"></div>
+ <div class="craft-orbit is-b"></div>
+</div>
+<div class="scene-rail" aria-hidden="true">
+ <span data-scene-dot="home">01</span>
+ <span data-scene-dot="orchestration">02</span>
+ <span data-scene-dot="chains">03</span>
+ <span data-scene-dot="cli">04</span>
+ <span data-scene-dot="fees">05</span>
+</div>
 
 <div class="loader out" id="loader" aria-hidden="true" style="display:none">
  <div class="loader-inner">
@@ -1856,8 +1912,8 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
   <div>
    <figure class="cli-frame cli-proof">
     <picture>
-     <source srcset="assets/oracle-cli-v035.gif?v=20260823" type="image/gif" media="(prefers-reduced-motion: no-preference)">
-     <img id="cli-still" src="assets/oracle-cli-v035-poster.jpg?v=20260823" alt="Oracle CLI TUI v0.35.0 with starfield, Hyperliquid context, and the ←/→ sessions picker affordance" width="1600" height="1282" loading="eager" fetchpriority="high" />
+     <source srcset="assets/oracle-cli-v035.gif?v=20260824j" type="image/gif" media="(prefers-reduced-motion: no-preference)">
+     <img id="cli-still" src="assets/oracle-cli-v035-poster.jpg?v=20260824j" alt="Oracle CLI TUI v0.35.2 boot screen with Jupiter orb, starfield, Hyperliquid, and ←/→ sessions" width="1600" height="829" loading="eager" fetchpriority="high" />
     </picture>
    </figure>
    <p class="cli-cap">actual oracle shell</p>
@@ -2336,17 +2392,44 @@ var activeLenis = null;
 
  var progress = document.getElementById("progress");
  var ticking = false;
+ var lastScrollY = window.scrollY || 0;
+ function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }
  function onScroll() {
   if (ticking) return;
   ticking = true;
   requestAnimationFrame(function () {
    var h = document.scrollingElement || document.documentElement;
-   var max = h.scrollHeight - h.clientHeight;
-   progress.style.transform = "scaleX(" + (max > 0 ? h.scrollTop / max : 0) + ")";
+   var max = Math.max(1, h.scrollHeight - h.clientHeight);
+   var y = h.scrollTop || window.scrollY || 0;
+   var p = clamp(y / max, 0, 1);
+   var velocity = clamp(y - lastScrollY, -90, 90);
+   lastScrollY = y;
+   progress.style.transform = "scaleX(" + p.toFixed(4) + ")";
+   document.documentElement.style.setProperty("--scroll-pct", (p * 100).toFixed(2) + "%");
+   document.documentElement.style.setProperty("--scroll-shift", (p * 170).toFixed(2) + "px");
+   document.documentElement.style.setProperty("--scroll-shift-neg", (p * -170).toFixed(2) + "px");
+   document.documentElement.style.setProperty("--scroll-shift-soft", (p * -119).toFixed(2) + "px");
+   document.documentElement.style.setProperty("--scroll-drift", (velocity * .36).toFixed(2) + "px");
+   document.documentElement.style.setProperty("--scroll-rot", (p * 620).toFixed(2) + "deg");
+   document.documentElement.style.setProperty("--scroll-rot-neg", (p * -620).toFixed(2) + "deg");
+   document.documentElement.style.setProperty("--scroll-zoom", (.94 + p * .16).toFixed(3));
+   if (sceneSections.length) pickScene();
    ticking = false;
   });
  }
  window.addEventListener("scroll", onScroll, { passive: true });
+
+ var sceneSections = Array.prototype.slice.call(document.querySelectorAll("section[id]"));
+ function activateScene(id) {
+  document.body.dataset.scene = id || "home";
+  sceneSections.forEach(function (section) { section.classList.toggle("is-scene", section.id === id); });
+ }
+ function pickScene(){
+  var mark=innerHeight*.46,best="home",bestDist=1e9;
+  sceneSections.forEach(function(section){var r=section.getBoundingClientRect();if(r.bottom<80||r.top>innerHeight-80)return;var d=Math.abs(r.top+r.height*.42-mark);if(d<bestDist){bestDist=d;best=section.id;}});
+  activateScene(best);
+ }
+ pickScene();
  onScroll();
 
  var heroOrb = document.getElementById("hero-orb");
@@ -2417,9 +2500,14 @@ var activeLenis = null;
   if (window.ScrollTrigger) {
    gsap.fromTo("[data-split] .word-mask > span", { yPercent:112, rotate:2 }, { yPercent:0, rotate:0, duration:1.1, ease:"power4.out", stagger:.035, scrollTrigger:{ trigger:"[data-split]", start:"top 78%" }, clearProps:"transform" });
    gsap.to(".hero-art", { yPercent:18, scale:.9, ease:"none", scrollTrigger:{ trigger:".home", start:"top top", end:"bottom top", scrub:true } });
+   gsap.fromTo(".hero-installer", { y:24, rotateX:2, filter:"brightness(.92)" }, { y:0, rotateX:0, filter:"brightness(1)", duration:1.1, ease:"power4.out", scrollTrigger:{ trigger:".hero-installer", start:"top 88%" }, clearProps:"transform,filter" });
    gsap.fromTo(".motion-card", { y:80, rotateX:8, scale:.965 }, { y:0, rotateX:0, scale:1, duration:1.25, ease:"power4.out", stagger:.08, scrollTrigger:{ trigger:".operator-grid", start:"top 82%" }, clearProps:"transform" });
-   gsap.to(".motion-command", { y:-34, rotateX:3, ease:"none", scrollTrigger:{ trigger:".motion-lab", start:"top 70%", end:"bottom top", scrub:true } });
-   gsap.to(".mega-oracle", { xPercent:-8, ease:"none", scrollTrigger:{ trigger:".mega-oracle", start:"top bottom", end:"bottom top", scrub:true } });
+   gsap.to(".motion-command", { y:-54, rotateX:4, rotateY:-5, ease:"none", scrollTrigger:{ trigger:".motion-lab", start:"top 76%", end:"bottom top", scrub:true } });
+   gsap.fromTo(".chain", { y:42, rotateX:6, opacity:.55 }, { y:0, rotateX:0, opacity:1, duration:.9, ease:"power3.out", stagger:.035, scrollTrigger:{ trigger:"#chains", start:"top 76%" }, clearProps:"transform,opacity" });
+   gsap.fromTo(".strategy-card", { y:46, rotateX:7, opacity:.58 }, { y:0, rotateX:0, opacity:1, duration:1.05, ease:"power3.out", stagger:.025, scrollTrigger:{ trigger:".strategy-grid", start:"top 78%" }, clearProps:"transform,opacity" });
+   gsap.fromTo(".cli-proof", { scale:.94, rotateX:3, y:40 }, { scale:1, rotateX:0, y:0, ease:"none", scrollTrigger:{ trigger:".cli-proof", start:"top 86%", end:"bottom 38%", scrub:1 }, clearProps:"transform" });
+   gsap.to(".route-tree", { scale:1.018, ease:"none", transformOrigin:"50% 50%", scrollTrigger:{ trigger:".route-tree", start:"top 82%", end:"bottom 40%", scrub:1 } });
+   gsap.to(".mega-oracle", { xPercent:-14, letterSpacing:".02em", ease:"none", scrollTrigger:{ trigger:".mega-oracle", start:"top bottom", end:"bottom top", scrub:true } });
   }
   document.documentElement.classList.add("premium-motion");
  }
@@ -2693,46 +2781,5 @@ var activeLenis = null;
    }
  })();
 </script>
-<script>
-// Scroll-triggered reveal animations
-(function(){
- var observer = new IntersectionObserver(function(entries) {
-  entries.forEach(function(e) {
-   if (e.isIntersecting) {
-    e.target.classList.add('revealed');
-    observer.unobserve(e.target);
-   }
-  });
- }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
-
- // Animate: section titles, agent panels, strategy cards, profile cards, proto-cards, bridge demo
- var targets = document.querySelectorAll('.rv, .agent-panel, .strategy-card, .proto-card, .bridge-demo, .strategy-head, .strategy-grid article');
- for (var i = 0; i < targets.length; i++) {
-  targets[i].style.opacity = '0';
-  targets[i].style.transform = 'translateY(24px)';
-  targets[i].style.transition = 'opacity .6s var(--ease), transform .6s var(--ease)';
-  observer.observe(targets[i]);
- }
-
- // CSS class applied on scroll
- var style = document.createElement('style');
- style.textContent =
-  '.revealed { opacity: 1 !important; transform: translateY(0) !important; }' +
-  '.strategy-card:nth-child(1) { transition-delay: 0s !important; }' +
-  '.strategy-card:nth-child(2) { transition-delay: .1s !important; }' +
-  '.strategy-card:nth-child(3) { transition-delay: .15s !important; }' +
-  '.strategy-card:nth-child(4) { transition-delay: .2s !important; }' +
-  '.strategy-card:nth-child(5) { transition-delay: .25s !important; }' +
-  '.strategy-card:nth-child(6) { transition-delay: .3s !important; }' +
-  '.strategy-card:nth-child(7) { transition-delay: .35s !important; }' +
-  '.proto-card:nth-child(1) { transition-delay: 0s !important; }' +
-  '.proto-card:nth-child(2) { transition-delay: .06s !important; }' +
-  '.proto-card:nth-child(3) { transition-delay: .12s !important; }' +
-  '.proto-card:nth-child(4) { transition-delay: .18s !important; }' +
-  '.proto-card:nth-child(5) { transition-delay: .24s !important; }' +
-  '.proto-card:nth-child(6) { transition-delay: .3s !important; }';
- document.head.appendChild(style);
-})();
-</script>
 </body>
 </html>