Òrun / Ilé-Ayé

Inspiration

In Yoruba cosmology, the universe is described as a calabash split into two halves Ilé-Ayé, the earthly world below, and Òrun, the celestial home of the divine above. The physical world is often described as "a marketplace we visit," while the otherworld is home. I wanted to build a 3D web experience rooted in that specific cosmology rather than the generic sci-fi cities and fantasy worlds that dominate most 3D-web hackathons something visually distinctive precisely because it draws on a real, underrepresented tradition instead of familiar Western tropes.

What it does

Òrun / Ilé-Ayé is a single continuous, scroll-driven journey between the two realms. Visitors begin grounded in Ilé-Ayé warm amber light, textured earth, and stone forms close enough to feel present among. As they scroll, the ground thins and the particles shift color and speed, carrying them through a threshold the Veil into Òrun: a vast, dark, luminous space where the orisha are represented not as literal figures, but as abstract light-forms, each with a distinct motion signature (sharp and restless, slow and flowing, radiant and still) meant to convey personality through movement and glow alone.

How I built it

Built with React Three Fiber and Three.js for the 3D scene, drei's ScrollControls for the scroll-bound camera path, and @react-three/postprocessing for the bloom/glow that makes Òrun's light-forms feel luminous rather than flat. The camera follows a single authored path (not free-roam) with eased, damped motion, deliberately trading open exploration for a curated, cinematic pacing. I worked with an AI coding agent (Manus) to iterate on the build, using structured prompts to scope the scene realm by realm starting with basic geometry and lighting, then layering in the Veil transition, particle behavior, an interactive light-form click state with an info panel, and finally a title sequence and closing screen.

Challenges I ran into

Getting the camera framing right took several iterations an early version had the camera too high and distant, making Ilé-Ayé read as a landscape viewed from far away instead of a space you're standing in. Fixing that meant lowering and tightening the camera so the ground and pillars actually filled the frame. I also had to catch and fix asset paths that pointed to a build-tool's internal storage rather than portable, deployable paths, which would have broken audio/images once live.

What I learned

That restraint is often the harder design choice deciding not to give the orisha literal humanoid forms, and not to allow free camera movement, ended up making the piece feel more intentional and cinematic than either choice would have on its own.

Built With

• drei
• netlify
• react
• react-three-fiber
• react-three-postprocessing
• tailwind-css
• three.js
• typescript
• vite