KPR

KPR 发行的是一套一万个的数字藏品，每个 Keeper 都由四百多件手绘素材拼成。Resn 在 Awwwards 的月度最佳文章里写到，Resn 要给 KPR 做一个线上的家，这是一个有完整故事的、活着的世界，藏品让访客也能参与到故事里，网站还要让 KPR 在 Web3 领域显得可信。团队的设计参考是未来感的海报和漫画分镜，并把每一个藏品都当成通往这个世界的入口。

这个站的首页像一本先讲设定、再展示角色、最后带你逛世界的画册。第一段是项目本身，说这是一个熟悉的世界，却走上了另一条路，接着两屏铺满天空的画面说访客就是拥有力量的 Keeper，要决定守护还是破坏。第二段用一个巨大的 10K 介绍一万个藏品，一排人物卡片像一副摊开的牌。后面三段各配一幅大插画，依次是储存所有知识的要塞 The Keep、两个派系，以及能源 Kai 被发现后的世界。首页最后是一行巨大的 KEEPERS，问访客要走哪一条路，页脚再用一个巨大的 KPR 标志收尾。

故事的深度藏在按住之后的第二层里。三幅大插画在滚动时只配一两句说明，访客在派系和世界两幅画上按住鼠标，才看得到这一段的设定，比如两个派系的口号、角色的扫描像和这个世界里的日常物件。团队在文章里写到，这一层让访客一瞥 New Eden 的地理、派系和生活方式。主线因此可以保持画册的节奏，想深入的访客自己去按。

KPR 页面顶部的导航可以直接跳到项目、要塞、派系和世界四段，左上角的菜单通往 Story、Protocol、Journal、Media、Gallery 和 About 几个页面，菜单底部还有 Twitter、Discord 和 OpenSea 交易平台的入口。右上角的 SIGN IN 打开一个写着 Welcome back Keeper 的登录窗口，可以用邮箱或者 Google 账号登录。

KPR 的画面在两种气氛之间切换，项目、藏品和结尾几段是白底或者淡紫色（#968ADF）的底，排着粗黑的标题、小段文字和几张插画卡片，留白很多，像一本排得很松的画册。插画在要塞、派系和世界三段里则铺满整个屏幕，画面以紫色、粉色和青绿色为主，光线像是黄昏。团队在文章里写到，设计上强调网格、留白和粗重的字体，要的是一种干净的未来感。

这个站最显眼的规矩是卡片的形状。KPR 几乎把每一张插画都装在一张圆角卡片里，卡片的一条边上有一个像文件夹标签那样的台阶，或者切掉一个斜角。右上角的 SIGN IN 按钮、登录窗口和按住之后弹出的扫描框也用同样的台阶和切角，所以整个站像是同一套界面里的不同窗口，大插画在交接时缩成的也正是这种卡片。

KPR 的文字用了三款字体，各管一种用途。大标题用 ABC Whyte Plus，团队在文章里写到，这款字的字宽可以调节，还有墨阱（ink trap）的设置，也就是笔画交汇处挖出的小缺口，让大号的字更有辨识度，和标志放在一起也协调。标题的字距收得很紧，在样式里是负 0.02 到负 0.1 个字宽，行距只有字号的 0.85 倍，几行字压得很实。导航、编号和说明用 IBM Plex Mono 等宽字体，全部大写，写着 01K、02P 这样的编号，读起来像终端里的标签。KEEPERS 和 KPR 这几个巨大的词另外用了一款方块感很强的字体 Hexaframe，和品牌标志是同一种样子。

这个站的整套版面按屏幕宽度等比例缩放。网站把根字号设成屏幕宽度的 0.625%，在 6.4 到 12 像素之间，版面上几乎所有的尺寸都按这个根字号来写。首页那三行大字因此在 1920 像素宽的屏幕上是 212 像素，到 1366 像素宽缩成 151 像素，在平板上是 91 像素，比例一直不变。手机上根字号换成屏幕宽度的 2.667%，大字是 56 像素，正文反而比平板上大一些，方便阅读。

访客按住之后，第二层换成了一套扫描仪的界面。插画整体压暗，左边竖着一行巨大的 2 FACTIONS 或 THE WORLD，屏幕上弹出几个带切角的扫描框，框里写着 ANIMUS CHARACTER SCAN 这样的等宽小字，配着三角形的准星、坐标和读数。光标在大插画上时会被隐藏，换成一个写着 HOLD 的细线圆环，两边各有一个小箭头。

KPR 在手机上把版面排成一栏，页头是 KPR 标志、菜单按钮和带切角的 SIGN IN，标题、插画卡片和说明一段一段往下叠，扇形的人物卡片缩到一屏宽，大插画仍然用卡片形状交接。大插画下方的提示从桌面的按住换成了 TAP & HOLD，也就是用手指点住不放。

KPR 的开场把品牌标志做成了一段动画。打开网站时，屏幕先是一片白，一行 LOADING 跟着百分比走，旁边滚动着一串像档案路径一样的地址。巨大的 KPR 标志随后从一片竖条纹里拼出来，字母的边缘像墨水一样渗开、融合，最后变成干净的黑色字形。标志里接着打开一个窗口，透出开场角色的画面，窗口越开越大，角色铺满整个屏幕，三行大字才出现，整个过程大约 8.5 秒。

这个站首页的滚动带着一点延迟，访客停手之后，页面还会顺着惯性滑一小段，不到一秒才停住。访客点顶部导航跳到某一段时，页面会自己滚过去，距离越远用时越长，跳过十屏左右大约要三秒，起步快、到站前慢下来。每一段的说明文字跟着滚动出场，每一行从稍低一点的位置升上来，同时淡入，行与行之间错开一点，先快后慢地停在原位。这一段快要滚动完时，文字再一行行往上淡出。访客的光标在大插画上移动时，三维相机会跟着光标绕着画面中心转一个很小的角度，插画的几层前后错开，带出一点景深。

在讲完你是一位 Keeper 之后，页面用一段像素故障的过渡换场。画面碎成一排排黑白的方块和线段，中间一个白色的十字准星，再从故障里露出下一段的剪影画面。导航、按钮、菜单和页脚里的等宽小字也带着同一种故障感，它们出场时一个字一个字地“解码”出来，每个字前面先闪过两个随机字母，每个字约 0.04 秒，手机上则直接显示整行文字。光标移到菜单项和按钮上时，网站还会响起一声短促的提示音。

三幅大插画之间的交接是全站最主要的动作。访客往下滚动时，要塞那幅画先缩小成一张紫色调的卡片，带着它的折角往上滑出屏幕，同时微微倾斜，像是在空间里翻转。派系那幅画以另一张卡片的样子从屏幕下方升上来，越升越大，最后铺满整个画面。插画本身也一直在动，角色身上的光、手中的能量和天上的光束都在循环播放。

访客按住后打开的第二层有一套自己的节奏，访客按下鼠标的一瞬间，界面的外壳先收起来，左边的大字一个字一个字地拼出来，画面在半秒内提亮并推近一步，之后再用 8 秒慢慢地继续推近，同时有一段 2 秒的闪烁。扫描框弹出之后，框里的物件在访客按住期间一直轮换，派系那一层轮换着雕像、小瓶、手套和眼镜，世界那一层轮换着房子、饮料、硬币和面盒。访客按住时，相机跟着光标转动的幅度缩到很小，画面几乎静止。访客一松手，曝光在 1 秒内退回，推近在 0.8 秒内复原，画面回到原来的插画。手机上，手指点住约 0.05 秒之后才进入第二层，以免和滑动混淆。

KPR 的声音在访客第一次点击页面之后开始播放，每一段插画都有自己的配乐，背后一直铺着一层风声，左下角的按钮可以关掉声音。每段配乐先放一段开头再进入循环，进场时用五秒慢慢淡入，滚到下一段时，旧的配乐淡出停下，中间插进一声转场音效，风声的音量也跟着滚动进度起落。访客按住打开第二层时，配乐在 0.2 秒内降到七成音量，松手后再用一秒恢复。

连续滚动全页时，画面基本保持在每秒 60 帧。访客按住打开第二层时，画面会掉到每秒 43 帧左右，松手后马上回到 60 帧。

KPR 用 Nuxt 搭成，内容来自 Storyblok，滚动交给 GSAP 的 ScrollSmoother。内容装在一个固定的 smooth-wrapper 里，跟着平滑后的滚动位置整体位移，手机的触屏滚动也做了同样的平滑，各段的动画由 ScrollTrigger 挂在滚动进度上。页面上铺着一块 three.js r150 的 WebGL2 画布，大多数插画图片元素本身是透明的，访客看到的插画由画布按照这些元素的位置画出来，所以卡片能在空间里倾斜、缩放和交接。

卡片里透出另一个场景，靠的是模板缓冲。团队在文章里写到，团队用模板缓冲把一个三维场景遮罩在另一个场景里，所有的窗口、卡片翻转和第二层的窗口都是这样做的。网站分两趟绘制，第一趟只把卡片或窗口的形状写进模板缓冲，不画任何颜色，第二趟只在模板值等于 1 的地方画另一个场景。团队写到，这样做还顺便提升了性能，渲染器直接丢掉遮罩以外的像素，藏在后面的场景根本不用渲染。

大插画缩成卡片交接的那一段也画在画布里。插画先渲染进一张离屏贴图，几张卡片各是一块平面，用卡片形状的遮罩裁出轮廓，再从这张贴图里各取一块画面。每张卡片都有自己的起点、终点和缩放曲线，进度按滚动了几屏来计算，卡片在每一屏滚动的后半段才朝镜头飞近，所以几张卡片会错开着移动。页面元素的位置只在窗口尺寸变化时量一次，之后每一帧按滚动位置推算，画布里的插画因此和页面上的文字对得很齐。三维镜头的视角只有约 23 度，像一支长焦镜头，几层插画在镜头转动时只错开一点，画面不会像广角那样变形。

KPR 在代码里把要塞、派系和世界几段大插画叫作 tableau，每一段是一个分层的 glTF 场景，几层插画在三维空间里前后摆开，相机一动就带出视差。场景里还叠着按每秒 25 帧播放的精灵图动画，角色身上的光、手中的能量和天上的光束都靠它循环，此外还有光线和天光的特效。场景文件放在 etc1s 目录下，贴图是 ETC1S 压缩的 KTX2 格式，按设备准备了三档，桌面用 2048 像素的一档，平板用 1024 像素，手机用一个 mobile-fallback 版本，连精灵图动画都省掉了。

开场标志和第二层用的是现成的动画工具加取巧的程序。团队在文章里写到，标志的渐变显现是在 After Effects 里用不同透明度的帧叠出来的，代码读取颜色值，再挑出对应的那一帧。标志周围那种渗开、融合的效果，用的是一张精灵图加有符号距离场。第二层的动画序列和版面先用 After Effects 的 Quick Exporter 导出，再在 WebGL 和 HTML 里做动画，扫描框会按版面自动调整位置和大小，而且只用 CSS 变换，以保住性能。框里转动的标志和扫描像是 19 段静音循环播放的 webm 短片，声音则由 Howler 播放，一共 20 个 mp3 文件。

KPR 的下载量按设备差得很多，桌面打开首页时，加载画面后面一次下载约 49 MB，其中 glTF 场景约 20.7 MB，KTX2 贴图约 15 MB，声音约 7.5 MB，滚到页尾时还会再加载一段约 8.9 MB 的地形影片，总共约 60 MB。平板下载约 44 MB，手机只下载约 23 MB，手机和平板的画布都按 1.5 倍像素比绘制，桌面按 1 倍。登录窗口是另一个用 React 写的组件，脚本单独约 1.9 MB，打开首页时就一起下载了。

网站的服务器要 1.5 到 1.7 秒才开始返回页面，屏幕第一次出现内容在 2.0 到 2.1 秒，那时是加载画面，首页的角色约 8.5 秒才完整出现。测量工具读到的画面跳动很大，原因是页脚在大约 2.4 秒时挪了一次位置，那时加载画面还盖着整个页面，访客看不到这次跳动，加载期间页面最长也只卡住约 0.1 秒。访客按住时画面掉到每秒 43 帧，很可能是因为第二层一边播放几段 webm 短片，一边用 CSS 变换移动扫描框，同时插画还在继续渲染。

这个站的文字都是网页上的文字，读屏软件读得到标题和正文，但插画都没有文字说明，菜单按钮和声音按钮也没有名字。键盘的 Tab 键只在顶部导航、菜单按钮和声音按钮之间打转，进不了正文。Page Down 和下方向键可以往下滚动，空格键却没有反应。网站不读取系统里减少动态效果的设置，卡片的交接和插画的动画都照常播放。

KPR 是 Awwwards 2022 年的年度最佳，评委从这一年的十二个月度最佳和团队另选的几个当日最佳里选出了它。它在 FWA 拿到的是当日最佳和 2023 年 1 月的月度最佳，FWA 给它打了 85 分，归入艺术插画与展览、NFT 和元宇宙三个类别。

在 Awwwards 的四项分数里，KPR 的创意 Creativity 最高，为 8.43 分，插画卡片在滚动中交接、按住后切换成扫描画面，这几样做法可能是创意分高的原因。可用性 Usability 最低，为 7.47 分，加载要等上八九秒，键盘又进不了正文，这些都可能拉低了这一项。开发奖的五位评委给出 7.61 分，动画 Animations 最高，为 9.60 分，无障碍 Accessibility 最低，为 6.00 分，和工程章里键盘进不了正文、插画没有文字说明正好对应。

KPR 在两个平台上的署名都只有 Resn 一家，网站的设计、动画和开发都出自这家代理商。算到写报告时为止，Resn 在 Awwwards 上拿过 62 次当日最佳和 2 次年度最佳，在 FWA 上获奖 146 次，2 次年度最佳里就包括这个站和 2020 年的 Corn Revolutionized。