Jesper Landberg

Jesper Landberg 是一名自由职业的前端开发者，通常在国际工作室的项目里担任主开发或唯一的开发。他的作品集要给这些工作室看两件事，他做过什么，以及他能把网页做到什么程度。所以他把这个站的内容压得很少，一段两句话的自我介绍、一行写着 77 awards 的战绩、八个精选项目和一份完整的项目索引，其余的篇幅都交给了呈现方式本身。

访客打开页面，先看到一段黑屏，然后正中出现三道短横线，横线拉长、长成三张卡片的轮廓，大约 3.6 秒后首页就位。首页是一片黑色空间，地上铺着一张透视网格，八张圆角卡片连成一条弯曲的缎带横在画面中间，每张卡片在播放一个项目的影片或画面，左下角写着卡片的项目名。访客可以按住拖动，也可以滚动滚轮，缎带就朝一个方向流过去，转过最后一个项目又接回第一个。四个角各放一个很小的全大写入口，左上角是名字，右上角是 PROFILE，左下角是 FEATURED 和 FULL 两种视图，右下角是 NEWSLETTER。

访客点开一张卡片，它会展开成一张铺满屏幕的白色大卡片，这就是项目页。左栏是项目名、一句话介绍、年份，有的还带一个奖杯标志，右栏是一列项目截图和影片，可以一直往下滚，滚到底又从头开始。大卡片的左右边缘露着相邻项目的一小条，光标移过去，那一条会探出来，点一下就换成下一个项目。访客按 Escape 或右上角的叉，就回到首页。

FULL 视图把全部 23 个项目排成一段居中的文字，项目名之间用圆点隔开，读起来像一篇目录。光标停在某个名字上，那个项目的缩略图就浮在名字后面。PROFILE 和 NEWSLETTER 各打开一个圆形的窗口，前者是自我介绍和社交链接，后者是一个订阅邮件的输入框，订阅的是他不定期写的前端心得。

整个站的规矩是黑底、白字、颜色只来自作品。背景是纯黑，地面网格是深灰的细线，导航和标签全是白色的小号大写字，Awwwards 记下的站点配色也正是黑和白两色。画面里所有的颜色都来自项目卡片上的截图和影片，粉色的作品集、金色的球体、红色的客户评语卡，在黑色空间里一张比一张亮。

全站只用一款无衬线字，分 400 和 500 两个字重。首页上的这款字不是由浏览器排出来的，是站点把字形数据下载下来，自己画在画布上。导航字只有十几像素，全部大写，贴着屏幕的四个角。FULL 视图里的项目名放大到三十多像素，正常大小写，二十三个名字在屏幕中央排成六行。

Jesper Landberg 的版面几乎全由卡片组成。首页上的圆角卡片连成一条连续的缎带，缎带在深度上是一个 S 形。左边离镜头近，右边远，中间那张正对访客。项目页里，同一张卡片变成白底，和周围的黑色空间形成整个站上最强的明暗对比。卡片的左边是文字，右边是图，留白很多。

PROFILE 打开的那个圆形窗口，是整个站上最难一眼看懂的画面。窗口的边缘是一圈像玻璃又像光的环，环上带着一道细细的彩虹色边，环里是纯黑，自我介绍、获奖数和四个社交链接用小字排在正中。环外面，原本的首页画面被拉扯着绕向环的边缘。

缎带的形状和它对滚动速度的反应，是这个站最主要的动效。静止时，缎带在深度上是一个平缓的 S 形，并且像赛道的弯道一样朝坡的方向倾斜，整条还带一点从左往右的上坡。访客一滚动，速度越快，缎带左端就越往上抬、越往镜头前凑，两侧边缘朝相反方向拧转，像一条被拧的毛巾。访客停下滚动之后，缎带在一两秒内回到原来的形状。这个扭转量是作者特意调大的，扭得太小的话，数学上在转，屏幕上却看不出来。

这个站对光标的回馈也做成了材料的形变。光标移动时，站点在一张看不见的高度图上画下它经过的路径，这张图每一帧都会稍微变淡、稍微向四周扩散。画面就在路径经过的地方鼓起来，一侧亮一侧暗，像页面下面有一颗球在滚。作者特意没把它做成液体，液体会把颜料冲走，他要的是鼓包留在原地、慢慢平复。这个鼓包在屏幕中央最明显，越靠近边缘越弱，这样导航和标题在访客伸手去点时不会晃。

从首页到项目页的转场一共只用大约半秒。访客点下去之后 0.12 秒，被点的那张卡片开始放大、展平，其余的卡片淡出。到 0.4 秒左右，它已经变成一张白色的大卡片，项目名浮现在左上角，截图还半透明地叠在上面。到 0.54 秒，截图和文字都已经各就各位。从一个项目换到下一个时，站点用的是相邻卡片从边缘滑进来的动作，不到一秒就完成。

PROFILE 和 NEWSLETTER 打开的那个圆形窗口，模拟的是黑洞的引力透镜。环上显示的是页面中心的画面，它被绕着整个圆周拉开，这正是天文照片里爱因斯坦环的样子，也就是远处的光被一个巨大的质量弯成一整圈。环的边缘由几个平缓的起伏组成，三个和五个起伏以不同速度叠在一起，看起来像在呼吸。环周围的画面还会绕着黑洞慢慢转，作者把这个旋转限制在十五秒左右、大约九十度的行程之内，因为一直转下去，相邻像素采到的位置会越离越远，环会撕成一道彩虹条纹。站内不走卡片展开的那些页面切换，用的也是同一个黑洞，从屏幕中心张开，把新页面装在里面，一直张到盖过四个角。

悬停在 FULL 视图的项目名上时，站点同样借用了透镜。光标停在某个项目名上，缩略图从名字后面浮起来，它附近的其他项目名随之弯折，有的变斜，有的拉长。所有这些效果跑起来都很稳，首页、项目页和打开黑洞时，页面都维持在每秒 60 帧，最慢的一帧也不超过 25 毫秒。

这个站用 Vue 框架 Nuxt 搭成，内容存在内容管理后台 DatoCMS 里，画面由 three.js 画在一块铺满屏幕的 WebGL 画布上，动画用 GSAP。项目截图用的是显卡可以直接读取的压缩贴图格式 KTX2，项目影片托管在视频服务 Mux 上。

首页上的字不是浏览器排的，站点为这款字的两个字重各下载一个 401 KB 的字形数据文件，再在画布上把每个字画出来。这样一来，缎带弯的时候字跟着弯，黑洞拉扯画面的时候字也被拉扯。这样做之后浏览器看不见这些字，所以站点另外在页面里放了一份普通文字，给读屏软件和搜索引擎读，这份文字对屏幕上的访客是隐藏的。

站点还专门为 AI 和其他程序准备了一份内容。站点根目录有一个写给大语言模型的说明文件 llms.txt，开头就交代这个站是一件 WebGL 作品，所以把内容另外用 Markdown 提供给不是浏览器的访问者，下面列出他适合接什么项目、不适合接什么项目、怎么联系。站上的每一个网址在请求 Markdown 格式时，也都会返回一页纯文本版本，比如项目页返回项目名、介绍、上线网址和前后两个项目的链接。

这个站最重的地方在下载量上，不在画面的运算上。服务器 29 到 37 毫秒就返回首字节，首次内容绘制（FCP）只要 88 到 92 毫秒，但这一刻画出来的是那份隐藏的文字，访客看到缎带要等到 3.6 秒左右。打开后的 10 秒内，浏览器已经下载了 26.7 MB，其中 18.7 MB 是五段项目影片。这些影片是完整的 MP4 文件，最大的一段 7.8 MB，不管访客有没有看到那张卡片，它们都在页面打开后几秒内开始下载。静置 30 秒后下载量到了 34.6 MB，把缎带转一整圈、点开一个项目和 PROFILE 之后，一共约 38 MB。

画布本身每一帧的开销并不大，首页每帧 33 到 40 次绘制，约 9 万到 11 万个顶点。打开黑洞时，开销升到 44 次绘制、19 万个顶点。画布按屏幕的 1 倍像素来画，各个状态都稳在每秒 60 帧。

只用键盘的访客能走完整个站，但看不见自己选中了什么。访客按 Tab 键，会依次选中八个项目、完整索引、订阅入口和几个社交链接，按回车能打开项目，按 Escape 能关掉项目页和 PROFILE。问题在于被选中的是那份隐藏文字里的按钮，它们在屏幕外面，画布上没有任何高亮，缎带也不会转到被选中的项目上。打开系统的减少动态效果设置之后，缎带照样随滚动速度扭转，样式表和脚本里都没有针对这个设置的处理。

Awwwards 的四个分项里，创意（Creativity）8.04 最高，可用性（Usability）7.52 最低。创意分高对得上缎带、光标鼓包和黑洞这几处在网页上很少见的做法。可用性分低，可能和导航的方式有关，入口全是屏幕四角的小字，看不到的键盘焦点也拖了后腿。开发奖的五个分项里动画 9.00 最高，无障碍 7.00 最低。FWA 那边给了 84 分，评审的说明只有两句，介绍他是一位做视觉丰富、以动效驱动网站的瑞典设计工程师，两次拿到 Awwwards 的年度独立开发者。

Jesper Landberg 在 FWA 上拿过 40 次奖，他在订阅入口里说自己做了十多年自由职业。他的上一版作品集 jesperlandberg.dev 在 2020 年就拿过一次 FWA 当日站。这一版在两个平台上都只署了他一个人的名字。