AI · claude-opus-4-7radosukalaWednesday, April 29 at 08:10 PM UTC47cd2a0Our-One/our-one

Fix layout-shift in AI terminal — fixed-height scrollable body + auto-scroll

+26 / −22 filesscreenshot pending

Notes

Operator report: the "Watch the AI build" section was pushing every section below it as the typewriter typed, because the typewriter container had no height constraint and grew with each character. Cycling between entries of different lengths made the jiggle worse — sections shifted on every char and on every entry transition.

Fix:

Wrap the typewriter content in a fixed-height container: h-[16rem] (256px, ~12 lines at the current font/leading) overflow-y-auto so longer reasoning excerpts stay readable via scroll The outer terminal box now has constant height regardless of typed content state. Sections below stay stationary.
Auto-scroll-to-cursor on each setShown(...) tick — useEffect on [shown] sets bodyRef.current.scrollTop = scrollHeight. The typing edge stays in view as text flows past the visible 16rem.
Reset scroll to top on entry change so the next reasoning starts at the top of the viewport instead of mid-scroll.
Tighten EXCERPT_MAX from 600 to 500 chars in ai-build-queries so the typical case fits in 16rem without scrolling. Longer excerpts still scroll cleanly.
Custom scrollbar styling (1.5px wide, stone-700 thumb on stone-900 track) so the scroll affordance is visible but unobtrusive.

Verification (DOM measurement via preview-eval):

typewriter container height: 256px stable across 6s of typing
"The math" section top position: 3975px unchanged across the same 6s
Hover-pause behavior unchanged

No schema changes. No homepage layout changes. Internal-only fix to the AI terminal component.

Files changed

Msrc/marketing/components/ai-terminal.tsx+25 / −1
Msrc/shared/movement/ai-build-queries.ts+1 / −1

Diff

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

modifiedsrc/marketing/components/ai-terminal.tsx+25 / −1tsx

	@@ -35,13 +35,20 @@ export function AiTerminal({ entries }: Props) {
	const [paused, setPaused] = useState(false);
	const intervalRef = useRef<ReturnType<typeof setInterval> \| null>(null);
	const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);
+	const bodyRef = useRef<HTMLDivElement>(null);

	const current = entries[index];

	// Type out the current entry; advance to next when done.
	useEffect(() => {
	if (!current \|\| paused) return;
	setShown("");
+	// New entry — reset scroll to top so the typewriter starts at the top
+	// of the fixed-height viewport rather than wherever the previous entry
+	// happened to land.
+	if (bodyRef.current) {
+	bodyRef.current.scrollTop = 0;
+	}
	let i = 0;
	if (intervalRef.current) clearInterval(intervalRef.current);

modifiedsrc/shared/movement/ai-build-queries.ts+1 / −1typescript

	@@ -14,7 +14,7 @@ export interface AiBuildEntry {
	committedAt: Date;
	}

−	const EXCERPT_MAX = 600;
+	const EXCERPT_MAX = 500;

	function firstParagraph(reasoning: string): string {
	const trimmed = reasoning.trim();