a geoscheme-based media library
Reccs is an archive of literary, cinematic, theatrical, and quantitative compositions, organized by a modified UN geoscheme of 30 culturally-affiliated subregions——an attempt to present a way of understanding the world that sits between physical geography and contemporary political borders.
explore the geoscheme · about · literature · cinema · theatre · systems
Why
A typical media diet——books, films, news——travels along the channels carved by economic and political alliances, and a Western-European or U.S.-aligned perspective tends to fill in for everything else. The geoscheme is a small mechanism for routing around that: 30 subregions chosen to prioritize autochthony (being from a place) and counter-expansionism (limiting the maximum extent of that place) over imperial nation-state boundaries.
Each entry is a single curated work, paired with a description, excerpts or media, sources, and full citations. The selections are limited to works available in English——a real bottleneck, but also what makes the archive accessible to the world's largest speech community.
How it's built
Dual-render geoscheme
The world map renders twice from one source of truth: a flat SVG (1440×720, two stacked layers for fill and hover) on desktop, and a Three.js orthographic globe on mobile. The header toggle animates between them and the choice persists across navigation via a ViewProvider context.
<Map />
<HoverMap currSubr={currSubr} setCurrSubr={setCurrSubr} />Equal-area dot projection
Region dots from the SVG are inverse-projected through a hand-tabulated equal-area lookup into spherical coordinates, emitted as a single Float32Array of positions plus a region-index buffer, and rendered in one InstancedMesh draw call.
// binary-search the equal-area table
const absLat = (lo + frac) * 5;
return Math.sign(target) * absLat;Theme-reactive WebGL
Three.js can't read CSS variables, so a MutationObserver watches the document root for theme changes, re-resolves every region color via getComputedStyle, and bumps a version that re-memos the THREE.Color map—toggling light and dark instantly recolors thousands of instanced dots without remounting the canvas.
obs.observe(document.documentElement, {
attributeFilter: ["data-theme", "class", "style"],
});Region-focus tweening
Selecting a region from any surface—map, globe, or deep link—computes the great-circle delta between current and target azimuthal/polar angles, normalizes across the ±π seam, and eases via smoothstep. Auto-rotate pauses on user interaction and resumes after a 3-second idle.
const eased = t * t * (3 - 2 * t); // smoothstep
controls.setAzimuthalAngle(startAz + dAz * eased);Multi-calendar engine
Ten calendar systems are implemented from primary sources—Gregorian, Tonalpohualli, Hijrī, Ọ̀gụ́àfọ̀, 農曆, Kaulana Mahina, বঙ্গাব্দ, Intihuatana, Taswast Tamaziɣt, and Vula Vakaviti. Each is a pure function from Date to native, transliterated, and translated forms.
calendars.find(cal => cal.id === calSelection)?.function(date)
// → { original, transliteration?, translation? }Inline markup DSL
Excerpts and descriptions are stored as plain strings with a small custom markup vocabulary—smallcaps, hanging-indent verse, abbreviation tooltips, vertical spacers, centered breaks, right-align. preParse() composes these as ordered string transforms.
txt = smallCaps(txt); // <s>...</s>
txt = indent(txt); // <v>...</v>
txt = abbrDef(txt); // <+>term[def]</+>Citation engine
Each entry references a UniversalCitation schema. One source of truth renders into APA, MLA, or Chicago at view time, with name order, initials, and conjunction punctuation handled by style—all swappable from a single tab.
getCitations(entry.ref, citeFormat)
// "APA" | "MLA" | "Chicago"Per-entry routing
Every entry carries a 7-character ID like AFNOMTN—first four for the subregion, last three for the collection. That ID is the URL, the poster path, the dot color on the globe, and the filter key on the region shelf.
// "AFNOMTN" → AFrica NOrth · Modern Trad. Novel
reccsData.filter(itm => itm.id.startsWith(currSubr))Stack
Next.js 15. App Router with RSC by default; client components only where state, WebGL, or observers require them.
TypeScript. Strict end-to-end. Entries, citations, regions, and calendars share narrow discriminated types.
Tailwind v4. Theme tokens declared in @theme inline; CSS variables drive both DOM and Three.js color resolution.
react-three-fiber. Declarative Three.js scene graph for the globe, with instanced meshes for the dot layer.
Cloudflare. Static-leaning deploy. No analytics, no cookies, no third parties.