Milledollars

MilleDollars 是一家做高端广告影片的创意公司，作品页上列着 2019 到 2026 年的 31 部片子，其中 26 部是给瑞士奢侈腕表品牌 Richard Mille 拍的，其余几部的客户是达能、香水品牌 Parfums de Marly、护肤品牌 EviDenS de Beauté 和香水品牌 Henry Jacques。一家影片公司的作品集，通常是一页缩略图网格，点开再看片。这个站反过来，让影片直接占满屏幕。

访客进门后，先看到的是一段加载画面。浅灰的底上，MILLE. 和 .DOLLARS 两个词一上一下，中间连着几道不停变形的涂鸦线。大约两秒后，一列圆角的影片缩略图像老虎机的转轮一样快速往上滚，最后停在某一部片子上。这张卡片随即放大到铺满屏幕，界面上的文字再淡入进来，整个开场大约四秒半。

首页上一共挂着七部精选的片子，一屏一部。屏幕左侧是编号和客户名，右侧是片名和年份，底部横着一条分成七段的细进度条。访客往下滚一格就换到下一部，往上滚就回到上一部，翻到第七部之后再滚，会回到第一部。访客也可以直接点进度条上的某一段，跳到那一部。光标移到影片上时，旁边会出现一个 DISCOVER 标签，点下去就进入这部片子的项目页。正在播放的那段影片不会中断，而是直接变成项目页顶部的大画面。

每一部片子的项目页都是一篇很长的幕后文章。以 The Dazzling Division 为例，这是 Richard Mille 一款高级珠宝腕表的广告片，由演员杨紫琼主演，它的项目页大约有十六屏半。文章先讲这部片子的故事，再讲色彩怎么定、四个布景各自起什么作用，以及和杨紫琼合作是什么感觉。文字之间穿插着剧照、一条拍立得照片的横向轮播、一组可以切换的 21 张图片和几段循环的短片，有的项目页还附了一组幕后照片。文章最后是完整的演职员表，再往下是一条深色的横条，标题写着 A GLIMPSE INTO OUR WORLD THROUGH OTHER PROJECTS，列出其他几部片子。

除了首页和项目页，站上另外还有三页。标着 Works 的作品页列出全部 31 部片子，每一条只有年份、片名和客户。标着 Info 的介绍页写着这家公司是一家全流程的制作公司，服务列着制作、分镜、声音设计、拍摄，最后一项写的是 E tutti quanti，这是一句意大利语，意思是诸如此类。标着 Contact 的联系页没有表单，只有一个邮箱和三个社交平台的链接。

Milledollars 的界面只在屏幕四边留下一圈小字，中间整块画面都让给影片。首页的左上角是 MILLE.，右上角是 .DOLLARS，站点用整块屏幕把公司的名字拆成了两半。两个词中间横着一句小字口号，写的是专注高端视频制作的创意公司。导航的四个词竖着排在左下角，右下角蹲着一只猫。首页上这些文字都是白色的小号大写字母，直接压在影片上。为了让白字在任何一部片子上都读得清，站点把每部影片统一压暗了一层，底部再加一道渐暗。

全站的字几乎都用一款无衬线字体 ABCDiatype，界面上的标注、导航和正文都是它，字号小、字距松，多数时候排成大写。介绍页和联系页的大标题也用同一款字，放大到正文的五倍左右。另一款衬线字 Migra 只用在顶部那句口号和它前面的星形符号上，每一页都在，但一共只有几十个字。

颜色的规矩和字体一样，也把位置让给了影片。首页和作品页的底色是一种带一点紫的浅灰，文字是近黑色，界面自己几乎不带颜色。界面上的强调色是一种淡紫，除了底部的 cookie 提示，它只用在跟着光标走的 PLAY、PAUSE、DISCOVER 几个标签上。介绍页和联系页各换一种底色，介绍页是淡紫，联系页是浅黄，访客换一页，整页的底色也跟着变。

精致的影片之外，这个站还有一层刻意做得很随手的手绘元素。加载画面里那几道涂鸦线、作品页每一条上方的分隔线，以及介绍页和联系页小标题后面那一小段波浪，用的都是一款叫 Redacted Script 的字体。这款字体专门把任何字母都画成潦草的手写线条，站点就拿一串随便的字母来打出这些线。右下角那只猫也是一笔一笔勾出来的线稿，它系着领带，脚边放着一只公文包，打扮得像一个上班族，点它会打开公司的 Instagram。

作品页把影片和手绘这两层的对比推得最远。页面上是五列整齐的文字条目，每条上方一根细线，没有一张图。光标停在某一条上，整页背后立刻铺开那部片子的影片，四周留出一圈圆角的边。其余条目随之淡下去，只有这一条保持清楚，它上方的细线也变成一道涂鸦。

项目页换成了一种浅灰底的长文章版面。正文是小号的灰色文字，排在页面一侧，图片和视频做成大小不一的圆角卡片，左右错开地排下去。拍立得那一组照片还保留着相纸的白边，有几张被裁成了圆形。

首页的换片是整个站最主要的动作。访客推一下滚轮，当前那部片子先缩小一点，四角变圆，变成一张卡片往上滑出屏幕。下一张卡片同时从屏幕下方滑上来，再放大回满屏。左右两侧的文字也跟着上下滑开，编号、客户、片名、年份四样各晚一点出发，看起来像一串被依次推开的字。

首页的这些影片全部画在同一块铺满屏幕的画布上，用的是轻量的 WebGL 库 OGL。每部片子在画布里是一块平面，它先显示一张静帧，影片真正开始播放之后，静帧在零点二秒内淡掉，换成影片的画面。站点同一时间只加载正在显示的那一部，换走之后就把它卸掉，所以首页翻完七部，同一时刻在播的始终只有一段影片。开场的转轮、首页的换片、作品页的悬停和进入项目页时那段不中断的影片，用的都是这一块画布，所以影片在这些页面之间换位置时，画面一直是连着的。

作品页上那根变成涂鸦的线，是两层叠在一起的。下面一层是一像素的直线，上面一层是那串涂鸦字母，站点平时把它压扁到看不见。光标停上来，直线压扁消失，涂鸦从左往右展开，看起来就像那根线自己弯成了手写的样子。

项目页里有一个叫 WE SHOOT、WE GRADE、WE FLAME 的对比画面，访客可以亲手看到一个镜头是怎么一步步做出来的。站点把同一个镜头的几个制作阶段各做成一段短片，让它们同步循环播放，叠在同一个位置上，再用几根细竖线把画面分成几个区。光标停在第一区，看到的是刚拍下来、灰蒙蒙的原片，停在后面的区，就换成调过色、最后加了特效的成片。Flame 是影视后期常用的一款合成软件，WE FLAME 指的就是最后合成特效那一步。The Dazzling Division 那一页的同类画面分成四区，从灰暗的原片一步步变成色彩饱满、镜头边缘带着光晕的成片。

页面上的其他部件各有自己的动法。拍立得那一条可以按住往左右拖动。21 张图那一组是一排窄条加一张大图，访客点哪一条，哪一条就展开成大图。右下角那只猫一共有四段动画，其中两段是在整理领带。它平时在原地做一段待机动作，光标靠近时换成另一段动作，光标离开后又回到待机。整页的滚动交给平滑滚动库 Lenis，滚轮停下后页面还会顺着惯性滑一小段。

这些动作在画面上都很顺，看不出明显的卡顿。首页连着换五部片子，画面平均每秒 60 帧，超过 32 毫秒的慢帧只占千分之一。作品页、介绍页和联系页从头滚到尾，也都稳在每秒 60 帧。

打开了操作系统里减少动态效果设置的访客，在这个站上看到的和别人一样。这个设置是给容易被屏幕上的运动弄得不舒服的人用的，打开后网站应当少放动画，可 Milledollars 的开场转轮和首页换片时的滑动都照常播放。

Milledollars 用 Nuxt 搭建，它是一个基于 Vue 的网页框架。内容放在内容管理平台 Prismic 上，动画交给动画库 GSAP，首页的滚轮翻页用的是 GSAP 的 Observer 插件，它只看滚轮往哪个方向推，不让页面真的滚动。Awwwards 奖项页上的技术标签写的是另一个内容管理平台 Contentful，站上实际加载的是 Prismic。

打开一次首页要下载约 12.7 MB，其中 8.5 MB 是正在播放的那一段影片。影片都放在视频平台 Vimeo 上，按原片直接下载，分辨率从 1080p 到 2160p 不等，访客每翻到一部新的片子，就要再下载这一部的影片。除了影片，首页最大的一块下载是那只猫。它的四段动画各是一张拼满动作帧的大图，合起来约 1 MB，差不多是全站脚本加起来的四倍。

这个站开始出现画面很快，等到真正的内容出来要慢一些。服务器约 0.3 秒返回第一个字节，Google 建议在 0.8 秒以内。浏览器在 0.57 秒画出第一块内容，这比 Google 建议的 1.8 秒快得多，但那时画出来的是加载画面，第一部片子要到四秒半左右才铺满屏幕。加载过程中有四个长任务，也就是一次占住浏览器超过 50 毫秒、让页面暂时没法响应操作的脚本，合计约 0.9 秒，最长的一个约半秒。布局位移（CLS）是 0.044，低于 Google 建议的 0.1 上限，访客几乎看不到东西跳位置。

首页先给读屏软件的用户准备了一份做得不错的目录。页面声明了语言，标出了页头、导航和主体三个地标区域，还专门放了一段屏幕上看不见、只给读屏软件念的概览。这段概览用一句话介绍公司，再列出七部片子的完整片名和客户。

键盘和读屏用户真正卡住的地方，从第一次按 Tab 就开始了。焦点先落在那只猫上，它是一个没有名字的链接，读屏软件只会念出这是一个链接。焦点接着落到一个尺寸为零的标志链接上，再往后是七个叠在一起、铺满屏幕、同样没有名字的影片链接。作品页的 31 个条目同样是没有名字的链接，片名写在链接外面。项目页的 46 张图片都写了替代文字，可每一张写的都是同一个片名，读屏用户听不出这些图之间有什么不同。

这个站的页面上还有两处没收尾的文字。整个站是英文的，底部弹出的 cookie 提示却是法语，好在它给了一个一键全部拒绝的按钮。介绍页和联系页底部的 Location 一栏，标题后面只跟着一道涂鸦，没有写地址。

Awwwards 的四个分项是设计、可用性、创意和内容，每项满分 10 分。Milledollars 得分最高的是内容 Content，7.39，这和站上 31 部片子、每部都配一篇十几屏长的幕后文章是对得上的。得分最低的是可用性 Usability，7.15，首页只能靠滚轮和一条很细的进度条换片，可能是原因之一。19 位评委里多数给了 7 分上下，最低一票 6.0，最高两票 8.2 和 8.7。

Awwwards 的另一组前端开发评委给了这个站 7.01，五个分项里动画 Animations 最高，有 7.40。无障碍 Accessibility 最低，只有 6.00，对应的正是工程章里那些没有名字的链接。

FWA 早在 7 月 14 日就给了这个站 83 分，由 26 张票算出，归在设计与制作工作室、影视两类下面。团队在 FWA 上的说明只有一句话，说 MilleDollars 是一家专注高端视频制作的创意公司。

这个站的三位署名者是一个固定的合作组合。Magnetism 在 Awwwards 上的作品，Le Mans Classic、Redot、Bataclan、Cipher 都和这个站一样署了 Elisa Dubois 的名字，其中 Le Mans Classic、Redot、Bataclan 三件也署了 Ludovic Boiteux。Elisa Dubois 在 FWA 上的获奖数和 Magnetism 一样，都是 9 座，她看起来参与了这家公司几乎所有获奖的项目。