NEONFALL

Vite + TypeScript · Three.js neon arcade · GSAP ScrollTrigger · Lenis · UnrealBloom glow · playable Arena game loop · Web Audio

A machine waking up — a scroll-driven neon-noir arcade where the grid powers on around you as you descend. Three.js drives an emissive-glow pipeline (UnrealBloom over a cyberpunk palette) while GSAP ScrollTrigger and Lenis tie a narrative camera through a boot sequence, a world hub of game portals, and two procedurally assembled low-poly / wireframe levels built from InstancedMesh. At the bottom waits The Arena: a real playable scout-ship arcade game with keyboard/pointer input, enemy spawns, collision and a score+combo loop, with high scores persisted to localStorage. No backend — a static Vite build served from Vercel's CDN.

Generated 15 Jun 2026 · 17 files · 10 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

ComponentTechnologyVersionSource of Detection
Rendererthree (WebGLRenderer + EffectComposer + UnrealBloomPass)^0.166.1package.json
Motiongsap (ScrollTrigger)^3.12.5package.json
Smooth scrolllenis^1.1.13package.json
LanguageTypeScript (strict)^5.5.4package.json
Bundler / dev serverVite^5.4.11package.json
Post / glowUnrealBloom + custom GLSL (neon emissive)src/bloom.ts
AudioWeb Audio API (arcade SFX + music + SILENCE toggle)src/audio.ts
HostingVercel static + SPA rewritesvercel.json