Cultural Alignment
An exploration of cultural analogies for AI safety and alignment.
Live site: cultural-alignment.com
This project explores AI safety and alignment concepts via popular scenes from movies and TV. The homepage begins with recognition: find a scene you know, open its dossier, and then follow the analogy into the technical ideas it illuminates—and the places where it breaks.
What is here
- A sexy infinite WebGL gallery of scenarios
- A manually curated archive of scenarios from films and television series
- Scenario dossiers with clips, authored analysis, caveats, and taxonomy
- AI risk family and safety concept analogies for each scenario
- One-way sync from Notion as the underlying CMS
- Search across scenarios, media sources, franchises, AI risk families, and AI safety concepts
Gallery
Scenario dossier
Local development
Requires Node.js 24 or newer and the pnpm version pinned in package.json.
pnpm install
pnpm dev
Local development uses Portless at https://cultural-alignment.localhost. Portless starts its shared proxy automatically and assigns Next.js a free port. It reuses an existing proxy configuration, so the printed URL may use HTTP or a custom proxy port. On first run, follow its terminal prompts to trust the local certificate and allow the proxy to bind port 443. Linked Git worktrees get a branch subdomain; use the URL printed by pnpm dev or pnpm exec portless get cultural-alignment.
Run PORTLESS=0 pnpm dev to bypass the proxy and use Next.js directly. If you have an existing NEXT_PUBLIC_SITE_URL in .env, remove it to infer the active Portless URL, or set it deliberately to override the origin.
The app reads its content records from content/snapshot and its search corpus from public/content/search-index.json. Image URLs, intrinsic dimensions, and alt text are baked into that versioned snapshot; generated image bytes belong in public object storage rather than the Git repository. Normal development, builds, and application runtime do not read Notion or S3 credentials.
The canonical production origin is cultural-alignment.com. Set NEXT_PUBLIC_SITE_URL=https://cultural-alignment.com when it cannot be inferred from Vercel; pnpm dev infers its origin from Portless, while local builds and direct Next.js development default to http://localhost:3000.
Local production preview
pnpm build
pnpm start
Verification
pnpm test
pnpm content:validate
pnpm build
Use pnpm fix:format and pnpm fix:lint to apply the repository's Oxc rules.
Local Playwright journeys use an installed Google Chrome and Portless via pnpm test:e2e. Portless assigns a free application port and a separate cultural-alignment-e2e hostname (normally https://cultural-alignment-e2e.localhost), including a branch prefix in linked worktrees. Playwright uses the injected URL, accepts the local HTTPS certificate, builds the application, and starts and stops its own production Next.js server. Building before the journeys avoids on-demand development compilation during parallel navigation and reloads. Run filtered tests with pnpm test:e2e tests/e2e/mvp.spec.ts. Use PLAYWRIGHT_SERVER=production to reuse an existing build or PLAYWRIGHT_SERVER=development to explicitly test the development server; PLAYWRIGHT_PORT is no longer needed. CI installs its own Chromium, runs pnpm test:checks, builds once, and runs the production browser journeys through an HTTP Portless proxy on unprivileged port 1355.
Meme composer tests are opt-in and excluded from pnpm test and pnpm test:unit; run them with pnpm test:meme-skill.
Content synchronization
Notion is the editorial source; the repository snapshot is the public runtime source of truth. Every explicit sync requires NOTION_TOKEN. A normal sync also requires these media-storage environment variables:
S3_ACCESS_KEY_IDS3_SECRET_ACCESS_KEYS3_API_ENDPOINTS3_BUCKET_NAMES3_PUBLIC_URL
S3_API_ENDPOINT is the authenticated S3-compatible control-plane endpoint. S3_BUCKET_NAME contains the public media variants and, by default, their JSON state descriptors. S3_PUBLIC_URL is the separate, unauthenticated delivery origin whose variant URLs are written into the snapshot. S3_STATE_BUCKET_NAME is optional: set it only to place descriptors in a separate bucket; otherwise it defaults to S3_BUCKET_NAME. The configured S3 credentials need read/write access to every configured bucket. For Cloudflare R2, the API endpoint normally ends in r2.cloudflarestorage.com, while public delivery uses the media bucket's managed r2.dev URL or a connected custom domain. R2 bucket access is enabled at the bucket level; per-object public-read ACLs are not used. Descriptor reads and writes always use the authenticated S3 API, but when the state and publicly delivered media buckets are the same, media/state/ objects may also be publicly addressable unless the delivery layer denies that prefix. Their Cache-Control: private, no-store header controls caching, not access.
Put those values in the ignored root .env file, or provide them through the calling process environment, then run:
pnpm content:sync
Use pnpm content:sync --help (also -h or -help) for the command summary. pnpm content:sync --fast reuses all image data from the existing checked-in snapshot by stable Notion ID and skips image inspection, processing, and media storage entirely. It requires a prior snapshot record for every current scenario, source, and franchise, so add new media with a normal sync. pnpm content:sync --force instead bypasses media reuse, re-downloads every selected image, and reruns Sharp; content-addressed R2 objects still deduplicate identical generated bytes. The opposing --fast and --force modes cannot be combined.
The sync entry point loads .env with dotenvx. Existing process environment values retain precedence, which keeps the same command usable in CI without making S3 configuration part of the Next.js runtime. Normal media reuse is backed by small per-record JSON descriptors in R2; the public generated WebPs remain immutable and content-addressed.
Route map
/ — Notion-tagged featured gallery with a scene-to-concept explainer that returns until explicitly closed/scenarios — pre-rendered complete gallery, with links to each risk family and the explainer on first unacknowledged visit/scenarios/[slug] — scenario dossier/risk-families and /risk-families/[slug] — risk-family index and pivots/concepts and /concepts/[slug] — concept index and pivots/sources and /sources/[slug] — source index and pivots/franchises and /franchises/[slug] — franchise index and pivots/about and /privacy — project background and privacy policy/sitemap.xml and /robots.txt — generated discovery endpoints for every static index/detail content URL/llms.txt — project summary and entry points for machine readers
The historical design-review artifacts live under docs/outputs/gate-b; they are not production navigation.
Project notes
License
Code is MIT licensed © Travis Fischer.
The authored structured snapshot data is released under CC0 1.0. Third-party imagery, titles, trademarks, and linked clips remain subject to their respective rights.
