Inspiration
One connection holds nine realities. You don't travel between them — you remember you were always all of them. We wanted a 3D website that feels like film, not a demo. Interstellar's physical wormhole + Doctor Strange's kaleidoscopic jump + PeachWeb's premium landing craft. Not a hero with a spinning model — a remembered journey. Scroll as flight.
What it does
NEXUS is one continuous scroll through 9 dimensions — Glass · Paint · Ink · Cube · Mirror · Debris · Fractal · Abyss · Echo — tethered by a central wormhole. You launch from a cold open, tear through faceted ice, wet pigment, flat paper, amber lattice, rose chrome, zero-G wreckage, a prismatic mandala singularity, crushing depth, and a legendary afterlight. Comets knife past your face, asteroids tumble at arm's length, shards catch light like broken glass. Typography staggers in per-word as you arrive. No video. All real-time WebGL at 60fps. Live: https://nexus-3d-hackathon.vercel.app
How we built it
React 19 + R3F + drei + postprocessing + GLSL + GSAP ScrollTrigger + Lenis + Vercel Travel Camera Rig — 21 monotonic waypoints between dimension centers. Spring velocity + exponential damping frame-rate independent: $$ \alpha = 1 - e^{-\lambda \Delta t} \quad\text{and}\quad smooth = 3t^2-2t^3 $$ Pointer parallax, roll, and velocity-tilt. Delta-based lerp via $1-\exp(-\lambda dt)$ so 30fps = 144fps. Fixed Euler accumulation by setting camera.rotation.z after lookAt.
Challenges we ran into
Making it feel heavy. Cheap asteroids look like toys. camera.rotateZ() after lookAt accumulates. instanceColor does nothing without vertexColors. Fog 0.028 hid our best comets — 0.022 saved them. And keeping 1.3MB + postprocessing at 60fps with thousands of instanced meshes.
Accomplishments that we're proud of
A travel film you scroll. Every dimension reads as its own still, but the wormhole thread never breaks. Judges feel the swoop, not the slider.
What we learned
Premium is restraint — 3 colors graded well beat 10 at once. Physics should be exp damped, not lerp(0.06). And additive 512px tails + sprite heads finally make meteors scream. Built With: React, Three.js, R3F, drei, postprocessing, GLSL, GSAP ScrollTrigger, Lenis, Vite, TypeScript
What's next for NEXUS-JUMPING THROUGH MINDS
From hackathon demo → persistent multiverse. V1— Feel it
- Audio-reactive wormhole — WebAudio drives uTurbulence + Bloom pulse
- Haptics & gyro — velocity-tilt → phone vibration + parallax
- Code-split galaxies — dynamic import() per dimension, sub-500kB main V2 — Live it
- Ghost Trails — see others' scrolls as light streaks (ghost multiplayer)
- Dimension Editor — community LUT/galaxy presets, share as URL (?dim=glass&seed=...)
- Director Mode — click any sprocket hole to record a cinematic replay V3 — Own it
- On-chain Afterlight — Fractal mandala as generative artifact
- Native app shell — Tauri + Vision Pro spatial pass-through Nine dimensions was the reel. The universe is next.
Log in or sign up for Devpost to join the conversation.