diff --git a/frontend/components/landing/three-categories/dashboard-image.tsx b/frontend/components/landing/three-categories/dashboard-image.tsx
index 8955de00f..1fb5c6463 100644
--- a/frontend/components/landing/three-categories/dashboard-image.tsx
+++ b/frontend/components/landing/three-categories/dashboard-image.tsx
@@ -15,13 +15,14 @@ const DashboardImage = ({ className }: Props) => {
const { scrollYProgress } = useScroll({
target: ref,
- offset: ["start end", "start start"],
+ offset: ["start end", "end start"],
});
// Pan from top-left (0%, 0%) to bottom-right (100%, 100%)
// Since image is 140% of container, we can pan 40% in each direction
const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 0.8, 1]);
- const y = useTransform(scrollYProgress, [0, 0.5, 1], ["40px", "10px", "-60px"]);
+ const y = useTransform(scrollYProgress, [0, 0.5, 1], ["80px", "30px", "10px"]);
+ const graphsY = useTransform(scrollYProgress, [0, 0.3, 0.5, 1], ["0px", "-10px", "-100px", "-400px"]);
return (
{
className
)}
>
-
-
+
+
+
-
{/* Gradient overlay at bottom left */}
diff --git a/frontend/components/landing/three-categories/debugger-video/index.tsx b/frontend/components/landing/three-categories/debugger-video/index.tsx
index 58c0fcbbb..b7b694cde 100644
--- a/frontend/components/landing/three-categories/debugger-video/index.tsx
+++ b/frontend/components/landing/three-categories/debugger-video/index.tsx
@@ -10,9 +10,9 @@ import ChapterButton from "./chapter-button";
const chapters = [
{ label: "Run local,\ndebug in browser", startTime: 0 },
- { label: "Rerun at step N with\nprevious context preserved", startTime: 26 },
- { label: "Tune your\nsystem prompts", startTime: 37 },
- { label: "Instantly reflect\nchanges as you save", startTime: 50 },
+ { label: "Rerun at step N with\nprevious context preserved", startTime: 12 },
+ { label: "Tune your\nsystem prompts", startTime: 14 },
+ { label: "Instantly reflect\nchanges as you save", startTime: 24 },
];
const DebuggerVideo = () => {
@@ -71,7 +71,7 @@ const DebuggerVideo = () => {
))}
-
+
{isLoading && (
@@ -80,7 +80,7 @@ const DebuggerVideo = () => {
}) => (
+
+ {/* Track */}
+ {Y_VALUES.map((y, i) => (
+
+ ))}
+ {/* Progress */}
+ {Y_VALUES.map((y, i) => (
+
+ ))}
+
+);
+
+export default AnimatedThreads3;
diff --git a/frontend/components/landing/three-categories/signals-section/index.tsx b/frontend/components/landing/three-categories/signals-section/index.tsx
index 18eb1d261..fee9a14d0 100644
--- a/frontend/components/landing/three-categories/signals-section/index.tsx
+++ b/frontend/components/landing/three-categories/signals-section/index.tsx
@@ -26,7 +26,7 @@ const SignalsSection = ({ className }: Props) => {
const bufferHeight = useTransform(springBufferHeight, (v) => `${v}vh`);
return (
-
+
diff --git a/frontend/components/landing/three-categories/signals-section/reports-panel.tsx b/frontend/components/landing/three-categories/signals-section/reports-panel.tsx
new file mode 100644
index 000000000..ab24bc090
--- /dev/null
+++ b/frontend/components/landing/three-categories/signals-section/reports-panel.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { motion, type MotionValue, useTransform } from "framer-motion";
+
+const REPORT_SIGNALS = [
+ { name: "Browser errors", events: 11 },
+ { name: "Slow tasks and optimization", events: 246 },
+ { name: "Server startup errors", events: 94 },
+];
+
+interface Props {
+ progress: MotionValue
;
+}
+
+const ReportsPanel = ({ progress }: Props) => {
+ const slackOpacity = useTransform(progress, [0.4, 0.7], [0, 1]);
+ const slackY = useTransform(progress, [0.4, 0.7], [20, 0]);
+ const emailOpacity = useTransform(progress, [0.4, 0.7], [1, 0.6]);
+
+ return (
+
+ {/* Email report card */}
+
+ {/* Email header */}
+
+
from: reports@mail.lmnr.ai
+
+
+ {/* Email body */}
+
+ {/* Title + Total events */}
+
+
+
+
AI Startup · Signals Events Summary
+
Mar 06, 2026 - Mar 13, 2026
+
+
+
+ {/* My Agent section */}
+
+
+ My Agent
+
+
+ {/* Signals table */}
+
+ {/* Table header */}
+
+ {/* Table rows */}
+ {REPORT_SIGNALS.map((signal, i) => (
+
+ ))}
+
+
+ {/* Summary */}
+
+
Summary
+
+ The agent frequently performs inefficient sequential edits on dozens of files instead of using scripted
+ automation, leading to high latency and redundant tool calls. Sandbox environments often require manual
+ Git authentication and dependency setup.
+
+
+
+
+ {/* Gradient overlay fading bottom of email */}
+
+
+
+
+ {/* Slack notification card */}
+
+ {/* Laminar icon */}
+
+
+ {/* Content */}
+
+
+
+
+
+ Description:
+
+ {`The LLM in the 'refine_report' task failed to follow the instruction to keep the summary to 3-4 sentences,.`}
+
+
+
+
+ );
+};
+
+export default ReportsPanel;
diff --git a/frontend/components/landing/three-categories/signals-section/signals-image.tsx b/frontend/components/landing/three-categories/signals-section/signals-image.tsx
index ad475f8cd..f242b056f 100644
--- a/frontend/components/landing/three-categories/signals-section/signals-image.tsx
+++ b/frontend/components/landing/three-categories/signals-section/signals-image.tsx
@@ -7,9 +7,11 @@ import { cn } from "@/lib/utils";
import AnimatedThreads0 from "./animated-threads-0";
import AnimatedThreads1 from "./animated-threads-1";
import AnimatedThreads2 from "./animated-threads-2";
+import AnimatedThreads3 from "./animated-threads-3";
import ClustersPanel from "./clusters-panel";
import DefinitionCard from "./definition-card";
import EventsTable from "./events-table";
+import ReportsPanel from "./reports-panel";
import SectionTitle from "./section-title";
const SECTION_WIDTH = "w-[420px] md:w-[515px]";
@@ -29,12 +31,14 @@ const SignalsImage = ({ className, scrollProgress: scrollProgressProp }: Props)
const x = useTransform(scrollProgress, [0, 1], ["0%", "-100%"]);
// Map scroll ranges to 0→1 progress for each child
- const threads0Progress = useTransform(scrollProgress, [0.0, 0.15], [0, 1]);
- const threads1Progress = useTransform(scrollProgress, [0.2, 0.5], [0, 1]);
- const threads2Progress = useTransform(scrollProgress, [0.55, 0.9], [0, 1]);
- const typingProgress = useTransform(scrollProgress, [0.12, 0.3], [0, 1]);
- const eventsScrollProgress = useTransform(scrollProgress, [0.3, 1], [0, 1]);
- const clustersProgress = useTransform(scrollProgress, [0.7, 1], [0, 1]);
+ const threads0Progress = useTransform(scrollProgress, [0.0, 0.12], [0, 1]);
+ const threads1Progress = useTransform(scrollProgress, [0.16, 0.36], [0, 1]);
+ const threads2Progress = useTransform(scrollProgress, [0.44, 0.64], [0, 1]);
+ const threads3Progress = useTransform(scrollProgress, [0.72, 0.88], [0, 1]);
+ const typingProgress = useTransform(scrollProgress, [0.1, 0.24], [0, 1]);
+ const eventsScrollProgress = useTransform(scrollProgress, [0.24, 0.72], [0, 1]);
+ const clustersProgress = useTransform(scrollProgress, [0.56, 0.8], [0, 1]);
+ const reportsProgress = useTransform(scrollProgress, [0.8, 1], [0, 1]);
return (
+
+ {/* Connector 3: Straight horizontal lines (duplicate of Connector 1) */}
+
+
+ {/* Column 5: Reports (Email + Slack) */}
+
);
diff --git a/frontend/public/assets/landing/dashboards-frame.png b/frontend/public/assets/landing/dashboards-frame.png
new file mode 100644
index 000000000..861c75abd
Binary files /dev/null and b/frontend/public/assets/landing/dashboards-frame.png differ
diff --git a/frontend/public/assets/landing/dashboards-graphs.png b/frontend/public/assets/landing/dashboards-graphs.png
new file mode 100644
index 000000000..d2e189f12
Binary files /dev/null and b/frontend/public/assets/landing/dashboards-graphs.png differ
diff --git a/frontend/public/assets/landing/dashboards.png b/frontend/public/assets/landing/dashboards.png
deleted file mode 100644
index 6959b9ad5..000000000
Binary files a/frontend/public/assets/landing/dashboards.png and /dev/null differ
diff --git a/frontend/public/assets/landing/debugger.png b/frontend/public/assets/landing/debugger.png
index 92f425864..2931ae1f9 100644
Binary files a/frontend/public/assets/landing/debugger.png and b/frontend/public/assets/landing/debugger.png differ