The Year of Greta

一个人一年里的经历，网页上通常做成一条从上往下滚的时间线。这个站把时间线换成了一个可以绕着走的空间，中心是 Greta 本人。站上的介绍说，这是一条带插画的时间线，讲 Greta Thunberg 在 2019 年怎样从一个人的抗议走成一场全球运动的领头人。那一年她 16 岁，一月在达沃斯对各国领导人讲话，九月在联合国的气候会议上发出呼吁，年底被《时代》杂志选为年度人物，这些事在站上都有对应的卡片。

访客进门时，先看到一个只有轮廓线的字母 g 和一个从 0 数到 100 的计数，下面是一句 Change is coming, whether you like it or not，意思是改变正在到来，不管你喜不喜欢。加载完以后，屏幕中间问访客要不要打开声音，以获得更沉浸的体验。大约十三秒后，雕像才从雾里显出来，左下角是一句站点介绍和一个 Explore 按钮。

访客点了 Explore 以后，首页的介绍和大字淡出，屏幕中间先用很大的衬线字浮出一个 Drag。这个词几秒后淡成一行 Drag or scroll to explore 的小提示，告诉访客可以拖动，也可以滚动来往下看。页面顶部有一条从 JAN 到 DEC 的细线，标出现在走到了哪个月，屏幕底部正中是这个月的英文缩写，用很大的衬线字写着。一年里一共挂着 28 张卡片，每个月一段视频，另外还有 16 张新闻卡片。一月的视频卡片写着 Our house is on fire，也就是我们的房子着火了。三月的新闻卡片写着她获得诺贝尔和平奖提名，七月的一张写着她和英国乐队 The 1975 一起发了一首歌，十二月的一张写着她被《时代》选为年度人物。

这些卡片背后接着的都是真实的报道和影像。访客点一张新闻卡片，浏览器会新开一个标签页，打开当时的原文，来源有 The Guardian、BBC、《时代》、The Verge 和德国之声等媒体。访客点一张视频卡片，屏幕会盖上一层深绿色的播放层，放那个月的一段影像，比如六月那段 25 秒的视频，是她谈儿童参与气候运动的一段采访。十二个月走完，最后一屏是一段总结，后面跟着一个 Read More 按钮，它打开的是保护国际基金会一篇讲气候变化事实的文章。

The Year of Greta 的画面主要由三样东西的颜色组成，墨绿的雾、纯白的雕像和带着绿调的黑白照片。背景是一片带灰的深绿，中间亮一些，越往边缘越暗。雕像通体是哑光的白，像一尊石膏像，只有脚下那块岩石保留了深灰色的石头纹理。新闻照片平时是灰色的，还像蒙了一层绿色的滤镜，所以整个画面看起来像同一种颜色调出来的。

做这个站的人把一个 16 岁的女孩做成了一尊纪念碑式的雕像。她穿着连帽衫和运动裤，两手插在口袋里，抬头望着远处，站在一块深色的岩石上。真人的照片只出现在四周的卡片里，站在画面中间的始终是这尊没有颜色的像，访客一路看到的新闻都围着它转。

首页上 Greta Thunberg 两个大字、Explore 按钮、底部的月份和加载时的计数，用的都是一款笔画很粗的衬线展示字体 US Blaak。首页那两个大字颜色只比背景深一点，压在雾的前面、雕像的后面，所以雕像会挡住其中几个字母。这样的前后关系是做出来的，页面上叠着两块画布，雾画在下面一块，雕像画在上面一块，两块中间夹着网页上的文字。介绍、社交链接和顶部的月份标签这些小字，用的是几何感的无衬线字体 Brown，卡片上的标题则写成和月份一样的衬线字。

卡片本身也排得不整齐，它们大小不一，高低和远近各不相同。有的卡片离镜头很近，有的远远地斜立在雾里，还有几张带着一点弧度，像一张被风吹弯的纸。卡片上的标题用白色的衬线字写成，常常伸出照片的左边缘一截，压在雾上。

整个站最主要的动作是镜头绕着雕像转。访客滚动滚轮或者按住拖动，镜头就沿着一个圈往前走，滚轮大约推两下翻过一个月。每到一个月，镜头停在一个新的角度，那个月的卡片从雾里移到眼前，上一个月的卡片退到身后。一月时镜头正对着她，六月已经转到她的背后，到十二月又绕到她的侧面。镜头连续绕着雕像转过一年，画面平均每秒 60 帧，超过 32 毫秒的慢帧只占千分之三。打开了系统里减少动态效果设置的访客，看到的转动和别人一样，站点没有为这个设置做任何调整。

光标移到一张卡片上，卡片就从带绿调的灰色变回原本的彩色，光标也同时变成一只手。整片雾里只有光标碰到的这一张是彩色的，访客一眼就能看出自己选中了哪一张。

The Year of Greta 的三维画面用三维库 three.js 来画，动画交给动画库 GSAP，页面的结构用的是一套比较老的前端框架 Backbone.js，背景音乐交给音频库 Howler.js。打开首页要下载约 12.7 MB，其中最大的一个文件就是那尊雕像的模型，约 4.3 MB。第二大的是一张约 1.4 MB 的环境光照片，雕像表面那层柔和的明暗就来自它，它是一张拍下四周所有方向光线的全景照片，三维场景用它来给物体打光。岩石的两张纹理图合起来约 2.5 MB，28 张卡片的封面图在进门时就全部下载好了，约 2.9 MB。

体积最大的视频和音乐，都要等访客点了才下载。十二段视频合起来约 40 MB，访客点开哪一段才下载哪一段。背景音乐约 2.8 MB，访客同意打开声音以后才开始下载，没有点过的访客不会被突然放出的音乐吓到。

Greta 的雕像要等十几秒才出现，页面本身的第一笔却画得很快。服务器在 0.02 到 0.03 秒之间就返回第一个字节，远好于 Google 建议的 0.8 秒。浏览器在 0.32 到 0.5 秒之间画出第一块内容，快于建议的 1.8 秒，但这时出现的只是左上角的名字和那个加载用的 g，雕像要到大约十三秒才显出来。加载时有四五个长任务，也就是一次占住浏览器超过 50 毫秒、让页面暂时没法响应操作的脚本，合计约 0.8 秒，最长的一个约 0.6 秒。布局位移（CLS）是 0，页面上没有东西跳位置。

下面那块画雾的画布，是按屏幕两倍的宽和两倍的高来画的，在一块全高清屏幕上，它实际画的像素是屏幕的四倍。上面那块画雕像和卡片的画布则按屏幕原本的大小来画。下面这块画布每一帧要画的像素因此是原来的四倍，而雾本身是一片柔和的渐变，画得再细，眼睛也看不出多少差别。

这个站几乎没有给只用键盘或读屏软件的访客留路。28 张卡片全部画在画布里，键盘碰不到任何一张，方向键、翻页键和空格也都翻不动月份。访客按 Tab 时，焦点只会走过声音按钮、三个社交链接、左上角的名字和 Explore，再落到最后那个还没出现的 Read More 上。这几个链接和按钮在样式表里去掉了浏览器默认的焦点框。整页没有一级标题，读屏软件读到的只有那句介绍和几个按钮的名字。

评委给 The Year of Greta 打分最高的一项是创意 Creativity，8.46，把一年的新闻排在一尊可以绕着转的雕像四周，这个想法很可能就是原因。Awwwards 的评分一共四项，另外三项是设计、可用性和内容，每项满分 10 分。得分最低的是可用性 Usability，7.39，月份只能靠滚动或拖动去找，键盘完全翻不动，可能是原因之一。这个站后来又被评为 Awwwards 2 月的月度最佳。

开发评委给 The Year of Greta 的是 6.96 分，比开发奖要求的 7 分差了一点。五个分项里动画 Animations 最高，有 8.60，无障碍 Accessibility 最低，只有 6.00，对应的正是工程章里键盘碰不到卡片的问题。

比 Awwwards 早十一天，FWA 在 2 月 15 日就给了这个站 82 分，由 24 张票算出，归在教育、资源与社区和其他三类下面。团队在 FWA 上的说明只有一句，说这是一个自发项目，讲 Greta Thunberg 在 2019 年从一个人的抗议走成全球运动领头人的时间线。

Superhero Cheesecake 是 Awwwards 和 FWA 上的常客，至今拿过 35 次 Awwwards 当日站和 68 座 FWA 奖。它在 Awwwards 上唯一一次月度最佳就是这个站，资料页上列出的作品还有时装品牌 Viktor&Rolf 和 Gucci 的网站。Colorbleed 只在 FWA 上署了名，资料里没有写它在这个项目里负责哪一部分。