From 91e0fd96d2117e6f8fd65fe238fd3da5e94121fe Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 2 Oct 2026 00:03:46 +0100
Subject: [PATCH] web/home: add the social wall

todo: this needs work

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/app.css                               | 30 +++++++
 .../home/SocialColumn.stories.svelte          | 15 ++++
 .../lib/components/home/SocialColumn.svelte   | 51 +++++++++++
 .../components/home/SocialPost.stories.svelte | 15 ++++
 web/src/lib/components/home/SocialPost.svelte | 44 ++++++++++
 .../components/home/SocialWall.stories.svelte | 15 ++++
 web/src/lib/components/home/SocialWall.svelte | 42 +++++++++
 web/src/lib/components/home/content.ts        | 85 +++++++++++++++++++
 8 files changed, 297 insertions(+)
 create mode 100644 web/src/lib/components/home/SocialColumn.stories.svelte
 create mode 100644 web/src/lib/components/home/SocialColumn.svelte
 create mode 100644 web/src/lib/components/home/SocialPost.stories.svelte
 create mode 100644 web/src/lib/components/home/SocialPost.svelte
 create mode 100644 web/src/lib/components/home/SocialWall.stories.svelte
 create mode 100644 web/src/lib/components/home/SocialWall.svelte

diff --git a/web/src/app.css b/web/src/app.css
index 6581c2396..87b2bf4fc 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -260,6 +260,9 @@ html {
 	--animate-spin-step: spin-step 2.5s infinite;
 	--animate-stack-pop: stack-pop 620ms var(--ease-spring) both;
 	--animate-stack-shift: stack-shift 520ms var(--ease-spring) both;
+	--animate-marquee-up: marquee-up 40s linear infinite;
+	--animate-marquee-down: marquee-down 40s linear infinite;
+	--animate-marquee-left: marquee-left 40s linear infinite;
 
 	@keyframes stack-pop {
 		from {
@@ -281,6 +284,33 @@ html {
 		}
 	}
 
+	@keyframes marquee-up {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(-50%);
+		}
+	}
+
+	@keyframes marquee-left {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(-50%);
+		}
+	}
+
+	@keyframes marquee-down {
+		from {
+			transform: translateY(-50%);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+
 	@keyframes spin-step {
 		0% {
 			transform: rotate(0deg);
diff --git a/web/src/lib/components/home/SocialColumn.stories.svelte b/web/src/lib/components/home/SocialColumn.stories.svelte
new file mode 100644
index 000000000..7f1acee6a
--- /dev/null
+++ b/web/src/lib/components/home/SocialColumn.stories.svelte
@@ -0,0 +1,15 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SocialColumn from "$lib/components/home/SocialColumn.svelte";
+	import { socialPosts } from "$lib/components/home/content";
+
+	const { Story } = defineMeta({
+		title: "Home/SocialColumn",
+		component: SocialColumn,
+		tags: ["autodocs"],
+		args: { posts: socialPosts, class: "h-[32rem] max-w-compact" }
+	});
+</script>
+
+<Story name="Scrolling up" args={{ direction: "up" }} />
+<Story name="Scrolling down" args={{ direction: "down" }} />
diff --git a/web/src/lib/components/home/SocialColumn.svelte b/web/src/lib/components/home/SocialColumn.svelte
new file mode 100644
index 000000000..069d0489e
--- /dev/null
+++ b/web/src/lib/components/home/SocialColumn.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import SocialPost from "$lib/components/home/SocialPost.svelte";
+	import type { SocialPostData } from "$lib/components/home/content";
+
+	interface Props {
+		posts: SocialPostData[];
+		direction?: "up" | "down" | "left";
+		duration?: number;
+		class?: string;
+	}
+
+	let { posts, direction = "up", duration = 45, class: className = "" }: Props = $props();
+</script>
+
+{#if direction === "left"}
+	<div class="group relative overflow-x-clip {className}">
+		<div
+			class="flex w-max animate-marquee-left group-hover:[animation-play-state:paused] motion-reduce:animate-none"
+			style:animation-duration="{duration}s"
+		>
+			{#each [0, 1] as lap (lap)}
+				<div
+					class="flex w-max items-start gap-md pr-md"
+					aria-hidden={lap === 1 ? "true" : undefined}
+				>
+					{#each posts as post, i (i)}
+						<SocialPost {post} class="w-72 shrink-0" />
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<div class="group relative overflow-y-clip {className}">
+		<div
+			class="flex flex-col gap-md group-hover:[animation-play-state:paused] motion-reduce:animate-none {direction ===
+			'up'
+				? 'animate-marquee-up'
+				: 'animate-marquee-down'}"
+			style:animation-duration="{duration}s"
+		>
+			{#each [0, 1] as lap (lap)}
+				{#each posts as post, i (`${lap}-${i}`)}
+					<div aria-hidden={lap === 1 ? "true" : undefined} class="contents">
+						<SocialPost {post} />
+					</div>
+				{/each}
+			{/each}
+		</div>
+	</div>
+{/if}
diff --git a/web/src/lib/components/home/SocialPost.stories.svelte b/web/src/lib/components/home/SocialPost.stories.svelte
new file mode 100644
index 000000000..6bb698605
--- /dev/null
+++ b/web/src/lib/components/home/SocialPost.stories.svelte
@@ -0,0 +1,15 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SocialPost from "$lib/components/home/SocialPost.svelte";
+	import { socialPosts } from "$lib/components/home/content";
+
+	const { Story } = defineMeta({
+		title: "Home/SocialPost",
+		component: SocialPost,
+		tags: ["autodocs"],
+		args: { post: socialPosts[0]!, class: "max-w-compact" }
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Short" args={{ post: socialPosts[3]! }} />
diff --git a/web/src/lib/components/home/SocialPost.svelte b/web/src/lib/components/home/SocialPost.svelte
new file mode 100644
index 000000000..6d70d5244
--- /dev/null
+++ b/web/src/lib/components/home/SocialPost.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Heart from "$icon/heart";
+	import MessageCircle from "$icon/message-circle";
+	import Repeat2 from "$icon/repeat-2";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import type { SocialPostData } from "$lib/components/home/content";
+
+	interface Props {
+		post: SocialPostData;
+		class?: string;
+	}
+
+	let { post, class: className = "" }: Props = $props();
+
+	const stats = $derived([
+		{ icon: MessageCircle, count: post.replies, label: "replies" },
+		{ icon: Repeat2, count: post.reposts, label: "reposts" },
+		{ icon: Heart, count: post.likes, label: "likes" }
+	]);
+</script>
+
+<article
+	class="flex flex-col gap-sm rounded-2xl border border-border-default bg-background-default p-lg shadow-small transition-[scale] duration-500 ease-spring hover:scale-[1.02] motion-reduce:transition-none {className}"
+>
+	<header class="flex items-center gap-xs">
+		<Avatar handle={post.handle} size="large" />
+		<div class="flex min-w-0 flex-col">
+			<span class="truncate font-medium text-foreground-default">{post.name}</span>
+			<span class="truncate typography-paragraph-small text-foreground-subtle"
+				>@{post.handle} · {post.age}</span
+			>
+		</div>
+	</header>
+	<p class="typography-paragraph-large text-foreground-default">{post.text}</p>
+	<footer class="flex items-center gap-lg typography-paragraph-small text-foreground-subtle">
+		{#each stats as { icon: Icon, count, label } (label)}
+			<span class="inline-flex items-center gap-2xs tabular-nums">
+				<Icon class="size-3.5" aria-hidden="true" />
+				{count}
+				<span class="sr-only">{label}</span>
+			</span>
+		{/each}
+	</footer>
+</article>
diff --git a/web/src/lib/components/home/SocialWall.stories.svelte b/web/src/lib/components/home/SocialWall.stories.svelte
new file mode 100644
index 000000000..795d78282
--- /dev/null
+++ b/web/src/lib/components/home/SocialWall.stories.svelte
@@ -0,0 +1,15 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SocialWall from "$lib/components/home/SocialWall.svelte";
+	import { socialPosts } from "$lib/components/home/content";
+
+	const { Story } = defineMeta({
+		title: "Home/SocialWall",
+		component: SocialWall,
+		tags: ["autodocs"],
+		parameters: { layout: "fullscreen" },
+		args: { posts: socialPosts }
+	});
+</script>
+
+<Story name="Default" />
diff --git a/web/src/lib/components/home/SocialWall.svelte b/web/src/lib/components/home/SocialWall.svelte
new file mode 100644
index 000000000..cd6264c5e
--- /dev/null
+++ b/web/src/lib/components/home/SocialWall.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Bluesky from "$lib/components/icons/Bluesky.svelte";
+	import SocialColumn from "$lib/components/home/SocialColumn.svelte";
+	import type { SocialPostData } from "$lib/components/home/content";
+
+	interface Props {
+		posts: SocialPostData[];
+	}
+
+	let { posts }: Props = $props();
+
+	const left = $derived(posts.filter((_, i) => i % 2 === 0));
+	const right = $derived(posts.filter((_, i) => i % 2 === 1));
+</script>
+
+<section class="px-md py-5xl md:px-xl md:py-28">
+	<div
+		class="mx-auto grid max-w-page grid-cols-1 items-center gap-3xl md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"
+	>
+		<div class="flex flex-col items-start gap-lg">
+			<h2 class="text-4xl font-bold text-foreground-default md:text-5xl">Recent updates</h2>
+			<p class="max-w-narrow typography-paragraph-large text-foreground-muted">
+				The latest and greatest from the Tangled team.
+			</p>
+			<a
+				href="https://bsky.app/profile/tangled.org"
+				class="inline-flex items-center gap-xs font-medium text-foreground-default hover:underline"
+			>
+				<Bluesky class="size-4" />
+				Follow @tangled.org
+			</a>
+		</div>
+
+		<SocialColumn {posts} direction="left" duration={60} class="-mx-md py-xs sm:hidden" />
+		<div
+			class="-mx-xs hidden h-144 grid-cols-2 gap-md mask-y-from-80% mask-y-to-100% px-xs sm:grid"
+		>
+			<SocialColumn posts={left} direction="down" duration={50} />
+			<SocialColumn posts={right} direction="up" duration={42} />
+		</div>
+	</div>
+</section>
diff --git a/web/src/lib/components/home/content.ts b/web/src/lib/components/home/content.ts
index a2d0df172..2703d30ae 100644
--- a/web/src/lib/components/home/content.ts
+++ b/web/src/lib/components/home/content.ts
@@ -191,6 +191,91 @@ export const knotPins: KnotPin[] = [
 	{ lat: -41.3, lon: 174.8, host: "knot.kea.nz" }
 ];
 
+export interface SocialPostData {
+	handle: string;
+	name: string;
+	text: string;
+	likes: number;
+	reposts: number;
+	replies: number;
+	age: string;
+}
+
+export const socialPosts: SocialPostData[] = [
+	{
+		handle: "juniper.dev",
+		name: "Juniper",
+		text: "stacked PRs on tangled have ruined every other forge for me. jj + round-based review is just how code review should feel.",
+		likes: 214,
+		reposts: 31,
+		replies: 18,
+		age: "2h"
+	},
+	{
+		handle: "kestrel.sh",
+		name: "Kestrel",
+		text: "moved my dotfiles onto a knot running on a raspberry pi in my closet. zero drama. still federated. very cute.",
+		likes: 96,
+		reposts: 12,
+		replies: 9,
+		age: "5h"
+	},
+	{
+		handle: "pixel.pet",
+		name: "pixel",
+		text: "the nix microVM CI is absurdly fast once the cache is warm. 40s from push to green on a monorepo 🟢",
+		likes: 158,
+		reposts: 22,
+		replies: 14,
+		age: "7h"
+	},
+	{
+		handle: "sage.sh",
+		name: "sage",
+		text: "opened my first PR on tangled with my bluesky account. no new login, no new password, just vibes.",
+		likes: 73,
+		reposts: 5,
+		replies: 3,
+		age: "9h"
+	},
+	{
+		handle: "fennel.moe",
+		name: "Fennel",
+		text: "love that my repo lives on my own server and people can still star it, fork it and send patches from anywhere on the network.",
+		likes: 132,
+		reposts: 17,
+		replies: 11,
+		age: "12h"
+	},
+	{
+		handle: "clover.tngl.sh",
+		name: "clover",
+		text: "the timeline is genuinely fun?? watching friends star repos and push stuff feels like early github in the best way",
+		likes: 187,
+		reposts: 26,
+		replies: 20,
+		age: "1d"
+	},
+	{
+		handle: "wren.tngl.sh",
+		name: "wren",
+		text: "picked up a good-first-issue on tangled/core last night and it got merged this morning. contributor onboarding: ✨",
+		likes: 64,
+		reposts: 8,
+		replies: 6,
+		age: "1d"
+	},
+	{
+		handle: "birch.tngl.sh",
+		name: "birch",
+		text: "self-hosting a knot took me one nixos module and ten minutes. the docs are that good.",
+		likes: 119,
+		reposts: 15,
+		replies: 7,
+		age: "2d"
+	}
+];
+
 const opened = (actor: string): ChatCue => ({
 	at: 300,
 	line: {
-- 
2.51.2