Neon Ward

Inspiration

I started with a straightforward idea a small floating fantasy island and kept adding to it: fly mode, more color, more props. But partway through, it became clear that no amount of decoration could fix the core problem: "floating island with a cottage" is a scene judges have already seen a hundred times. So I scrapped it and rebuilt around a genuinely different concept: Neon Ward, a dense, rain-soaked cyberpunk city block, gone quiet after midnight and a hidden koi pond holding the pattern that used to light the whole thing up.

What it does

Neon Ward is an explorable 3D city block you can orbit around, fly through in a free first-person camera, or jump between with guided waypoints (Street / Skyline / Overhead). The city starts dim: flickering signage, sparse lit windows, muted bloom. Hidden in a clearing between two towers is a small reflecting pond with four glowing koi. A HUD shows a 3-color pattern match it by clicking the koi in the right order, and a "wake-wave" ripples outward from the pond: windows snap on tower by tower, neon signs stop flickering and glow steady, fog thins, bloom intensifies, and the camera pulls back for a full cinematic reveal of the now fully-lit skyline. You can also click the open sky at any time to launch a glowing delivery drone.

How we built it

React Three Fiber (Three.js for React) for the whole 3D scene, with @react-three/drei for camera controls and @react-three/postprocessing for bloom, vignette, and chromatic aberration
GSAP for camera waypoint transitions and the intro fly-in
Every visual is procedurally generated from primitive geometry — no external 3D models, textures, or audio files. Tower placement, height, width, and neon color are seeded/randomized on load; koi puzzle sequences are randomized per session
Instanced meshes for lit windows, rain streaks, and vehicle light trails, so the dense skyline stays performant
All audio — ambient drone, wind, chimes, buzzer — is synthesized live with the Web Audio API, so there's zero loading risk and zero audio file weight
A shared "wake-wave" timing system (distance-from-pond ÷ wave speed) keeps every building and sign's power-on animation in sync, so the reveal ripples outward convincingly instead of just flipping on all at once
On-screen touch controls (a D-pad) mirror the WASD/Space/Shift keys for fly mode, so it's usable on phones and tablets, not just desktop

Challenges we ran into

The original floating-island concept kept getting notes back that it felt flat and unoriginal no matter how much we added the real fix wasn't more props, it was accepting the concept itself needed to change, and rebuilding the scene composition from scratch around something with a stronger visual identity and a reason to interact
Getting the koi puzzle to feel like a reason things happen rather than a bolted-on minigame took a second pass tying its success state to the entire city's lighting (not just the pond) was what made it click
Keeping the whole thing dependency-free of external assets meant building lighting, "water," and city density entirely out of primitives, instancing, and procedural color/placement logic

What we learned

That a strong concept beats extra features every time the single biggest jump in how the project felt came from changing what the scene was, not from adding more content to the version we already had. Also: syncing a lot of independent animated elements (windows, signs, fog, bloom, camera) into one coherent "reveal" moment is mostly about picking one shared clock/timing source and letting everything read from it.