YENNI
All projects

03 / 05

MONOLITH

Category
Architecture · 3D web experience
Site language
English
Status
Independent concept project

An architecture studio explored through a camera path, an exploded model and a material library.

View Live Project
Fig. 01Main screen — arrival at the Monolith House

Question

How do you show a building on a screen so that it still feels like weight?

Idea

A fictional experimental architecture studio with five monumental concept buildings. The site behaves like the building: you approach it, cross its threshold and rise above it.

Visual language

Board-formed concrete, raking sun and graphite paper. A live Three.js scene moves the camera through seven stages — arrival, approach, threshold, corridor, hall, aerial — as you scroll, without hijacking the scroll.

01

A journey in seven stages

Scrolling moves the camera: from the façade, through an eight-metre corridor, up to an aerial view of the whole house. Each stage carries one short caption — the building does the talking.

1 / 3

Fig. 03Stage 02 — the façade, measured in shadow

2 / 3

Fig. 04Stage 04 — the corridor, eight metres of compression

3 / 3

Fig. 05Stage 07 — aerial reveal at the end of the journey
Fig. 06Exploded axonometric — the model opened into five layers

02

Taken apart, layer by layer

The exploded axonometric separates the house into five layers. Choose a viewpoint, open the model, then select a layer — in the list or on the drawing — to read how it works.

03

Material and light

Five materials are studied under a low morning sun and a high noon. The studio section explains the practice in the same restrained voice.

Fig. 07Material library — exposed concrete under raking light
Fig. 08Studio — the practice in one paragraph

04

The archive

Five concept buildings, each with its own composition, data and a dossier that can be opened by a direct link.

Fig. 09Archive — “Five studies in weight and light”
Fig. 10Archive — Court of Silence, a museum around a courtyard
Fig. 11Archive — Limestone Residence, two shifted volumes
Fig. 12Archive — Void Chapel, a single vertical cut of light
Fig. 13Project dossier — The Monolith House, opened by a direct link

05

Mobile without compromise

On a phone the journey, the archive and the explorer keep their logic and their controls.

Fig. 14Mobile — main screen
Fig. 15Mobile — corridor stage
Fig. 16Mobile — model explorer

06

Index and contact

An index of studies as a table with a hover preview, and a contact section that keeps the drawing-like vocabulary.

Fig. 17Index of studies — the five buildings as one table
Fig. 18Contact — “Begin with the site”

07

Final frame

The site ends the way it began — with the name at monumental scale.

Fig. 19Final screen — the name at monumental scale

Design details

  1. 01Monochrome concrete palette with technical, drawing-like annotation
  2. 02Architectural plates rendered offline from the same 3D kit
  3. 03Large type, wide margins and a strict grid

Interaction

  1. 01Seven-stage camera path linked to normal scrolling
  2. 02Drag or arrow-key rotation, explode / assemble, layer selection
  3. 03Pre-rendered stills replace WebGL if it is unavailable

Technology

  • React 19
  • TypeScript
  • Vite
  • Three.js
View Live Project
All projects
Next project — 04 / 05KŌIKEIFood & hospitality · Interactive menu← Previous: FRESH SALT

1 / 1