Kinoria

网站介绍的 KINORIA 135 是一台虚构的胶片相机，一卷能拍 36 张，用镜间快门和黄铜机身，没有电池，也没有测光表。作者在 FWA 上写的创作说明是，手机让人什么都拍下来、事后再挑，Kinoria 想把选择放回快门按下之前。说明里还说，这个站要让访客亲身体会这些规矩，而不是读到这些规矩。这个网站的主角因此不是一页产品介绍，而是一趟有限制的拍摄，访客只有四张，没有预览，也不能重来。

访客每次打开网站，先看到的是从相机取景器里往外看的画面，取景器下方那条测光刻度兼作加载进度。加载完成后，首屏是一台相机摆在一张深色木桌上，周围散着冲好的照片、显影盘和放大镜，KINORIA 几个大字压在相机后面，右侧写着 ONLY A CAMERA。访客往下滚，一个用英文单词拼出来的数字从 ZERO 一路数到 THIRTY-SIX，后面的词从 EXPOSURES 换成 DECISIONS。相机接着转到不同的角度，镜头、过片扳手、胶卷仓等七个部件依次配上一两句短话，比如镜头那一条写的是 40 毫米 f/2，边缘的柔和就是边缘本来的样子。这一段的最后，一只手托起相机，上方亮起发光的 EXPOSED。

介绍相机的这一段之后，访客要先挑一卷胶卷。桌上立着 100、200、400、1600 四卷胶卷，大标题写着 THIS ROLL IS YOUR STORY，下方提醒一旦装进去就不能反悔。访客点一下某一卷，它就被拿起来，大标题、副标题和墙上那张森林照片都换成这卷胶卷的样子。以 1600 那卷为例，标题变成 WILD GRAIN，说明写着颗粒最粗、颜色偏冷，墙上的照片也立刻布满粗颗粒。访客再点一下，这卷胶卷才装进相机。

胶卷装好后，画面进入一个圆形的取景器，里面是四段真实拍摄的影片场景，有森林公园里的一只金毛犬、一间舞蹈室里的芭蕾舞者、夜里的时代广场和皇后区的一个地铁站。每个场景都标着自己的地点、日期、时间和镜头，比如时代广场那一段写的是 135 毫米 f/2，晚上 9 点 14 分。访客按住右键拖动可以转动相机，按放大键可以拉近，点一下就拍下一张，按住不放则让快门开得更久。每拍一张，取景器上就显示 LOCKED，访客看不到刚才拍了什么。访客要是一张都不想拍，一路往下滚也可以，站点会替他把这一卷的四张拍完。

拍完之后，四张相纸落进一间暗房慢慢显影，然后进入存档页。存档页的标题写着 Everybody else's photographs，意思是这里是其他人的照片，访客自己的四张也在其中。页面上，每个场景都被很多张不同取景的小照片拼成一面弧形的墙，顶上写着照片总数和最近一张是几分钟前拍的。访客可以拖动看四周，也可以点进某一个场景。存档之后是一页关于作者的介绍，最后是页尾的署名。

Kinoria 的整个画面像一间夜里的暗房，底色近乎全黑，光线是暖黄的低光，画面里的东西大多是胶片摄影会用到的实物。首屏的木桌、挑胶卷时的工作台、显影时的托盘和安全灯，以及到处出现的胶卷罐、相纸和照片，都是这个题材里本来就有的物件。除了取景器那一屏，界面上几乎没有常见的按钮和卡片，访客要操作的东西，大多就是这些物件本身。

全站的文字几乎都出自 Archivo 这一个字族，作者却把它用在两个极端上。大标题是笔画很粗的大写字母，KINORIA、EXPOSED、THIS ROLL IS YOUR STORY 这些词差不多占满半个屏幕宽。说明文字则是很细很小的同一款字，排在画面的边上。大标题和说明之间的字号差得很远，所以每一屏都有一句话特别醒目，其余的文字都在小声补充。

颜色上，大字是带一点暖的米白，和暖黑的底色配在一起。一部分小字，以及取景器里的读数、剩余张数和按钮，换成了琥珀色，看起来像旧相机上发光的刻度。另一种颜色是一点绿，它出现在相机顶上的快门按钮、首屏 Look closer 里的 closer 一词，以及光标停在可选的胶卷上时，光标中间那个变绿的小点。

在整个站里，取景器那一屏最像一件精密的仪器。圆形的取景画面嵌在一圈镜头环里，环上刻着 KINORIA VISUAL ARCHIVE 和 EVERY FRAME ONLY ONCE 两行小字，四周是一圈刻度。右侧是一张拍摄记录，依次列出地点、日期、时间、镜头和胶卷，下面三行写着 EVERYONE GETS THIS SCENE. NOT THIS FRAME.，意思是每个人拿到的是同一个场景，拍下的却不是同一张。左侧竖排着四个场景的缩略图，底部是 How to use 按钮和剩余张数，张数旁边画着四个小圆圈，拍一张就填满一个。取景画面里另有一个琥珀色的小方框，标出的是底片真正会留下的范围。介绍相机的那几条短话里也有一条说过，取景器看到的比底片留下的多。

首屏的相机和桌面是用两种不同的做法做出来的。首屏那张桌子和散在上面的照片是一整张事先做好的图，相机则是放在上面实时渲染的三维模型，所以访客往下滚时，相机可以单独转动。托着相机的那只手、四卷胶卷、暗房里的相纸，也都是做得很写实的三维物件，胶卷罐在桌面上还有倒影。

这个站的大部分动作都由滚动推着走。访客往下滚，桌上的相机被拉近，转到不同的角度，每转到一个部件就停一下，旁边浮出那条短话。前面那串英文数字也是随滚动一格一格往上跳的，访客滚得快，它就数得快。

访客挑胶卷时的两次点击，各自带着一段动画。第一次点击，那卷胶卷从桌上升起来，大标题的两个词换掉，墙上那张照片同时换上这卷胶卷的颗粒和颜色，访客等于在装胶卷之前先看到了它的效果。第二次点击，胶卷装进相机，画面接着切进圆形的取景器。

取景器里最有意思的一个动作是按住快门。访客按住不放，底部剩余张数旁边的快门读数从 1/30 慢慢降到 1/8、1/2，再到 1 秒，这段时间里场景里移动的东西都会拖出虚影。访客在时代广场那一段按住一会儿再松开，路口的车灯就拖成了长长的光带。每拍完一张，取景框显示 LOCKED 之后要过一会儿才回到可以拍的状态。访客这时候再点，画面会提示 Not while the scene turns，意思是场景还在切换，暂时不能拍。

暗房那一段把等待做成了一场倒计时。镜头先贴着相机的机身移过去，接着四张空白的相纸在黑暗中旋转着落下，标题写着 FOUR MINUTES IN THE DARK.。一盏暖黄的安全灯随后亮起，相纸躺进显影液里，画面一张张浮现出来，水面上还有晃动的光纹。每显出一张，标题 FOUR 就少一个字母，从 FOUR 变成 FOU、FO、F，下面那句话里的数字也从 THE OTHER 36 ARE OUT THERE 一路减到 32。一卷胶卷能拍 36 张，这里用掉了四张，这句话的意思大概是剩下的 32 张留给访客自己去外面拍。

到了存档页，访客自己拍的四张会带着白边落到墙上，顶上的照片总数随之跳一下，变成琥珀色。访客再往下滚到页尾，一堆胶卷罐从屏幕上方掉下来，互相碰撞着越堆越高。站点为这一段载入了物理引擎 Rapier，胶卷罐怎么弹、怎么堆都是实时算出来的。

Kinoria 的这些动作在滚动时大多很顺，看不出卡顿。整段故事从载入完成开始一路滚下来，绝大部分时间都稳在每秒 60 帧，也就是普通屏幕能显示的最高帧率。慢的只有刚载入完的那一小段，这段掉到每秒约 31 帧，最慢的一帧要卡约 0.4 秒，那时页面还在载入后面要用的模型和图片。

Kinoria 没有用网页框架，主体是作者按相机、取景器、暗房、存档这几段分开写的一组脚本。三维部分用 three.js 渲染，模型的贴图存成一种显卡能直接读取的压缩格式（KTX2）。网站放在托管平台 Vercel 上，关于作者的那一页是另一个独立网页，用内嵌框架放进来。

Kinoria 第一次打开、还没开始滚动时，访客就要下载约 18 MB，其中最大的一个文件是那台相机的三维模型，5 MB。完整走完一趟，从介绍、挑胶卷、拍照、暗房一直到存档，一共要下载约 116 MB。这 116 MB 里最大的一类是约 41 MB 的逐帧图片，它们是事先渲染好的一张张画面，连起来播放镜头推进这类连续镜头。其余的大头是四段场景影片和各个三维模型。

访客打开网站之后，要等上好几秒才看到桌上的相机。服务器响应很快，第一个字节 0.03 秒左右就到了。浏览器画出第一块内容（首次内容绘制）的时间却不稳定，快的时候 0.88 秒，慢的时候 2.2 秒，超过了 Google 建议的 1.8 秒。这第一块内容还只是一片黑，取景器样子的加载画面大约 3 秒出现，桌上的相机要到 6.5 秒左右才出现。加载过程中，脚本好几次一口气占住浏览器超过 50 毫秒（长任务），加起来两秒多，最长的一次超过半秒，这些时候页面没法响应操作。画面出现之后没有东西跳位置，布局位移（CLS）是 0。

存档页的标题说墙上是其他人的照片，这和墙上实际的照片并不完全一致。访客自己的四张确实会落到墙上，墙上其余的照片却不是别的访客拍的，而是来自站点上四份固定的清单，每个场景 340 张。清单里的每一张都是从场景影片里按事先定好的时间点、位置、放大倍数和胶卷裁出来的，也不会随访客增加。访客拍完一卷时，站点只向服务器报告拍完了一卷，照片本身没有传上去。顶上的总数也不全是真实的，它从一个固定的数开始，按时间往上加，再加上真实访客拍完的卷数。

Kinoria 对两类访客各照顾到了一部分，一类是对屏幕上的运动敏感的人，一类是只用键盘的人。访客如果对运动敏感，在系统里打开减少动态效果之后，首屏的标题和说明会直接出现，不再逐行淡入。用键盘的访客能走完整段故事，按 Tab 键时焦点在左侧的字标、导航链接和声音开关之间循环，每一处都套着一圈清楚的米色描边，下翻页键和方向键能推着故事往前走。可挑胶卷和按快门都只能用鼠标，在取景器里按空格或回车，剩余张数都不会变。

读屏软件的用户则很难摸清这个页面的结构。页面声明了英文，但没有一级标题，读屏软件用来跳转的地标区域也只有导航一个。首屏的图片替代文字全部留空，读屏软件会把它们当成装饰跳过。

FWA 给 Kinoria 打了 82 分，归在实验、好玩可玩和摄影三类下面，并注明适合用电脑浏览。这和作者的个人作品集 8 月拿到的 FWA 当日站分数一样，也是 82 分。

Kinoria 是 Seunghyuk Kim 在 FWA 上拿到的第二个奖，前一个奖给的就是上面提到的个人作品集。那个作品集是一个由一个方块展开成一整片作品星系的连续空间，还拿到过 Awwwards 的荣誉提名。网站页尾写着这个项目由他一个人完成，从概念、美术指导到设计和开发都是他自己做的。