UDBHAV

Udbhav: where scrolling brings a world to life

Comment

Inspiration

The hackathon brief was simple but bold: build something that makes people stop scrolling and say "wow." No theme, no restrictions — just creativity and aesthetics. We wanted to avoid the most predictable interpretation of a "3D website" — a spinning product on a pedestal — and instead build something with an emotional arc, a story told entirely through scroll.

That's where UDBHAV came from. It's a Sanskrit word meaning 'origin' or 'emergence', and it became the perfect metaphor for the experience we wanted to build: a world that begins in total emptiness and gradually comes alive as the user scrolls — trees growing from bare ground, crystals rising from the earth, light slowly replacing darkness, all building toward one cinematic reveal.

What it does

Udbhav is a single continuous scroll-driven 3D experience with four phases:

  • "The Void" — a dark, near-empty world at 0% scroll, setting up anticipation
  • "Life Awakens" — procedurally generated trees grow organically from the ground
  • "Energy Emerges" — glowing prismatic crystals rise from the earth, in restrained cyan, amethyst, amber, and pink tones
  • UDBHAV — the final reveal, where the camera pulls back to show the fully awakened world, closing on the title card

Every element — camera position, lighting color temperature, fog, particle density, and bloom intensity — is driven by a single scroll progress value from 0 to 1, so the transformation feels like one continuous transition rather than four disconnected scenes.

How we built it

"Stack:"React + Vite, Three.js via React Three Fiber and Drei, GSAP with ScrollTrigger for scroll-linked animation, and @react-three/postprocessing for the bloom effect.

Instead of sourcing or modeling external 3D assets, everything is built with procedural geometry — cones and cylinders for the trees, icosahedrons and octahedrons with emissive materials for the crystals. This kept the project lightweight and let us focus effort on lighting, color, and motion timing rather than asset pipelines.

The core architecture is intentionally simple: a single scroll progress value (tracked via a ref, not React state, to avoid re-renders on every scroll pixel) drives everything downstream — object scale and rotation, material emissive intensity, fog and light color interpolation, camera position, and text overlay opacity — all computed each frame inside useFrame. Stage-specific behavior (when trees grow vs. when crystals rise) is just clamped math on that single progress value, which made it easy to let phases overlap and blend into each other instead of feeling like separate scenes.

With only two days to build, we leaned heavily on AI tools throughout — Gemini for planning and debugging, and Google Antigravity's agentic coding environment for implementation, using its browser-testing capability to verify the scroll experience end-to-end after each change rather than testing manually every time.

Challenges we ran into

  • "Getting the scroll to feel smooth, not janky." Early on, updating React state on every scroll tick caused visible stutter. Switching to a ref-based progress value read inside useFrame fixed this completely — a good reminder that in R3F, avoiding unnecessary re-renders matters more than almost anything else for animation smoothness.
  • "Making transitions feel continuous instead of like four separate scenes." The first pass had each phase trigger and complete in isolation, which felt disjointed. Overlapping the active ranges of each stage (trees still growing while crystals begin) made the whole thing read as one transformation instead of a slideshow.
  • "Avoiding a "neon" look." Early crystal materials were oversaturated and the bloom made them look more like a video game than a mystical world. Dialing back emissive intensity and saturation, and being more restrained with the bloom threshold, got us the visual tone we were actually going for.
  • "Scope control under a hard deadline." We explored a much bigger idea partway through — an entire second interactive mode layered on top of the scroll experience — but with limited time remaining, we made the call to cut it and protect the core experience instead of risking a half-finished feature.

Accomplishments that we're proud of

  • Building a fully working, polished cinematic experience from zero in under two days
  • Getting the scroll-to-3D synchronization completely smooth, with no jank across the full 0–100% journey
  • Achieving a genuinely premium, mystical visual tone using only procedural geometry — no external 3D models or downloaded assets
  • Designing one unified scroll timeline that drives every visual system (camera, lighting, materials, particles, typography) instead of stitching together separate animations
  • Making a hard scope call under time pressure and shipping a cohesive, finished experience rather than a bigger but unfinished one

What we learned

Beyond the technical side — scroll-linked animation architecture, using refs instead of state for performance, and tuning bloom/emissive materials for mood rather than raw intensity — the biggest lesson was about scope discipline under real time pressure. It's tempting to keep adding features right up until submission, but the strongest version of this project came from ruthlessly protecting a small, polished core experience rather than chasing a bigger, riskier one.

What's next for Udbhav

  • Introduce more organic terrain detail and richer environmental storytelling within each phase
  • Add ambient, generative sound design that evolves alongside the visual transformation
  • Explore additional "world" variations — different color palettes and moods triggered by the same scroll architecture
  • Improve mobile responsiveness and touch-scroll tuning for a fully cross-device experience
  • Revisit the idea of a small interactive layer, built with enough time to do it justice without risking the core experience

Built With

Share this project:

Updates

Submission history