fix scroll to animation (#31)

* Add Contract Engineering blog post

Interactive figures for contract lifecycle, scenario matrix, and event
log. Updates announcement banner to feature the new post. Adapted from
site-rebuild branch with paths updated to main's directory structure.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* more

* touches

* Update contract engineering copy with final edits

- Add TDD comparison paragraph with Wikipedia link
- Link PRDs to Wikipedia on first mention
- Add Ambiguity limitation, Acknowledgments section
- Fix tense ("nobody had defined"), revert Limitations opener
- Simplify Sharpen the Spec examples back to concise form
- Update links: rubriclab, full Unblocking Agents URL

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Restore fleshed-out contract examples and experimental Limitations tone

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix animations to autoplay on scroll, not on first paint

Both EmailAppLifecycleFigure and ContractEventLog now use
IntersectionObserver to start playback when scrolled into view.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: DexterStorey

src/ui/blog/contract-engineering/contract-event-log.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from '~/lib/utils/cn'
 import { Button } from '~/ui/button'
 import { Figure } from '~/ui/figure'
@@ -157,7 +157,25 @@ const SpinnerIcon = () => (
 
 export const ContractEventLog = () => {
 	const [tick, setTick] = useState(0)
-	const [isPlaying, setIsPlaying] = useState(true)
+	const [isPlaying, setIsPlaying] = useState(false)
+	const hasAutoPlayed = useRef(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		const el = containerRef.current
+		if (!el) return undefined
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry?.isIntersecting && !hasAutoPlayed.current) {
+					hasAutoPlayed.current = true
+					setIsPlaying(true)
+				}
+			},
+			{ threshold: 0.3 }
+		)
+		observer.observe(el)
+		return () => observer.disconnect()
+	}, [])
 
 	const arrivedCount = Math.min(tick, EVENTS.length)
 	const evaluatedCount = Math.min(Math.max(tick - EVAL_DELAY, 0), EVENTS.length)
@@ -188,7 +206,7 @@ export const ContractEventLog = () => {
 	}, [isComplete])
 
 	return (
-		<div className="w-full rounded-xl border border-subtle bg-subtle/10 px-4 pt-4 pb-3">
+		<div ref={containerRef} className="w-full rounded-xl border border-subtle bg-subtle/10 px-4 pt-4 pb-3">
 			{/* Header */}
 			<div className="mb-3 flex items-center justify-between">
 				<span className="font-mono text-[9px] text-secondary/50 uppercase tracking-wide">

src/ui/blog/contract-engineering/email-app-lifecycle-figure.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from '~/lib/utils/cn'
 import { Button } from '~/ui/button'
 import { Figure } from '~/ui/figure'
@@ -385,7 +385,25 @@ const Field = ({
 
 export const EmailAppLifecycleFigure = () => {
 	const [currentStep, setCurrentStep] = useState(0)
-	const [isPlaying, setIsPlaying] = useState(true)
+	const [isPlaying, setIsPlaying] = useState(false)
+	const hasAutoPlayed = useRef(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		const el = containerRef.current
+		if (!el) return undefined
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry?.isIntersecting && !hasAutoPlayed.current) {
+					hasAutoPlayed.current = true
+					setIsPlaying(true)
+				}
+			},
+			{ threshold: 0.3 }
+		)
+		observer.observe(el)
+		return () => observer.disconnect()
+	}, [])
 
 	const state = STATES[currentStep] ?? STATES[0]
 	const isComplete = currentStep >= STATES.length - 1
@@ -418,7 +436,7 @@ export const EmailAppLifecycleFigure = () => {
 	}, [isComplete])
 
 	return (
-		<div className="w-full rounded-xl border border-subtle bg-subtle/10 px-4 pt-4 pb-3">
+		<div ref={containerRef} className="w-full rounded-xl border border-subtle bg-subtle/10 px-4 pt-4 pb-3">
 			<div className="flex flex-col gap-3">
 				{/* App mockup */}
 				<div className="overflow-hidden rounded-lg border border-subtle/60">