-
-
Home the scroll journey through Neoverse's floating city
-
Holographic rings with custom GLSL shader glow
-
About Flight Log timeline with orbital holographic rings
Inspiration
What it does
How we built it
Challenges we ran into
Inspiration
Most websites feel like a stack of static pages. We wanted to build something that felt alive — a place, not a page. The idea was to trap a person inside a single continuous 3D world: a futuristic city floating in light, where scrolling doesn't just move text, it flies your camera through the skyline itself.
What it does
Neoverse is an immersive 3D floating-city experience with six sections, all rendered inside one persistent WebGL canvas that never reloads as you navigate:
- Home — a cinematic scroll journey where the camera flies a smooth curve through five waypoints, with glass panels fading in per sector
- About — an expanded bio with a flight-log style timeline
- Projects — six project cards with 3D mouse-tilt and click-to-open detail modals
- Skills — animated energy orbs and skill bars that fill on mount
- Contact — a glowing portal with a working front-end contact form
- Universe — a bonus free-roam sector map where you drag to look around the whole city from above and click a node to fly into that sector
How we built it
Built with Next.js 14 (App Router) and React Three Fiber. The <Canvas> lives once in the root layout instead of per-page, so there's zero WebGL context teardown when switching routes — a Zustand store just tells the camera which route it's on.
The city itself (~44 towers) is mostly rendered as a single InstancedMesh draw call per ring, with a few "hero" towers near the camera path built as individual meshes for extra detail. The holographic rings use a hand-written GLSL shader (fresnel rim glow + scrolling scanlines) via drei's shaderMaterial. Bloom, chromatic aberration, and vignette are added with @react-three/postprocessing, and an adaptive performance tier (based on core count, touch input, viewport, and prefers-reduced-motion) scales star count, tower count, DPR, and whether post-processing runs at all. Ambient audio is fully synthesized in-browser with the Web Audio API, so there's no audio file to host or license. Page transitions use Next's template.js to give each page a fade/rise entrance without touching the persistent canvas.
Challenges we ran into
Keeping a single WebGL canvas alive across route changes while still letting each page feel distinct was the trickiest part — it meant separating "3D state" (camera position, scene) from "page state" (HTML content) cleanly through Zustand. Performance across devices was another challenge, solved with the adaptive tier system so lower-end devices still get a smooth experience instead of a broken one.
Accomplishments that we're proud of
A fully custom GLSL shader instead of relying only on stock materials, a scroll-driven camera that flies a real 3D curve instead of just fading elements, and a completely synthesized ambient soundscape with no external audio assets.
What we learned
How much of a "3D website" is really about performance budgeting — deciding what gets an instanced mesh vs. a full mesh, and when to just turn effects off gracefully instead of forcing everyone through the same experience.
What's next for Neoverse
Swapping procedural towers for real .glb models, wiring the contact form to an actual backend, and adding more sectors to the free-roam Universe map.
Log in or sign up for Devpost to join the conversation.