diff --git a/web/src/routes/welcome/+page.svelte b/web/src/routes/welcome/+page.svelte
--- a/web/src/routes/welcome/+page.svelte
+++ b/web/src/routes/welcome/+page.svelte
@@ -34,21 +34,34 @@
 	});
 	let keys = $state<WelcomeKey[]>(untrack(() => data.keys ?? []));
 	let step = $state(0);
+	let furthest = $state(0);
 	let direction = $state(1);
 	let savingProfile = $state(false);
 	let profileWritten = $state(false);
 	let profileError = $state<string>();
-
-	const profileFilled = $derived(
-		draft.avatarFile !== null ||
-			[draft.description, draft.pronouns, draft.website].some((value) => value.trim() !== "")
+	let socialTouched = $state(
+		untrack(
+			() =>
+				people.some((person) => person.viewerFollowRkey) ||
+				repos.some((repo) => repo.viewerStarRkey)
+		)
 	);
-	const nextReady = $derived(step === 0 ? profileFilled : true);
+
+	// green means "nothing left to do on this step", not "you may continue" —
+	// every field here is optional and Next is never blocked
+	const profileComplete = $derived(
+		(draft.avatarFile !== null || Boolean(loadedProfile?.avatar)) &&
+			[draft.description, draft.pronouns, draft.website].every((value) => value.trim() !== "")
+	);
+	const nextReady = $derived(
+		[profileComplete, socialTouched, keys.length > 0, true][step] ?? false
+	);
 
 	const go = (to: number) => {
 		if (to < 0 || to >= WELCOME_TOTAL || savingProfile) return;
 		direction = to > step ? 1 : -1;
 		step = to;
+		furthest = Math.max(furthest, to);
 	};
 
 	const persistProfile = async (saveDraft: boolean): Promise<boolean> => {
@@ -106,13 +119,22 @@
 		}
 	};
 
+	const advance = async (to: number) => {
+		if (step === 0 && to > 0 && !(await persistProfile(true))) return;
+		go(to);
+	};
+
 	const next = async () => {
-		if (step === 0 && !(await persistProfile(true))) return;
 		if (step === LAST_STEP) {
 			await leave();
 			return;
 		}
-		go(step + 1);
+		await advance(step + 1);
+	};
+
+	const select = async (to: number) => {
+		if (savingProfile || to === step) return;
+		await advance(to);
 	};
 
 	const leave = async () => {
@@ -153,7 +175,7 @@
 
 <div class="flex min-h-screen w-full items-start justify-center px-4 pt-16 pb-8">
 	<main class="w-full max-w-3xl">
-		<h1 class="mb-4 flex place-content-center">
+		<h1 class="mb-8 flex place-content-center">
 			<Logo wordmark class="h-10" />
 		</h1>
 
@@ -161,17 +183,19 @@
 
 		<WelcomeCard
 			{step}
+			{furthest}
 			{direction}
 			{nextReady}
 			nextLoading={savingProfile}
 			onBack={() => go(step - 1)}
 			onNext={() => void next()}
+			onSelect={(index) => void select(index)}
 		>
 			{#snippet children(current)}
 				{#if current === 0}
 					<ProfileStep {draft} />
 				{:else if current === 1}
-					<SocialStep {people} {repos} />
+					<SocialStep {people} {repos} onInteract={() => (socialTouched = true)} />
 				{:else if current === 2}
 					<KeysStep {keys} onAdd={addKey} onDelete={removeKey} />
 				{:else}
@@ -188,7 +212,7 @@
 					loading={savingProfile}
 					onclick={() => void leave()}
 				>
-					Skip onboarding
+					Skip for now
 				</Button>
 			</div>
 		{/if}
diff --git a/web/src/lib/components/profile/FollowCard.svelte b/web/src/lib/components/profile/FollowCard.svelte
--- a/web/src/lib/components/profile/FollowCard.svelte
+++ b/web/src/lib/components/profile/FollowCard.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
 	import FollowCardContent from "./FollowCardContent.svelte";
-	import type { PersonData } from "./types";
+	import type { FollowChange, PersonData } from "./types";
 
 	let {
 		person,
 		border = false,
 		shadow = false,
-		background = false
+		background = false,
+		onFollow
 	}: {
 		person: PersonData;
+		onFollow?: (change: FollowChange) => void;
 		border?: CardVariants["border"];
 		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
@@ -17,5 +19,5 @@
 </script>
 
 <Card {border} {shadow} {background} padding={border || background ? "regular" : "none"}>
-	<FollowCardContent {person} />
+	<FollowCardContent {person} {onFollow} />
 </Card>
diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
--- a/web/src/lib/components/profile/FollowCardContent.svelte
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -8,14 +8,18 @@
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import { formatCount } from "$lib/format";
 
-	let { person }: { person: PersonData } = $props();
+	let { person, onFollow }: { person: PersonData; onFollow?: (change: FollowChange) => void } =
+		$props();
 
 	const followerCount = createOptimisticCount({
 		key: () => person.did,
 		loaded: () => person.followers
 	});
 
-	const followed = (change: FollowChange) => followerCount.adjust(change.delta);
+	const followed = (change: FollowChange) => {
+		followerCount.adjust(change.delta);
+		onFollow?.(change);
+	};
 </script>
 
 <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
diff --git a/web/src/lib/components/profile/types.ts b/web/src/lib/components/profile/types.ts
--- a/web/src/lib/components/profile/types.ts
+++ b/web/src/lib/components/profile/types.ts
@@ -45,6 +45,14 @@
 	delta: 1 | -1;
 }
 
+export interface StarChange {
+	viewerDid: string;
+	repoDid: string;
+	starred: boolean;
+	rkey: string | null;
+	delta: 1 | -1;
+}
+
 export interface PersonData {
 	did: string;
 	handle: string;
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -2,7 +2,7 @@
 	import { resolve } from "$app/paths";
 	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
 	import RepoCardContent from "./RepoCardContent.svelte";
-	import type { RepoCardData } from "$lib/components/profile/types";
+	import type { RepoCardData, StarChange } from "$lib/components/profile/types";
 	import { navigatingTo } from "$lib/navPulse";
 	let {
 		repo,
@@ -11,9 +11,11 @@
 		border = true,
 		shadow = false,
 		background = true,
-		padding = "regular"
+		padding = "regular",
+		onStar
 	}: {
 		repo: RepoCardData;
+		onStar?: (change: StarChange) => void;
 		starButton?: boolean;
 		showOwner?: boolean;
 		border?: CardVariants["border"];
@@ -32,5 +34,5 @@
 	{padding}
 	class={navigatingTo(href) ? "row-breathe" : undefined}
 >
-	<RepoCardContent {repo} {starButton} {showOwner} />
+	<RepoCardContent {repo} {starButton} {showOwner} {onStar} />
 </Card>
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -6,13 +6,19 @@
 	import CircleDot from "$icon/circle-dot";
 	import GitPullRequest from "$icon/git-pull-request";
 	import StarButton from "./StarButton.svelte";
-	import type { RepoCardData } from "$lib/components/profile/types";
+	import type { RepoCardData, StarChange } from "$lib/components/profile/types";
 	import { formatCount } from "$lib/format";
 	let {
 		repo,
 		starButton = true,
-		showOwner = true
-	}: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $props();
+		showOwner = true,
+		onStar
+	}: {
+		repo: RepoCardData;
+		starButton?: boolean;
+		showOwner?: boolean;
+		onStar?: (change: StarChange) => void;
+	} = $props();
 
 	const stats = $derived(
 		[
@@ -44,6 +50,7 @@
 					initialCount={repo.stars}
 					initialRkey={repo.viewerStarRkey}
 					insetShadow={false}
+					onCommit={onStar}
 				/>
 			</div>
 		{/if}
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -12,6 +12,7 @@
 	import { formatCount } from "$lib/format";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
+	import type { StarChange } from "$lib/components/profile/types";
 	import type { RepoCounts } from "./types";
 
 	interface Props {
@@ -21,6 +22,7 @@
 		initialCount?: number | RepoCounts | Promise<number> | Promise<RepoCounts>;
 		initialRkey?: string | null | Promise<string | null>;
 		insetShadow?: boolean;
+		onCommit?: (change: StarChange) => void;
 	}
 	let {
 		repoDid,
@@ -28,7 +30,8 @@
 		repoName,
 		initialCount,
 		initialRkey,
-		insetShadow = true
+		insetShadow = true,
+		onCommit
 	}: Props = $props();
 
 	const auth = getAuth();
@@ -97,11 +100,19 @@
 				relation.deleted();
 				starCount.adjust(-1);
 				profileCounts?.adjust(agent.sub, "stars", -1);
+				onCommit?.({
+					viewerDid: agent.sub,
+					repoDid,
+					starred: false,
+					rkey: null,
+					delta: -1
+				});
 			} else {
 				const rkey = await createStar(agent, repoDid);
 				relation.created(rkey);
 				starCount.adjust(1);
 				profileCounts?.adjust(agent.sub, "stars", 1);
+				onCommit?.({ viewerDid: agent.sub, repoDid, starred: true, rkey, delta: 1 });
 			}
 		} catch {
 			relation.fail();
diff --git a/web/src/lib/components/welcome/FinishStep.svelte b/web/src/lib/components/welcome/FinishStep.svelte
--- a/web/src/lib/components/welcome/FinishStep.svelte
+++ b/web/src/lib/components/welcome/FinishStep.svelte
@@ -29,11 +29,21 @@
 	});
 
 	export type TileVariants = VariantProps<typeof tile>;
+
+	const TILE_STAGGER_MS = 60;
+	const TILE_MAX_DELAY_MS = 140;
+
+	function tileDelay(index: number) {
+		return Math.min(index * TILE_STAGGER_MS, TILE_MAX_DELAY_MS);
+	}
 </script>
 
 <script lang="ts">
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { quintOut } from "svelte/easing";
+	import { fly } from "svelte/transition";
+	import { prefersReducedMotion } from "svelte/motion";
 	import { resolve } from "$app/paths";
 	import ArrowRight from "$icon/arrow-right";
 	import BookMarked from "$icon/book-marked";
@@ -46,6 +56,15 @@
 	import StepHeader from "./StepHeader.svelte";
 
 	const slot = tile();
+
+	function tileTransition(index: number) {
+		return {
+			y: prefersReducedMotion.current ? 0 : 8,
+			duration: prefersReducedMotion.current ? 0 : 220,
+			delay: prefersReducedMotion.current ? 0 : tileDelay(index),
+			easing: quintOut
+		};
+	}
 
 	// the appview links /core, a shortcut route it owns; the svelte app addresses
 	// repositories as /[handle]/[repo]
@@ -103,7 +122,7 @@
 	<StepHeader title="You're all set!" subtitle="Here are a few things to explore next:" />
 
 	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-		<div class={tile({ span: "full" }).root()}>
+		<div class={tile({ span: "full" }).root()} in:fly={tileTransition(0)}>
 			{@render heading(BookMarked, "Create a repository")}
 			<p class={slot.body()}>Kick things off by creating your first repository.</p>
 			<a href={newRepoHref} class={slot.action()}>
@@ -112,7 +131,7 @@
 			</a>
 		</div>
 
-		<div class={tile({ span: "tall" }).root()}>
+		<div class={tile({ span: "tall" }).root()} in:fly={tileTransition(1)}>
 			{@render heading(GitPullRequest, "Contribute to the Tangled project")}
 			<p class={slot.body()}>
 				Tangled is fully open-source: Open a feature request, or submit a bug-fix!
@@ -125,8 +144,8 @@
 			</a>
 		</div>
 
-		{#each docs as doc (doc.title)}
-			<div class={slot.root()}>
+		{#each docs as doc, i (doc.title)}
+			<div class={slot.root()} in:fly={tileTransition(2 + i)}>
 				{@render heading(doc.icon, doc.title)}
 				<p class={slot.body()}>{doc.body}</p>
 				<a
@@ -143,8 +162,8 @@
 	</div>
 
 	<ul class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-		{#each community as link (link.title)}
-			<li class="flex">
+		{#each community as link, i (link.title)}
+			<li class="flex" in:fly={tileTransition(4 + i)}>
 				<a
 					href={link.href}
 					target="_blank"
diff --git a/web/src/lib/components/welcome/KeysStep.svelte b/web/src/lib/components/welcome/KeysStep.svelte
--- a/web/src/lib/components/welcome/KeysStep.svelte
+++ b/web/src/lib/components/welcome/KeysStep.svelte
@@ -8,11 +8,17 @@
 </script>
 
 <script lang="ts">
+	import { cubicOut } from "svelte/easing";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { fade, fly } from "svelte/transition";
+	import { flip } from "svelte/animate";
 	import Plus from "$icon/plus";
+	import Trash from "$icon/trash-2";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Field from "$lib/components/ui/Field.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import Modal from "$lib/components/ui/Modal.svelte";
 	import Textarea from "$lib/components/ui/Textarea.svelte";
 	import KeyCard from "$lib/components/settings/KeyCard.svelte";
 	import StepHeader from "./StepHeader.svelte";
@@ -32,6 +38,8 @@
 	let adding = $state(false);
 	let deleting = $state<string>();
 	let error = $state<string>();
+	let pendingDelete = $state<WelcomeKey>();
+	let confirmOpen = $state(false);
 
 	const canAdd = $derived(name.trim() !== "" && key.trim() !== "");
 
@@ -51,8 +59,15 @@
 		}
 	};
 
-	const remove = async (pubkey: WelcomeKey) => {
-		if (deleting || !confirm(`Are you sure you want to delete the key ${pubkey.name}?`)) return;
+	const requestDelete = (pubkey: WelcomeKey) => {
+		if (deleting) return;
+		pendingDelete = pubkey;
+		confirmOpen = true;
+	};
+
+	const remove = async () => {
+		if (!pendingDelete || deleting) return;
+		const pubkey = pendingDelete;
 		deleting = pubkey.rkey;
 		error = undefined;
 		try {
@@ -61,13 +76,15 @@
 			error = cause instanceof Error ? cause.message : "Could not delete key. Try again.";
 		} finally {
 			deleting = undefined;
+			confirmOpen = false;
+			pendingDelete = undefined;
 		}
 	};
 </script>
 
 <div class="flex flex-col gap-6">
 	<StepHeader
-		title="Add an SSH key"
+		title="Add SSH keys"
 		subtitle="Add a public SSH key to push to your repositories over SSH."
 	/>
 
@@ -76,13 +93,24 @@
 	{#if keys.length > 0}
 		<ul class="flex flex-col gap-3">
 			{#each keys as pubkey (pubkey.rkey)}
-				<li>
+				<li
+					in:fly={{
+						y: -8,
+						duration: prefersReducedMotion.current ? 0 : 200,
+						easing: cubicOut
+					}}
+					out:fade={{ duration: prefersReducedMotion.current ? 0 : 140 }}
+					animate:flip={{
+						duration: prefersReducedMotion.current ? 0 : 200,
+						easing: cubicOut
+					}}
+				>
 					<KeyCard
 						name={pubkey.name}
 						fingerprint={pubkey.fingerprint}
 						createdAt={pubkey.createdAt}
 						deleting={deleting === pubkey.rkey}
-						onDelete={() => void remove(pubkey)}
+						onDelete={() => requestDelete(pubkey)}
 					/>
 				</li>
 			{/each}
@@ -114,3 +142,29 @@
 		</Button>
 	</form>
 </div>
+
+<Modal bind:open={confirmOpen} title={`Delete ${pendingDelete?.name ?? "key"}?`} titleIcon={Trash}>
+	<p class="text-foreground-muted">
+		This removes the key from your account. You will need to add it again to push with it.
+	</p>
+
+	{#snippet footer()}
+		<Button
+			variant="default"
+			class="flex-1"
+			disabled={!!deleting}
+			onclick={() => (confirmOpen = false)}
+		>
+			Cancel
+		</Button>
+		<Button
+			variant="danger"
+			icon={Trash}
+			class="flex-1"
+			loading={!!deleting}
+			onclick={() => void remove()}
+		>
+			Delete key
+		</Button>
+	{/snippet}
+</Modal>
diff --git a/web/src/lib/components/welcome/ProfileStep.svelte b/web/src/lib/components/welcome/ProfileStep.svelte
--- a/web/src/lib/components/welcome/ProfileStep.svelte
+++ b/web/src/lib/components/welcome/ProfileStep.svelte
@@ -3,7 +3,7 @@
 
 	export const avatarPicker = tv({
 		slots: {
-			label: "flex size-40 cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors hover:bg-background-subtle",
+			label: "flex size-40 cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-border-focus hover:bg-background-subtle",
 			image: "size-full rounded-full object-cover",
 			placeholder: "flex flex-col items-center justify-center gap-1"
 		}
@@ -21,6 +21,7 @@
 </script>
 
 <script lang="ts">
+	import { prefersReducedMotion } from "svelte/motion";
 	import Camera from "$icon/camera";
 	import Field from "$lib/components/ui/Field.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
@@ -30,6 +31,8 @@
 
 	const slot = avatarPicker();
 	const acceptedTypes: Record<string, true> = { "image/png": true, "image/jpeg": true };
+	const uid = $props.id();
+	const pictureErrorId = `${uid}-picture-error`;
 	let pictureError = $state<string>();
 
 	const pick = (event: Event) => {
@@ -51,27 +54,40 @@
 </script>
 
 <div class="flex flex-col gap-6">
-	<StepHeader
-		title="Welcome!"
-		subtitle="Let's get your profile ready. All fields are optional."
-	/>
+	<StepHeader title="Welcome!" subtitle="Let's set up your profile. All fields are optional." />
 
 	<div class="flex flex-col gap-6 md:flex-row">
 		<div class="flex shrink-0 justify-center md:block">
 			<label class={slot.label()}>
 				{#if draft.avatarPreview}
-					<img src={draft.avatarPreview} alt="Your new avatar" class={slot.image()} />
+					<img
+						src={draft.avatarPreview}
+						alt="Your new avatar"
+						class={slot.image()}
+						class:avatar-preview-enter={!prefersReducedMotion.current}
+					/>
 				{:else}
 					<span class={slot.placeholder()}>
 						<Camera class="size-6" aria-hidden="true" />
 						<span class="typography-paragraph-small">Upload picture</span>
 					</span>
 				{/if}
-				<input type="file" accept="image/png,image/jpeg" class="hidden" onchange={pick} />
+				<input
+					type="file"
+					accept="image/png,image/jpeg"
+					class="sr-only"
+					aria-describedby={pictureErrorId}
+					aria-invalid={pictureError ? "true" : undefined}
+					onchange={pick}
+				/>
 			</label>
-			{#if pictureError}
-				<p class="mt-2 typography-paragraph-small text-foreground-danger">{pictureError}</p>
-			{/if}
+			<p
+				id={pictureErrorId}
+				role="status"
+				class="mt-2 typography-paragraph-small text-foreground-danger"
+			>
+				{pictureError ?? ""}
+			</p>
 		</div>
 
 		<div class="flex min-w-0 flex-1 flex-col gap-4">
@@ -99,3 +115,16 @@
 		</div>
 	</div>
 </div>
+
+<style>
+	.avatar-preview-enter {
+		transition:
+			opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
+			scale 220ms cubic-bezier(0.23, 1, 0.32, 1);
+
+		@starting-style {
+			opacity: 0;
+			scale: 0.94;
+		}
+	}
+</style>
diff --git a/web/src/lib/components/welcome/SocialStep.svelte b/web/src/lib/components/welcome/SocialStep.svelte
--- a/web/src/lib/components/welcome/SocialStep.svelte
+++ b/web/src/lib/components/welcome/SocialStep.svelte
@@ -1,11 +1,29 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
+	import ArrowRight from "$icon/arrow-right";
+	import Compass from "$icon/compass";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import FollowCard from "$lib/components/profile/FollowCard.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import { repoKey, type PersonData, type RepoCardData } from "$lib/components/profile/types";
 	import StepHeader from "./StepHeader.svelte";
 
-	let { people, repos }: { people: PersonData[]; repos: RepoCardData[] } = $props();
+	let {
+		people,
+		repos,
+		onInteract
+	}: {
+		people: PersonData[];
+		repos: RepoCardData[];
+		/** fires once the viewer has followed or starred anything on this step */
+		onInteract?: () => void;
+	} = $props();
+
+	const timelineHref = resolve("/timeline");
+
+	const interacted = (active: boolean) => {
+		if (active) onInteract?.();
+	};
 </script>
 
 <div class="flex flex-col gap-6">
@@ -15,7 +33,11 @@
 		{#if people.length > 0}
 			<div class="flex flex-col gap-3">
 				{#each people as person (person.did)}
-					<FollowCard {person} border />
+					<FollowCard
+						{person}
+						border
+						onFollow={(change) => interacted(change.following)}
+					/>
 				{/each}
 			</div>
 		{/if}
@@ -23,11 +45,19 @@
 		{#if repos.length > 0}
 			<div class="flex flex-col gap-3">
 				{#each repos as repo (repoKey(repo))}
-					<RepoCard {repo} border />
+					<RepoCard {repo} border onStar={(change) => interacted(change.starred)} />
 				{/each}
 			</div>
 		{/if}
 	{:else}
-		<EmptyState message="Nothing to suggest right now — you can explore once you're set up." />
+		<EmptyState icon={Compass} message="No suggestions yet.">
+			<a
+				href={timelineHref}
+				class="ml-2 flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline"
+			>
+				Browse the timeline
+				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
+			</a>
+		</EmptyState>
 	{/if}
 </div>
diff --git a/web/src/lib/components/welcome/StepHeader.svelte b/web/src/lib/components/welcome/StepHeader.svelte
--- a/web/src/lib/components/welcome/StepHeader.svelte
+++ b/web/src/lib/components/welcome/StepHeader.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <header class={slot.root()}>
-	<h1 class={slot.title()}>{title}</h1>
+	<h2 class={slot.title()}>{title}</h2>
 	{#if subtitle}
 		<p class={slot.subtitle()}>{subtitle}</p>
 	{/if}
diff --git a/web/src/lib/components/welcome/Steps.svelte b/web/src/lib/components/welcome/Steps.svelte
--- a/web/src/lib/components/welcome/Steps.svelte
+++ b/web/src/lib/components/welcome/Steps.svelte
@@ -1,36 +1,49 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	// the numbered rail from Figma node 191:6514 — same shape as the appview's
-	// onboarding/fragments/steps, restyled onto the design-system tokens.
 	export const steps = tv({
 		slots: {
 			root: "flex w-full items-center gap-2",
-			item: "flex shrink-0 items-center gap-2",
-			marker: "flex size-5 shrink-0 items-center justify-center rounded-full typography-paragraph-small",
-			// labels are desktop-only, but sr-only rather than hidden so the rail still
-			// reads as a named list of steps on a narrow screen
+			item: "flex flex-1 items-center gap-2 last:flex-none",
+			control:
+				"flex items-center gap-2 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+			marker: "flex size-6 shrink-0 items-center justify-center rounded-full typography-paragraph-small tabular-nums transition-[scale,background-color,border-color] duration-(--rail-duration) ease-(--rail-ease)",
 			label: "sr-only typography-paragraph-small whitespace-nowrap sm:not-sr-only",
-			connector: "h-px min-w-4 flex-1 bg-border-default"
+			connector: "relative h-0.5 flex-1 overflow-hidden rounded-full bg-background-muted",
+			connectorFill:
+				"absolute inset-0 origin-left scale-x-0 rounded-full bg-background-emphasis transition-[scale] duration-(--rail-duration) ease-(--rail-ease)"
 		},
 		variants: {
 			state: {
 				done: {
-					marker: "bg-background-inset text-foreground-default",
-					label: "text-foreground-subtle"
+					marker: "bg-background-emphasis text-foreground-on-emphasis",
+					label: "text-foreground-muted"
 				},
 				current: {
-					marker: "bg-background-muted text-foreground-default",
+					marker: "bg-background-emphasis text-foreground-on-emphasis",
 					label: "text-foreground-default"
 				},
 				upcoming: {
-					marker: "bg-background-inset text-foreground-subtle",
-					label: "text-foreground-subtle"
+					marker: "bg-background-inset text-foreground-muted",
+					label: "text-foreground-muted"
 				}
+			},
+			filled: {
+				true: { connectorFill: "scale-x-100" }
+			},
+			here: {
+				true: { marker: "scale-100" },
+				false: { marker: "scale-[0.92]" }
+			},
+			clickable: {
+				true: { control: "cursor-pointer" }
 			}
 		},
 		defaultVariants: {
-			state: "upcoming"
+			state: "upcoming",
+			filled: false,
+			here: false,
+			clickable: false
 		}
 	});
 
@@ -40,36 +53,121 @@
 
 <script lang="ts">
 	import Check from "$icon/check";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { RAIL_DURATION, RAIL_EASING } from "./spring";
 
 	interface Props {
 		items: readonly { key: string; label: string }[];
 		current: number;
+		/** highest step index reached; steps past it are not selectable */
+		furthest: number;
+		/** renders every step done, for the terminal step */
+		complete?: boolean;
+		onSelect: (index: number) => void;
+		/** accessible name for the list */
+		label?: string;
 	}
 
-	let { items, current }: Props = $props();
+	let { items, current, furthest, complete = false, onSelect, label = "Steps" }: Props = $props();
 
-	const shell = steps();
+	let root = $state<HTMLElement>();
+	let keyboardMove = false;
 
 	const stateOf = (index: number): StepState =>
-		index < current ? "done" : index === current ? "current" : "upcoming";
+		complete || index < current ? "done" : index === current ? "current" : "upcoming";
+
+	const lastIndex = $derived(Math.min(items.length - 1, furthest));
+
+	const move = (index: number) => {
+		const target = Math.max(0, Math.min(lastIndex, index));
+		if (target === current) return;
+		keyboardMove = true;
+		onSelect(target);
+	};
+
+	const onKeydown = (event: KeyboardEvent) => {
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				event.preventDefault();
+				move(current + 1);
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				event.preventDefault();
+				move(current - 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				move(0);
+				break;
+			case "End":
+				event.preventDefault();
+				move(lastIndex);
+				break;
+		}
+	};
+
+	$effect(() => {
+		void current;
+		if (!keyboardMove || !root) return;
+		keyboardMove = false;
+		root.querySelector<HTMLButtonElement>('[aria-current="step"]')?.focus();
+	});
 </script>
 
-<ol class={shell.root()}>
+<ol
+	bind:this={root}
+	aria-label={label}
+	class={steps().root()}
+	style="--rail-ease: {RAIL_EASING}; --rail-duration: {prefersReducedMotion.current
+		? 0
+		: RAIL_DURATION}ms"
+>
 	{#each items as item, index (item.key)}
-		{#if index > 0}
-			<li aria-hidden="true" class={shell.connector()}></li>
-		{/if}
 		{@const state = stateOf(index)}
-		{@const slot = steps({ state })}
-		<li class={slot.item()} aria-current={state === "current" ? "step" : undefined}>
-			<span class={slot.marker()} aria-label={state === "done" ? "done" : undefined}>
-				{#if state === "done"}
-					<Check class="size-3.5" aria-hidden="true" />
-				{:else}
-					{index + 1}
-				{/if}
-			</span>
-			<span class={slot.label()}>{item.label}</span>
+		{@const here = !complete && index === current}
+		{@const filled = complete || index < current}
+		{@const selectable = index <= furthest}
+		{@const slot = steps({ state, filled, here, clickable: selectable && !here })}
+		{@const description = `Step ${index + 1} of ${items.length}: ${item.label}`}
+		<li class={slot.item()}>
+			{#if selectable}
+				<button
+					type="button"
+					class={slot.control()}
+					tabindex={here ? 0 : -1}
+					aria-current={here ? "step" : undefined}
+					aria-label={description}
+					onclick={() => {
+						if (!here) onSelect(index);
+					}}
+					onkeydown={onKeydown}
+				>
+					<span class={slot.marker()}>
+						{#if state === "done"}
+							<Check class="size-3.5" aria-hidden="true" />
+							<span class="sr-only">Completed</span>
+						{:else}
+							{index + 1}
+						{/if}
+					</span>
+					<span class={slot.label()}>{item.label}</span>
+				</button>
+			{:else}
+				<!-- a step past `furthest` is always upcoming: `current` never runs ahead
+				     of it, and `complete` only lands once every step is selectable -->
+				<span class={slot.control()} aria-hidden="true">
+					<span class={slot.marker()}>{index + 1}</span>
+					<span class={slot.label()}>{item.label}</span>
+				</span>
+				<span class="sr-only">{description}</span>
+			{/if}
+			{#if index < items.length - 1}
+				<span aria-hidden="true" class={slot.connector()}>
+					<span class={slot.connectorFill()}></span>
+				</span>
+			{/if}
 		</li>
 	{/each}
 </ol>
diff --git a/web/src/lib/components/welcome/WelcomeCard.svelte b/web/src/lib/components/welcome/WelcomeCard.svelte
--- a/web/src/lib/components/welcome/WelcomeCard.svelte
+++ b/web/src/lib/components/welcome/WelcomeCard.svelte
@@ -4,9 +4,12 @@
 	export const welcomeCard = tv({
 		slots: {
 			root: "overflow-hidden rounded-sm border border-border-default bg-background-default shadow-xs",
-			header: "overflow-x-auto border-b border-border-default px-6 py-5",
-			body: "grid overflow-hidden p-6",
-			pane: "col-start-1 row-start-1 min-w-0",
+			header: "border-b border-border-default px-6 py-5",
+			body: "grid overflow-hidden",
+			// self-start keeps the pane at its content height: once the body carries a
+			// measured height the grid row would otherwise stretch the pane to match it,
+			// and measuring that back is a loop that never moves
+			pane: "col-start-1 row-start-1 min-w-0 self-start p-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
 			footer: "flex items-center justify-between gap-4 border-t border-border-default px-6 py-4"
 		}
 	});
@@ -17,89 +20,194 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { untrack } from "svelte";
-	import { cubicIn, cubicOut } from "svelte/easing";
+	import { cubicIn } from "svelte/easing";
 	import { prefersReducedMotion } from "svelte/motion";
-	import { fly } from "svelte/transition";
+	import { fade, fly } from "svelte/transition";
 	import ArrowLeft from "$icon/arrow-left";
 	import ArrowRight from "$icon/arrow-right";
 	import Check from "$icon/check";
 	import Button from "$lib/components/ui/Button.svelte";
+	import { EXIT_DURATION, PANE_DURATION, PANE_EASING, paneEasing } from "./spring";
 	import Steps from "./Steps.svelte";
-	import { WELCOME_STEPS, LAST_STEP } from "./steps";
+	import { LAST_STEP, WELCOME_STEPS, WELCOME_TOTAL } from "./steps";
 
 	interface Props {
 		step: number;
+		furthest: number;
 		/** +1 when advancing, -1 when going back — decides which way the pane slides */
 		direction: number;
-		/** the appview greens Next once the step has something worth saving */
+		/** greens the advance button once the step has nothing left to do */
 		nextReady?: boolean;
 		nextLoading?: boolean;
 		onBack: () => void;
 		onNext: () => void;
+		onSelect: (index: number) => void;
 		/** rendered per step index, frozen at pane creation so the outgoing pane keeps its own content */
 		children: Snippet<[number]>;
 	}
 
 	let {
 		step,
+		furthest,
 		direction,
 		nextReady = false,
 		nextLoading = false,
 		onBack,
 		onNext,
+		onSelect,
 		children
 	}: Props = $props();
 
 	const slot = welcomeCard();
+	const isLast = $derived(step === LAST_STEP);
 
-	const DISTANCE = 40;
+	const DISTANCE = 22;
 	const enter = $derived(
 		prefersReducedMotion.current
-			? { duration: 0 }
-			: { x: direction * DISTANCE, duration: 240, delay: 90, easing: cubicOut }
+			? { duration: PANE_DURATION, easing: paneEasing }
+			: { x: direction * DISTANCE, duration: PANE_DURATION, easing: paneEasing }
 	);
 	const leave = $derived(
 		prefersReducedMotion.current
-			? { duration: 0 }
-			: { x: direction * -DISTANCE, duration: 150, easing: cubicIn }
+			? { duration: EXIT_DURATION, easing: cubicIn }
+			: { x: direction * -DISTANCE, duration: EXIT_DURATION, easing: cubicIn }
 	);
 
-	const isLast = $derived(step === LAST_STEP);
+	const stepDescription = (index: number) =>
+		`Step ${index + 1} of ${WELCOME_TOTAL}: ${WELCOME_STEPS[index].label}`;
+
+	const mobileLabelTransition = $derived(
+		prefersReducedMotion.current ? "" : `transition: opacity ${PANE_DURATION}ms ${PANE_EASING};`
+	);
+
+	let height = $state<number | null>(null);
+	let mounted = $state(false);
+
+	$effect(() => {
+		if (height !== null && !mounted) mounted = true;
+	});
+
+	const heightTransition = $derived(
+		mounted && !prefersReducedMotion.current
+			? `transition: height ${PANE_DURATION}ms ${PANE_EASING};`
+			: ""
+	);
+
+	function measurePane(node: HTMLElement) {
+		// a detached pane reports 0, and the outgoing one is still observed while it
+		// fades out — taking that would collapse the card mid-transition
+		const observer = new ResizeObserver(() => {
+			if (node.isConnected) height = node.offsetHeight;
+		});
+		observer.observe(node);
+		height = node.offsetHeight;
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
+	}
+
+	let paneEl: HTMLElement | undefined = $state();
+	let intent: "panel" | null = null;
+
+	$effect(() => {
+		void step;
+		if (intent === "panel") paneEl?.focus();
+		intent = null;
+	});
+
+	function handleBack() {
+		intent = "panel";
+		onBack();
+	}
+
+	function handleNext() {
+		intent = "panel";
+		onNext();
+	}
+
+	const labelFadeMs = $derived(prefersReducedMotion.current ? 0 : 160);
+	const backFadeInMs = $derived(prefersReducedMotion.current ? 0 : 160);
+	const backFadeOutMs = $derived(prefersReducedMotion.current ? 0 : 120);
 </script>
 
 <div class={slot.root()}>
+	<p aria-live="polite" class="sr-only">{stepDescription(step)}</p>
+
 	<div class={slot.header()}>
-		<Steps items={WELCOME_STEPS} current={step} />
+		<div class="relative grid sm:hidden" aria-hidden="true">
+			{#each WELCOME_STEPS as item, index (item.key)}
+				<span
+					class="col-start-1 row-start-1 typography-paragraph-small whitespace-nowrap text-foreground-default"
+					style="opacity: {index === step ? 1 : 0}; {mobileLabelTransition}"
+				>
+					{item.label}
+				</span>
+			{/each}
+		</div>
+
+		<Steps items={WELCOME_STEPS} current={step} {furthest} complete={isLast} {onSelect} />
 	</div>
 
-	<div class={slot.body()}>
+	<div
+		class={slot.body()}
+		style="{height === null ? '' : `height: ${height}px;`} {heightTransition}"
+	>
 		{#key step}
 			<!-- untrack freezes the index at creation: `children` is a live snippet, so
 			     without this the leaving pane would re-render with the new step's content
 			     halfway through its own exit transition -->
 			{@const frozen = untrack(() => step)}
-			<div class={slot.pane()} in:fly={enter} out:fly={leave}>
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<div
+				bind:this={paneEl}
+				use:measurePane
+				class={slot.pane()}
+				tabindex={-1}
+				role="group"
+				aria-label={stepDescription(frozen)}
+				in:fly={enter}
+				out:fly={leave}
+			>
 				{@render children(frozen)}
 			</div>
 		{/key}
 	</div>
 
 	<div class={slot.footer()}>
-		{#if step > 0}
-			<Button variant="ghost" icon={ArrowLeft} onclick={onBack}>Back</Button>
-		{:else}
-			<span></span>
-		{/if}
+		<div class="flex items-center">
+			{#if step > 0}
+				<div in:fade={{ duration: backFadeInMs }} out:fade={{ duration: backFadeOutMs }}>
+					<Button variant="ghost" icon={ArrowLeft} onclick={handleBack}>Back</Button>
+				</div>
+			{/if}
+		</div>
 
 		<Button
 			variant={nextReady ? "primary" : "default"}
 			icon={isLast ? Check : ArrowRight}
+			iconSide="right"
 			loading={nextLoading}
 			disabled={nextLoading}
-			iconSide={isLast ? "left" : "right"}
-			onclick={onNext}
+			onclick={handleNext}
 		>
-			{isLast ? "Finish" : "Next"}
+			<span class="grid">
+				<span
+					class="col-start-1 row-start-1"
+					style="opacity: {isLast ? 0 : 1}; transition: opacity {labelFadeMs}ms;"
+					aria-hidden={isLast}
+				>
+					Next
+				</span>
+				<span
+					class="col-start-1 row-start-1"
+					style="opacity: {isLast ? 1 : 0}; transition: opacity {labelFadeMs}ms;"
+					aria-hidden={!isLast}
+				>
+					Finish
+				</span>
+			</span>
 		</Button>
 	</div>
 </div>
diff --git a/web/src/lib/components/welcome/spring.ts b/web/src/lib/components/welcome/spring.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/welcome/spring.ts
@@ -0,0 +1,33 @@
+// interior.dev's wizard-steps springs, sampled so CSS transitions and svelte
+// transitions run the identical curve. both are overdamped (zeta > 1), which is
+// why the closed form below needs no oscillating branch.
+const springEasing = (stiffness: number, damping: number, mass: number, duration: number) => {
+	const omega = Math.sqrt(stiffness / mass);
+	const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+	const spread = omega * Math.sqrt(zeta * zeta - 1);
+	const fast = -zeta * omega + spread;
+	const slow = -zeta * omega - spread;
+	const at = (seconds: number) =>
+		1 - (slow * Math.exp(fast * seconds) - fast * Math.exp(slow * seconds)) / (slow - fast);
+	const end = at(duration / 1000);
+	return (t: number) => at((t * duration) / 1000) / end;
+};
+
+const cssLinear = (easing: (t: number) => number, steps = 20) =>
+	`linear(${Array.from({ length: steps + 1 }, (_, i) => +easing(i / steps).toFixed(3)).join(", ")})`;
+
+/** rail markers and progress connectors */
+export const RAIL_DURATION = 400;
+export const railEasing = springEasing(520, 40, 0.5, RAIL_DURATION);
+export const RAIL_EASING = cssLinear(railEasing);
+
+/** step panes and the card height that follows them. interior's crossfade spring
+    (260/34/0.8) settles in 659ms, so it is rescaled at a constant zeta to land
+    inside the 300ms budget without changing its shape. */
+export const PANE_DURATION = 280;
+export const paneEasing = springEasing(1438, 80, 0.8, PANE_DURATION);
+export const PANE_EASING = cssLinear(paneEasing);
+
+/** leaving is shorter and closer in, matching ui/Modal */
+export const EXIT_DURATION = 140;
+export const EXIT_EASING = "cubic-bezier(0.4, 0, 1, 1)";
diff --git a/web/src/lib/components/welcome/steps.ts b/web/src/lib/components/welcome/steps.ts
--- a/web/src/lib/components/welcome/steps.ts
+++ b/web/src/lib/components/welcome/steps.ts
@@ -2,9 +2,9 @@
 // persists the index in the `onboarding` table, so these values are storage
 // keys, not just display order — keep them aligned with the Go constants.
 export const WELCOME_STEPS = [
-	{ key: "profile", label: "Set up your profile" },
-	{ key: "social", label: "Follow & star" },
-	{ key: "keys", label: "Add SSH keys" },
+	{ key: "profile", label: "Profile" },
+	{ key: "social", label: "Discover" },
+	{ key: "keys", label: "SSH keys" },
 	{ key: "finish", label: "Finish" }
 ] as const;