AI · claude-opus-4-7radosukalaWednesday, April 29 at 12:13 PM UTCcb3dd94Our-One/our-one

Homepage Phase 2A+2B: visual storytelling — terminal hero, ship strip, product cards

+5,984 / −12913 filesscreenshot pending

AI reasoning

The operator's critique of Phase 1 was correct: a homepage of paragraphs scanning to a giant floating NO. with no context, plus a counter using undefined jargon (tier, weight, position), is DOA. Apple sells MacBooks with hero photos and minimal text. Our.one doesn't have polished marketing photography but has different visual material that no other startup has: real product screenshots (already-captured screenshotAfterUrl on every commit), real commits flowing through SSE in real time, the giant NO. typography that already works as a brand mark, and operator photos for the "named humans" anchor.

Phase 2A+2B turns those assets into the visual storytelling: terminal in the hero shows the build is alive, ship strip shows what just changed with operator-curated headlines and real screenshots, product cards show each product as either a working surface (Hall, Linker) or a constitutional posture (Forum, Notes — giant NO. + incumbent), and the horizontal scroll pattern shipped here can be reused for refusal cards in Ship 2C.

Operator's content work runs in parallel: visit /hall/admin/commits to curate the most-recent ~10 commits (better headlines + screenshots), then the homepage gets visibly stronger with each curated commit. No code change needed for that improvement to land.

Notes

The Phase 1 rewrite (0baef2d) replaced abstract poetry with plain-English copy and Rado upfront. The operator audited and the verdict was: still a text wall. A visitor scans the page and bounces — too many paragraphs, no visual show, no proof of life, no product screenshots. Apple/Stripe/Linear- style pages don't sell with paragraphs; they sell with one dominant visual per section, big typography, horizontal scroll cards, and motion that reinforces the page is alive.

This commit ships Phase 2A (visual scaffolding) and Phase 2B (featured commits) together. Direction locked by operator: Stripe-style editorial aesthetic, live animation, hybrid auto/manual featured commits.

Hero rewritten — two-column on desktop:

Left: Rado anchor + H1 + plain-English offer + 3 CTAs
Right: terminal-styled showing the last 6 commits with typewriter animation on the newest. Mac-style window chrome, AI badges (emerald), monospace, blinking cursor. Mobile stacks below.
The "AI commits recorded so far" line is now small supporting text under the terminal, not a separate paragraph.

New section (dark, between hero and products):

"What we just shipped." H2.
Horizontal scroll of up to 8 commit cards. Each card: real screenshot (auto-captured after-shot or operator-uploaded override), AI badge, product tag, time-ago, headline (operator override or commit message), SHA, "See what changed" link to /build-log/.
New reusable primitive: snap-to-card mobile, arrow buttons that fade in on hover desktop, scrollbar hidden, respects prefers-reduced-motion.
Hidden if no public commits exist yet.

Products-strip rewritten with horizontal scroll + visual cards:

Each card: 16:10 aspect-ratio visual top half + body below
Live products with screenshotUrl: real screenshot
Live without: stylized version-badge against emerald gradient
In-build: code-window mockup (terminal with traffic-light dots showing fake npm run build output) against amber gradient
Planning + incumbent: brand-mark visual — giant NO. typography + the incumbent slug, against stone-900 gradient. The card itself becomes the constitutional posture before any product code exists.
Status badges color-coded (emerald=live, amber=in-build, stone=planning)

Featured commits override system (migration 0008):

New columns on commits table:
- featured_excluded boolean default false (operator marks interior commits as not-feature-worthy)
- featured_headline text (operator override of commit-message-as-headline, capped 120 chars)
- featured_screenshot_url text (operator uploads polished image; falls back to auto-captured screenshotAfterUrl)
- featured_for_product text (tag commit to a specific product slug for the strip's grouping)
New index commits_featured_idx on (featured_excluded, committed_at)
/hall/admin/commits — operator UI listing 50 most-recent public commits with expand-to-edit form per row (excluded toggle, headline, screenshot URL, product tag, save). Auto/Curated/Excluded badges visible at glance.
featured-queries.ts exports getFeaturedShips() returning normalized rows with effective headline/screenshot computed (override > fallback).
featured-actions.ts: server actions for save + toggle, operator-gated.

Sections moved out of the old ThreeBeatHero shell into top-level sections:

NamedBetrayalBeat now wrapped in its own cream block (FeaturedRefusalSection)
RealHumanBeat wrapped in a max-width container
OfferBeat wrapped in its own cream block

Files changed

Asrc/app/hall/admin/commits/page.tsx+264 / −0
Asrc/marketing/components/commit-ticker.tsx+153 / −0
Msrc/marketing/components/homepage.tsx+96 / −55
Asrc/marketing/components/horizontal-scroll.tsx+129 / −0
Msrc/marketing/components/products-strip.tsx+178 / −74
Asrc/marketing/components/recent-ships-strip.tsx+121 / −0
Asrc/shared/commits/featured-actions.ts+78 / −0
Asrc/shared/commits/featured-queries.ts+69 / −0
Asrc/shared/db/migrations/0008_commits_featured_overrides.sql+5 / −0
Asrc/shared/db/migrations/meta/0008_snapshot.json+4854 / −0
Msrc/shared/db/migrations/meta/_journal.json+7 / −0
Msrc/shared/db/schema/commits.ts+14 / −0
Msrc/shared/products/registry.ts+16 / −0

Diff

Lines reveal in sequence as you scroll. First 20 lines per file shown — expand for the rest.

new filesrc/app/hall/admin/commits/page.tsx+264 / −0tsx

	@@ -0,0 +1,264 @@
+	import Link from "next/link";
+	import { desc, eq, and, lte } from "drizzle-orm";
+	import { getDb } from "@/shared/db/client";
+	import { commits } from "@/shared/db/schema/commits";
+	import { PRODUCTS } from "@/shared/products/registry";
+	import { updateCommitFeaturedAction } from "@/shared/commits/featured-actions";
+
+	export const metadata = { title: "Commits — featured overrides (admin)" };
+	export const dynamic = "force-dynamic";
+
+	const dateFmt = new Intl.DateTimeFormat("en-US", {
+	month: "short",
+	day: "numeric",
+	hour: "numeric",
+	minute: "2-digit",
+	});
+
+	async function listRecentCommits(limit = 50) {
+	const db = getDb();

new filesrc/marketing/components/commit-ticker.tsx+153 / −0tsx

	@@ -0,0 +1,153 @@
+	"use client";
+
+	import { useEffect, useState } from "react";
+	import { usePulse, type ClientPulseEvent } from "@/shared/hooks/use-pulse";
+	import type { PulseCommitPayload } from "@/shared/db/schema/pulse-events";
+
+	interface Props {
+	initial: ClientPulseEvent[];
+	/** Max commits to show. Default 5. */
+	max?: number;
+	}
+
+	interface CommitRow {
+	id: string;
+	sha: string;
+	shortMessage: string;
+	isAi: boolean;
+	}
+

modifiedsrc/marketing/components/homepage.tsx+96 / −55tsx

	@@ -21,6 +21,8 @@ import { NamedBetrayalBeat } from "./named-betrayal-beat";
	import { RealHumanBeat } from "./real-human-beat";
	import { OfferBeat } from "./offer-beat";
	import { ProductsStrip } from "./products-strip";
+	import { CommitTicker } from "./commit-ticker";
+	import { RecentShipsStrip } from "./recent-ships-strip";

	// COMMITMENTS rendered with their canonical numbers from the constitution.
	// ROLES section was removed from homepage in the living-organism rewrite —
	@@ -109,13 +111,18 @@ export async function Homepage() {
	spotsRemaining,
	}}
	/>
−	<ThreeBeatHero
+	<Hero
	aiCommitsEver={aiCommitsEver}
	stripeCheckoutEnabled={stripeEnabled}
+	initialPulse={initialPulse}
	/>
+	<RecentShipsStrip />

new filesrc/marketing/components/horizontal-scroll.tsx+129 / −0tsx

	@@ -0,0 +1,129 @@
+	"use client";
+
+	import { useEffect, useRef, useState } from "react";
+
+	interface Props {
+	children: React.ReactNode;
+	/** ARIA label for the scrollable region. */
+	ariaLabel?: string;
+	/** How much to scroll on each arrow click, as a fraction of the visible width. Default 0.85. */
+	scrollFraction?: number;
+	}
+
+	/**
+	* Reusable horizontal scroll container, used across the homepage for
+	* "what we just shipped", "what we build", and "what we refuse" strips.
+	*
+	* - Mobile: native horizontal scroll with snap-to-card, no arrows.
+	* - Desktop: arrows fade in on hover, JS-controlled scroll. Native scroll
+	* still works (touchpad swipes, scrollbar).

modifiedsrc/marketing/components/products-strip.tsx+178 / −74tsx

	@@ -1,86 +1,190 @@
	import Link from "next/link";
	import { PRODUCTS, type ProductEntry } from "@/shared/products/registry";
+	import { HorizontalScroll } from "./horizontal-scroll";

	const STATUS_LABEL: Record<ProductEntry["status"], string> = {
	live: "Live",
	"in-build": "In build",
	planning: "Planning",
	};

−	const STATUS_TAG_CLASS: Record<ProductEntry["status"], string> = {
−	live: "bg-emerald-50 text-emerald-700 border-emerald-200",
−	"in-build": "bg-amber-50 text-amber-800 border-amber-200",
−	planning: "bg-stone-100 text-stone-700 border-stone-300",
+	const STATUS_BADGE: Record<ProductEntry["status"], string> = {
+	live: "border-emerald-200 bg-emerald-50 text-emerald-700",
+	"in-build": "border-amber-200 bg-amber-50 text-amber-800",
+	planning: "border-stone-300 bg-stone-100 text-stone-700",
	};

new filesrc/marketing/components/recent-ships-strip.tsx+121 / −0tsx

	@@ -0,0 +1,121 @@
+	import Link from "next/link";
+	import { getFeaturedShips, type FeaturedShip } from "@/shared/commits/featured-queries";
+	import { getProductBySlug } from "@/shared/products/registry";
+	import { HorizontalScroll } from "./horizontal-scroll";
+
+	function timeAgo(date: Date): string {
+	const ms = Date.now() - date.getTime();
+	const mins = Math.floor(ms / 60000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	const days = Math.floor(hrs / 24);
+	if (days < 7) return `${days}d ago`;
+	const weeks = Math.floor(days / 7);
+	return `${weeks}w ago`;
+	}
+
+	function ShipCard({ ship }: { ship: FeaturedShip }) {

new filesrc/shared/commits/featured-actions.ts+78 / −0typescript

	@@ -0,0 +1,78 @@
+	"use server";
+
+	import { revalidatePath } from "next/cache";
+	import { eq } from "drizzle-orm";
+	import { getDb } from "@/shared/db/client";
+	import { getOperatorSession } from "@/shared/operator";
+	import { commits } from "@/shared/db/schema/commits";
+
+	const HEADLINE_MAX = 120;
+	const URL_RE = /^https?:\/\//i;
+
+	function nullable(value: string): string \| null {
+	const trimmed = value.trim();
+	return trimmed.length > 0 ? trimmed : null;
+	}
+
+	export async function updateCommitFeaturedAction(
+	form: FormData,
+	): Promise<void> {

new filesrc/shared/commits/featured-queries.ts+69 / −0typescript

	@@ -0,0 +1,69 @@
+	import { and, desc, eq, lte } from "drizzle-orm";
+	import { getReadDb } from "@/shared/db/client";
+	import { commits } from "@/shared/db/schema/commits";
+
+	export interface FeaturedShip {
+	id: string;
+	sha: string;
+	message: string;
+	isAi: boolean;
+	committedAt: Date;
+	productSlug: string \| null;
+	/** Effective headline: override if present, else first line of commit message. */
+	headline: string;
+	/** Effective screenshot URL: override if present, else auto-captured after-shot. */
+	screenshotUrl: string \| null;
+	/** Operator-set product tag for the strip. Null if not set. */
+	featuredForProduct: string \| null;
+	htmlUrl: string;
+	}

new filesrc/shared/db/migrations/0008_commits_featured_overrides.sql+5 / −0sql

	@@ -0,0 +1,5 @@
+	ALTER TABLE "commits" ADD COLUMN "featured_excluded" boolean DEFAULT false NOT NULL;--> statement-breakpoint
+	ALTER TABLE "commits" ADD COLUMN "featured_headline" text;--> statement-breakpoint
+	ALTER TABLE "commits" ADD COLUMN "featured_screenshot_url" text;--> statement-breakpoint
+	ALTER TABLE "commits" ADD COLUMN "featured_for_product" text;--> statement-breakpoint
+	CREATE INDEX "commits_featured_idx" ON "commits" USING btree ("featured_excluded","committed_at");
	\ No newline at end of file

new filesrc/shared/db/migrations/meta/0008_snapshot.json+4854 / −0json

No patch available. Binary or large/binary file — see the file on GitHub ↗.

modifiedsrc/shared/db/migrations/meta/_journal.json+7 / −0json

	@@ -56,6 +56,13 @@
	"when": 1777299790558,
	"tag": "0007_ai_notes",
	"breakpoints": true
+	},
+	{
+	"idx": 8,
+	"version": "7",
+	"when": 1777464249507,
+	"tag": "0008_commits_featured_overrides",
+	"breakpoints": true
	}
	]
	}
	\ No newline at end of file

modifiedsrc/shared/db/schema/commits.ts+14 / −0typescript

	@@ -43,6 +43,16 @@ export const commits = pgTable(
	publicAt: timestamp("public_at", { withTimezone: true }).notNull(),
	featuredAt: timestamp("featured_at", { withTimezone: true }),
	redactedPublic: boolean("redacted_public").notNull().default(false),
+	// Operator overrides for the homepage "What we just shipped" strip.
+	// Default behavior: the most-recent N non-excluded public commits
+	// auto-feature with their commit message as the headline. Operator can
+	// per-commit: exclude (featuredExcluded=true), replace the headline,
+	// attach a polished screenshot URL, or tag the commit as scoped to a
+	// specific product slug for the strip's grouping.
+	featuredExcluded: boolean("featured_excluded").notNull().default(false),
+	featuredHeadline: text("featured_headline"),
+	featuredScreenshotUrl: text("featured_screenshot_url"),
+	featuredForProduct: text("featured_for_product"),
	},
	(table) => [
	uniqueIndex("commits_repo_sha_uniq").on(table.repo, table.sha),
	@@ -52,6 +62,10 @@ export const commits = pgTable(
	index("commits_product_idx").on(table.productSlug),
	index("commits_post_idx").on(table.postId),

modifiedsrc/shared/products/registry.ts+16 / −0typescript

	@@ -40,6 +40,18 @@ export interface ProductEntry {
	version?: string;
	/** ISO date when this product entered its current status. Used to show "shipped 2 days ago" etc. */
	statusSince?: string;
+	/**
+	* Screenshot URL for the product card visual. If null, the card renders
+	* a stylized brand-mark mockup (giant NO. + incumbent name for planning
+	* products, abstract gradient for in-build/live products).
+	*/
+	screenshotUrl?: string;
+	/**
+	* Visual accent — used for the brand-mark fallback when no screenshot is
+	* available. "emerald" for live, "amber" for in-build, "stone" for
+	* planning. Default falls back to status.
+	*/
+	accent?: "emerald" \| "amber" \| "stone";
	}

	export const PRODUCTS: ProductEntry[] = [
	@@ -54,6 +66,7 @@ export const PRODUCTS: ProductEntry[] = [