STRATA
Vite + TypeScript · Three.js procedural monuments · GSAP ScrollTrigger · Lenis · scroll-as-time mapper · era-tinted fog
A Scroll Through Deep Time — scroll position is the timeline. The visitor descends from 3000 BCE to the present through six historical eras (Antiquity, Classical, Medieval, Industrial, Modern, Present), each anchored by a procedurally generated monument and tinted by its own fog and lighting. Lenis smooths the scroll and feeds GSAP ScrollTrigger, which maps scroll progress directly onto the year shown and tweens the Three.js atmosphere as each era boundary is crossed; an artifact ledger surfaces one object per era and a Colophon credits the technique. No backend, no pre-made models or photography — all geometry is generated in GLSL and the whole experience is a static Vite build served from Vercel's CDN.
Generated 15 Jun 2026 · 15 files · 9 components · 3 flows
File Architecture
The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.
System Design
Runtime topology across the five zones — client, edge, application, data and external services.
Flow Graph
The five most significant application flows, step by step — startup, auth, write, read and error recovery.
Technology
| Component | Technology | Version | Source of Detection |
|---|---|---|---|
| Renderer | three (WebGLRenderer + scene fog) | ^0.166.1 | package.json |
| Motion | gsap (ScrollTrigger) | ^3.12.5 | package.json |
| Smooth scroll | lenis | ^1.1.13 | package.json |
| Language | TypeScript (strict) | ^5.5.4 | package.json |
| Bundler / dev server | Vite | ^5.4.11 | package.json |
| Procedural geometry | custom GLSL (procedural monument + era material) | — | src/monuments.ts |
| Hosting | Vercel static + SPA rewrites | — | vercel.json |