UFUQ

A concept for a residential resort on Egypt's southern Red Sea coast, between El Quseir and Marsa Alam: 120 homes in four collections on 3.2 kilometres of shore. It was built as a Codeino showcase — the brand, the copy, the site plan and the sales figures are all invented, and the site says so.

The question it set out to answer is what an Egyptian real-estate launch site looks like when Arabic is the source language rather than a translation, and when the plan — the thing buyers actually study — is drawn with the same care as the photography. Many launch pages for coastal developments are a hero video, a gallery and a form; the masterplan is a flattened image, and the Arabic version follows the English one.

Two constraints came with that. It had to stay light: a phone on a mobile connection should get the page, the films and the plan without paying for a 3D engine it never asked for. And everything on screen had to agree — the plan, the tour, the unit panels and the copy describe one place, so they had to come from one description of it.

• A one-page site in Arabic and English, Arabic first, with full right-to-left layout and numbers that agree with what they count
• A cinematic opening: the name stands on the horizon of a sunset film, then the view narrows into an arch that opens onto the coast
• Four residence collections on cards that stack as you scroll; each opens into its own page with a floor plan, specifications and a gallery
• A day at Ufuq — six films from 06:00 to 22:00, with the section's colour, a clock and a sun on its arc following the hour
• A masterplan drawn like an architect's sheet: depths, reef edge, contours, roads, palms and all 120 homes, with status on hover, details on click, filters by collection and availability, and a blueprint at night
• An optional 3D aerial tour of the whole resort, built from the same site model, with quality that adapts to the device
• Day and night modes, a location map, a payment calculator, an inquiry form (demo) and a synthesised sea

homes on the plan

120homes on the plan

lines of JavaScript

4,700+lines of JavaScript

translation keys, zero missing

214 × 2translation keys, zero missing

JavaScript on first load, gzipped

88 kBJavaScript on first load, gzipped

Anyone can list a stack. The useful part of a case study is the calls that had a real alternative — so each of these says what the tradeoff was, not just what was chosen.

1. 01

   One site model, three drawings

   The coastline, the roads, the lagoon and all 120 homes exist in exactly one file, layout.js. The masterplan, the 3D tour and every unit panel are read from it.

   The usual way to build this is three separate artefacts — an illustrated masterplan, a 3D scene modelled by hand and a spreadsheet of units — and they drift apart the first time anyone moves a road. Here the terrain is a height function, the homes are placed on it, and each view draws what that function says. Move a road and it moves on the plan and in the tour at once.

   Tradeoff · Nothing can be nudged by eye. A label that sits wrong on the plan is fixed in the model or in the drawing code, never by moving a line in an illustration.

2. 02

   The masterplan is surveyed before it ships

   A build script samples the terrain 113,879 times on a five-metre grid and traces the depths, the reef edge and the contours with marching squares, so the browser receives finished lines.

   The browser could compute the same lines, but only by running the terrain's noise functions over more than a hundred thousand points on the visitor's phone before the plan could appear. Done ahead, the drawing arrives as finished paths — 19.6 kB gzipped — and the browser only assembles the SVG and places the homes on it.

   Tradeoff · Any change to the site model means re-running one script. The generated file says so in its first line.

3. 03

   The homes come from a seed, not a spreadsheet

   One function places all 120 homes and picks each one's size, price and status from a random generator seeded with 2029 — the year of handover.

   A hand-typed list of 120 units would need its positions to agree with the terrain and its counts with the copy. Generated, every home stands on the ground the tour renders, and the totals always add up — 24 beach villas, 30 lagoon houses, 42 hill residences, 24 marina lofts. Because the seed is fixed, BV-01 has the same price and status on every load, on the plan, in the tour and in its panel; that was checked by generating the list twice and comparing.

   Tradeoff · Availability is illustrative — 73 available, 26 reserved, 21 sold, because that is what the seed produced. A real sales office would feed the status from its inventory instead: one function's input changes, not the views.

4. 04

   The 3D tour is asked for, not imposed

   three.js and the scene — 175 kB gzipped — load only when someone presses ‘3D aerial tour’. The page itself opens on 88 kB.

   A WebGL scene behind the hero is the obvious move for a site like this, and it makes every visitor pay for the download, the GPU time and the battery before they have read a word. Most people will read the page; some will want to fly over the site. The tour picks a quality tier for the device, then lowers its own resolution, bloom and shadows if frames run slow.

   Tradeoff · The most striking piece of the build is one tap away instead of above the fold. The opening uses film instead, which is cheaper to decode and looks the same on every phone.

5. 05

   The name stands on the film's real horizon

   The horizon in the sunset film was measured at 65.2% of its height; the page works out where that line lands after each screen's crop and sets the wordmark on it.

   A centred wordmark over a full-screen video floats in the sky on a tall phone and sinks into the sea on a wide monitor, because filling the screen moves the horizon with the aspect ratio. Computing the crop puts the kashida — drawn as the horizon line — on the water's edge at any size, and the intro draws its own horizon exactly where the film's will appear.

   Tradeoff · The number belongs to that one film. Replace the film and the horizon has to be measured again.

6. 06

   Films load as they approach, and phones get their own

   Nine films, each in a 1920 px and a 960 px version. A film starts loading about a screen before it arrives and pauses when it leaves.

   Autoplaying everything would ask a desktop visitor for 21.4 MB of video before the first scroll, and a phone for the same files at twice the width its screen can show. Here phones and touch screens take the 960 px set — 9.2 MB for all nine — and only the opening film is requested up front.

   Tradeoff · Every film needs two encodes and a poster, and a fast scroll can catch the poster for a moment before the film takes over.

7. 07

   Arabic is split into words, never letters

   Headlines rise line by line. They are cut into words, and the words are regrouped into the lines the browser actually drew.

   Animating a headline letter by letter is the standard technique, and in Arabic it breaks the joins — a letter wrapped on its own renders in its isolated form, so the word stops being a word. Splitting by word keeps the script intact, and measuring where each word landed finds the real line breaks for that screen width.

   Tradeoff · No letter-level effects in English either. And the regrouping had a bug: lines were joined without a space, so after a window resize the words at each line break ran together. It was caught reviewing the live site and fixed — the space between lines is kept now, and a test resizes the page five times and checks every headline.

8. 08

   The sea is synthesised, not recorded

   The sound of the sea is filtered noise moved by two slow oscillators — a swell about every twelve seconds — with a thin band of foam riding on it. There is no audio file.

   A recording would be a megabyte or more for a sound most visitors never switch on, and any loop short enough to ship has a seam you start to hear. Generated, it never repeats exactly, costs nothing until it is switched on, and changes with the scene: at night the filter drops from 520 to 380 Hz and the sea turns deeper and softer.

   Tradeoff · It is an impression of the sea rather than the sea. That is the right register for a page about a place, and the wrong one for a page that has to prove what the place sounds like.

9. 09

   The day recolours the page, and picks its own text colour

   As the six films of the day pass, the background is mixed between six measured sky colours, and the text switches between ink and foam when the background's luminance crosses 0.42.

   A fixed text colour cannot work on a background that travels from dawn peach to midnight navy — at some hour it becomes unreadable. Computing the luminance on every scroll frame means contrast is decided by the colour actually on screen.

   Tradeoff · The switch is a cut, not a fade: there is one moment, between sunset and night, where the text flips.

The page is written in Arabic and translated into English, not the other way round. The HTML ships in Arabic, right to left; English replaces every string in place, mirrors the layout and reverses the direction the day's films travel. Both languages carry the same 214 keys, with none missing either way.

Numbers agree with what they count. Arabic changes the noun after a number — «غرفة نوم واحدة» for one bedroom, the dual «غرفتا نوم» for two, «٣ غرف نوم» from three to ten — and the counts in the copy take the accusative a number needs: «١٢٠ مسكناً». English needs one rule; Arabic needs the grammar.

Digits follow the reader. In Arabic every number a person reads — prices, areas, counters, the plan's legend, clock times — is set in Arabic-Indic numerals. Clock times needed their own conversion, because the browser's Arabic number formatting never touches a string like 06:00. Identifiers stay as they are: a home is BV-01 in both languages and the coordinates read 25°24′N, because those are codes, not quantities.

Type. Alexandria, a geometric variable face drawn for Arabic and Latin together, sets the display lines in both scripts, and IBM Plex Sans Arabic carries the text. All eight font files are self-hosted and split by script, so the browser fetches a script's file only when a character in that script is on the page.

The wordmark carries the idea. «أفـــق» is set in a light geometric Arabic, with the kashida between «ف» and «ق» drawn long and level as the horizon line and the dot of the «ف» lifted off as a copper sun. That horizon is the first thing the page draws, and the line the name stands on in the film.

Scope discipline is part of the work. Each of these was considered and cut for a stated reason.

Recovery from a lost 3D context

Graphics drivers can drop a WebGL context, and the tour has no handler for that yet — the scene stays blank. It happened in testing: on a machine with integrated Intel graphics, headless Chrome lost the top quality tier while the middle tier rendered. The fix is to catch the loss and rebuild one tier lower.

A shorter opening

The intro holds for at least 2.8 seconds while the first film loads, and the page cannot scroll until the horizon has opened — about eight seconds in. It is the film's moment, and it is long. A skip, or a shorter hold on a return visit, is the next change.

Mobile performance

Lighthouse scores the page 96 for performance on desktop and 69 on its throttled mobile profile. The gap is main-thread work from scroll-linked animation — about 780 ms of blocking time on that profile — and it has not been tuned yet.

A real inquiry pipeline

The form validates, confirms with a reference number and sends nothing — and says so under the button. Connecting it needs a CRM or an email provider, and a real development to sell.

Contrast on the smallest labels

Lighthouse flags the faint card indices and specification labels (accessibility 97). They are quiet by design, but they are text, and they should pass.

UFUQ is a concept. The resort, its location, homes, prices and sales are invented, and the site says so in its own footer. The photography and film are licensed stock from Unsplash, Pexels and Mixkit, credited on the site. Figures on this page were measured against the repository on 28 October 2026, and the Lighthouse scores on the live site on 25 October 2026.