diff --git a/web/package.json b/web/package.json
index aa833d577..337bed4fb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -36,6 +36,8 @@
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
 		"@tailwindcss/vite": "^4.3.2",
 		"@types/d3-geo": "3.1.1",
+		"@types/d3-path": "3.1.1",
+		"@types/d3-shape": "3.2.0",
 		"@types/markdown-it": "^14.1.2",
 		"@types/markdown-it-emoji": "^3.0.1",
 		"@types/node": "^24.13.3",
@@ -86,6 +88,8 @@
 		"cobe": "2.0.1",
 		"cuelume": "0.2.4",
 		"d3-geo": "3.1.1",
+		"d3-path": "3.1.0",
+		"d3-shape": "3.2.0",
 		"markdown-it": "^14.3.0",
 		"markdown-it-anchor": "^9.2.1",
 		"markdown-it-emoji": "^3.1.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index cb49e6382..f1b0a297b 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -69,6 +69,12 @@ importers:
       d3-geo:
         specifier: 3.1.1
         version: 3.1.1
+      d3-path:
+        specifier: 3.1.0
+        version: 3.1.0
+      d3-shape:
+        specifier: 3.2.0
+        version: 3.2.0
       markdown-it:
         specifier: ^14.3.0
         version: 14.3.0
@@ -142,6 +148,12 @@ importers:
       '@types/d3-geo':
         specifier: 3.1.1
         version: 3.1.1
+      '@types/d3-path':
+        specifier: 3.1.1
+        version: 3.1.1
+      '@types/d3-shape':
+        specifier: 3.2.0
+        version: 3.2.0
       '@types/markdown-it':
         specifier: ^14.1.2
         version: 14.1.2
@@ -1838,6 +1850,12 @@ packages:
   '@types/d3-geo@3.1.1':
     resolution: {integrity: sha512-65Emv9fQiQQqphLlRkuQ5ypPsOmWPhtBGCMv61JDPEPMvsx+gzhGf74yw1a78xFKPj6zw4AgQICJoQv0vK9M2w==}
 
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-shape@3.2.0':
+    resolution: {integrity: sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -2224,6 +2242,14 @@ packages:
     resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
     engines: {node: '>=12'}
 
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
   dayjs@1.11.21:
     resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
@@ -5070,6 +5096,12 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.16
 
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-shape@3.2.0':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/esrecurse@4.3.1': {}
@@ -5475,6 +5507,12 @@ snapshots:
     dependencies:
       d3-array: 3.2.4
 
+  d3-path@3.1.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
   dayjs@1.11.21: {}
 
   debug@4.4.3(supports-color@10.2.2):
diff --git a/web/src/lib/components/home/CircularTimeline.stories.svelte b/web/src/lib/components/home/CircularTimeline.stories.svelte
new file mode 100644
index 000000000..fe6d7c16d
--- /dev/null
+++ b/web/src/lib/components/home/CircularTimeline.stories.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import CircularTimeline from "$lib/components/home/CircularTimeline.svelte";
+	import { timelineFeed } from "$lib/components/home/content";
+
+	const { Story } = defineMeta({
+		title: "Home/CircularTimeline",
+		component: CircularTimeline,
+		tags: ["autodocs"],
+		parameters: { layout: "fullscreen" },
+		args: { feed: timelineFeed, class: "relative h-svh" }
+	});
+</script>
+
+<Story
+	name="Default"
+	play={async ({ canvasElement }) => {
+		const links = [...canvasElement.querySelectorAll("a")];
+		await expect(links.length).toBeGreaterThan(0);
+		await expect(links.every((a) => a.getAttribute("href")?.startsWith("/did:"))).toBe(true);
+	}}
+/>
+
+<Story name="Few events" args={{ feed: timelineFeed.slice(0, 3) }} />
+
+<Story
+	name="Stars only"
+	args={{
+		feed: timelineFeed.filter(
+			({ event }) => event.$type === "sh.tangled.feed.getTimeline#starEvent"
+		)
+	}}
+/>
+
+<Story name="Empty" args={{ feed: [] }} />
diff --git a/web/src/lib/components/home/CircularTimeline.svelte b/web/src/lib/components/home/CircularTimeline.svelte
new file mode 100644
index 000000000..add33a098
--- /dev/null
+++ b/web/src/lib/components/home/CircularTimeline.svelte
@@ -0,0 +1,457 @@
+<script lang="ts">
+	import BookPlus from "$icon/book-plus";
+	import GitFork from "$icon/git-fork";
+	import Star from "$icon/star";
+	import UserPlus from "$icon/user-plus";
+	import { resolve } from "$app/paths";
+	import { path } from "d3-path";
+	import { arc } from "d3-shape";
+	import { ElementSize, useIntersectionObserver } from "runed";
+	import { onMount, type Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { deg } from "$lib/components/home/globe";
+	import { PITCH, sphere as dotted, type Normal } from "$lib/components/home/halftone";
+	import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
+	import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs";
+	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	type Kind = "star" | "fork" | "create" | "follow";
+
+	type Token =
+		| "background-default"
+		| "background-muted"
+		| "border-default"
+		| "foreground-default"
+		| "foreground-muted";
+
+	interface Props {
+		feed: ShTangledFeedGetTimeline.$output["feed"];
+		clear?: HTMLElement;
+		paused?: boolean;
+		class?: string;
+	}
+
+	interface Run {
+		text: string;
+		did?: string;
+	}
+
+	interface Card {
+		start: number;
+		sweep: number;
+		kind: Kind;
+		runs: Run[];
+	}
+
+	interface RingSpec {
+		shift: number;
+		stride: number;
+		opacity: number;
+	}
+
+	interface Ring {
+		radius: number;
+		turn: number;
+		period: number;
+		steps: number;
+		margin: number;
+		fade: string;
+		shadow: string;
+		line: string;
+		icon: number;
+		cards: Card[];
+	}
+
+	type Measure = (text: string, weight: number) => number;
+
+	const CARD = {
+		height: 46,
+		gap: 8,
+		corner: 8,
+		pad: 9,
+		icon: 28,
+		iconCorner: 6,
+		glyph: 16,
+		shadow: 0.05
+	};
+	const LEAD = CARD.pad * 2 + CARD.icon + 1;
+	const TEXT = {
+		size: 12,
+		char: 6.4,
+		font: "InterVariable, system-ui, sans-serif",
+		weight: { strong: 590, plain: 400 }
+	};
+	const RING = { rise: 0.36, min: 420, floor: 190, lowest: 48, margin: 16, speed: 54, fps: 30 };
+	const CULL = { tick: 1000, pad: CARD.height };
+	const RINGS: RingSpec[] = [
+		{ shift: 0, stride: 1, opacity: 1 },
+		{ shift: 5, stride: 3, opacity: 0.8 },
+		{ shift: 2, stride: 7, opacity: 0.55 },
+		{ shift: 8, stride: 1, opacity: 0.35 },
+		{ shift: 4, stride: 3, opacity: 0.18 }
+	];
+	const EVENTS: Record<Kind, { icon: Component<SvelteHTMLElements["svg"]>; verb: string }> = {
+		star: { icon: Star, verb: "starred" },
+		fork: { icon: GitFork, verb: "forked" },
+		create: { icon: BookPlus, verb: "created" },
+		follow: { icon: UserPlus, verb: "followed" }
+	};
+	const SPHERE = {
+		light: { x: 0, y: -0.45, z: 0.89 },
+		from: 0.2,
+		pitch: 2 * PITCH,
+		dot: { min: PITCH * 0.06, max: PITCH * 0.44 }
+	};
+	const TAU = 2 * Math.PI;
+	const DEGREES = 360;
+	const APPEAR = { duration: 800, delay: 200, stagger: 180 };
+
+	let { feed, clear, paused = false, class: className = "" }: Props = $props();
+
+	const uid = $props.id();
+
+	let root = $state<HTMLDivElement>();
+	let turning = $state<HTMLDivElement[]>([]);
+	let inView = $state(false);
+	const size = new ElementSize(() => root);
+	const clearSize = new ElementSize(() => clear);
+
+	useIntersectionObserver(
+		() => root,
+		([entry]) => (inView = entry?.isIntersecting ?? false)
+	);
+
+	const inner = $derived.by(() => {
+		const rise = size.height * RING.rise;
+		return Math.max(((size.width / 2) ** 2 + rise ** 2) / (2 * rise), RING.min);
+	});
+	const cx = $derived(size.width / 2);
+
+	const floor = $derived.by(() => {
+		if (!root || !clear || !clearSize.width) return RING.floor;
+		const outer = root.getBoundingClientRect();
+		const box = clear.getBoundingClientRect();
+		const half = Math.max(cx - (box.left - outer.left), box.right - outer.left - cx);
+		const room = inner - CARD.height / 2 - RING.margin;
+		const fit =
+			size.height - inner - (box.bottom - outer.top) + Math.sqrt(room ** 2 - half ** 2);
+		return Math.max(RING.lowest, Math.min(RING.floor, fit));
+	});
+	const cy = $derived(size.height - floor - inner);
+
+	const shade = ({ x, y, z }: Normal) => {
+		const { light } = SPHERE;
+		const lit = x * light.x + y * light.y + z * light.z;
+		return Math.min(1, Math.max(0, (1 - lit - SPHERE.from) / (1 - SPHERE.from)));
+	};
+
+	const sphere = $derived.by(() => {
+		const radius = inner - CARD.height / 2 - RING.margin;
+		if (!size.width || radius <= 0) return "";
+		return dotted(
+			size.width,
+			size.height,
+			{ x: cx, y: cy },
+			radius,
+			(normal) => {
+				const t = shade(normal);
+				return t > 0 ? SPHERE.dot.min + (SPHERE.dot.max - SPHERE.dot.min) * t : 0;
+			},
+			SPHERE.pitch
+		);
+	});
+
+	let measure = $state<Measure>((text) => text.length * TEXT.char);
+	onMount(() => {
+		void document.fonts.ready.then(() => {
+			const ctx = document.createElement("canvas").getContext("2d")!;
+			measure = (text, weight) => {
+				ctx.font = `${weight} ${TEXT.size}px ${TEXT.font}`;
+				return ctx.measureText(text).width;
+			};
+		});
+	});
+
+	const describe = ({ event }: ShTangledFeedGetTimeline.TimelineItem) => {
+		const verb = (kind: Kind, actor: Run, target: Run) => ({
+			kind,
+			runs: [actor, { text: ` ${EVENTS[kind].verb} ` }, target]
+		});
+		const user = ({
+			did,
+			handle
+		}: Pick<ShTangledActorDefs.ProfileViewBasic, "did" | "handle">): Run => ({
+			text: handle,
+			did
+		});
+		const repo = ({ did, owner, slug }: ShTangledRepoDefs.RepoViewBasic): Run => ({
+			text: `${owner.handle}/${slug}`,
+			did
+		});
+		switch (event.$type) {
+			case "sh.tangled.feed.getTimeline#followEvent":
+				return verb("follow", user(event.actor), user(event.subject));
+			case "sh.tangled.feed.getTimeline#starEvent":
+				return verb("star", user(event.actor), repo(event.repo));
+			default:
+				return event.source
+					? verb("fork", user(event.repo.owner), repo(event.source))
+					: verb("create", user(event.repo.owner), repo(event.repo));
+		}
+	};
+
+	const sized = $derived(
+		feed.map((item) => {
+			const { kind, runs } = describe(item);
+			const text = runs.reduce(
+				(sum, run) =>
+					sum + measure(run.text, run.did ? TEXT.weight.strong : TEXT.weight.plain),
+				0
+			);
+			return { kind, runs, width: LEAD + text + CARD.pad };
+		})
+	);
+
+	const sector = (radius: number, sweep: number) =>
+		arc().cornerRadius(CARD.corner)({
+			innerRadius: radius - CARD.height / 2,
+			outerRadius: radius + CARD.height / 2,
+			startAngle: Math.PI,
+			endAngle: Math.PI - sweep
+		}) ?? "";
+
+	const line = (radius: number) => {
+		const p = path();
+		p.arc(0, 0, radius, Math.PI / 2, 0, true);
+		return p.toString();
+	};
+
+	const pack = (radius: number, shift: number, stride: number): Card[] => {
+		const gap = CARD.gap / (radius - CARD.height / 2);
+		const cards: Card[] = [];
+		if (!sized.length) return cards;
+		let used = 0;
+		for (let i = 0; ; i++) {
+			const { kind, runs, width } = sized[(i * stride + shift) % sized.length]!;
+			const sweep = width / radius;
+			if (used + sweep + gap > TAU) break;
+			cards.push({ start: used, sweep, kind, runs });
+			used += sweep + gap;
+		}
+		const slack = (TAU - used) / cards.length;
+		return cards.map((card, i) => ({
+			...card,
+			start: card.start + i * slack,
+			sweep: card.sweep + slack
+		}));
+	};
+
+	const faded = (token: Token) =>
+		`color-mix(in oklab, var(--color-${token}) var(--fade), var(--color-background-canvas))`;
+
+	const rings = $derived(
+		RINGS.map(({ shift, stride, opacity }, r): Ring => {
+			const radius = inner + r * (CARD.height + CARD.gap);
+			const period = (TAU * radius) / RING.speed;
+			return {
+				radius,
+				turn: r % 2 ? DEGREES : -DEGREES,
+				period,
+				steps: Math.round(period * RING.fps),
+				margin: deg((2 * RING.speed * CULL.tick) / 1000 / radius),
+				fade: `${opacity * 100}%`,
+				shadow: `drop-shadow(0 1px 1px rgb(0 0 0 / ${CARD.shadow * opacity}))`,
+				line: line(radius),
+				icon: deg((CARD.pad + CARD.icon / 2) / radius),
+				cards: pack(radius, shift, stride)
+			};
+		})
+	);
+
+	const coverage = (radius: number): boolean[] => {
+		const pad = CULL.pad + (TAU * radius) / DEGREES;
+		return Array.from({ length: DEGREES }, (_, a) => {
+			const angle = ((a + 0.5) * TAU) / DEGREES;
+			const x = cx - radius * Math.sin(angle);
+			const y = cy + radius * Math.cos(angle);
+			return x > -pad && x < size.width + pad && y > -pad && y < size.height + pad;
+		});
+	};
+
+	const progress = (ring: Ring, element?: HTMLElement) => {
+		const time = Number(element?.getAnimations()[0]?.currentTime ?? 0);
+		return (time / 1000 / ring.period) % 1;
+	};
+
+	const onscreen = (ring: Ring, covered: boolean[], turn: number, { start, sweep }: Card) => {
+		const to = turn - deg(start) + ring.margin;
+		for (let a = Math.floor(to - deg(sweep) - 2 * ring.margin); a <= to; a++)
+			if (covered[((a % DEGREES) + DEGREES) % DEGREES]) return true;
+		return false;
+	};
+
+	const same = (a: boolean[][], b: boolean[][]) =>
+		a.length === b.length && a.every((row, r) => row.every((on, i) => on === b[r]![i]));
+
+	const covered = $derived(rings.map(({ radius }) => coverage(radius)));
+
+	let shown = $state<boolean[][]>([]);
+	$effect(() => {
+		if (!size.width) return;
+		const update = () => {
+			const next = rings.map((ring, r) => {
+				const turn = ring.turn * progress(ring, turning[r]);
+				return ring.cards.map((card) => onscreen(ring, covered[r]!, turn, card));
+			});
+			if (!same(next, shown)) shown = next;
+		};
+		update();
+		if (!inView || paused) return;
+		const id = setInterval(update, CULL.tick);
+		return () => clearInterval(id);
+	});
+</script>
+
+<div bind:this={root} class={["pointer-events-none overflow-hidden", className]}>
+	{#if size.width}
+		<svg class="absolute size-0" aria-hidden="true">
+			<defs>
+				{#each rings as ring, r (r)}
+					<path id="{uid}-line-{r}" d={ring.line} />
+				{/each}
+			</defs>
+		</svg>
+		<svg
+			width={size.width}
+			height={size.height}
+			class="absolute inset-0 opacity-35"
+			aria-hidden="true"
+		>
+			<path d={sphere} class="fill-border-strong" />
+		</svg>
+		<div class="absolute inset-0 mask-b-from-70%">
+			<div class="absolute" style:left="{cx}px" style:top="{cy}px" aria-hidden="true">
+				{#each rings as ring, r (r)}
+					<div
+						class="appear absolute top-0 left-0"
+						style:animation-duration="{APPEAR.duration}ms"
+						style:animation-delay="{APPEAR.delay + r * APPEAR.stagger}ms"
+					>
+						<div
+							bind:this={turning[r]}
+							class={[
+								"turning absolute top-0 left-0",
+								(!inView || paused) && "paused"
+							]}
+							style:--fade={ring.fade}
+							style:--turn="{ring.turn}deg"
+							style:animation-duration="{ring.period}s"
+							style:animation-timing-function="steps({ring.steps})"
+						>
+							{#each ring.cards as { start, sweep, kind, runs }, i (i)}
+								{@const Icon = EVENTS[kind].icon}
+								{#if shown[r]?.[i]}
+									<svg
+										class="absolute top-0 left-0 overflow-visible"
+										width="1"
+										height="1"
+										style:transform="rotate({-deg(start)}deg)"
+										style:filter={ring.shadow}
+									>
+										<path
+											d={sector(ring.radius, sweep)}
+											style:fill={faded("background-default")}
+											style:stroke={faded("border-default")}
+											stroke-width="1"
+										/>
+										<g
+											transform="rotate({-ring.icon}) translate(0 {ring.radius})"
+										>
+											<rect
+												x={-CARD.icon / 2}
+												y={-CARD.icon / 2}
+												width={CARD.icon}
+												height={CARD.icon}
+												rx={CARD.iconCorner}
+												style:fill={faded("background-muted")}
+											/>
+											<g
+												transform="translate({-CARD.glyph /
+													2} {-CARD.glyph / 2})"
+												style:color={faded("foreground-muted")}
+											>
+												<Icon width={CARD.glyph} height={CARD.glyph} />
+											</g>
+										</g>
+										<text
+											class="text-xs"
+											style:fill={faded("foreground-muted")}
+											dominant-baseline="central"
+										>
+											<textPath href="#{uid}-line-{r}" startOffset={LEAD}>
+												{#each runs as run, k (k)}
+													{#if run.did}
+														<a
+															href={resolve(`/${run.did}` as "/")}
+															tabindex="-1"
+															class="pointer-events-auto hover:underline"
+															><tspan
+																class="font-semibold"
+																style:fill={faded(
+																	"foreground-default"
+																)}>{run.text}</tspan
+															></a
+														>
+													{:else}
+														<tspan>{run.text}</tspan>
+													{/if}
+												{/each}
+											</textPath>
+										</text>
+									</svg>
+								{/if}
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.appear {
+		animation: appear ease-out backwards;
+	}
+
+	@keyframes appear {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.turning {
+		animation: turn linear infinite;
+	}
+
+	.turning:hover,
+	.turning.paused {
+		animation-play-state: paused;
+	}
+
+	@keyframes turn {
+		to {
+			rotate: var(--turn);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.appear {
+			animation: none;
+		}
+
+		.turning {
+			animation-play-state: paused;
+		}
+	}
+</style>
diff --git a/web/src/lib/components/home/Hero.stories.svelte b/web/src/lib/components/home/Hero.stories.svelte
new file mode 100644
index 000000000..3ee2ecd59
--- /dev/null
+++ b/web/src/lib/components/home/Hero.stories.svelte
@@ -0,0 +1,13 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Hero from "$lib/components/home/Hero.svelte";
+
+	const { Story } = defineMeta({
+		title: "Home/Hero",
+		component: Hero,
+		tags: ["autodocs"],
+		parameters: { layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" />
diff --git a/web/src/lib/components/home/Hero.svelte b/web/src/lib/components/home/Hero.svelte
new file mode 100644
index 000000000..1c5785bd8
--- /dev/null
+++ b/web/src/lib/components/home/Hero.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Pause from "$icon/pause";
+	import Play from "$icon/play";
+	import Button from "$lib/components/ui/Button.svelte";
+	import CircularTimeline from "$lib/components/home/CircularTimeline.svelte";
+	import SignupForm from "$lib/components/home/SignupForm.svelte";
+	import { timelineFeed } from "$lib/components/home/content";
+	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	let { feed = timelineFeed }: { feed?: ShTangledFeedGetTimeline.$output["feed"] } = $props();
+
+	let copy = $state<HTMLDivElement>();
+	let paused = $state(false);
+</script>
+
+<section class="relative overflow-hidden pb-36">
+	<div class="relative flex h-svh min-h-152 flex-col items-center pt-[clamp(6rem,18svh,11rem)]">
+		<CircularTimeline {feed} {paused} clear={copy} class="absolute inset-0" />
+
+		<div
+			bind:this={copy}
+			class="relative mb-2xl flex max-w-wide flex-col items-center px-md text-center"
+		>
+			<div
+				class="pointer-events-none absolute -inset-5xl bg-[radial-gradient(closest-side,var(--color-background-canvas)_70%,transparent)]"
+				aria-hidden="true"
+			></div>
+			<h1 class="relative text-5xl font-bold text-foreground-default md:text-7xl">
+				Hack it
+				<span
+					class="mx-auto mt-xs block w-fit -rotate-1 rounded-2xl bg-background-muted px-md pb-xs text-foreground-default md:mt-sm"
+				>
+					together.
+				</span>
+			</h1>
+
+			<p
+				class="relative mt-xl max-w-medium typography-paragraph-large text-foreground-muted md:text-lg"
+			>
+				An open-source code forge on AT Protocol. Self-host it, extend it, and build it with
+				the people you trust.
+			</p>
+
+			<SignupForm class="relative mt-2xl max-w-narrow" />
+		</div>
+		<Button
+			variant="ghost"
+			size="small"
+			icon={paused ? Play : Pause}
+			aria-label={paused ? "Play the timeline" : "Pause the timeline"}
+			class="absolute right-md bottom-md z-10 text-foreground-subtle opacity-60 transition-opacity hover:text-foreground-muted hover:opacity-100 focus-visible:opacity-100 motion-reduce:hidden"
+			onclick={() => (paused = !paused)}
+		/>
+	</div>
+</section>
diff --git a/web/src/lib/components/home/content.ts b/web/src/lib/components/home/content.ts
index 2703d30ae..14e645f87 100644
--- a/web/src/lib/components/home/content.ts
+++ b/web/src/lib/components/home/content.ts
@@ -4,7 +4,11 @@ import GitPullRequestClosed from "$icon/git-pull-request-closed";
 import HardDrive from "$icon/hard-drive";
 import ShieldCheck from "$icon/shield-check";
 import Snowflake from "$icon/snowflake";
+import type { Handle } from "@atcute/lexicons";
 import type { PullSubmission } from "$lib/api";
+import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
+import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs";
 import type { ChatCue, ChatScript } from "$lib/components/home/chat";
 import type { FeatureCardVariants } from "$lib/components/home/FeatureCard.svelte";
 import ShieldDirectDenounce from "$lib/components/icons/ShieldDirectDenounce.svelte";
@@ -363,3 +367,103 @@ export const vouchChats = {
 		]
 	}
 } satisfies Record<string, ChatScript>;
+
+type TimelineItem = ShTangledFeedGetTimeline.TimelineItem;
+
+const CID = "bafyreib2rxk3rybk3aobmv5cjuql3bm2twh4jo5uxgf2tsxh6o4kbmpjaa";
+const EVENT_AT = "2026-10-01T12:00:00Z";
+
+const user = (
+	handle: Handle,
+	id: string
+): Pick<ShTangledActorDefs.ProfileViewBasic, "did" | "handle"> => ({
+	did: `did:plc:${id}`,
+	handle
+});
+
+const users = {
+	oppi: user("oppi.li", "qfpnj4og54vl56wngdriaxug"),
+	juniper: user("juniper.dev", "k3vxmd2xnqhy6ftlgruyw4ze"),
+	sage: user("sage.sh", "b7ijzdg4kxaf2pnwcxq5h3lo"),
+	fennel: user("fennel.moe", "4mwzrnqc6jsg7tdlxk2yoe5v"),
+	pixel: user("pixel.pet", "z2hxtla6qrybm3ce7vpkon4j"),
+	clover: user("clover.tngl.sh", "wd5gqhnb3xkp7rlyzo2aejc6"),
+	wren: user("wren.tngl.sh", "r6oyjvk2tdm4qczxbnf7ugl3"),
+	kestrel: user("kestrel.sh", "h4nlqe3cxzu7vgbyjdo6wkrt"),
+	birch: user("birch.tngl.sh", "y5ktcwj7oafmz2xhgrvl3pdn")
+};
+
+const repo = (
+	owner: ShTangledActorDefs.ProfileViewBasic,
+	slug: string,
+	id: string
+): ShTangledRepoDefs.RepoViewBasic => ({
+	did: `did:plc:${id}`,
+	slug,
+	owner,
+	createdAt: EVENT_AT
+});
+
+const repos = {
+	core: repo(users.oppi, "core", "ox7vldp2kgymwq4c3jzanrht"),
+	spindle: repo(users.oppi, "spindle", "jl3mbzwe6dqtgrxk5fhov7ya"),
+	zap: repo(users.kestrel, "zap", "c2qahfnrvx7okt4mlwjgz6ye"),
+	dotfiles: repo(users.juniper, "dotfiles", "t5gyxkoehz3dbcwrn7maq4lj"),
+	lumen: repo(users.sage, "lumen", "v6dnoe3rzjgktmyq2wbhxc7a"),
+	sprites: repo(users.pixel, "sprites", "m7rcqwgjthx5bklzad4yfo2n"),
+	cloverDotfiles: repo(users.clover, "dotfiles", "fq2zkvyh6mxcjr3odwgt5anb"),
+	kestrelSpindle: repo(users.kestrel, "spindle", "n3xbqcwh7krzlvgy5emotf2d"),
+	wrenZap: repo(users.wren, "zap", "u4jgkdye2wvqmhto7zcxnr6s")
+};
+
+const item = (event: TimelineItem["event"]): TimelineItem => ({ event, eventAt: EVENT_AT });
+
+const star = (
+	actor: ShTangledActorDefs.ProfileViewBasic,
+	starred: ShTangledRepoDefs.RepoViewBasic
+) =>
+	item({
+		$type: "sh.tangled.feed.getTimeline#starEvent",
+		uri: `at://${actor.did}/sh.tangled.feed.star/${starred.slug}`,
+		cid: CID,
+		actor,
+		repo: starred
+	});
+
+const follow = (
+	actor: ShTangledActorDefs.ProfileViewBasic,
+	subject: ShTangledActorDefs.ProfileViewDetailed
+) =>
+	item({
+		$type: "sh.tangled.feed.getTimeline#followEvent",
+		uri: `at://${actor.did}/sh.tangled.graph.follow/${subject.handle}`,
+		cid: CID,
+		actor,
+		subject
+	});
+
+const create = (
+	created: ShTangledRepoDefs.RepoViewBasic,
+	source?: ShTangledRepoDefs.RepoViewBasic
+) =>
+	item({
+		$type: "sh.tangled.feed.getTimeline#repoEvent",
+		uri: `at://${created.owner.did}/sh.tangled.repo/${created.slug}`,
+		cid: CID,
+		repo: created,
+		source
+	});
+
+export const timelineFeed: ShTangledFeedGetTimeline.$output["feed"] = [
+	star(users.juniper, repos.zap),
+	create(repos.lumen),
+	follow(users.fennel, users.oppi),
+	create(repos.cloverDotfiles, repos.dotfiles),
+	star(users.wren, repos.core),
+	follow(users.birch, users.sage),
+	create(repos.sprites),
+	create(repos.kestrelSpindle, repos.spindle),
+	star(users.oppi, repos.lumen),
+	follow(users.juniper, users.pixel),
+	create(repos.wrenZap, repos.zap)
+];
diff --git a/web/src/lib/components/home/halftone.ts b/web/src/lib/components/home/halftone.ts
index c50afad81..467751c33 100644
--- a/web/src/lib/components/home/halftone.ts
+++ b/web/src/lib/components/home/halftone.ts
@@ -2,8 +2,22 @@ export const PITCH = 18;
 
 const ROW = PITCH / 2;
 
-const dot = (x: number, y: number, r: number) =>
-	`M${x - r} ${y}a${r} ${r} 0 1 0 ${2 * r} 0a${r} ${r} 0 1 0 ${-2 * r} 0z`;
+export interface Normal {
+	x: number;
+	y: number;
+	z: number;
+}
+
+const round = (n: number) => +n.toFixed(2);
+
+const dot = (x: number, y: number, r: number, squash = 1, angle = 0) => {
+	const rx = round(r * squash);
+	const ry = round(r);
+	const dx = round(Math.cos(angle) * rx);
+	const dy = round(Math.sin(angle) * rx);
+	const tilt = round((angle * 180) / Math.PI);
+	return `M${round(x) - dx} ${round(y) - dy}a${rx} ${ry} ${tilt} 1 0 ${2 * dx} ${2 * dy}a${rx} ${ry} ${tilt} 1 0 ${-2 * dx} ${-2 * dy}z`;
+};
 
 export const halftone = (
 	width: number,
@@ -15,7 +29,38 @@ export const halftone = (
 		const y = row * ROW;
 		for (let x = (row % 2) * ROW; x <= width; x += PITCH) {
 			const r = radius(x, y);
-			if (r > 0) out.push(dot(x, y, +r.toFixed(2)));
+			if (r > 0) out.push(dot(x, y, r));
+		}
+	}
+	return out.join("");
+};
+
+export const sphere = (
+	width: number,
+	height: number,
+	center: { x: number; y: number },
+	radius: number,
+	size: (normal: Normal) => number,
+	pitch = PITCH
+): string => {
+	const step = pitch / radius;
+	const span = Math.floor(Math.PI / 2 / step);
+	const out: string[] = [];
+	for (let row = -2 * span; row <= 2 * span; row++) {
+		const turn = (row * step) / 2;
+		const shift = Math.abs(row % 2) / 2;
+		for (let col = -span; col <= span; col++) {
+			const tilt = (col + shift) * step;
+			const ring = Math.cos(tilt);
+			const nx = Math.sin(tilt);
+			const ny = ring * Math.sin(turn);
+			const nz = ring * Math.cos(turn);
+			const x = center.x + radius * nx;
+			const y = center.y + radius * ny;
+			if (nz <= 0 || x < -pitch || x > width + pitch || y < -pitch || y > height + pitch)
+				continue;
+			const r = size({ x: nx, y: ny, z: nz });
+			if (r > 0) out.push(dot(x, y, r, nz, Math.atan2(ny, nx)));
 		}
 	}
 	return out.join("");