COMPANY/ORG.

Personal

COMPANY/ORGANIZATION

Personal

SUMMARY

The Unseen.

This site aims to share stuff as flames, a metaphor for sharing knowledge that can ignite new perspectives and understanding. We try to present theoretical, abstract, and complex content simply and concisely that is easy to understand and absorb, in the hope that it can challenge and change your beliefs and perceptions.

Date:

THE CHALLENGE

- Every day we make decisions we never audit. We anchor on the first number we see, mistake what is easy to recall for what is likely, and read a pattern into noise. In digital product work the cost compounds: a designer reads their own fluency as the user's, a team follows the loudest voice instead of the base rate, and a roadmap survives because someone already defended it in public. The failure isn't a lack of intelligence — the mechanism simply runs below awareness, and nothing in the workflow makes it visible.

ROLES

- Full-stack
- Vibe coding

The Unseen
map of stuffs
library of stuffs
the graph network that visualizes the relationship between the stuffs
the 404-page
card-stuff preview
card-stuff overview
map of stuffs - mobile version
about page - mobile version
9 / 8

Solutions

Workflow 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 Preview card
overview 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 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 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

  • 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
Psychology Philosophy