• 

  Scene - 4 Transition Phase

• 

  Scene - 4

• 

  End Credits Scene

• 

  Scene - 4 Initial Phase

• 

  Scene - 3 Key Finding and Transition Phase

• 

  Scene - 2

• 

  Scene - 1

• 

  Scene - 2 Transition

• 

  Scene - 1 Transition

• 

  Scene - 3 Initial phase

• 

  Scene - 3

DreamArchive - Devpost Submission

Inspiration

DreamArchive was inspired by the idea of transforming the web browser into a medium for immersive storytelling rather than just displaying information. We wanted to create an experience that feels mysterious, cinematic, and emotionally engaging while demonstrating what modern web technologies can achieve. Instead of traditional UI elements, users are invited to explore a surreal digital sanctuary where every movement, light, and visual effect contributes to the narrative. Our goal was to blur the boundary between websites and interactive digital art while building a strong technical foundation for future story-driven experiences.

What it does

DreamArchive is an interactive 3D web experience where users automatically journey through a mysterious archive toward a floating crystal monument. The experience combines first-person cinematic movement, mouse-driven camera interaction, atmospheric lighting, dynamic particle effects, animated crystal behavior, bloom post-processing, and seamless scene transitions. Assets are streamed dynamically, creating a smooth loading experience while maintaining high visual quality. Rather than focusing on gameplay, DreamArchive emphasizes exploration, atmosphere, and immersive storytelling inside the browser.

How we built it

We built DreamArchive using React 19 with React Three Fiber as the rendering layer for Three.js. Modular GLTF assets were imported through Drei and organized into reusable world components. Zustand manages independent application states including loading progress, crystal activation, scene management, and transition effects. Framer Motion powers UI animations, while GSAP provides smooth motion where appropriate. Custom systems were implemented for automated first-person movement, procedural head bobbing, cursor-based camera parallax, reactive particle animations, and crystal interaction. Vite provides fast development and optimized production builds.

Challenges we ran into

One of our biggest challenges was creating smooth first-person movement that felt cinematic instead of game-like. Balancing automated camera motion, mouse look, and procedural head bobbing required multiple iterations to eliminate jitter and unnatural movement. Optimizing multiple GLTF assets while maintaining good performance was another challenge, especially when combining high-quality lighting, bloom, fog, and particle effects. Creating seamless state transitions between loading, exploration, and crystal activation without breaking immersion also required careful architectural planning.

Accomplishments that we're proud of

We're proud of building an immersive browser experience that feels more like an interactive digital installation than a traditional website. We successfully created a modular architecture that separates rendering, world logic, effects, and state management, making future expansion much easier. The cinematic camera system, reactive crystal sequence, atmospheric lighting, and optimized rendering pipeline came together to create a polished experience that demonstrates the capabilities of modern web graphics.

What we learned

Throughout the project we gained a much deeper understanding of real-time rendering on the web using Three.js and React Three Fiber. We learned how to organize large 3D applications into modular components, optimize GLTF assets, manage complex application state with Zustand, and combine visual effects without sacrificing performance. Beyond the technical aspects, we also learned how important iteration is when designing immersive user experiences where even small camera or lighting adjustments significantly affect the overall atmosphere.

What's next for DreamArchive

With the core experience complete—including the Archive, all three dream worlds, and the Credits—we plan to evolve DreamArchive into a richer, living experience. Our next steps include adding more dream worlds, deeper environmental interactions, branching story paths, improved visual effects, spatial audio, and AI-driven narrative elements that make each journey feel unique. We also aim to optimize performance across a wider range of devices, enhance accessibility, and explore WebXR support for immersive VR experiences. Ultimately, we envision DreamArchive becoming a growing collection of interconnected dreamscapes that push the boundaries of interactive storytelling on the web.

Built With

• blender
• drei
• framer-motion
• react
• react3fiber
• typescript
• zustad