Spatial Marvels

Seven buildings that shaped 20th-century architecture, shown as Apple-style spatial depth cards. Each card tilts with your pointer, trackpad or device, and the building lifts out of the frame. Under each card is a full visual story written for architecture students.

Live site: https://snehabaid1998-byte.github.io/spatial-marvels/

	Building	City	Year	Architect
1	Bauhaus Building	Dessau, Germany	1926	Walter Gropius
2	Fallingwater	Mill Run, Pennsylvania	1939	Frank Lloyd Wright
3	Cathedral of Brasília	Brasília, Brazil	1970	Oscar Niemeyer
4	Sydney Opera House	Sydney, Australia	1973	Jørn Utzon
5	Lotus Temple	New Delhi, India	1986	Fariborz Sahba
6	Guggenheim Museum Bilbao	Bilbao, Spain	1997	Frank Gehry
7	Petronas Twin Towers	Kuala Lumpur, Malaysia	1998	César Pelli

Watch it being built

Hover over a building, or press Construction ▶ on a touch screen, and the card shows how it went up:

1. Design: the empty site appears, and blueprint lines draw themselves over a drafting grid.
2. Structure: the frame rises from the ground in its raw material. Concrete and stone show grey; Bilbao's steel frame shows steel-blue.
3. Envelope: the finished materials (glass, titanium, marble, tiles) rise over the structure.
4. Finished: the landscape and annotations return.

Meanwhile the big year counts up from the year of the design to opening day, and a caption names each stage and its material. Moving the pointer away jumps straight to the finished building.

What each building's story covers

1. Overview: why it was built, the big idea, and the lesson for your own work.
2. Circulation: a simplified plan with the main route animated, a numbered walk-through, the design lesson and a sketch exercise.
3. Site and climate: a plan diagram with north, prevailing wind and sun path, plus location, zoning and how the building answers its climate.
4. Design decisions: numbered pins on the photo. The same pins on the 3D card open a callout when you tap them.
5. Style, materials, timeline, a century-wide chart comparing all seven, and sources.

How to use it

• Change building: swipe or drag sideways, use a two-finger trackpad swipe, press the arrow keys, or tap the page dots.
• Depth: move the pointer, or tilt a phone or tablet. On a laptop, Sense lid tilt uses the webcam to read how the screen is moving. Camera frames stay in the browser and are never uploaded.
• Link to one building: add its name after a #, for example #petronas.

How it's built

It is a single index.html with no build step and no dependencies apart from the Inter font from Google Fonts. Each photo is split into layers: a background with the building cut out and the sky filled back in (*-bg.jpg), the building cutout (*-hero.webp), and a blueprint line drawing traced from the cutout (*-lines.webp) for the construction sequence. The year sits between these layers, as on the iPhone Lock Screen, and CSS 3D transforms separate the layers when the card tilts.

To run it locally, serve the folder with any static server:

python -m http.server 8000

Accuracy

Facts were checked against published sources in October 2026, and each building's story lists them. Wind directions come from 2019–2023 airport weather records (METAR, via the Iowa Environmental Mesonet). The circulation plans are simplified study diagrams, not measured drawings. Use published drawings for measured work.

Photo credits

The photos come from Wikimedia Commons. The cutouts in photos/ are derivatives and keep each original's license.

Building	Photographer	License
Bauhaus	JensKunstfreund	CC BY-SA 4.0
Fallingwater	lachrimae72	CC0
Cathedral of Brasília	Roberto Castro / MTur	Public domain
Sydney Opera House	Dietmar Rabich	CC BY-SA 4.0
Lotus Temple	A. Savin	Free Art License
Guggenheim Bilbao	José Ligero Loarte	CC BY-SA 4.0
Petronas Towers	Marcin Konsek	CC BY-SA 4.0

Design and code by Sneha Baid.