From 5dd4c0b38078cf48b303024e4e4478cbd5a04d4d Mon Sep 17 00:00:00 2001
From: Jan Burzinski <156842394+janburzinski@users.noreply.github.com>
Date: Sun, 11 Oct 2026 17:11:59 +0200
Subject: [PATCH] fix: line up both sides of the logo dock with the middle tile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/website/src/app/globals.css          |  2 +-
 packages/website/src/components/logo-dock.tsx | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/website/src/app/globals.css b/packages/website/src/app/globals.css
index 6b3a685..ba7cde4 100644
--- a/packages/website/src/app/globals.css
+++ b/packages/website/src/app/globals.css
@@ -23,7 +23,7 @@
 }
 
 /* LogoDock's sides: from the start of the middle copy of the logos to the start of the last, so
-   jumping back is invisible. Each side sets its own duration and delay. */
+   jumping back is invisible. Each side sets its own duration. */
 @keyframes logo-marquee {
 	from {
 		transform: translateY(calc(-100% / 3));
diff --git a/packages/website/src/components/logo-dock.tsx b/packages/website/src/components/logo-dock.tsx
index 19225a3..78b6eab 100644
--- a/packages/website/src/components/logo-dock.tsx
+++ b/packages/website/src/components/logo-dock.tsx
@@ -76,11 +76,9 @@ function LogoTile({logo}: {logo: Logo}) {
 // the middle copy (`.logo-marquee` in globals.css), so there is always a logo above and below.
 function LogoMarquee({
 	logos,
-	delayMs,
 	reverse,
 }: {
 	logos: Logo[];
-	delayMs: number;
 	reverse: boolean;
 }) {
 	return (
@@ -89,7 +87,6 @@ function LogoMarquee({
 				className="logo-marquee"
 				style={{
 					animationDuration: `${LOGO_MS * logos.length}ms`,
-					animationDelay: `${delayMs}ms`,
 					animationDirection: reverse ? 'reverse' : 'normal',
 				}}
 			>
@@ -106,7 +103,8 @@ function LogoMarquee({
 }
 
 // Personal Agent Proxy between the agents on its left and the services on its right, the agents
-// scrolling down and the services up, like paper.design's dock.
+// scrolling down and the services up, like paper.design's dock. Both sides move a logo in the same
+// time from the same start, so their logos line up with Personal Agent Proxy together.
 export function LogoDock({className}: {className?: string}) {
 	return (
 		<div
@@ -115,7 +113,7 @@ export function LogoDock({className}: {className?: string}) {
 				className,
 			)}
 		>
-			<LogoMarquee logos={AGENTS} delayMs={0} reverse />
+			<LogoMarquee logos={AGENTS} reverse />
 			<LogoTile
 				logo={{
 					name: 'Personal Agent Proxy',
@@ -125,7 +123,7 @@ export function LogoDock({className}: {className?: string}) {
 					tile: 'bg-white p-2 sm:p-2.5 dark:bg-black',
 				}}
 			/>
-			<LogoMarquee logos={SERVICES} delayMs={-LOGO_MS / 2} reverse={false} />
+			<LogoMarquee logos={SERVICES} reverse={false} />
 		</div>
 	);
 }