interactive-works
Vite + TypeScript · Three.js sphere gallery · GSAP motion · custom GLSL lens pass · History-API router
Phantom.land-style 3D work gallery: the camera sits at the centre of a WebGL sphere whose inner wall is tiled with project cards drawn onto canvas textures. Inertial drag controls, a custom lens-distortion post pass (barrel, vignette, edge blur, grain), History-API routing with deep-linked detail pages, list view and category filter. No backend — a static Vite build served from Vercel's CDN.
Generated 12 Jun 2026 · 14 files · 8 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) | ^0.166.1 | package.json |
| Motion | gsap | ^3.12.5 | package.json |
| Language | TypeScript (strict) | ^5.5.4 | package.json |
| Bundler / dev server | Vite | ^5.4.11 | package.json |
| Lens pass | custom GLSL ShaderPass | — | src/lens.ts |
| Routing | History API (pushState/popstate) | — | src/main.ts |
| Hosting | Vercel static + SPA rewrites | — | vercel.json |