Tengile MalaMala Collection

Tengile MalaMala Collection 的营地在南非姆普马兰加省的 Sand River 沿岸，这一带属于大克鲁格和 Sabi Sand 保护区。首页的介绍说，集团旗下有两座小屋式酒店（lodge）和三处营地（camp），这片土地已经被保护了将近一百年。关于页的时间轴写到，2013 年 MalaMala 保护区的所有权通过土地索还程序交回了当地社区。首页还说它是南非少数几家黑人赋权的生态旅游企业之一，黑人赋权是南非推动黑人持股和参与经营的一套政策。这个站因此没有把房间放在最前面，首页先讲这片土地，再讲住处，然后讲野生动物、历史、保育和社区，最后才请访客规划行程。

访客每次打开一页，先看到一块橄榄绿的开场幕布，幕布收走之后才是首页。首屏是一段十秒钟、没有声音的预告片，循环播放河道的航拍、营地的客厅、一群大象和一个穿卡其衬衫的人，片上压着 UNMATCHED ABUNDANCE 两行大字。光标在首屏上移动时，旁边跟着一个写着 Play Video 的小标签。访客点首屏的任何一处，都会打开一部两分四十三秒、带声音的完整影片。

首屏往下，首页一共约十五屏，讲的顺序和上面说的一样。首页先放一段介绍和几张动物照片，接着是住处。三座 lodge 和三处 camp 各配一张照片，照片角上标着有几间套房，其中 Khensani River Lodge 的照片上写着 A NEW CHAPTER COMING SOON，还没有开业。住处之后，首页引了一句署名为国家地理 Russell MacLaughlin 的话，大意是他拍过的地方里没有一处比得上 MalaMala。这句话下面依次是一组满幅的野生动物大图、一段从 1927 年讲起的 Our Story、保育那一屏、一段讲社区的文字和一排员工的肖像，最后是一张河道航拍上的 Plan a trip。

除了首页，Tengile 还有关于、住宿、体验、保育、画廊、常见问题和预订等页面。关于页中段的时间轴约二十屏长，从 1900 年写到 2026 年，一共 13 个年份，每个年份配着几张照片和一小段说明，2013 年那一条讲的就是土地交还社区。住宿页上有一张手绘风格的地图，标出了保护区的边界、河道、机场、大门和每一处住处的位置。访客点地图上的一处住处，右侧会弹出一张卡片，附一张照片和一句介绍。预订页 PLAN YOUR STAY 让访客先勾选想住的地方，再填日期和人数，最后发出询问。

Tengile 的版面像一本旅行杂志，底色是一种偏暖的米白，文字是很深的橄榄色，照片大小不一、错开地排，周围留出大片空白。首页介绍那一屏，一段大号的衬线文字占在右半边，左边只有一小段小字。介绍下方的两张照片也错开摆放，大象那张靠右，豹子那张靠左，上沿不在同一高度。整页读起来更像在翻一本画册，而不是在看一张产品清单。

首页上的文字只用了两款字体，两款字的分工很清楚。标题和大段引言用 PP Fragment，这是一款笔画极细的衬线字，首屏那行 UNMATCHED ABUNDANCE 的字号大约是正文的十倍，笔画却细得像铅笔画的线。按钮、导航和说明这些小字用无衬线字 Inter，字号都在正文大小上下。Inter 按字数算写得更多，可衬线大字在屏幕上占的面积差不多是它的三倍，所以访客记住的是那款细衬线。首屏的两行字也没有对齐，UNMATCHED 靠左，ABUNDANCE 往右错开了差不多半个词的距离。

这个站的品牌色是一种偏黄的橄榄绿，它很少点缀在小地方，多数时候整块地出现。开场和换页时的幕布、页脚的整片底色、关于页时间轴上的大号年份，都是这种绿。另有一条很细的三色带子，一道墨绿的细线上间隔着几组芥末黄的小方块，上下再各镶一道橄榄绿，像衣服上镶的一道花边。这条带子出现在首屏的底边、菜单面板的底部和地图卡片的顶上，把几个不同的部件连成了同一套品牌。

照片是这个站的主体，首页上的照片大多拍的是动物和人。那组满幅大图里有一群在河边奔跑的野狗和一只趴在树干上的豹子，讲社区的那一段放的是员工和向导的笑脸。住宿页的地图换了一种画法，它是一张手绘风格的插画，保护区是深浅不同的绿色块，河道是一条蓝绿色的线，纸面上还带着细细的颗粒。在一个几乎全靠照片撑起来的站上，这张地图看起来像一张印在纸上的旅行地图。

访客每次打开或切换页面，都要经过开场那块绿幕布。幕布上的字标先由线条一笔一笔描出来，停大约两秒，再从下往上收走，前后约 2.8 秒。换页时，同一块幕布先盖上来遮住旧页面，再收走露出新页面。幕布一收，首屏那 18 个字母就一个接一个地从下方升上来，每个字母一开始是模糊的，升到位时变清楚，整行用了大约两秒。

Tengile 的滚动由平滑滚动库 Lenis 接管，滚轮停下后页面还会顺着惯性滑一小段。访客往下滚时，页头收起来，往回滚一点，它又重新出现。页面里不少照片先放大一点再装进框里，随着滚动在框里缓缓上下移动，形成一层很轻的视差。

保育那一屏的旋转，是动画库 GSAP 的计时器一帧一帧推出来的。六张照片按事先定好的六个角度分布在一个椭圆上，椭圆的大小跟着这一屏的尺寸变。这一屏进入画面时，站点用两秒把六张照片沿椭圆散开到各自的位置，每张照片同时由中间向四边展开。站点在这之后每一帧都把所有照片沿椭圆再推一小步，换算下来大约五十秒转一圈。访客停下不滚，这六张照片也一直在转。

首页和关于页上还有三处部件，各有自己的动法。野生动物那组大图上，光标旁边跟着一个 Next 或 Prev 小标签，访客点图的右半边看下一张，点左半边看上一张。新的一张照片从屏幕的一侧贴着边缘拉开，大约 0.8 秒铺满整个宽度，照片本身同时从略微放大的状态缩回原大。讲社区的那一排员工肖像自己会慢慢往旁边漂，访客一滚动，它就漂得更快。关于页的时间轴把 13 个年份叠在屏幕正中的同一个位置，访客往下滚，下一个年份从下方升上来顶替上一个，旁边的照片则从年份前面滑过去，有时会挡住年份的一半。

首屏那部完整影片在一个黑底的全屏层里播放，影片左右两侧留着黑边。跟着光标的小标签这时变成 Pause，右上角另有一个关闭按钮。

这个站的动效在滚动时都很顺，看不出卡顿。整页从顶部连续滚到底部，两遍的画面都稳在每秒 60 帧，最慢的一帧约 21 毫秒，没有一帧超过 32 毫秒。每秒 60 帧时，每一帧约有 16.7 毫秒，最慢的那一帧也只多出四毫秒左右。

Tengile 对系统里的减少动态效果设置没有任何回应。这个设置是给容易被屏幕上的运动弄得不舒服的人用的，打开之后，Tengile 的开场幕布、逐个升起的字母、一直在转的保育照片、照片的视差和平滑滚动都照常运行，首屏的预告片也照常自动播放。

Tengile 用 React 框架 Next.js 搭建，内容放在内容管理平台 Sanity 上。动画交给 GSAP 和它的滚动插件 ScrollTrigger，完整影片用开源播放器 Plyr 播放，两段影片都放在亚马逊云的内容分发网络 CloudFront 上。

首屏那段十秒的预告片占了首页下载量的四分之三。访客第一次打开首页，一共要下载约 6.3 MB、90 个文件，预告片一项就有 4.7 MB。其余的下载里，脚本合计约 0.9 MB，两款字体约 0.3 MB。首屏以外的照片一开始只加载一张很小的模糊缩略图，访客滚到附近才换成清晰的大图，所以第一次打开时照片一共只有约 0.26 MB。那部两分四十三秒的完整影片有 76 MB，只在访客点开时才下载。

Tengile 的服务器回得极快，返回第一个字节只用了 0.02 到 0.03 秒，远快于 Google 建议的 0.8 秒。浏览器在 0.33 到 0.36 秒画出第一块内容（FCP），Google 建议在 1.8 秒以内，但这时画出来的是开场幕布，首页本身要等到 2.8 秒左右幕布收走才露出来。第二次打开同一页时，内容已经在缓存里，幕布照样停了将近两秒，访客每打开一页、每刷新一次都要再等这一遍。页面的布局位移（CLS）约 0.05，低于 Google 建议的 0.1，加载时访客几乎看不到东西跳位置。加载过程中有两到三个长任务，也就是一次占住浏览器超过 50 毫秒、让页面暂时没法响应操作的脚本，最长的一个约 0.14 秒。

这个站给键盘和读屏软件的用户打了不错的底子。页面声明了英文，划出了页头、导航、主体和页脚四个地标区域。访客第一次按 Tab，就能看到一个跳到正文的链接，之后每一次焦点都套着浏览器默认的那一圈框，一直看得见。野生动物那组大图的左右两半其实是两个真正的按钮，名字是 Previous 和 Next，键盘用户同样翻得动。

不过，键盘和读屏软件的用户在这个站上会被两个地方卡住。第一处在菜单上，菜单关着的时候，它里面的关闭按钮和 11 个链接仍然能拿到焦点。键盘用户按过 Open menu 之后，焦点要在屏幕上看不见的地方走过 12 站，第 13 次按 Tab 才落到首屏的 Explore Collection 上。第二处在照片上，首页 38 张照片的替代文字全部留空，读屏软件会把它们当成装饰跳过，营地的照片也不例外。好在每处营地的名字都写在链接文字里，读屏用户仍然听得到有哪几处住处。

除此之外，页面上的两个弹出层都没有锁住后面的页面。首屏的完整影片打开后，访客推一下滚轮，影片仍然盖在屏幕上播放，后面的页面却已经滚下去大半屏，关掉影片才发现自己已经不在首屏。住宿页地图上的那张卡片也一样，卡片开着时滚轮照样在滚页面，按 Esc 键也关不掉它。

Tengile 在 Awwwards 四个分项里得分最高的是内容 Content，7.43。首页和关于页把土地、历史、保育和社区都讲得很完整，和这一项是对得上的。四个分项里得分最低的是创意 Creativity，只有 6.91。细衬线大字、米白底色加满幅野生动物摄影，是高端旅行杂志用熟了的一套写法。这套写法执行得好能拿到设计分，新意却不多，创意分偏低可能和这一点有关。19 位评委里多数给了 7 分上下，最低一票 6.5，最高一票 8.89。

前端开发评委给这个站的开发奖是 7.48。在不算响应式的五个分项里，网页性能 WPO 最高，7.60，语义、动画、无障碍和代码标记四项都是 7.40。

两家工作室在 Awwwards 和 FWA 上都是常客，各自拿过十几到二十次当日站。网站页脚写着 Website by DashDigital Studio 和 Brand by HKLM，说明这套品牌形象出自另一家公司 HKLM，网站由 Dash Digital 负责。Ingamana 在自己的介绍里说它专门和代理商、设计师合作做开发，所以它在这个项目里看起来是 Dash Digital 的开发伙伴。