Casa Futura
An immersive web experience blending 3D space, sound, UX, and front-end development
Final thesis project — Universidad ORT Uruguay
Immersive Web Experience for
Casa Futura is an immersive digital artwork developed as my final thesis project, where I was responsible for
the entire creative and technical process. The project brings together 3D design, sound design, UX thinking,
editorial structure, and front-end development into a single, cohesive web experience.
Conceived as a navigable digital house, the experience unfolds across three interconnected environments
— Future, Past, and Present — where space, interaction, sound, and narrative coexist as one system.
Role: Concept, 3D design, UX, sound design & front-end development
Process & experience overview
What is Magma Futura?
Magma Futura is a multidisciplinary cultural space that brings together art, design, and technology through experimental and immersive practices.
It operates as an exhibition space, a creative laboratory, and a platform for collaboration. Its identity is intentionally fluid, shaped by the projects and
experiences that take place within it.
A space that doesn’t fit
Within the local context, Magma Futura occupies a rare position. It is an innovative proposal, the only immersive space of its kind in the country, and a project that disrupts a cultural landscape where experimentation often arrives late.
This condition revealed three key tensions that directly informed the project:
- Digital mismatch: The existing website did not reflect the sensory, immersive, and experimental nature of the physical space.
- Positioning opportunity: Immersive web experiences are virtually nonexistent in Uruguay, opening space for Magma Futura to lead digitally.
- Conceptual risk: Reducing the project to a conventional informational website would flatten its identity and undermine its experimental character.
A conventional website wouldn’t be enough
The goal was not to explain Magma Futura — but to translate its essence.
The challenge wasn’t clarity — it was experience. Magma Futura didn’t need a cleaner explanation. It needed a digital space that could be inhabited.From this decision, the format emerged.
A house where it shouldn’t be
Casa Futura is built around a spatial metaphor.
A futuristic house appears in the middle of the Uruguayan countryside — an object out of place, disrupting what feels familiar.
The surrounding landscape represents everyday territory and cultural normalcy. The house introduces speculation, experimentation, and rupture, positioning itself as a foreign presence within a familiar context.
This contrast becomes the foundation of the experience: a space designed to challenge expectations and invite the visitor into a different way of inhabiting the digital.s
From content to spatial system
Casa Futura translates Magma Futura’s core content structure — Agenda, Past Events, and Currently Exhibited — into a spatial and temporal system.
Instead of organizing information through pages, the experience is structured as a camera journey through time, defined by a single animated path exported from Blender and divided into keyframes.
Temporal sequence & camera logic
Each keyframe corresponds to a specific spatial and temporal state:
Intro — Keyframe 1: Landscape-facing entry. The house appears at a distance, setting context and contrast.
Foyer — Keyframe 2: Central orientation space. All temporal states connect through this node.
Room 1 — Future — Keyframe 3: Corresponds to Agenda. Expansion, anticipation, and what is yet to happen.
Room 2 — Past — Keyframe 4: Corresponds to Past Events. A denser space where traces and memory remain.
Room 3 — Present — Keyframe 5: Corresponds to Currently Exhibited. A focused, contained state of immediacy.
3D flow
Describes how the user moves through the three-dimensional rooms
using scroll and navigation arrows.
Navigation as movement
Vertical scroll advances the camera along this predefined path, activating transitions between spaces and keyframes.
Click-based navigation allows lateral jumps between temporal states, enabling non-linear exploration without breaking the overall structure.
The diagram visualizes this system clearly:
-
Scroll controls progression through time
-
Click enables direct access to specific states
-
The loop ensures continuity and return
In Casa Futura, navigation is not an interface layer placed on top of the experience.
One experience,
multiple dimensions
Casa Futura operates as a single ecosystem with two intertwined layers:
The 3D layer - A spatial, contemplative journey through time.
The 2D editorial layer - Agenda, Past Events, Currently Exhibited, Vision, Contact, and Shop.
Editorial content appears as an overlay rather than a separate website. When opened, the 3D scene pauses automatically, prioritizing readability and performance.
Both layers function as parts of the same experience.
General Flow
General overview of the complete journey: entry, intro, foyer,
rooms, circular loop, and navigation menu.
Spatial architecture &
exhibition logic
Casa Futura is conceived as a digital exhibition rather than a conventional website.
The space is organized around a central foyer connected to three autonomous rooms, each representing a temporal state. All rooms link directly to the foyer, positioning it as a point of balance and orientation.
Movement, light, sound, and interaction guide the user through time, turning navigation into a curated spatial journey rather than a sequence of pages.
The Rooms
Objects as narrative devices
The house is constructed through objects.
They are not decorative — they carry meaning.
Each object operates as a temporal witness, defined by its materiality, state, and behavior.
Object system
- Witness objects — signal temporal states
- Devices — trigger sound or interaction
- Editorial artifacts — connect directly to Magma’s identity and catalog
- Material remains — traces of past actions
Hover interactions activate text, sound, or actions, allowing objects to be read without breaking immersion.
The editorial layer
While the 3D experience builds atmosphere, the editorial layer grounds the project in reality.
It brings Magma Futura’s institutional content into the experience without breaking immersion, functioning as a practical counterpart to the spatial narrative.
Key sections include:
Agenda — upcoming events presented as cards using Magma’s original flyers, with quick access to tickets.
Detail Event — full documentation of each activity, including curatorial text, artist bio, and visual records.
Vision — Magma Futura’s identity, methodology, team, and collaborators.
Editorial content appears as a 2D overlay on top of the 3D environment.
When the overlay opens, the immersive scene pauses automatically, prioritizing readability and performance while maintaining visual continuity.
Past Events — a living archive with year filters and detailed event pages.
Currently Exhibited — active works organized by space, with descriptions and curatorial context.
UI kit
A modular UI system was designed to support both layers of the experience.
Desktop first,
mobile reimagined
Casa Futura was conceived primarily for desktop.
For mobile, the experience was redesigned as a purely editorial version:
- No 3D or continuous audio
- Preserved visual language and typography
- Dedicated JavaScript logic and conditional CSS
This approach ensured accessibility and performance without compromising the project’s identity.
How it’s built
Casa Futura runs on a hybrid real-time architecture:
- Three.js handles 3D rendering and lighting
- A master camera timeline exported from Blender defines spatial movement
- A single GLB file compressed with DRACO optimizes loading
- GSAP synchronizes motion, transitions, and fades
- A hash-based router mounts editorial overlays dynamically
- When overlays open, the 3D render pauses automatically
- Vite manages development, build, and optimization
- Continuous deployment via GitHub and Netilify
Challenges & decisions
Concept vs. feasibility
Initial liquid environments proved too heavy for real-time web rendering. The idea of fluidity was reinterpreted through organic growth.
Offline vs. real-time rendering
Lighting and materials behaved differently in Three.js than in Blender, requiring code-level adjustments to recover depth.
Performance constraints
Every aesthetic decision had to coexist with browser and hardware limitations, making optimization a core part of the design process.
Outcome
Casa Futura brings space, sound, interaction, and editorial content together into a single continuous experience — closer to a digital exhibition than a traditional website.
It translates a physical experimental space into the browser without flattening it, while showcasing a multidisciplinary approach that combines concept, UX, visual design, 3D, sound, and front-end development.
Casa Futura proposes a way to experience Magma Futura.
Reflection
Casa Futura was the most demanding and complex project I have worked on so far. It brought together conceptual thinking, creative direction, UX/UI, real-time 3D, sound design, front-end development, and interactive systems within a limited timeframe.
The process pushed me beyond my comfort zone, requiring constant problem-solving, adaptation, and technical growth — particularly in 3D, code, and real-time web environments. While intense at times, it became a period of deep learning that strengthened both my technical foundation and conceptual clarity.
More than a single outcome, Casa Futura reflects how I work: at the intersection of concept and execution, creativity and structure, visual language and interaction. For that reason, I consider it a key piece in my portfolio and a clear representation of my profile as a multidisciplinary designer.
View the live experience Note: First load may take a moment due to real-time 3D content.
Currently optimizing asset size.
Currently optimizing asset size.