Case study
Interactive 3D showcase
Not a product

Inside the Burj Al Arab.

برج العرب

A scroll-driven 3D story of Dubai’s sail-shaped hotel. One camera flies from a turning globe down to the Gulf, around the sail, through the atrium and the Royal Suite, and out to a helicopter landing on the helipad. Every wall, fish and dolphin is built in code: there is no 3D model file.

Launch the 3D story Read the case study

Camera stops, globe to helipad

Modes: Classic and Cyber

Languages: English and العربية

01 — The brief

A building, told in one scroll.

I wanted to see whether a single web page could do what a documentary does: start in space, land on a building and walk you through it, with the scroll bar as the only control. The reference was Google Arts & Culture’s Meroë story. The subject was the Burj Al Arab, because its sail is one of the most recognisable shapes on Earth.

Role: Concept, design & front-end
Type: Personal showcase, not a product
Built with: three.js 0.170, plain JavaScript, Bootstrap 5.3, Alfuix
Runs on: Any WebGL browser, phone to 4K
Year: 2026

Challenge

A documentary in a web page

Go from orbit to a single room without a cut, keep the subject clear of the text on a phone and on a 4K screen, and load no 3D files.

Approach

Build it all in code

The hotel, its interiors, the coast and the wildlife are made from three.js primitives, and the scroll position drives one camera through 43 hand-placed shots.

Outcome

A static site that flies

Just HTML, CSS and JavaScript, with Classic and Cyber modes, an Arabic edition, a narrated tour, free 3D exploration and a .glb export.

02 — The journey

Forty-three stops, orbit to helipad.

Each stop is a camera shot that rests while you read its text, then glides to the next as you scroll. These are the six parts of the flight, rendered straight from the story.

01
From orbit to the Gulf

A turning Earth, then the UAE, Dubai and the coast. The camera is solved so each place lands exactly below the text, and the last zoom closes in on its target without swinging across the globe.

uae · dubai · jumeirah · dubaicoast
02
The sail on the Gulf

321 metres of sail on its own island, framed to fill the space the text leaves free, whatever the shape of the screen.

overview · explore3d · design
03
The building, x-rayed

The island and its 230 foundation piles, the spine, the exoskeleton, the sail and the helipad, each brought forward while the rest of the model ghosts away.

island · foundation · exoskeleton · helipad · +6
04
Lobby, atrium & Al Mahara

In through the entrance, past the reception and the lifts to the fountain and the atrium, then down a gold passage to the restaurant’s aquarium, where tetras school through planted tanks.

lobby · reception · aquariums · atrium · mahara · +9
05
The Royal Suite

Red, gold and brown rooms with doors that swing open as you scroll: the majlis with a live web page on its TV, the dining room, the bedroom and the bath, then out through the window.

suiteDoor · royal · suiteMajlis · suiteTV · +5
06
Golden hour & the helipad

Out over the Gulf with gulls and dolphins, a golden-hour turn back to the whole hotel, and a helicopter that lands on the helipad as the story ends.

gulfView · finale · setting

03 — Under the hood

No model files. The hotel is code.

One 972-line module builds the hotel. One object places the 43 cameras. One small function turns the scroll position into a camera move.

// the whole hotel, in metres, +Y up
const hotel = createBurjAlArab({
  mastTop: 321,      // spire tip above the sea
  roofHeight: 195,   // top of the glass walls
  sailPanels: 13,    // tensioned fabric bays
  props: false,      // no palms or loungers
});
scene.add(hotel); // a THREE.Group of named parts

// one entry per <section id>: where the camera rests
overview: { bg: 'sky', layout: 'center',
  cam: { target: V(0, 60, 10),
         dir: V(0.42, 0.62, 0.66), dist: 980 } },

// indoors the camera walks in a straight line
lobbyHall: { space: 'atrium', walk: true,
  cam: { target: V(-10, 3.0, 30), /* … */ } },

function storyState() {
  const mid = scrollY + innerHeight / 2;
  // i: the stop above mid, t: 0 → 1 to the next
  /* … */
  // rest for the first and last quarter
  const e = smooth((t - 0.25) / 0.5);
  return { i, e, t };
}

972 lines for the model
13 tests passing
three.js 0.170

Try it: scroll between two stops

t 0.00 → camera 0.00

For the first and last quarter of the scroll the camera holds still, so the text card is steady while you read it.

One canvas, 43 shots

The text sections are transparent over one fixed WebGL canvas. Only the current space (globe, outside, atrium, Al Mahara, suite) is drawn.

Framed for any screen

Each shot knows how big its subject is and moves the camera so it fills the space beside or above the text, from a phone to a 4K monitor.

Tested like a product

13 automated tests check the model against references (roof about 200 m, arches meeting about 266 m, spire 321 m), its draw calls and its clean-up.

04 — Classic | Cyber

One story, two moods.

Cyber mode turns the hotel, rooms and globe into solid dark shapes with a thin neon rim, shows a telemetry HUD, and swaps the sea for a field of slow particles.

Classic mode: the hotel in daylight on a turquoise sea

Cyber mode: the same view as dark shapes with neon rims over a deep blue particle ocean

Classic Cyber

Try it here

Switch this page to Cyber

What changes between Classic and Cyber mode
Part	Classic	Cyber
Hotel	White & blue	Neon rim
Sea	Turquoise	Particles
Screen	Story cards	+ HUD

And in Arabic

A mirrored edition, built not typed

ENInside the Burj Al Arab

ARداخل برج العرب

283page strings
1build script
0hand edits

Open the Arabic edition

05 — What I learned

Four problems, four fixes.

Turn a card over to see what solved it.

Problem

The camera swung through walls

Blending aim, direction and distance separately made indoor moves arc out through the walls, and a canopy over the doors filled the screen.

Fix

Indoors the camera walks in a straight line with its aim trailing, and between rooms the aim turns early, so it looks where it’s going.

walk: true · walk: 'lead'

Problem

Cyber mode washed out

Glowing wireframes with a bloom pass looked exciting for a second, then blurred into a haze that hid the building.

Fix

Solid dark bodies with a thin fresnel rim and faint edge lines, and no bloom at all. The shape reads first, the glow second.

onBeforeCompile · EdgesGeometry

Problem

The loader froze

Building the scene held the main thread for over a second, so the loading animation stopped as a few dots, right when people were waiting.

Fix

The build pauses for a frame between big blocks, and the loader animates only transform and opacity, which the browser runs off the main thread.

await nextFrame() · transform + opacity

Problem

Arabic fell apart

The design’s wide letter-spacing broke the joins between Arabic letters, so every word came out in loose pieces.

Fix

Letter-spacing is 0 everywhere on the Arabic page, and tracking stays only on text marked as English, like the brand line and coordinates.

letter-spacing: 0 · [lang="en"]

Fly in yourself.

Scroll from orbit to the helipad, take the narrated tour, or explore the model freely. Best on a laptop or desktop; it works on phones too.

Runs in Any WebGL browser
Made of HTML, CSS, JS
Exports .glb model

Launch the 3D story النسخة العربية

Independent educational project, not affiliated with Jumeirah or the Burj Al Arab. All images on this page are renders from the 3D story.

06 — Meet the maker

Who made the story.

About me

Mohammad Azad · Senior UI/UX Designer, Product Designer, UI Developer and UI Engineer

One designer. Globe to helipad.

I designed and built Inside the Burj Al Arab end to end: the storyboard of 43 shots, the look of both modes, the hotel modelled in code and the page that carries it. It’s the work I enjoy most, where a design decision and an engineering decision are the same decision.

One person, four roles

As the UI/UX designer, I…

drew the page around the 3D: cut-corner text cards, the section rail and the Classic | Cyber switch
designed Cyber mode’s HUD: telemetry, controls and a status bar
mirrored every layout right to left for the Arabic edition

As the product designer, I…

storyboarded 43 stops, from a turning globe to the helipad
held one rule: no 3D files, everything built in code
added a narrated tour and a free Explore in 3D mode for people who’d rather not scroll

As the UI developer, I…

built the page in plain HTML, CSS and JavaScript with Bootstrap and Alfuix
generated the Arabic page from the English one with a small build script
folded the story cards to short hints on phones, so the 3D stays in view

As the UI engineer, I…

modelled the hotel and its rooms in three.js, part by part
wrote the scroll-to-camera system that fits each shot to any screen
covered the model with 13 automated tests, and added a .glb export

References & credits

Personal showcase, not a product, and not affiliated with Jumeirah. Every image on this page is a capture from the story. The full list of sources is at the end of the story.

Inside the Burj Al Arab.

A building, told in one scroll.

A documentary in a web page

Build it all in code

A static site that flies

Forty-three stops, orbit to helipad.

From orbit to the Gulf

The sail on the Gulf

The building, x-rayed

Lobby, atrium & Al Mahara

The Royal Suite

Golden hour & the helipad

No model files. The hotel is code.

One canvas, 43 shots

Framed for any screen

Tested like a product

One story, two moods.

Switch this page to Cyber

A mirrored edition, built not typed

Four problems, four fixes.

The camera swung through walls

Cyber mode washed out

The loader froze

Arabic fell apart

Fly in yourself.

Who made the story.

One designer. Globe to helipad.

References & credits