Solutions
Vibe coding workflow: Paper –> Figma –> Claude Design –> Claude Code –> Build (Github + Netlify)
The premise is that a catalogue is the wrong shape for this content. Sites that list cognitive biases have good material but deliver it as a directory — you look something up, you leave, nothing accumulates. I was inspired by the flash cards method in learning. Seeing the Unseen turns the same material into a journey. Every concept is a stuff: a single flame placed on a map structured after Plato’s Divided Line, four stages of cognition — Imagining → Belief → Thinking → Intelligence/Knowledge — with a fifth destination, The Sun. The level of a card decides which map it lives on, so classification and geography are the same field. The cave starts dark. You walk with a torch, and the cards you open stay lit, permanently, across sessions. Progress is the metaphor, not a progress bar bolted onto it.
Preview card
Overview card
The reading mechanics are built around retrieval rather than reception. Each card is a flip card: the front is a question in your own words, the back is the definition — the structure of active recall, which retains far better than passive reading. Cards link to each other by slug, so the corpus is a real graph, browsable in 3D at /graph/ with a layout baked at build time (the same node sits in the same place on every visit, which is what lets spatial memory form). Because a map-only site would be a findability and SEO dead end, the architecture is deliberately dual-mode: the map is the discovery experience, while every single card also exists as a static HTML page with its own URL, listed in a searchable Library with category and level filters. You can explore, or you can just look something up.
Lighthouse scores
Underneath, the build is intentionally boring so the content can be the expensive part. Astro 5, fully static, content-as-git: cards are Markdown files in an Obsidian vault, validated at build time by a Zod schema that fails CI if a card links to a slug that doesn’t exist. Search is static (Pagefind), progress is localStorage, hosting cost is effectively zero, and there is no vendor to lock into. Content is written, not scraped — every card is an original rewrite with real references, which is the condition for the site existing long-term. Card drafting and the geometric illustration set both run through an agent pipeline with a code verifier (schema, link integrity, word count) ahead of any human review, at a cost of a few cents per card.
Beta version is live
You can visit beta version at stuffunseen.com.
- 297 cards published across 8 categories (bias, mental models, fallacy, memory, perception, theory, heuristic, social) and 5 levels
- Explore mode: 4 cognitive maps + The Sun, torch-based fog-of-war, permanent progression
- Library mode: full-text search, category and level filters, a static URL per card
- Graph view: 3D force-directed, build-time baked layout, 2D toggle and a no-WebGL fallback
Roadmap
Shipped
Library
- Phase 0 — Foundation. 181 legacy cards migrated to the new schema with zero broken links; Astro 5 + content collections + Zod; CI verify → graph → build; Docker/nginx deploy.
- Phase 2 — Card & Library. Flip card, library view with filters, static search, mobile and desktop reading paths that work without the map at all.
- Phase 2 — Map & fog-of-war. Canvas renderer, seeded corridor placement, stateful fog, progression persisted locally.
Graph view
- Graph view. 3D spherical graph on its own spec: data pipeline, renderer, hover/click, idle pause, reduced-motion support, no-WebGL fallback.
In progress
- Enrich legacy content. Migrated cards carry short bodies; they’re being brought up to 300–500 words in batches, links-heaviest first. Done when zero word-count warnings remain and every card carries at least one real reference.
- Illustrations. An original geometric thumbnail for every card, generated in batches of ten with a per-batch rule against repeating a visual metaphor. 30 of 230 done. The open problem is honest and measurable: 27 shape primitives × 2 hues gives a theoretical ceiling of 54 distinguishable images for 230 cards, so the primitive set has to be widened before the collisions become visible at thumbnail size.
Next
- Phase 3 — Retention & measurement. Daily flame, favorites, self-hosted cookieless analytics (card flips per session, % explored, searches returning nothing = a content gap), OG images, RSS. Done when the dashboard can answer “what share of visitors flip three or more cards in a session”.
Backlog (not committed)
- Spaced repetition on top of the existing progression state
- User accounts and cross-device progress sync
- Community contributions by pull request
]]>
