Orbis

• 

  Features - Floating Rock Animation

• 

  Deep Time - Peace Animation

• 

  Landing Page - Hero Section (Cursor Animation)

Inspiration

The brief for this hackathon was refreshingly open: build a "3D website," judged mostly on creativity and aesthetics rather than technical depth. That freedom sent me down a rabbit hole of moodboards before I landed on geology. There's something quietly cinematic about the idea that the ground under our feet is basically a stack of saved pages, ash, seabeds, and buried rivers pressed into layers over millions of years. I wanted to build something that made "deep time" feel less like a textbook term and more like a place you could visually fall into.

What it does

Orbis is the landing page pitch for an imagined interactive 3D geology explorer, a tool that would let someone peel back Earth's crust and scrub through millions of years of sediment, fossils, and terrain right in their browser. The page itself is a single-scroll experience across three acts:

• A hero section where moving your cursor reveals a second, hidden layer of the scene through a soft circular "spotlight," a small nod to the site's own theme of uncovering what's underneath.
• A features section pitching the imagined product's core capabilities: a 3D terrain viewer, a time slider, fossil pins, and bite-size geology lessons.
• A closing cinematic section with a slowed-down video and a character-by-character animated headline, "Uncover the Deep Time."

How we built it

I originally planned to build this properly in 3D, using Three.js by way of React Three Fiber. After a lot of tutorials and a couple of failed attempts at matching visual references I liked (first a photoreal floating-islands look, then a softer pastel-fantasy style), I hit a wall with local dev environment issues that ate more time than the actual building. I looked at Spline as a middle ground next, before ultimately deciding to keep things simple: a single index.html file running React 18 and Babel Standalone straight from a CDN, styled with Tailwind, so there's no build step and it can be dropped onto GitHub Pages or Netlify in minutes.

With the 3D engine off the table, the "wow factor" had to come from smaller, well-crafted details instead: a canvas-generated radial gradient used as a CSS mask for the cursor-spotlight effect, a custom video component that fades out just before a looping background video restarts so the loop doesn't jump-cut, and scroll-triggered reveal animations built on IntersectionObserver. I leaned on resources available online and on Qwen Studios along the way, especially for closing gaps in my Three.js/React knowledge and for troubleshooting the trickier animation timing.

Challenges we ran into

• The pivot away from Three.js. Letting go of the "real" 3D version after investing real time in it was the hardest call of the project, but it was the right one given the deadline.
• Smooth video looping. A plain HTML <video> loop has a visible jump-cut at the seam. Getting a clean crossfade meant tracking playback time every frame and timing an opacity fade precisely against the video's own duration.
• Making a no-3D page still feel "3D." Without an actual engine, depth had to be faked through parallax-like reveals, layered imagery, and motion, which took a lot of trial and error to get feeling intentional rather than gimmicky.

Accomplishments that we're proud of

• Shipping a cohesive, moody visual identity, dark background, warm orange accents, italic serif type, that feels like it belongs to one imagined product rather than a grab-bag of hackathon effects.
• The custom smooth-looping video component, which was fiddly to get right but pays off every time the background video restarts invisibly.
• Keeping the whole thing to one dependency-free HTML file that runs anywhere with no build step.

What we learned

I came out of this a lot more comfortable with the browser's IntersectionObserver and <canvas> APIs, and with the reality that a good visual result doesn't always require the "correct" tool for the job, sometimes a well-executed 2D illusion of depth reads just as strongly as real 3D, especially under a tight deadline. I also learned, the hard way, when to cut a technical approach loose and pivot rather than sink more hours trying to force it to work.

What's next for Orbis

The natural next step is to actually build the tool the landing page is pitching: a real interactive 3D terrain viewer, likely in Three.js or WebGL now that there's more runway, with a working time slider, real geological datasets, and the fossil pins and field guides the Features section promises. I'd also like to revisit the cursor-spotlight effect and reveal animations as reusable, documented components for future projects.

Built With

• css3
• github
• html5
• mp4
• qwen
• vercel