COMPILE
Vite + TypeScript · Three.js compiler viz · GSAP ScrollTrigger · Lenis · force-directed graph · InstancedMesh · light-pulse runtime
Source Becomes System — a scroll-driven WebGL visualization of a compiler pipeline. The visitor descends through four stages as raw source text assembles into tokens and a syntax tree, imports resolve into a force-directed dependency graph, the graph executes with data flow shown as light pulses travelling the edges, and finally the whole thing scales up into a full application landscape textured with real 'capture plates' (screenshots of the author's own projects). Three.js drives a bloom-composited scene with InstancedMesh nodes and edges, GSAP ScrollTrigger + Lenis tie the stage transitions to scroll progress, and GLSL shaders render the edge pulses and node glow. No backend — the dependency graph and capture plates are compiled into a static Vite build served from Vercel's CDN.
Generated 15 Jun 2026 · 16 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 + EffectComposer + UnrealBloomPass) | ^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 |
| Graph layout | d3-force-style force-directed layout + InstancedMesh | — | src/forcegraph.ts |
| Shaders | custom GLSL (edge pulse / node glow) | — | src/shaders.ts |
| Hosting | Vercel static + SPA rewrites | — | vercel.json |