Tengile MalaMala Collection

The Tengile MalaMala lodges sit along the Sand River in Mpumalanga, South Africa, in the Greater Kruger and Sabi Sand area. The homepage introduction says the collection brings together two lodges and three camps on land that has been protected for nearly a century. According to the timeline on the About page, ownership of the MalaMala Game Reserve was handed back to the local community in 2013 through a land-claim process. The homepage also calls the company one of South Africa's few black-empowered eco-tourism enterprises, which refers to South African policy that promotes Black ownership and management of businesses. So the site does not lead with rooms. The homepage starts with the land, moves on to the places to stay, then to wildlife, history, conservation and community, and only at the end invites the visitor to plan a trip.

Every time a visitor opens a page, an olive green curtain comes first, and the homepage appears only after it lifts. The first screen is a ten second silent preview film with the words UNMATCHED ABUNDANCE set over it in two lines. The film loops through a river from the air, a lodge lounge, a herd of elephants and a man in a khaki shirt. As the cursor moves across this screen, a small Play Video label follows it. A click anywhere on the screen opens the full film, which runs two minutes and forty-three seconds and has sound.

The homepage runs to about fifteen screens and follows the order described above. It opens with an introduction and a few animal photos, followed by the places to stay. Three lodges and three camps each get a photo with the number of suites marked in a corner, and the photo of Khensani River Lodge carries the words A NEW CHAPTER COMING SOON because it has not opened yet. After the lodges, the homepage quotes Russell MacLaughlin of National Geographic, who says in effect that no place he has filmed in Africa compares with MalaMala. Below the quote come a set of full-width wildlife photos, an Our Story section that begins in 1927 and the conservation screen. A passage about the community with a row of staff portraits follows, and the page ends with a Plan a trip panel over an aerial photo of the river.

Beyond the homepage, the site has pages for About, Accommodation, Experiences, Conservation, Gallery, FAQ and booking. The timeline in the middle of the About page is about twenty screens long and covers 13 years from 1900 to 2026, each with a few photos and a short caption. The 2013 entry is the one about the land returning to the community. The Accommodation page has a hand-drawn style map showing the reserve boundaries, the river, the airfield, the gates and every lodge and camp. When a visitor clicks one of those places, a card slides in on the right with a photo and a one-line description. The booking page, PLAN YOUR STAY, asks the visitor to tick the places they want to stay, add dates and guests, and send an enquiry.

Tengile's layout reads like a travel magazine, built on a few plain choices. The background is a warm off-white, the text is a very dark olive, and photos of different sizes are staggered with wide margins of empty space around them. On the introduction screen of the homepage, a large serif paragraph fills the right half while the left half holds only a short note in small type. The two photos under it are staggered as well, the elephant on the right and the leopard on the left, with their top edges at different heights. The page feels more like leafing through a photo book than scanning a product list.

The homepage uses only two typefaces, and each has a clear job. Headings and the large quoted passages are set in PP Fragment, a serif with hairline strokes. The UNMATCHED ABUNDANCE line on the first screen is about ten times the size of the body text, yet its strokes look as thin as pencil lines. Buttons, navigation and captions use the sans serif Inter at roughly body size. Inter sets more words, but the large serif covers nearly three times as much of the screen, so the thin serif is what visitors remember. The two words on the first screen are not aligned either, with UNMATCHED on the left and ABUNDANCE pushed about half a word to the right.

The brand colour is a yellowish olive green, and it rarely appears as a small accent. Most of the time it fills whole areas. The curtain that opens each page, the solid footer and the large years on the About timeline are all in this green. A thin three-colour band adds a second motif. It is a dark green line broken by small groups of mustard squares and edged above and below with olive, much like a trim sewn onto a garment. The band runs along the bottom edge of the first screen, along the bottom of the menu panel and across the top of the map card, which ties these separate pieces into one brand.

Photography carries the site, and most of the homepage photos show animals and people. The full-width wildlife set includes a pack of wild dogs running along a riverbank and a leopard draped over a tree trunk, while the community passage shows smiling staff and guides. The map on the Accommodation page uses a different technique. It is a hand-drawn style illustration, with the reserves as blocks of green in different shades, the river as a teal line and a fine grain across the paper. On a site built almost entirely on photographs, the map looks like a travel map printed on paper.

Every time a visitor opens or switches a page, the green curtain plays. The monogram on it first draws itself stroke by stroke, holds for about two seconds and then retracts upward, about 2.8 seconds in all. When the visitor moves to another page, the same curtain covers the old page and then lifts to reveal the new one. As soon as the curtain lifts on the homepage, the 18 letters of the title rise one after another from below. Each letter starts out blurred and comes into focus as it reaches its place, and the whole line takes about two seconds.

Tengile hands its scrolling to the smooth scrolling library Lenis, so the page keeps gliding for a moment after the wheel stops. The header slides away while the visitor scrolls down and comes back as soon as they scroll up a little. Many photos are scaled up slightly inside their frames and drift up or down within them as the page scrolls, which gives a light parallax.

The orbit on the conservation screen is driven frame by frame by the ticker of the animation library GSAP. The six photos sit at six preset angles on an ellipse whose size follows the size of the section. When the section comes into view, the site spends two seconds spreading the photos along the ellipse to their places, and each photo opens out from its centre as it moves. From then on, the site nudges every photo a little further along the ellipse on each frame, which works out to about fifty seconds per lap. The photos keep circling even when the visitor stops scrolling.

Three other pieces on the homepage and the About page each have a motion of their own. Over the full-width wildlife photos, a small Next or Prev label follows the cursor. A click on the right half shows the next photo and a click on the left half shows the previous one. The new photo is pulled across from one edge of the screen and fills the full width in about 0.8 seconds, while the image inside eases back from a slight zoom to its normal size. The row of staff portraits in the community passage drifts sideways on its own and speeds up whenever the visitor scrolls. The About timeline stacks its 13 years in the same spot in the middle of the screen. As the visitor scrolls, the next year rises from below to replace the previous one, while the photos slide past in front of the numbers and sometimes cover half of a year.

The full film from the first screen plays in a black full-screen layer, with black bars on both sides of the picture. The label that follows the cursor now reads Pause, and a close button sits in the top right corner.

Tengile's motion stays smooth all the way down the page. In two continuous passes from the top of the homepage to the bottom, the picture held at 60 frames per second, the slowest frame took about 21 milliseconds and none went over 32 milliseconds. At 60 frames per second each frame has about 16.7 milliseconds, so even the slowest frame ran only about four milliseconds over.

Tengile makes no change at all for visitors who have turned on the reduced motion setting. That setting exists for people who feel unwell when things move on screen. On Tengile, the curtain, the rising letters, the circling conservation photos, the parallax and the smooth scrolling all run as usual, and the preview film on the first screen still plays by itself.

Tengile is built with Next.js, a React framework, and its content lives in the Sanity content management platform. Animation is handled by GSAP and its scroll plugin ScrollTrigger, the full film plays in the open source player Plyr, and both films are served from CloudFront, the content delivery network of Amazon Web Services.

The ten second preview film makes up about three quarters of the homepage download. A first visit pulls about 6.3 MB in 90 files, and the film alone is 4.7 MB. Of the rest, the scripts add up to about 0.9 MB and the two fonts to about 0.3 MB. Photos below the first screen start as tiny blurred placeholders and are swapped for sharp images only when the visitor scrolls near them, so photos account for only about 0.26 MB on the first visit. The full film of two minutes and forty-three seconds weighs 76 MB, and it downloads only when a visitor opens it.

Tengile's server answers almost instantly, returning its first byte in 0.02 to 0.03 seconds, far faster than the 0.8 seconds Google recommends. The browser paints its first content (FCP) at 0.33 to 0.36 seconds, well inside Google's 1.8 second guideline, but what it paints is the curtain, and the homepage itself appears only around 2.8 seconds when the curtain lifts. On a second visit to the same page, with everything already cached, the curtain still held for almost two seconds, so visitors wait through it again on every page and every reload. Layout shift (CLS) is about 0.05, below Google's limit of 0.1, so visitors hardly see anything jump during loading. Loading includes two or three long tasks, which are scripts that hold the browser for more than 50 milliseconds and leave the page briefly unresponsive, and the longest lasts about 0.14 seconds.

The site gives keyboard and screen reader users a solid foundation. The page declares English as its language and marks out header, navigation, main and footer landmarks. The first press of Tab reveals a link that skips to the main content, and from then on every focused element keeps the browser's default focus ring, which stays visible. The two halves of the wildlife photo set are in fact real buttons named Previous and Next, so keyboard users can page through it too.

Even so, there are two places where keyboard and screen reader users get stuck. The first problem is in the menu, whose close button and 11 links can still take focus while the menu is closed. After Open menu, a keyboard user passes through 12 stops they cannot see, and only the 13th press of Tab lands on Explore Collection on the first screen. The second problem lies in the way the homepage photos are labelled. All 38 of them have empty alternative text, which tells screen readers to skip them as decoration, and the lodge photos are no exception. Each lodge name is still part of its link text, so screen reader users do hear which places there are to stay.

Beyond those two, neither of the site's pop-up layers locks the page behind it. Once the full film is open, a turn of the wheel leaves the film playing on top while the page behind it scrolls down most of a screen. When the visitor closes the film, they find they are no longer at the top of the page. The card on the Accommodation map behaves the same way. While it is open, the wheel keeps scrolling the page, and the Escape key does not close it.

Of its four Awwwards scores, Tengile did best on Content, at 7.43. The homepage and the About page cover the land, its history, conservation and the community in depth, which fits that score. Its lowest of the four scores is Creativity, at 6.91. Thin serif display type, an off-white background and full-width wildlife photography make up a style that luxury travel magazines have long used. Done well, that style earns design marks but offers little that is new, which may be part of why Creativity came in lowest. Most of the 19 jurors scored it around 7, with a low of 6.5 and a high of 8.89.

The developer jury gave the site an overall 7.48. Leaving responsive design aside, web performance (WPO) scored highest at 7.60, and semantics, animations, accessibility and markup each scored 7.40.

Dash Digital and Ingamana are both regulars on Awwwards and FWA, each with between fourteen and twenty Awwwards Site of the Day wins. The site footer reads Website by DashDigital Studio and Brand by HKLM, which shows that the brand identity came from another company, HKLM, while Dash Digital was responsible for the website. Ingamana describes itself as a studio that builds for agencies and designers, so it appears to have been Dash Digital's development partner on this project.