Sobha Privy Collection

Sobha Realty is one of Dubai's large developers, and Privy Collection is a top tier it has picked from its own projects, described on the site as the rarest luxury homes in the city. The whole site hangs on one line, The Art of the Sublime, and the site treats the sublime as a quality that homes can be selected for. The home page is a single long scroll of 48,763 pixels in six chapters. About explains the sublime, Collection shows three kinds of home, Tenets lists seven selection criteria, Selection describes how the homes are chosen, Locations places four developments, and The Idea gives three quotes from the chairman, Ravi Menon.

The site sells nothing, with no price for any home, no floor plan, no floor area, no enquiry form, no phone number and no email anywhere on it. The last chapter is a white card that reads Feel the Sublime, and the page code beneath it holds an empty form tag with not a single input field inside. The footer has three links, the 3D map, back to top and the Vide Infra credit. Anyone who wants to know more has one path, which is to open the map.

The four developments appear only in the Locations chapter. They are The S penthouses on Sheikh Zayed Road, Dubai's main highway, Sobha Seahaven at Dubai Harbour, Sobha Hartland II beside the city centre, and Sobha Siniya Island far up the coast in Umm Al Quwain. Each development gets a paragraph and a logo, and not a single photograph of a home. The seven tenets take the longest stretch of the page, nearly twenty thousand pixels. They are Expansive Spaces, Iconic Addresses, Uncompromising Finesse, Exclusive Amenities, Exceptional Service, Extraordinary Privacy and A Cut Above, each with a paragraph, a few renders and a video. Almost every picture on the site is a computer render rather than a photograph, and real people appear only three times, a woman in a hat, a woman in an infinity pool, and the chairman in a black and white portrait.

A black ribbon is the site's visual signature. The first screen is a video of a black satin ribbon slowly turning on a black background, with light sliding along its edge. The art is set in script over the ribbon, with OF THE SUBLIME in a light serif beneath. After the first screen the black ribbon returns three times. When a visitor opens the menu, the ribbon turns behind the chapter names. It wraps around a woman in a hat on the Sublime screen. In the chairman's chapter it turns white and fills a white wall.

Sobha Privy Collection keeps its colour to just two steps from top to bottom, black and white. Dark chapters use rgb(26, 25, 25) and pure black, and light chapters use pure white. Text is white, near black, or one grey, rgb(113, 113, 112), which is kept for the script and the long quotes. Every other colour comes from the pictures, a warm beige living room, a pool at sunset, blue sea. The chapters alternate light and dark on the way down, a black opening, a white About, a black Collection, a white Tenets, a black Selection and Locations, a white Idea, and a black footer. Each time the background flips, the header text changes colour with it, so Menu and 3D Map turn near black over the white chapters.

Every heading is set in the light weight of the serif TT Ramillas, in capitals, at 160 pixels for chapter names, 110 for main titles, 70 for subtitles and 36 for small ones, with the letter spacing opened by two percent throughout. Altesse is a script face that writes only 104 characters on the whole site, always the one or two words that lead into a heading, The art, The three, Iconic, Exclusive, Extraordinary, Handpicked, Projects, Feel. These script words sit at 140 pixels on the line above the capitals, like a signature on an invitation. Body text and labels use TT Commons Pro, with 16 pixel paragraphs and 13 pixel labels in capitals. More than thirty thousand characters of body text, added together, cover less than a thirtieth of the area taken by the light serif headings.

The visually heaviest screen on the page is the left aligned statement in About. Five lines of capitals stack downward while a bathroom render slides up from under the letters, and of fine living closes the sentence in grey script. Each tenet is laid out as a poster, with a script lead-in and a word in capitals to the left or right, a render filling the middle, a column of small text beside it and a short film that plays by itself. The Collection chapter sets the words MANSIONS, VILLAS and PENTHOUSES at 160 pixels, white on black, lighting one at a time.

When the page opens, a dark grey curtain covers everything while a number in the corner counts from 1 to 100. When the curtain lifts, The art and OF THE SUBLIME rise word by word. The page's scrolling is not the browser's own but a smooth scroller that Vide Infra modified, which each frame moves the page a tenth of the remaining distance towards the target position, so the page keeps gliding after the wheel stops. Each chapter is moved separately by script, and chapters that have left the screen are hidden as whole blocks. A few key chapters also have gravity wells at their edges, zones that pull the scroll towards them. When the page nears the Collection chapter and the four developments, the scroll grows noticeably heavier, and after the wheel stops the page drifts for another two or three seconds before it settles.

The Collection chapter is drawn on a WebGL canvas, a surface the graphics card draws in real time. Three renders sit on curved surfaces, arranged around an invisible column, their edges bulging slightly as the page scrolls. As the visitor scrolls on, the three renders turn to the centre one after another, and then the whole chapter pins, holding still on screen while the three home types take their turns beneath. Selection is a second canvas, with thirteen renders hanging at angles in black space and flying in from every side as the page scrolls, and Handpicked in script laid across the front. Both canvases redraw only while the page moves and draw not a single frame once it stops, so they leave the graphics card idle.

Apart from the two canvases, everything else on the page is driven by the scroll. Full width renders move and enlarge at different speeds as the page scrolls, and each word of a small heading rises and then settles. The pins in the Locations chapter light up one by one as the cards turn, and a diagonal gleam sweeps across the five large lines of the footer. Vide Infra turns the tenets into a slideshow with one screen per tenet, holding the screen pinned for a full 19,532 pixels of scrolling. As the visitor scrolls, the image and the text slide sideways inside the held frame.

Clicking the 3D tile takes a visitor to a separate page, /location, which is another world. A grey model of Dubai rises out of fog, the sea pale grey, the land dark grey, and the buildings white blocks made of very few faces. All 7,560 pixels of scrolling on this page go to moving the camera. The camera holds over Palm Jumeirah first, then flies north-east along the coast while pins appear in turn for the Burj Al Arab, the Ain Dubai observation wheel, the Burj Khalifa and the Museum of the Future. Finally it crosses the neighbouring emirates of Sharjah and Ajman and stops over Siniya Island. When the cursor rests on one of the four development pins, a small render surfaces inside it. When a visitor clicks one of the ten landmark pins, a card slides in from the right with a photograph and a paragraph, while the end of the address changes to an anchor pointing at that landmark, such as #burj-al-arab-sail. The mouse plays no part in steering, and the camera answers to the wheel alone.

Hand-written static pages with a plugin system of their own make up the site. Every animated element on a page carries a data-plugin attribute naming the plugin it uses, such as parallax, reveal, stickySlider, carouselWebGl, threeWorldsWebGl and mapActivePin, about twenty in all. The scripts come in two bundles, shared.js at 106 KB compressed and landing.js at 69 KB. They carry jQuery 3.7, Barba for page transitions, a modified copy of the smooth scrolling library Locomotive Scroll, which is the scroller described under Motion, and three.js. The /location page downloads a separate 208 KB three.js r179 bundle with three loaders. glTF is the standard file format for 3D models, Draco compresses a model's geometry, and KTX2 is a compressed texture format the graphics card can use directly.

On opening the home page, a visitor downloads 8.6 MB in 98 requests, 8.1 MB of it images. The page asks for all 34 renders at their extra large @xxxl size the moment it arrives, from the first screen down to the footer, and not one of them waits until the visitor scrolls near it. A visitor who scrolls the full page downloads 10.5 MB more, mostly the thirteen Selection images and the three Collection ones, for 19.1 MB in all. The videos play in embedded players (iframes) from the video hosting service Kinescope, 13 of them, including the ribbon on the first screen, the ribbon in the menu, the little map in the 3D button and the short films in the seven tenets, all muted and looping. The three typefaces come from Adobe Fonts and total 231 KB.

The map page is heavier still, with a model that is an 8.9 MB binary file plus 13 AVIF textures totalling 2.9 MB, so the page downloads 12.2 MB the moment it opens. While the map page runs, the graphics card holds 280,000 triangles. The canvas is rendered at twice the window's resolution, which is sharper but costs more work. When the picture is at rest, the page sends 33 draw calls to the graphics card each frame, and while scrolling that drops to fewer than twenty, with 60 frames a second held throughout.

The server takes 480 to 568 milliseconds to send the first byte. The first content appears on screen (first contentful paint, FCP) at 800 to 852 milliseconds, and it is the title on the curtain. The page finishes loading in two and a half to three seconds. The layout shift score (CLS), which measures how much things jump around during loading, is 0.013, far below the 0.1 ceiling Google recommends. During loading the page shows one long task of around 100 milliseconds, a stretch in which script keeps the browser too busy to respond. Scrolling the whole page holds 59 to 60 frames a second, and the slowest frames fall where the two WebGL canvases come into view, at 60 to 90 milliseconds each, several times the budget of about 16.7 milliseconds per frame at 60 frames a second, which a visitor sees as a clear stutter.

Sobha Privy Collection gets the basics of accessibility right. The page declares English and marks all four landmark regions, and a skip link at the top lets keyboard and screen reader users jump straight to the main content. All 27 controls have names a screen reader can announce, and the keyboard focus outline is a one pixel white line. Its trouble comes when someone uses the page from the keyboard. When a keyboard user tabs down past the four header links, the focus drops into the 13 video players. The focus keeps travelling down the page while the page itself stays put, so the screen still shows the first screen while the focus is more than ten thousand pixels away, and the user cannot see where they are. The script also never reads the system's reduced motion setting, so when a visitor turns that setting on, the videos still play, the scroll still glides and both canvases still draw.

Of the four scores, Creativity is the highest at 7.63 and Usability the lowest at 7.09, with Design at 7.41 and Content at 7.53. The Developer Award is a separate Awwwards score for the quality of the build, made up of six marks, five of which are listed here, leaving out the one for responsive design. Animations is the highest at 7.80 and Semantics, how meaningfully the code is structured, the lowest at 7.00, with WPO, short for web performance optimisation, at 7.60, Markup at 7.60 and Accessibility at 7.20.

Vide Infra has 41 works on Awwwards, with 19 Sites of the Day and 39 honourable mentions, and describes itself as designing digital products, eCommerce and brand communication. Nearly all of its Sites of the Day are real estate projects, such as Era, Madar, Silver Pinewood Residences, Springs, AIR and LIKOVA, and five of them came within a single year. The credit in the footer points to a page on Vide Infra's own site titled as a luxury real estate website design agency. The site credits only the studio, Vide Infra, with no individual names. The chairman of Sobha Realty, Ravi Menon, appears on the site as its interviewee, with three quotes and one portrait.