Make home, /teams and 404 lighter without changing what they show

web/app/DurableDeliveryTimeline.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Bot, Check, CircleAlert, Database, FileOutput, RotateCcw, UserRoundCheck, Webhook } from 'lucide-react';
 
 import { AgentToolLogo, type AgentTool } from '../components/AgentToolLogos';
+import { useOnScreen } from '../components/useOnScreen';
 import s from './landing.module.css';
 
 type AgentTimelineItem = {
@@ -113,20 +114,24 @@ function getTimelineDelay(index: number) {
 
 export function DurableDeliveryTimeline() {
   const [cursor, setCursor] = useState(INITIAL_TIMELINE_CURSOR);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(rootRef);
   const items = Array.from({ length: VISIBLE_TIMELINE_ITEMS }, (_, offset) =>
     getTimelineItem(cursor - VISIBLE_TIMELINE_ITEMS + 1 + offset)
   );
 
   useEffect(() => {
+    if (!onScreen) return;
+
     const timeoutId = window.setTimeout(() => {
       setCursor((current) => current + 1);
     }, getTimelineDelay(cursor));
 
     return () => window.clearTimeout(timeoutId);
-  }, [cursor]);
+  }, [cursor, onScreen]);
 
   return (
-    <div className={s.durableTimelinePreview} aria-label="Durable message delivery timeline">
+    <div className={s.durableTimelinePreview} aria-label="Durable message delivery timeline" ref={rootRef}>
       <span className={s.durableTimelineLine} />
       {items.map((item) => {
         if (item.kind === 'agent') {
@@ -213,23 +218,26 @@ function WorkflowTraceIcon({ kind }: { kind: WorkflowTraceItem['kind'] }) {
 
 export function DurableWorkflowTrace() {
   const [activeStep, setActiveStep] = useState(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(rootRef);
 
   useEffect(() => {
     const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (reducedMotion) {
       setActiveStep(WORKFLOW_TRACE.length - 1);
       return undefined;
     }
+    if (!onScreen) return undefined;
 
     const timeoutId = window.setTimeout(() => {
       setActiveStep((current) => (current + 1) % WORKFLOW_TRACE.length);
     }, WORKFLOW_STEP_DELAYS_MS[activeStep]);
 
     return () => window.clearTimeout(timeoutId);
-  }, [activeStep]);
+  }, [activeStep, onScreen]);
 
   return (
-    <div className={s.workflowTracePreview} aria-label="Durable workflow execution trace">
+    <div className={s.workflowTracePreview} aria-label="Durable workflow execution trace" ref={rootRef}>
       <div className={s.workflowTraceHeader}>
         <span>run_01J7</span>
         <strong>{activeStep === WORKFLOW_TRACE.length - 1 ? 'completed' : 'running'}</strong>

web/app/RealtimeEventFeed.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { AgentToolLogo, type AgentTool } from '../components/AgentToolLogos';
+import { useOnScreen } from '../components/useOnScreen';
 import s from './landing.module.css';
 
 const REALTIME_EVENT_ACTIVITY = [
@@ -141,8 +142,12 @@ export function RealtimeEventFeed() {
   const sequenceRef = useRef(INITIAL_EVENT_COUNT);
   const idRef = useRef(INITIAL_EVENT_COUNT);
   const stepRef = useRef(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(rootRef);
 
   useEffect(() => {
+    if (!onScreen) return;
+
     let active = true;
     let timeoutId: number | undefined;
 
@@ -172,10 +177,10 @@ export function RealtimeEventFeed() {
       active = false;
       window.clearTimeout(timeoutId);
     };
-  }, []);
+  }, [onScreen]);
 
   return (
-    <div className={s.realtimeFeed}>
+    <div className={s.realtimeFeed} ref={rootRef}>
       <div className={s.realtimeFeedList}>
         {events.map((event) => (
           <div className={s.realtimeEvent} key={event.id}>

web/app/SearchPreviewAnimation.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
+import { useOnScreen } from '../components/useOnScreen';
 import s from './landing.module.css';
 
 const SEARCH_QUERY = 'handoff token';
@@ -39,6 +40,9 @@ function visibleResultCount(length: number) {
 
 export function SearchPreviewAnimation() {
   const [typedLength, setTypedLength] = useState(0);
+  const typedLengthRef = useRef(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(rootRef);
 
   useEffect(() => {
     const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -47,6 +51,8 @@ export function SearchPreviewAnimation() {
       setTypedLength(SEARCH_QUERY.length);
       return;
     }
+    // Paused while offscreen; resumes from the current keystroke.
+    if (!onScreen) return;
 
     let active = true;
     let timeoutId: number | undefined;
@@ -59,25 +65,25 @@ export function SearchPreviewAnimation() {
         if (!active) return;
 
         const next = atEnd ? 0 : nextLength + 1;
+        typedLengthRef.current = next;
         setTypedLength(next);
         tick(next);
       }, delay);
     };
 
-    setTypedLength(0);
-    tick(0);
+    tick(typedLengthRef.current);
 
     return () => {
       active = false;
       window.clearTimeout(timeoutId);
     };
-  }, []);
+  }, [onScreen]);
 
   const query = SEARCH_QUERY.slice(0, typedLength);
   const resultCount = visibleResultCount(typedLength);
 
   return (
-    <div className={s.searchPreview}>
+    <div className={s.searchPreview} ref={rootRef}>
       <div className={s.searchBar}>
         <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
           <circle cx="11" cy="11" r="6.5" stroke="currentColor" strokeWidth="2" />

web/app/docs/layout.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import { DocsLanguageProvider } from '../../components/docs/DocsLanguageContext';
 import { DocsNav } from '../../components/docs/DocsNav';
 import { DocsSearch } from '../../components/docs/DocsSearch';
-import { DocsGitHubStarsBadgeServer } from '../../components/GitHubStars';
+import { DocsGitHubStarsBadgeServer } from '../../components/DocsGitHubStarsBadgeServer';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
 import styles from '../../components/docs/docs.module.css';

web/app/enterprise/enterprise.module.css

@@ -39,20 +39,6 @@
   text-align: center;
 }
 
-.eyebrow {
-  width: fit-content;
-  margin: 0 0 22px;
-  padding: 8px 13px;
-  border: 1px solid var(--enterprise-line-strong);
-  border-radius: 8px;
-  color: var(--enterprise-accent);
-  font-family: var(--font-geist-mono), monospace;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.11em;
-  text-transform: uppercase;
-}
-
 .hero h1 {
   margin: 0 auto;
   max-width: 16ch;