INHERITED

INHERITED 是一支 2016 年成立的死核和金属核乐队，三名成员里两位来自墨西哥，一位来自哥伦比亚。这个站没有巡演日期、商店和新闻，它只回答两个问题，这三个人是谁，他们最新的歌是哪一首。整页网页文字加起来只有几百个字母，剩下的全交给照片和短片。

INHERITED 的加载画面是一段黑白的短片，画面模糊得几乎认不出人形。加载走完，首屏从下往上升到位，三名成员站在一面红墙前，乐队名的四截字母压在他们身上，右下方写着成立年份和曲风。顶部有一条细细的导航，Contact us 在中间偏右，Home、Band Members 和 Records 叠在右上角，底部一直固定着 Spotify、Instagram 和 TikTok 三个链接。

访客往下滚，三名成员各占一屏，依次是主唱 Eder Anaya、吉他手兼制作人 Diego Castro、吉他手兼影片导演 Manuel Lenis。每一屏是一张拼贴，一张贴得很近、只拍到半张脸或一只眼睛的大照片，配一张小一些的半身像，旁边是名字、分工和国家缩写。最后一屏是新单曲 Bound and Tortured Servant，它出自即将发行的 EP Me, Myself, and Sam，旁边是去 Spotify、YouTube 收听的链接，还有一个 Digital Experience 链接。这个链接通向另一个独立的页面，那是一个只能在手机上玩的猜字游戏，桌面访客点进去只会看到一个二维码。

这一页上能动手的地方不多，最完整的一处是联系窗口。访客点 Contact us，整屏换成一个联系窗口，正中是一行很大的邮箱地址，下面写着 Inquiries、Collaborations 和 Booking 三种来意。访客点一下邮箱，地址就被复制下来，同一个位置换成一行同样大的 COPIED IN CLIPBOARD，几秒之后再换回邮箱。

除了照片本身，这个站的版面只用了三种颜色，一种接近纯红的大红、黑色和一种发黄的米白。红是成员照片里那面墙的颜色，黑是他们的衣服和照片之间的空地，米白只给文字用。到了最后讲单曲的那一屏，红色退掉，只剩一块刮花的黑底配一张褪了色的旧照片。联系窗口则换成黑白，所以每一屏的颜色同时交代了这一屏在讲什么。全站还盖着一层细细的颗粒噪点，红墙和黑底上都看得到，整个页面因此更像冲洗出来的胶片，而不像屏幕。

文字全部交给一款无衬线体 Founders Grotesk，只用常规和粗体两种字重。标题一律是粗体大写，排法有一个反复出现的习惯，几行字不左对齐，而是一行比一行往右错开一截，词和词之间也故意留出很宽的空隙。首屏的 DEATHCORE 和 METALCORE 这样排，成员的名字和分工这样排，单曲名 BOUND AND TORTURED SERVANT 也这样排。错开的排法让每一块文字都像是随手贴上去的，和拼贴照片的做法属于同一套语言。

成员的照片撑起了这个站的画面，FWA 也把它归进了摄影一类。成员照全部是在红光下拍的，脸压得很暗，有的只拍到嘴和胡子，有的只拍到一只睁大的眼睛。访客看到的是一张张逼得很近的脸，而不是一张整齐的乐队合影。单曲那一屏的配图换成了另一种语气，一张旧得发黄的照片里，一个穿西装、拿着一本书的男人站在一座白色教堂前，眼睛被一道白色的划痕盖住。

固定在顶部和底部的导航没有给内容让位置。主唱那一屏，右上角的分工文字和国家缩写直接压在 Band Members 上，Diego Castro 那一屏，名字的大字也盖住了右边的导航。这几处读起来像是没有排开，而不像有意的叠印，因为导航是细小的常规体，和压上来的大字没有形成任何对比关系。

这个站最显眼的动法，是所有大标题都在不停地抖动。每一个大标题字母都挂着一组噪点和位移滤镜，滤镜的强度一直按一条起伏的曲线变化，所以字的边缘会不停地轻微扭动，偶尔被横着扯开一道细缝，像录像带上的跳帧。页面刚加载完时，标题先是一团被扯糊的字形，大约两秒内收拢成清楚的字，之后就停在这种轻微抖动的状态。联系窗口里那行邮箱和 COPIED IN CLIPBOARD 也用同一套滤镜，所以访客复制邮箱时，那行字是抖着换过去的。

访客的滚轮停下之后，这一页还会顺着惯性再滑一小段，这是平滑滚动库 Lenis 的效果，导航里的锚点链接也由它带着平滑地滚到对应的成员。成员一屏进入视野时，名字的每一个字母从各自不同的方向飞进来拼成全名，分工那几行文字则一左一右交替滑入。首屏那张合影在访客往下滚时会被横向拉糊，同时慢慢变暗，滚得越远糊得越厉害，像是镜头在往旁边甩。

光标停在成员的半身像上，静止的照片就换成一段一秒半左右的循环短片，成员在红光里晃动，动作带着很重的拖影。光标一离开，短片停下，照片又回到原处。

这些动效跑得很顺，却没有照顾想少看一点动态的访客。从头到尾连续滚动，这一页一直保持在每秒 60 帧。访客在系统里打开减少动态效果的设置之后，标题的抖动、字母的飞入和合影的拖糊都照样发生，站点没有为这个设置做任何处理。

这个站是一个单页，所有的效果都在一个大约 100 KB 的脚本里。动画交给动画库 GSAP，滚动交给 Lenis，标题的抖动用的是浏览器自带的 SVG 滤镜，页面上没有一块三维画布。滤镜只在标题出现在视野里的时候才逐帧更新，标题滚出视野就停下，所以这么多字母同时在抖，也没有在滚动时拖慢画面。

首次打开要下载约 22 MB，其中视频占了一半多，约 12 MB，照片约 10 MB。最大的一个文件是首屏的一段 8 MB 竖版视频，它是给手机准备的。在 1024 像素以下的屏幕上，站点把首屏的照片藏起来，换成这段视频。在桌面上，照片和视频同时在页面里，照片正好盖在视频上面，于是桌面访客要下载并播放这 8 MB 的视频，却一眼都看不到它。剩下的 4 MB 视频是加载画面那段黑白短片，联系窗口的背景也是它，用了两次。四张成员和单曲的大背景图各约 1.5 到 2 MB，占了照片的大头。

这个站加载得很快，首次内容绘制在 0.37 到 0.48 秒之间，低于 Google 建议的 1.8 秒，这时画出来的是加载画面。首屏合影在 2.3 秒左右出现，也低于 Google 建议的 2.5 秒。布局位移只有 0.011，远低于 0.1 的建议上限，整个加载过程里没有一次卡住页面超过 50 毫秒的长任务。

这个站为读屏软件打了一些底子，但键盘用户会迷路，几个大标题也不好读。页面声明了英语，分出了页眉、导航、主体和页脚几个区域，有一个跳到正文的链接，每一张照片都写了替代文字。键盘用户在每一个链接上都看不到焦点框，按 Tab 时不知道自己停在哪里。焦点还会先走进藏起来的联系窗口，在关闭按钮、邮箱和三个社交链接上停留几次，屏幕上却什么都不变。读屏软件这边，几个大标题在网页里是一个字母一个空格写的，比如 I N H E R I T E D，读屏软件很可能会把它念成一串单独的字母，而不是乐队的名字。

页面上还有几处在上线前没有收拾干净。Diego Castro 的分工写成了 Auidio Engineer，多了一个字母 i。单曲那一屏的收听提示写的是 Listen the song，少了一个 to。Diego 这个名字在网页文字里最后一个字母写成了数字 0，屏幕上不容易看出来，读屏软件却会照着读成数字。访客要是按下 Shift 和 G 两个键，页面上会叠出一层带颜色的六栏排版网格，再按一次才消失。这是设计时对齐用的工具，上线时没有拿掉。

INHERITED 拿到 FWA 当日站时得了 81 分，团队在 FWA 上写的说明是把一个死核项目重新想象成一个数字世界，把音乐、故事、身份和互动体验揉在一起。站上讲故事的部分看起来放在了那个只能在手机上玩的猜字游戏里，那个页面的开场就是一段要访客陪它玩游戏的独白，桌面上的这一页更像一张乐队名片，讲身份讲得很足，讲故事和互动的地方不多。FWA 给它归的两个类别是个人作品集和摄影，后一类和这个站把照片当主角的做法对得上。在这之前，Awwwards 在 9 月 21 日把它列为提名作品，页面上只有社区会员的投票，没有评委分。

两人的战绩都是截至写报告时的累计数。这个站最特别的署名是 Eder Anaya，他在页面上是乐队的主唱，在奖项页上是这个站的设计师，乐队给自己做了官网，没有交给外面的工作室。两位署名者都不是第一次拿奖，Eder Anaya 在 Awwwards 上拿过两次当日站，Jorge Toloza 拿过三次。