A24

A24 自己的官网是按流媒体的方式组织的，作品一格一格排着，点进去看简介。Klaassens 没有照这个做，他把每部电影退回成一张可以拿在手上的碟。

打开是一片浅灰底色，正中偏右立着一张碟，微微侧倾，能看见盘面的反光和内圈的塑料圆环。左上角一块很小的信息区，用细线分成三行：DIRECTED BY、YEAR、STARRING。碟的正下方是五颗星和一句引语，引语上面印着出处，比如 THE PLAYLIST、ROGEREBERT.COM。

推滚轮，页面本身一动不动，动的是这排碟。它们横着滑过去，靠近中心的那张变大，远处的缩小并且转到更斜的角度。左上角的信息随着焦点切换，底下的引语也跟着换。

盘面用的是每部电影真实的碟片设计，不是海报缩略图。这一步是整个项目成立的关键。海报是给墙看的，盘面是给手看的，它要考虑内圈的孔、要绕着圆周排文字、要在很小的面积里放完主演名单。把这些盘面拿出来当主视觉，等于把一整套被流媒体淘汰掉的平面设计重新摆上台面。

点一张碟进去，是一个真正的页面路由，地址形如 /production/ex-machina。这一页的信息组织仍然照着实体碟的规矩：导演、编剧、主演、年份、类型、语言、片长，一行一行排成表格，底下两个按钮写着 WATCH ONLINE 和 GET IN BLU-RAY。蓝光这个选项放在这里不是怀旧的装饰，它是这套概念的落点。

这个做法也有它够不着的地方。碟只有十二张，而 A24 的片库远不止这些，所以它是一份精选而不是一份目录。顶上那个下拉写着 Index 12，等于直接承认了这一点。

三款字，各自的岗位分得很死。

展示字 PPEiko 是一款对比强烈的衬线，全站只写了 146 个字符，字号最大到 160px。正文字 PPNeueMontreal 写了 3,597 个字符，字号全部落在 10 到 18px 之间。第三款 PPMuseum 只写了 50 个字符，而且每一个都是 10px。

把渲染面积算出来，反差就出来了。146 个字符的衬线占掉 67,349 平方像素，3,597 个字符的无衬线占 64,304。也就是说，占全站字数 3.8% 的那些大字，吃掉的画面比所有正文加起来还多一点。

最见功夫的是第三款字的用法。PPMuseum 那 50 个字符全部是 10px 的小标签，DIRECTED BY、WRITTEN BY、STARRING、YEAR、GENRE、RUNTIME 这一类。这些词在实体碟的封底上就是用一款专门的小号字排的，它们不是内容，是内容的名牌。这个站给它们单独配了一款字，等于把封底那套排版规矩原样搬了过来。

颜色只有三种在真正工作。黑色用在 602 个元素上，底色那个浅灰 #f2f2f2 用在 6 个，还有一种偏暖的灰 rgb(214, 211, 209) 用在 55 个。整站 663 个元素里只有 6 个带圆角。

页面的分隔全靠细线。影片页上，标题和信息表之间是一条通栏的细线，表格每一行之间也是细线，四角还点着十字形的裁切标记。这是印刷品的做法，不是网页的做法，而它和碟片这个主题是同一个来源。

版面里唯一出现整幅彩色的地方是影片剧照。画面铺满整屏，标题那句宣传语被拆成三段压在上面，每一段各自坐在一条细线上，左右错开。这里的字是浅色的，压在暗的剧照上，和上面那半屏浅灰形成整个页面唯一一次明暗翻转。

主交互只有一个，横着推。

滚轮被接管过去，用来推动碟片横向移动，文档的 scrollY 始终是 0。按住拖也能推，松手之后有惯性。碟片在移动中不只是平移，它们同时在改变大小和倾角，离焦点越远越小越斜，所以这排碟读起来是有纵深的，不是一条平铺的传送带。

驱动这一层的是 three.js r178 加 GSAP，页面切换走 Barba，平滑滚动用 Lenis。注意这个分工。首页不滚动，Lenis 在那里没事干。进了影片页之后文档变成 3,738 像素高、四屏左右，Lenis 才开始工作。同一个站里两种滚动模型，各管一块。

减弱动画这一项做得比大多数站认真。样式表里有四个对应的规则块，而第一个的选择器就是 *, ::before, ::after，等于一把总闸，把所有元素的过渡和动画一次性压掉。剩下三个分别管加载指示器、预告片弹层和滚动提示。

想学这一手的人要注意它的边界。总闸关得掉 CSS 动画，关不掉画布里的渲染循环。开了这个设置之后画布还在，碟片仍然可以推。真正要做全，还得在脚本里读一次这个偏好，把画布那一层也降下来。

站点用 Astro 构建，画面这一层是一块 1920×945 的 WebGL2 画布，three.js r178 驱动，渲染尺寸和显示尺寸 1 比 1，没有超采样。

最值得说的是体积。一次访问只传 1.3 MB，21 个文件。其中碟片图七张 webp 共 1,034 KB，字体三个 woff2 共 245 KB，一张做颗粒的 avif 35 KB，剩下是脚本和样式。

这个数字能压下来，靠的是一个判断，碟片不需要三维模型。盘面是平的，所以七张平面图贴到简单的圆形几何体上，倾角和缩放交给变换矩阵，光泽交给材质。如果改用真实的三维碟模型加一整套贴图，同样的画面轻松就是几十兆。想做实物展示的人可以记住这条边界。物体本身是平的或者接近平的时候，贴图加变换就够了，上模型是浪费。

碟片图走的是 Bunny 的 CDN，文件名后面带着版本号，改一版换一个号，缓存策略是干净的。

首屏也快，首字节 251 毫秒，首次内容绘制 412 毫秒。累计布局偏移 0.0022，分散在 11 次很小的位移里，基本感觉不到。

不过有一处是硬伤。加载过程里出现了一个 1,162 毫秒的长任务，整整一秒多主线程被占住，这期间点击和滚轮都不会有反应。最大内容绘制也因此拖到 4,344 毫秒才定下来。首屏的字出得很快，但真正能上手，要等这一秒过去。这类长任务通常来自一次性初始化整个场景，拆成几段分帧做就能把它打散。

无障碍上有做对的地方。页面声明了语言，有导航和主内容两个地标，样式表里有 21 条焦点规则，键盘走到哪里看得见。没做对的是 33 个可交互控件里有 12 个 <a> 没有可访问的名字，读屏器念到它们只会说这是一个链接。另外影片页上出现了十二个二级标题之后才出现一级标题，层级顺序是倒的。

FWA 不给分项，只登了作者自己写的一句介绍，他把这个项目定义成一次实验性的、非商业的尝试，用三维碟片的形式重新讲 A24 的片库，重点在发现那些代表作。

这句话里最关键的是非商业三个字。这不是 A24 委托的项目，也没有客户在中间提要求，所以它可以只做十二部片、可以把蓝光按钮放上去、可以不做搜索和筛选。一份没有客户的作品集项目能走到什么程度，这个站是个样本。

只有一个署名，设计和开发都是他。他在 FWA 主页上把自己的实践写成 R—K，一家独立的设计与开发工作室，专做品牌的数字呈现，联系方式那一栏写着没有办公室。

这是他的第二座 FWA，上一座是他自己的工作室站点 R—K Design & Code，82 分。两个作品都是自己的东西，一个是自我介绍，一个是能力演示。

Awwwards 上查不到它，站点自己也没挂任何获奖徽章。