feat(website): porcelain redesign, Rivet Compute calculator, and marketing polish

[NicholasKissel]

Collapses the former stacked PRs (#5219 seo-content-plays, #5228 cookbook-classical-covers, #5229 compare-page-premium, #5230 marketing-heading-weights) into a single PR off main, rebased onto the latest trunk. #5230 was already merged down into compare-page-premium; this brings the full body of work straight to main.

What's included

• Porcelain redesign — light cool-porcelain theme across marketing pages and docs (header light theme, docs subnav/tabs, prose, selection states), warm-black ink text, classical oil-paint imagery.
• Rivet Compute pricing + calculator — the /cloud pricing page integrates the compute calculator (vCPU / memory / active-hours sliders, live estimate on an ink data-plate), restyled to the porcelain system.
• Compare page redesign, classical-art cookbook covers, and SEO content from the lower stack.
• Actors hero — lag-free scroll dissolve (static gradient + opacity animation, no per-frame blur/mask).
• Mobile polish — CTA painting fills with full-width contained buttons; mobile menu + docs section headers no longer render white-on-light.

Merge notes

• Branched off latest main; the only content conflict was PricingPageClient.tsx (main's standalone calculator vs the redesigned page that already integrated it) — resolved to the redesigned version.
• main's own website changes (e.g. environment-variables.mdx) are preserved.

🤖 Generated with Claude Code

[railway-app]

🚅 Deployed to the rivet-pr-5257 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	✅ Success (View Logs)	Web	Jun 14, 2026 at 5:52 am
frontend-cloud	✅ Success (View Logs)	Web	Jun 14, 2026 at 5:52 am
kitchen-sink	🕗 Deploying (View Logs)	Web	Jun 14, 2026 at 5:51 am
frontend-inspector	❌ Build Failed (View Logs)	Web	Jun 14, 2026 at 5:51 am
ladle	✅ Success (View Logs)	Web	Jun 14, 2026 at 5:51 am
mcp-hub	✅ Success (View Logs)	Web	Jun 14, 2026 at 5:49 am

[claude]

PR Review: feat(website) porcelain redesign, Rivet Compute calculator, and marketing polish

This is a large marketing and design overhaul (~7,900 additions, ~12,200 deletions). The overall design system work is clean and well-structured. A few things to flag:

---

Rust fix (rivetkit-wasm)

The inspector_tabs: None addition in rivetkit-wasm/src/lib.rs is correct. The comment explains the intent clearly and is consistent with the ActorConfigInput struct requiring the field.

---

Issues

1. Dead branch in BenchToggle (BenchCard.tsx)

const columns = options.length === 3 ? 'grid-cols-3' : options.length === 4 ? 'grid-cols-2' : 'grid-cols-2';

The options.length === 4 arm is dead — both the 4-check and the fallback resolve to 'grid-cols-2'. This is either a bug (4 options may want 'grid-cols-4' or a 2x2 grid) or the check can just be dropped: options.length === 3 ? 'grid-cols-3' : 'grid-cols-2'.

2. setTimeout without cleanup in TerminalCommand (HostingSection.tsx)

const handleCopy = async () => {
  await navigator.clipboard.writeText(command);
  setCopied(true);
  setTimeout(() => setCopied(false), 2000); // no cleanup
};

If the component unmounts within the 2-second window, setCopied fires on a stale closure. Low-impact on a marketing page, but a useEffect cleanup or useRef-based timer would be cleaner. The same pattern appears in existing CopyCommand.tsx components — worth standardizing across all copy buttons.

3. Sitemap audit for new pages

CLAUDE.md: "When adding new docs pages, update website/src/sitemap/mod.ts so the page appears in the sidebar."

The PR adds footer links for /enterprise and /compare/* pages but website/src/sitemap/mod.ts is not in the diff. If these are new pages (not just redesigned existing ones), they need sitemap entries.

---

Observations

• motion.tsx accessibility: useReducedMotion is properly respected in both Reveal and RevealChild — degrades to opacity-only under reduced motion. RevealChild's y: 0 in the visible variant is harmless when hidden omits y (no y-transition fires).

• BenchInfoTooltip keyboard accessibility: The tooltip appears on hover via CSS (group-hover/tip:opacity-100) with no focus-visible trigger. For marketing benchmarks this is likely acceptable, but screen-keyboard users cannot access the tooltip content.

• InkPanel textureSrc: Inserted as an unescaped CSS url(...) string. All current callers use hardcoded CDN constants so this is safe, but worth noting if the prop ever accepts user-provided input.

• ObservabilitySection inspector toggle: Clean implementation. aria-pressed and aria-label are set correctly. The layoutId='inspector-theme-active' is a stable string so cross-instance animation conflicts cannot occur (only one toggle per page).

• useId() in BenchCard: Correct use for layoutId scoping in BenchToggle.

• No rivet.gg references found in any new code.

• astro.config.mjs image domains: Adding assets.rivet.dev enables build-time optimization. FOOTER_PAINTING_SRC in ComparePage.tsx uses that CDN URL as a CSS backgroundImage string rather than via Astro <Image>, which is intentional for a CSS background.

• The deletion of legacy cloud/ and sections/ components is clean with no obvious dangling imports.

---

Summary

The design system additions (editorial/, motion.tsx, BenchCard, typography constants) are well-structured and consistent. The main actionable items are the dead BenchToggle ternary arm (#1) and confirming sitemap coverage for new pages (#3). The setTimeout cleanup (#2) is low-risk but worth standardizing across copy button components.

🤖 Generated with Claude Code

[NicholasKissel]

Merge activity

• Jun 14, 5:54 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 14, 5:55 AM UTC: @NicholasKissel merged this pull request with Graphite.