Ascension — Pegassi

发一张唱片的官网，通常做法是一张封面、一段介绍、一排平台按钮。这一支把唱片这个实体的各个部分逐个搬进了网页。

首屏是一张唱片套，悬在一片布满噪点的黑底中央，套面上印着 ASCENSION 和一个人站在光门口的背影。除此之外整屏什么都没有。

往下滚是曲目表，写法照着黑胶来，Ascension 标 A1，Circles 标 A2，Forest Walk 标 B1，Twinflame 标 B2，后面跟着各自的时长。当前在播的那一首是白色，其余是灰色，两者之间的灰度差就是全部的状态提示。

再往下是艺人介绍，而这一段的排法很不客气。大段文字用深灰压在黑底上，字号大到接近标题，句子和句子互相叠着，中间还硬插进一张 meme 动图——林肯戴着耳机、旁边浮着一条手机音量条。

这是在模仿这类音乐在网上真实的样子。它的听众就是在 Instagram 和短视频里看到这些的，站点把那套语汇原样搬过来，比写一段正经的艺人简介更接近这张唱片要说话的对象。

/listen 是一个完整的播放页。左边一张白色黑胶在转，上面是 aSide / bSide 两个页签，底下是带波形的走带条和 BPM 145，右边是现场视频和这一首的创作笔记。

/sequencer 是整个项目真正的落点。

一张 16 列的网格，行是 Kick、Clap、Bass、Pluck 01、Pluck 02、Pluck 03、Pad。打开默认载入 Ascension 那首的图案，格子亮着的位置就是那首歌鼓点真正落下的地方。上面一排按钮是 Play、Stop、BPM 145、Clear all、Copy、Paste、Reset loop、Follow on，还有四个 Pattern 槽位。底部一行写着 Share sequence。

把一首歌拆成可以被改写的图案，这件事比任何一段文案都更能说明这张唱片是怎么做出来的。听众从听变成了拆，而拆开之后还能重新拼一个自己的版本发出去——发行站的目的本来就是让人谈论这张唱片，这一步直接给了人可谈的东西。

整个站只有一款字，一个色，和满屏的噪点。

字族在 CSS 里的名字就叫 sans，实际文件是 PP Neue Montreal 的 Semibold 和 Bold 两个字重，加起来 118 KB。全站 2,773 个可见字符，字号从 16px 到 60px。

颜色更极端。文字色实测只有三个值，深灰 #7D7D7D 落在 439 个元素上，白色只有 2 个，另有一档半透明白 2 个。也就是说这一页上几乎所有文字都是同一个灰，而白色被留给了唯一一件事——标出当前在播的那一首。

用同一个灰写完所有内容，再拿白色当唯一的高亮，这个做法在信息密度高的页面上很稳。读者不需要学习任何图例，眼睛自己会先落在白的那一处。做产品界面的人常常反过来，给每类信息各配一个颜色，结果颜色多到不再有强调的作用。

底色是 #121314 的近黑，上面盖着一层颗粒。html 元素上挂着一个 grain-ready 的类名，说明这层噪点是等资源就绪之后才开的，不是一张静态贴图。它把整个页面压成一种翻录带的质感，和这张 EP 的声音是一回事。

整页只有 443 个元素，带圆角的 9 个。导航是顶部一行文字，Listen、Sequencer、About，右上角一个 Buy。

把网页文字交给 WebGL 是这里最值得学的一手，而交接的办法藏在两个文件里。

页面从 /glyphs/ 目录下拉了两个文件，sans-600.bin 和 sans-700.bin，各 278,528 字节，加起来 544 KB。这两个数字一模一样，对应的正是加载的那两个字重。它们是预先生成好的字形数据，让三维层能按同一款字排版，而不必在运行时去解析字体轮廓。

画布本身的位置更说明问题。它挂在一个 fixed inset-0 z-60 pointer-events-none 的容器里，也就是铺满视口、压在所有 DOM 内容之上、并且完全不接受鼠标事件。大部分三维站把画布放在最底层当背景，这一个反过来，把它当成一层滤镜盖在上面。颗粒、发光、转场这些必须覆盖在文字上的效果，只有这么放才做得出来。

这么放的前提是，这层画布不能承担任何交互，所有可点的东西必须留在下面的 DOM 里。实测 22 个可交互控件全部有名字，页面文字有 2,411 个字符实实在在写在 DOM 中，读屏器拿得到。这是这个结构带来的好处。三维只负责好看，内容始终在原生元素里。

站名那个立体字标走的是另一条路。页面单独拉了一个 logo-final.glb，只有 148 KB，外加一份 192 KB 的 draco_decoder.wasm，路径写着 /wordmark/draco/。为了一个字标背上 192 KB 的解码器，乍看不划算，但 Draco 的解码器是可以跨模型复用的固定成本，而这个站如果后续要加更多三维内容，这笔钱只付一次。

脚本里能数到 three 161 次、gsap 62 次、lenis 29 次、ScrollTrigger 5 次、InstancedMesh 19 次、ShaderMaterial 16 次、WebGLRenderTarget 5 次。五个渲染目标说明画面过了好几道离屏合成。

还有一处和前面那台音序器对得上。AnalyserNode 在代码里出现了一次。也就是说播放时的可视化是实时分析音频算出来的，不是预先烘好的数据。对一个会让用户自己编排鼓点的站来说，这是必须的——用户改出来的图案没法提前分析。

滚动是 Lenis。整页 6,904 像素、7.3 屏，实测全程 60 fps，p95 帧耗时 18 毫秒，卡顿帧 0%。

减弱动画这一项没有做。样式表里查不到一条 prefers-reduced-motion 规则，把系统偏好打开之后那层颗粒照旧在动。

底层是 Nuxt，页面脚本 44 个文件、约 1.34 MB 的未压缩文本，其中入口 D_NF2dyi.js 只有 93 KB。

首次访问的实际传输量是 8.1 MB，87 个文件。视频 3.60 MB，图片 3.19 MB，三维和字形数据这类 fetch 请求 769 KB，脚本 378 KB，字体 118 KB。

图片那 3.19 MB 里有一个数字很扎眼。GIF 占了 1.74 MB，其中一张 3.gif 就有 1.26 MB。那正是艺人介绍里嵌的那张 meme 图。把同样的内容转成 webm 或者 webp 动图，体积通常能降到三分之一以下。这里选 GIF，大概率是因为素材本来就是从社交平台上拿的 GIF，改格式就得重新处理一遍。这也是很多内容型站点上 GIF 一直活着的原因。

这份 8.1 MB 里没有那四首歌。EP 的四个 mp3 全部加起来是 24 MB，最大的 pegassi-forest-walk.mp3 有 6.33 MB，但它们不在首次访问的网络记录里。也就是说站点只在有人真的要听的时候才去取，首屏不为音乐买单。一个发行站把自己的主要资产做成按需加载，这个判断是对的。来的人里有相当一部分只是看一眼封面和曲目。

慢的地方在服务器那一端。首字节 2,508 毫秒，是这份库里最慢的一个。首次内容绘制 2,908 毫秒紧跟其后，load 事件 3,026 毫秒。前端这边其实很省，文档之后的三百多 KB 脚本不至于拖这么久，2.5 秒基本都花在等第一个字节上。加载过程里还有 4 个长任务，最长 1,114 毫秒。

好的一面是累计布局偏移是 0，一次抖动都没有。

无障碍这边的基本面不错。页面声明了语言，header、main、footer 三个地标齐全，22 个可交互控件全部有名字，6 张图片全部带替代文字，没有正值 tabindex。

不足的地方有两处。样式表里只有 1 条焦点规则，一个有 147 个控件的音序器页面靠这一条撑着，键盘用户很难看清自己在哪一格。另一处是标题，整个文档只有一个 H1，曲目、艺人介绍、音序器几个大段落都没有用标题元素分节。

83 分，第 6 天拿到。FWA 不公开分项，团队自述只有一句话，说这是 Pegassi 首张 EP《Ascension》的发行站。一句话的自述配一个带音序器的站，多少有点低调过头了。

Gil Huybrecht 在比利时，profile 上的自述是用极简的方式替全球各地的公司解决设计问题，名下 13 座 FWA，最早一座在 2019 年。Jesper Landberg 名下 40 座，其中 38 个当日奖、2 个当月奖，从 2018 年开始拿，是这份库里出现过两次的名字——See What Eye See 那份报告里也有他。

还有一处巧合值得记下来。Pegassi 是比利时音乐人 Sam Huybrecht 的化名，和这个站的设计师同姓，两人都在比利时。

这个站没有在 Awwwards 上出现过。