Jesper Landberg

在国际工作室的项目里，Jesper Landberg 通常担任主开发者或唯一的开发者。这个站的订阅说明里，Landberg 写道，自己已经做了十多年自由职业。Landberg 的上一版作品集 jesperlandberg.dev 在 2020 年就拿过一次 FWA 当日最佳，Awwwards 又在 2022 年和 2024 年两次把 Landberg 评为年度独立开发者。

站上还有一份写给 AI 工具读的说明文件 llms.txt，里面写明，Landberg 接的通常是已经有设计师或设计工作室的项目，照着设计伙伴的稿子做前端，不取代设计伙伴。llms.txt 还写道，Landberg 最适合做的是动效、WebGL 或交互本身就是设计的网站，比如品牌站、产品发布、作品集和活动网站。Landberg 只在站上放了一段两句话的自我介绍、一行 77 个奖项的战绩、八个精选项目和一份完整的项目索引。Landberg 把其余的篇幅都交给了呈现方式本身，让网站自己去证明前面说的第二件事。

访客打开网站后，先看到半秒左右的黑屏，接着屏幕正中出现三道短横线。几秒后，这三道横线变成了首页上的卡片。首页是一个黑色的空间，地上铺着一张向远处延伸的网格。八张圆角卡片连成一条弯曲的缎带，横在画面中间，每张卡片播放一个项目的影片，或者显示这个项目的画面，卡片左下角写着项目名。访客可以按住缎带拖动，也可以滚动滚轮，缎带会朝一个方向流过去，流过最后一个项目后又接回第一个。

访客点开一张卡片后，这张卡片会长成一张铺满屏幕的白色大卡片，也就是项目页。项目页的左栏是项目名、一句话介绍、一个外链按钮和年份，有的项目页还带一个金色的奖杯。右栏是一列项目截图和影片，访客可以一直往下滚动。白色大卡片的左右两侧露出相邻项目的一小条，访客点一下那一条，页面就换成那个项目。访客按 Escape 或点击右上角的叉，就回到首页。

除了缎带，首页上还有四个很小的入口，分别放在屏幕的四个角上，文字全部大写。左上角是 Landberg 的名字，右上角是 PROFILE，右下角是 NEWSLETTER，左下角的 FEATURED 和 FULL 则用来在精选项目和全部项目两种视图之间切换。在 FULL 视图里，全部 23 个项目排成一段居中的文字，项目名之间用圆点隔开，读起来像一页目录。PROFILE 和 NEWSLETTER 打开的是出现在画面正中的同一个黑洞，前者里面是自我介绍和社交链接，后者里面是一个订阅邮件的输入框。访客在这里订阅的是 Landberg 不定期写的前端心得。

整个站的规矩是黑底、白字、颜色只来自作品。背景是纯黑（#000000），四个角的导航是白色（#FFFFFF）的小号大写字，画面里的颜色几乎都来自卡片上的截图和影片。Landberg 在代码注释里写道，背景曾经是渐变，后来换过带星星的星云和一轮在地平线后落下的紫色太阳，最后全部撤掉，只留下一种颜色。这片黑色因此把 Casa Di Solare 的金色球体、Nathan Riley 的粉色字和 Griflan 的红色评语卡衬得格外亮。

地面是这个空间里唯一一块平躺着的平面，Landberg 在它上面花的心思比看起来多。Landberg 把网格线的对比度压得很低，注释里说，网格应该是访客看第二眼才注意到的部分，网格太亮，整个站就会变成另一种风格。网格是静止的，缎带流动时地面不跟着滑动，Landberg 的理由是滑动的地面会像跑步机，而房间不会动。Landberg 也没有给地面画地平线，地面往远处逐渐融进黑色。卡片底边的位置压着一条很窄的暗带，让卡片看起来是站在地上的。卡片的倒影只出现在网格线里，线与线之间仍是纯黑，看起来像网格线微微沾湿了，而不像一面镜子。

站点自己的文字只用一款无衬线字 ABC Diatype Plus，也就是笔画末端不带小脚的字，画面上用到常规和稍粗两种粗细。字号跟着窗口宽度一起缩放，1920 像素宽的桌面上正文约 18 像素，1366 像素宽的笔记本上约 13 像素。四个角的入口文字很小，全部大写，贴着屏幕边缘。FULL 视图里的项目名放大到导航文字的两三倍，不再全部大写，在屏幕中央排成六行。

卡片是这个站的主要部件，它在首页和项目页上有两种样子。Landberg 把首页的卡片连成一条连续的缎带，缎带在深度方向上是一个平缓的 S 形，左边离镜头近，右边远，中间那张正对访客。每张卡片的左下角用白色小字写着项目名，右下角有一个黑色的圆形箭头按钮。访客点开卡片之后，同一张卡片会变成白底的项目页，和周围的黑色空间形成整个站上最强的明暗对比，项目页左栏的字很少，留白很多。项目页上的奖杯是一个棱角分明的低多边形金色金属模型。项目页的左下角还有一个细线画的圆环，访客往下滚动时，圆环会一圈圈地画满。

访客点开 PROFILE 后出现的黑洞，是整个站上最难一眼看懂的画面。黑洞的边缘是一圈像玻璃管又像金属的粗环，环上带着红绿蓝分开的彩色细边。这圈环其实就是黑洞背后的页面，网站模拟黑洞的引力，把这部分页面弯折成了环形。环的颜色因此取决于黑洞背后正好是哪张卡片，白色的卡片在后面时环像镀了铬，Nathan Riley 的粉色卡片转到后面时，整圈环就变成粉色。环里是纯黑，自我介绍、77 个奖项的战绩和四个社交链接用小字排在正中，几只黑色亮面的羊驼在字的前后慢慢漂过。Landberg 的邮箱和 X 账号都用 alpacka 这个名字，alpacka 在瑞典语里就是羊驼。

NEWSLETTER 用的是同一个黑洞，环里换成一段说明、一个胶囊形的邮箱输入框和一个白色的圆形箭头按钮。访客点击输入框时，输入框的白色细边会变成一圈彩虹色，颜色绕着胶囊的边缘缓缓流动。

这个站在手机上把横着的缎带改成了一列竖着排的卡片，访客用手指上下滑动这列卡片。每张卡片的右下角仍然有那个圆形箭头按钮，提示这张卡片可以点开。项目页的关闭按钮从右上角移到了右下角，正好落在拇指够得到的地方。黑洞的大小随屏幕宽度缩放，但手机版把黑洞圆盘本身定得比屏幕略宽，所以光环的左右两段都超出了屏幕边缘，羊驼仍然在环里面。FULL 视图在手机上排成十行，一屏就能放下全部 23 个项目名。

访客竖着拿平板时，这个站没有换成手机上那一列卡片的排法，仍然用桌面的横向缎带。缎带只占屏幕中间一条，上下各空出一大片黑色。四个角的入口文字也跟着窗口宽度缩小，只剩桌面上的四成多，小得很难看清。

开场的三道短横线同时是加载进度。横线随着加载变长，第一次打开时要等两秒多，访客再次打开、文件已经保存在浏览器里时，加载会快得多。加载完成后，三道横线胀成三颗小胶囊，胶囊里已经能看到项目画面，接着三颗胶囊飞散开、长成首页的卡片，地面的网格同时从黑色里浮现。整个开场在第一次打开时约 3 秒，第二次打开约 2.3 秒。

缎带的形状和它对滚动速度的反应，是这个站最主要的动效。访客不动时，缎带停在那个平缓的 S 形上，像赛道的弯道一样微微侧倾。访客一滚动，缎带左半边就往上抬、往镜头前凑，最外侧卡片的两条长边朝相反方向扭转，就像拧毛巾一样。网站会先用一条越到后面涨得越慢的曲线换算滚动速度，再用换算后的结果带动缎带，所以访客慢慢滚动时形变跟得很细，滚得再快形变也只加大到一定程度，卡片不会被拧到侧面去。访客停止滚动后，缎带的形状在 0.3 秒左右就回到 S 形，缎带本身还会靠惯性再滑大约 1 秒。在手机上，访客滑得快时，竖着排成一列的卡片也会整列弯成一道弧。

这个站对光标的回应同样是材料的形变。光标经过的地方，画面被从下面顶起一个鼓包，朝光的一侧变亮，背光的一侧变暗，像页面下面有一颗球在滚。鼓包留在光标经过的路径上，原地慢慢平复，高度大约 0.3 秒就降掉一半，画面不会像水流那样被冲散。鼓包在屏幕中央最明显，越靠近边缘越弱，所以访客把光标移向四角的导航时，导航不会跟着晃动。光标停在一张卡片上时，这张卡片会朝镜头前移一点。Landberg 在注释里写道，悬停效果原本是给卡片染上一层紫色，后来才改成让卡片在空间里往前移。

访客从首页点进项目页时，那张卡片会直接长成项目页，整个过程不到 1 秒。卡片在访客点下去之后约 0.15 秒就放大到大半个屏幕，画面开始褪成白色，左下角的项目名一边往左上角飞，一边从白色变成黑色。到 0.3 秒左右，卡片几乎铺满屏幕，边缘还带着缎带的起伏，项目截图从画面中间滑向右栏。卡片在 0.4 秒前后展平，接着介绍文字一行一行浮上来，0.7 到 0.8 秒时，外链按钮、标签、奖杯和关闭按钮全部就位。访客按 Escape 返回时，项目页反过来缩回一张卡片，约 0.5 秒落回缎带上。

每一行文字在项目页上出场时，上升、展平和露出三件事是在同一条曲线上一起完成的。每一行从自己位置的下方升上来，原本带着的一点扭转一边升一边解开，遮住这一行的遮罩也同时打开。Landberg 在注释里写道，曾经试过给扭转单独定一个节奏，结果看起来像两个碰巧同时开始的动画，所以最后让三件事共用一条先快后慢的曲线。

黑洞打开和关闭各只用大约 0.3 秒，开着的时候也不是静止的。黑洞张开到一半时，边缘会鼓出三四个不规则的瓣，像一团软泥，开到头之后瓣才收成正圆。黑洞的边缘由两组快慢不同、方向相反的起伏叠成，一直在缓缓变形。环上的画面还会绕着黑洞慢慢转动，转到第 15 秒左右停住。Landberg 在注释里解释，环上的画面一直转下去会被越拉越碎，最后撕成彩虹色的条纹。访客关掉黑洞时，正圆先扭成一团软泥，再在 0.25 秒内收掉。

除了缎带、卡片和黑洞这些大动作，按钮的悬停效果也不是简单的变色。光标指到项目页上带链接的胶囊标签时，一个圆盘从标签中心张开，标签上的字母被圆盘扫到的部分先变色，没扫到的部分保持原色，所以变色的分界线会从一个字母中间穿过。圆形按钮则反过来，悬停时按钮里的填充色从中心被掏空，只剩一圈细边。关闭按钮的叉由两笔组成，悬停时两笔沿各自的方向一前一后退出，再从另一侧补进来。箭头按钮悬停时则是先画出箭杆，再补上箭头的两笔。

Landberg 把 FULL 视图里的光标做成了一个放大镜。光标停在某个项目名上时，那个名字后面会浮起一张项目缩略图，光标附近的名字微微胀大，外面一圈名字朝外倾斜，离得远的名字不动。缩略图挡住的名字会变暗，变暗的边界正好贴着缩略图的圆角轮廓，光标指着的那个名字则保持全亮，压在缩略图上面。

这份作品集的缎带、光标鼓包和黑洞都由 three.js 画在同一块铺满屏幕的 WebGL 画布上。网页里其实还有一套普通的元素，八个项目链接、标题和按钮都在里面。画布上的每张卡片、每行字和每个按钮都按对应元素的位置画出来，再在着色器里变形，所以访客点的仍然是网页里的元素。Landberg 在 llms.txt 里把这种做法叫作 DOM-mirrored WebGL，也就是让 WebGL 画面跟随网页元素的版面。每张卡片是一块 24×24 格、625 个顶点的平面，顶点足够多，卡片才能弯得平滑。

卡片、标题、按钮和地面能弯成一体，靠的是几个共用的函数。缎带的弯曲和整条缎带的倾斜都只是世界坐标 x 的函数。卡片、卡片上的标题、卡片角上的按钮和地面都调用同一个函数，所以同一个 x 上的部件得到的形变完全一样。Landberg 的注释写道，两个不在同一个坐标系里的物体要对齐，靠的就是一个共用的世界坐标函数，如果在两处各自凭眼睛调数字，迟早会对不上。标题贴着曲面弯曲之后，还会往镜头方向浮起一个固定的距离。这样做是因为缎带远端的字会被透视缩小，而把字往镜头移近一点，透视就会按同样的规律把它放大回来。

缎带的形状由顶点着色器里几项叠加的形变组成。第一项是深度方向的 S 形，宽屏上是一条正弦曲线，窄屏上换成抛物线，Landberg 让卡片在深度方向上弯曲，这样透视本身就会把卡片的轮廓拉弯。第二项是侧倾，曲面按 S 形的斜率倾斜，静止时只有 0.16 弧度。第三项是一条很轻的对角线，整条缎带从左往右微微上坡，在画面边缘只抬高 20 像素左右。缎带在滚动时还会再加上两项形变，也就是前面说的抬起和拧转，其中左半边按速度往上抬 0.1、往镜头前凑 0.2，外侧卡片的长边满速时拧到 1.8 弧度。拧转只作用在缎带宽度的外侧，中间的卡片保持稳定。

卡片的光影和远处的变暗也按同一条曲线计算，只是放在片元着色器里逐像素重算。Landberg 在注释里写道，如果把算好的深度交给插值，卡片上会出现一道随缎带移动的波纹。

黑洞是叠在整个画面上的一道后期处理，核心只有一行引力透镜的公式。屏幕上距黑洞中心为 t 的像素，显示的是原画面里距中心 b = t − E²/t 处的内容，E 是爱因斯坦环的半径，这里设为黑洞圆盘半径的 1.5 倍。着色器是反过来算的，它对每个像素算出这个位置该显示原画面的哪一处。这样，在环的位置上 b 趋近于 0，环上显示的是页面正中的内容被绕着圆周拉开的一整圈，这就是那圈光环。

Landberg 在这道公式的基础上又做了几处调整。第一处是一道约束，让弯折从黑洞圆盘的边缘往外，在 0.16 个屏幕宽度之内逐渐减弱，再往外完全不受影响。如果不加这道约束，整个屏幕都会被拉弯，黑洞看起来就像一个滤镜，而不像放在页面上的一个物体。环上的彩色细边来自颜色通道的错开，红、绿、蓝三个通道按略微不同的半径取样。环上画面转动的角度乘了一个会封顶的时钟，前面说的那次停转就是这样来的，边缘的两组起伏则一直按真实时间变化。注释里还记录了两个被放弃的方案，一个是额外画一圈发光的吸积盘，另一个是横向拉长的透镜，后者会在环上撕出黑色的缺口。

光标的鼓包来自一张 256×256 的离屏高度图。每一帧，高度图上的旧值先乘一个衰减系数，再和周围的值做一点平均，最后在光标位置盖上一个高斯形的印。衰减和扩散都按帧间隔计算，所以无论屏幕是 120 赫兹还是正在掉帧，光标留下的鼓包都一样。Landberg 在注释里写道，另一个分支上有一个真正的流体模拟版本，看起来像水。Landberg 的考虑是，被球顶起的布没有动量，只有张力和回弹，所以最后只用了衰减和扩散。

黑洞那道后期处理也读取这张高度图的坡度，把画面朝坡上方向取样，鼓包处的画面就被放大，再按坡度和一盏左上方的灯打上明暗。这道明暗在接近白色的像素上会自动减弱，因为在白色的页面上，亮的一半显不出来，只剩暗的一半会像一块污渍。

这个站首页画布上的字既没有交给浏览器排版，也没有用常见的距离场贴图。站点为两档字重各下载一份约 400 KB 的字形轮廓数据，每个字形是一个实例。片元着色器直接用字形的二次贝塞尔轮廓，逐像素计算这个像素被字形覆盖了多少，所以字在任何放大倍数下边缘都是清楚的，也能跟着缎带一起弯曲。字的颜色由参数决定，不写在字形数据里，所以标题从卡片飞到项目页时，可以一路从白色渐变成近黑色，不用重新生成字形数据。画布按线性颜色空间混合，深色字在浅底上会比浏览器排出来的字显得粗，所以着色器会按字色的深浅把笔画边缘收细一点。

地面是一块真正放在透视相机视野里的平面，倒影则是另外拍的一张小图。站点每帧用一台沿地面镜像的相机，把卡片拍成一张只有屏幕十分之一大小（192×95）的图。地面上的每个像素按这台镜像相机的投影去这张图里取样，只在网格线上加上这层倒影。这张图分辨率很低，倒影自然就是模糊的，Landberg 在注释里写道，湿的地面本来就照不清楚。所有材质都关掉了深度测试，没有任何物体真的接触地面，所以卡片底边那条暗带是唯一让卡片看起来站在地上的线索。

羊驼和奖杯是两个 glb 格式的三维模型，两个文件加起来约 211 KB。首页场景里的六只羊驼分成两组实例化网格，奖杯是一个按金属打光的低多边形模型。羊驼和奖杯都用同一盏灯，这盏灯也照着光标的鼓包，Landberg 在注释里说，这样整个站就是同一个房间。

这个站的负担主要落在下载量和打开时的等待上。打开后约 13 秒，浏览器已经下载了 34.6 MB，其中 26.5 MB 是六段托管在视频服务 Mux 上的项目影片。每段影片都是完整下载的高画质 MP4，最大的一段 7.8 MB，不管访客有没有看到那张卡片都会下载。四段正在播放的影片还要每帧作为贴图上传给显卡。另有 37 张 KTX2 压缩贴图约 5.6 MB，用 Basis 解码器在浏览器里转码。浏览器最先画出来的是给读屏软件准备的隐藏文字，第一块内容 0.1 秒左右就有了，但访客真正看到首页要等 3 秒左右。

手机、平板、笔记本和桌面用的是同一块画布和同一套着色器，四种设备打开首页后下载的都是这 34.6 MB，手机也照样下载全部六段影片和两份字形数据。画布的像素密度在桌面上是 1 倍，手机和平板上封顶在 2 倍，手机的 3 倍屏也只画 2 倍。

站点还为 AI 工具这类不用浏览器的访问者准备了一份纯文本的内容。前面引用过的 llms.txt 放在网站根目录，是写给大语言模型读的说明。它开头就交代这个站是一件画在画布上的作品，所以另外用 Markdown 提供内容，接着列出 Landberg 适合接什么项目、不适合接什么项目和联系方式。访问者在站上任何一个网址后面加上 .md，或者在请求里说明要 Markdown，都会拿到这一页的纯文本版本。

画布下面那层隐藏的网页元素原本就是给读屏软件准备的，只用键盘的访客也能靠它走完整个站，按回车能打开项目，按 Escape 能关掉项目页。不过焦点停在隐藏文字里的项目、索引和社交链接上时，画布上没有任何高亮，缎带也不会转到被选中的项目上。焦点要走到四个角的入口时，才会出现一圈白色的圆角框。这个站也没有照顾到对晃动敏感的访客，访客在系统里打开减少动态效果的设置后，开场、缎带的翘起和黑洞仍然照常播放。

Awwwards 的四个分项里创意（Creativity）8.04 最高、可用性（Usability）7.52 最低，开发奖的六个分项里则是动画 9.00 最高、无障碍 7.00 最低。FWA 案例页上的介绍只有两句，说 Landberg 是一位瑞典设计工程师，做的是视觉丰富、由动效驱动的网站，两次被 Awwwards 评为年度独立开发者。

这一版作品集在两个平台上都只署了 Landberg 一个人的名字。前文引用的设计理由，都来自 Landberg 自己写在站点代码里的注释和 llms.txt。