Optimize scrollytelling: lazy cards, dynamic CDF agents, perf hints

Author: atharvas

src/components/intro/Intro.CDF.svelte

@@ -52,29 +52,15 @@
 		return cdfPoints;
 	}
 
-	// Process data for all three agents
+	// Process data for all agents dynamically
 	$: cdfData =
 		data.length > 0
-			? [
-					{
-						agent: AGENT_IDS.CLAUDE,
-						agentName: AGENT_NAMES[AGENT_IDS.CLAUDE],
-						color: AGENT_COLORS[AGENT_IDS.CLAUDE],
-						values: calculateCDF(AGENT_IDS.CLAUDE, data)
-					},
-					{
-						agent: AGENT_IDS.GPT5,
-						agentName: AGENT_NAMES[AGENT_IDS.GPT5],
-						color: AGENT_COLORS[AGENT_IDS.GPT5],
-						values: calculateCDF(AGENT_IDS.GPT5, data)
-					},
-					{
-						agent: AGENT_IDS.HUMAN,
-						agentName: AGENT_NAMES[AGENT_IDS.HUMAN],
-						color: AGENT_COLORS[AGENT_IDS.HUMAN],
-						values: calculateCDF(AGENT_IDS.HUMAN, data)
-					}
-				]
+			? Object.values(AGENT_IDS).map((agentId) => ({
+					agent: agentId,
+					agentName: AGENT_NAMES[agentId],
+					color: AGENT_COLORS[agentId],
+					values: calculateCDF(agentId, data)
+				})).filter(d => d.values.length > 0)
 			: [];
 
 	// Determine which agent is selected

src/components/intro/Intro.svelte

@@ -123,7 +123,7 @@
 		<IntroAgents bind:this={introAgentsRef} {scrollIndex} {scrollyContainer} />
 		<IntroCDF {scrollIndex} />
 	</div>
-	<Scrolly bind:value={scrollIndex} bind:container={scrollyContainer}>
+	<Scrolly bind:value={scrollIndex} bind:container={scrollyContainer} increments={25}>
 		<!-- Step 0: Opening prompt -->
 		<div class="step">
 			<div class="step-inner">
@@ -209,7 +209,9 @@
 
 	.sticky {
 		width: 100%;
-		height: 100svh;
+		height: 100dvh;
+		will-change: transform;
+		contain: layout style paint;
 		position: sticky;
 		display: flex;
 		flex-direction: column;
@@ -233,7 +235,7 @@
 	}
 
 	.step:first-of-type {
-		margin-top: calc(-100svh + 6rem);
+		margin-top: calc(-100dvh + 6rem);
 	}
 
 	.step-inner {

src/components/pages/BlogPage.svelte

@@ -66,7 +66,11 @@
 			<Slider bind:this={sliderEl} bind:current={$currAgentSlide}>
 				{#each agents as agent, i}
 					<Slide index={i}>
-						<AgentCard {agent} />
+						{#if Math.abs(i - $currAgentSlide) <= 1}
+							<AgentCard {agent} />
+						{:else}
+							<div class="agent-card-placeholder" style="min-height: 400px;" />
+						{/if}
 					</Slide>
 				{/each}
 			</Slider>

src/routes/player/[...recordingPath]/+page.svelte

@@ -41,7 +41,7 @@
 			? Number(benchmark["oracle/nop"])
 			: undefined;
 	$: benchmarkPath =
-		benchmark?.benchmark_decoposed || benchmark?.benchmark_without_params || "";
+		benchmark?.benchmark_decomposed || benchmark?.benchmark_without_params || "";
 
 	// Reactive theme subscription
 	let currentTheme;
@@ -122,7 +122,7 @@
 				>
 			</div>
 			<div class="metric">
-				<span class="metric-label">Expert Human speedup</span>
+				<span class="metric-label">Oracle speedup</span>
 				<span class="metric-value highlight"
 					>{oracleSpeed !== undefined
 						? `${oracleSpeed.toFixed(4)}x`