From e0f3e6cb696a08ef8ca76268380f8d535c5b505b Mon Sep 17 00:00:00 2001
From: Ewan Croft <contact@ewancroft.uk>
Date: Thu, 13 Aug 2026 04:56:46 +0100
Subject: [PATCH] feat(pds-landing): add blinking cursor and terminal component
 polish

Update PromptLine with animated cursor, refine LinkList hover states,
and add depth/shadow refinements across terminal components.
---
 .../src/lib/components/Divider.svelte         |  9 ++++++-
 .../src/lib/components/JetstreamFeed.svelte   |  1 +
 .../src/lib/components/LinkList.svelte        | 19 +++++++++++++--
 .../src/lib/components/PromptLine.svelte      | 24 ++++++++++++++++++-
 .../src/lib/components/TerminalCard.svelte    |  3 ++-
 packages/pds-landing/src/styles/index.css     | 17 +++++++++++++
 6 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/packages/pds-landing/src/lib/components/Divider.svelte b/packages/pds-landing/src/lib/components/Divider.svelte
index 9278010..c596ed3 100644
--- a/packages/pds-landing/src/lib/components/Divider.svelte
+++ b/packages/pds-landing/src/lib/components/Divider.svelte
@@ -3,7 +3,14 @@
 <style>
 	.pds-divider {
 		border: none;
-		border-top: 1px solid color-mix(in srgb, var(--pds-color-green) 12%, transparent);
+		height: 1px;
+		background: linear-gradient(
+			90deg,
+			transparent,
+			color-mix(in srgb, var(--pds-color-green) 20%, transparent) 20%,
+			color-mix(in srgb, var(--pds-color-green) 20%, transparent) 80%,
+			transparent
+		);
 		margin: 1.2rem 0;
 	}
 </style>
diff --git a/packages/pds-landing/src/lib/components/JetstreamFeed.svelte b/packages/pds-landing/src/lib/components/JetstreamFeed.svelte
index 6b4f37e..0140483 100644
--- a/packages/pds-landing/src/lib/components/JetstreamFeed.svelte
+++ b/packages/pds-landing/src/lib/components/JetstreamFeed.svelte
@@ -844,6 +844,7 @@
 
 	.pds-jetstream-status.connected .pds-jetstream-dot {
 		animation: pds-jetstream-blink 2s ease-in-out infinite;
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--pds-color-green) 25%, transparent);
 	}
 
 	.pds-jetstream-status.disconnected {
diff --git a/packages/pds-landing/src/lib/components/LinkList.svelte b/packages/pds-landing/src/lib/components/LinkList.svelte
index 7c8270e..f916011 100644
--- a/packages/pds-landing/src/lib/components/LinkList.svelte
+++ b/packages/pds-landing/src/lib/components/LinkList.svelte
@@ -42,19 +42,34 @@
 		margin: 0;
 	}
 
+	.pds-link-list li {
+		display: flex;
+		align-items: baseline;
+		gap: 0.3em;
+	}
+
 	.pds-link-list li::before {
-		content: '› ';
+		content: '›';
 		color: var(--pds-color-green);
+		transition: transform 0.15s ease;
+	}
+
+	.pds-link-list li:has(a:hover)::before {
+		transform: translateX(0.15em);
 	}
 
 	.pds-link-list a {
 		text-decoration: none;
+		text-underline-offset: 3px;
 		color: var(--pds-color-green);
 		opacity: 0.85;
-		transition: opacity 0.15s;
+		transition:
+			opacity 0.15s,
+			color 0.15s;
 	}
 
 	.pds-link-list a:hover {
 		opacity: 1;
+		text-decoration: underline;
 	}
 </style>
diff --git a/packages/pds-landing/src/lib/components/PromptLine.svelte b/packages/pds-landing/src/lib/components/PromptLine.svelte
index 8abf194..9e9944c 100644
--- a/packages/pds-landing/src/lib/components/PromptLine.svelte
+++ b/packages/pds-landing/src/lib/components/PromptLine.svelte
@@ -13,7 +13,8 @@
 
 <div class="pds-prompt-line">
 	<span class="pds-user-marker">{user}@{host}</span><span class="pds-prompt-path">:{path}</span
-	><span class="pds-prompt-char" aria-hidden="true"> $</span>
+	><span class="pds-prompt-char" aria-hidden="true"> $</span
+	><span class="pds-prompt-cursor" aria-hidden="true"></span>
 </div>
 
 <style>
@@ -45,4 +46,25 @@
 		font-size: clamp(0.95em, 4vw, 1.15em);
 		user-select: none;
 	}
+
+	.pds-prompt-cursor {
+		display: inline-block;
+		width: 0.55em;
+		height: 1em;
+		margin-left: 0.35em;
+		background: var(--pds-color-green);
+		animation: pds-cursor-blink 1.1s step-end infinite;
+		user-select: none;
+	}
+
+	@keyframes pds-cursor-blink {
+		0%,
+		49% {
+			opacity: 1;
+		}
+		50%,
+		100% {
+			opacity: 0;
+		}
+	}
 </style>
diff --git a/packages/pds-landing/src/lib/components/TerminalCard.svelte b/packages/pds-landing/src/lib/components/TerminalCard.svelte
index fe70bdc..e44d0b5 100644
--- a/packages/pds-landing/src/lib/components/TerminalCard.svelte
+++ b/packages/pds-landing/src/lib/components/TerminalCard.svelte
@@ -33,7 +33,8 @@
 		border: 1px solid var(--pds-color-surface-1);
 		box-shadow:
 			0 0 0 1px color-mix(in srgb, var(--pds-color-green) 6%, transparent),
-			0 8px 32px color-mix(in srgb, var(--pds-color-shadow) 50%, transparent);
+			0 1px 0 0 color-mix(in srgb, var(--pds-color-green) 8%, transparent) inset,
+			0 24px 48px -20px color-mix(in srgb, var(--pds-color-shadow) 60%, transparent);
 	}
 
 	.pds-card-titlebar {
diff --git a/packages/pds-landing/src/styles/index.css b/packages/pds-landing/src/styles/index.css
index 0a61ffe..e5fcc79 100644
--- a/packages/pds-landing/src/styles/index.css
+++ b/packages/pds-landing/src/styles/index.css
@@ -59,9 +59,26 @@ body {
 }
 
 body {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: clamp(1.5rem, 6vw, 4rem) clamp(1rem, 4vw, 1.5rem) clamp(1.5rem, 6vw, 3rem);
   gap: 2rem;
 }
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--pds-color-green) 8%, transparent), transparent 70%),
+    radial-gradient(ellipse 50% 35% at 100% 100%, color-mix(in srgb, var(--pds-color-green) 4%, transparent), transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body > * {
+  position: relative;
+  z-index: 1;
+}
-- 
2.51.2