bleibtgleich'26

Maksym Bleibtgleich 是基辅的 UX/UI 设计师兼开发者，和迈阿密与迪拜的代理公司 The First The Last 合作。站上介绍他的工作是设计并搭建网站、产品和数字系统，讲究清晰、性能和可用性。他每年给自己的站出一个新版本，站上的获奖列表里有 bleibtgleich'23 和 bleibtgleich'25，这一版叫 '26。

个人作品集通常拿作品当主角，这个站拿标志当主角。那块黑色面具挂在左上角当标志，同时也是跟着光标走的那团液体，是按下主题色块后在屏幕中央翻转的东西，是页脚时钟中间的那一格，也是联系页那台拨号电话的中心。在这个站上，作品反而退到了标志的后面。首页只放了四张作品封面，而且藏在液体里，访客要用光标去擦才看得见。

这个站一共有四页，首页依次是名字、一句自我介绍、四张藏起来的作品封面、一句 the best ideas deserve execution、一张获奖列表和页脚。Work 页把 15 个项目放在黑色卡片上，每张标着 Case 或 Shot，整页还能切换成一颗用鼠标拖着转的球。Experiments 页是一片三维空间，34 张实验作品的截图漂在里面，访客可以用键盘和鼠标在里面飞行穿梭。Contact 页画成一台老式转盘电话，拨号盘上九个孔，五个用来换主题色，四个是邮件和社交链接。

这个站文案的口吻，和这些玩法走的是一路。它把页脚那句 Everything that exists had first existed as nothing more than a sentence 从中间切开，塞进一个显示访客本地时间的时钟，这句话读起来就成了存在的一切最初都只是（01 : 面具 : 59）一句话，括号里就是那个时钟，面具占了中间一格。Work 页的结尾写着，这些东西是在烦躁、完美主义和总觉得还能更好的感觉里做出来的，右下角的落款是 made w/ hate，把常见的 made with love 反过来说。

访客在页面上按一下斜杠键，光标旁边就会弹出一个黑色的对话泡。访客输入的字会连同他的光标位置，一起发给此刻同样在看这个站的其他访客，其他访客的光标也会画在他的页面上。这个站是一个作品集，同时也是一间有人在的房间。

Akzidenz Grotesk Pro 是全站唯一的字体，而且只用中等粗细的 Medium 一个字重。首页七百多个字符只有两个字号，19 像素的小字和 120 像素的大字，中间没有任何别的字号。页面的根字号设成浏览器窗口宽度的百分之一，所有尺寸都用 rem，也就是以根字号为一个单位的长度，写成若干 rem 再除以 14.4 的算式，大字是 90 个单位，小字是 14 个单位。所以整页的字会随窗口宽度等比缩放。不管底色换成什么颜色，这个站的文字永远是黑色。

页面的底色有五种，白、灰 rgb(190, 193, 202)、橙 rgb(255, 99, 61)、橄榄绿 rgb(145, 158, 68) 和红 rgb(195, 31, 38)，由访客自己挑。访客选定之后，浏览器标签页上的小图标也会换成同色的面具，这个选择在这次浏览期间一直有效，换页也不会丢。右上角打开菜单的药丸形按钮始终是黑色，按钮上的字用当前的底色。打开后的菜单是三根从屏幕顶部垂下来的立柱，Home、Work、Contact 各一根，高度依次是 480、373、288 像素，颜色是当前底色依次压暗的三档。菜单里的 Experiments 单独放在底部的一条横条里。

整站的版面排在一套 8 栏的网格上，每栏 216 像素宽，栏与栏之间隔 16 像素，而且访客能把这套网格调出来看。页面左上角那个小方块就是网格的开关。访客点它一下，八根 5% 黑的浅灰柱子就会铺满页面，再点一下就收起来。首屏上一条细竖线立在横向 712 像素处，把画面切成左右两半。左边只放 Designer & Developer 两行小字和面具，右边放 Based in Kyiv、名字和 Design Digital Products 那几行大字。大字每一行的缩进都不一样，the 在最左，best 在竖线右侧，ideas deserve execution 又回到中间，看上去像是有人故意把每行的起点推来推去。每一页底部的左右两个角上都贴着一个 120 像素的词，左边 bleibt，右边 gleich，颜色比底色深一档。这两个词一直贴着底边，把名字拆成两半守在两边。

Work 页把每个项目装进一块黑色卡片。卡片左下角是一个描边的圆角标签，写着 Case 或 Shot，旁边一行项目名。光标停上去时，卡片右下角会滑出一个 Explore 按钮，卡片本身也随光标轻微倾斜。首页的获奖列表是一张四栏的表格，分别是年份、项目、颁奖机构和奖项，每行之间一条细线，光标停在机构名上时会浮出获奖证书的缩略图。

在这个站的四页里，联系页是画得最细的一屏。画面中央是一个 616 像素的拨号盘，外圈有九个 96 像素的拨孔，中间一块 339 像素的黑色圆盘上放着白色的面具，右下方是一枚黑色的指停，也就是转盘电话上挡住手指、让拨号盘停下的那个钩子。上方五个孔里各画着一个小圆环，是五种主题色，左边一个孔写着 @，下方三个孔是 Instagram、Behance 和 LinkedIn。鼠标停在哪个孔上，那个孔就变成实心的黑色，中间的面具退去，换成一行白字说明点下去会做什么，比如 send email、open instagram 或 change theme。

这个站的图片只有作品截图和实验截图两种，全部装在黑框里，没有一张照片，也没有一个人像。只有页脚时钟中间那一格例外，格子里的面具轮流换上生牛肉、拉丝金属、绿色电路板这些材质，一共九种，每三四秒换一次，访客点一下也能换。

访客打开网站，先看到的是一个加载计数器。左下角一个 120 像素的百分比数字从 0% 走到 100%，两秒走完，大约三秒后页面才能操作。接着左上角的标志从一个矩形开始，花两秒左右变形成那块面具，这个变形用的是 GSAP 的形状变形插件 MorphSVG。每一行文字出场时都先被 SVG 的高斯模糊滤镜糊掉，模糊半径从 42 像素收到 0。同时还有一个颜色矩阵滤镜把模糊的边缘重新收硬，所以字不是由虚到实地淡入，而是像从一摊墨里凝出来。首页上有 54 行字，每一行都有自己的一个滤镜。

跟着光标走的那团液体，是用 WebGL2 在显卡上跑的一套流体模拟。液体每一点往哪流、流多快（速度场），以及颜色有多浓（染料场），都存在显卡上 16 位浮点精度的缓冲区里，每一帧往前算一步。液体的轮廓就是那块面具，颜色取自当前的文字色。首屏周围藏着四张作品封面，液体没流到的地方就看不见。光标扫过时，封面从液体的缝隙里露出来，几秒后液体散开，封面又跟着消失。

这个站把换主题这件事做成了一个小仪式。访客点任意一个色块，面具就在屏幕中央放大到半屏高，绕竖直的轴翻转两整圈，还带一点左右摇晃，两秒后消失。底色则在点下去的那一刻就已经换好了。站内换页由 barba 负责，这个库让页面跳转时不必整页重新加载，中间可以插进过场。旧页面先模糊到 24 像素再淡出，新页面再从模糊里淡入。

访客在 Work 页右上角切换到 Sphere 后，卡片会隐去，作品图在一个三维画面里排成一颗球。这颗球的排法用的是斐波那契球面，一种让许多点在球面上分布得很均匀的算法。访客用鼠标拖动就能转这颗球，球背面的图做了镜像翻转，所以转到后面看过去也是正的。Experiments 页是一片可以飞进去的空间，34 张截图散在远近不同的深度上。鼠标的位置决定画面往哪漂，滚轮往深处推。访客按住鼠标拖动可以平移，用 W A S D 或方向键也能飞，Q 和 E 负责升降。

访客按斜杠键弹出的对话泡是黑底，字用当前的底色，四个角里只有三个是圆角。对话泡跟着光标走，访客按回车发送后，它在访客自己的屏幕上就消失了。其他访客的光标画成一个箭头图标，他们发的话挂在箭头旁边。

页面用 Webflow 搭，动效全部写在一份 98 KB 的自定义脚本里，压缩后 30 KB，通过专门给 Webflow 挂自定义代码的工具 Slater 加进页面。脚本里有五十多个函数，各管一件事，包括加载计数器、自定义滚动条、主题、面具动画、页脚时钟、拨号盘、光标追踪、文字模糊、球体和 Experiments 页的无限画布。动画库是 GSAP 3.15，加上它的插件 MorphSVG、ScrollTrigger、SplitText、CustomEase、Draggable 和 InertiaPlugin。平滑滚动库 Lenis 1.3.21 接管了滚动，每次滚动都顺着一条 1.2 秒的自定义曲线停稳。这个站换页用的是 barba，三维画面用的是 three.js 0.128。聊天用 socket.io 4.5.4，这个库让浏览器和服务器保持一条长连接，双方随时可以互相推送消息。此外，页面上还加载了 Webflow 自带的 jQuery 库。其中负责拖拽和惯性的 Draggable 和 InertiaPlugin 虽然加载了，首页上却没有一个元素用到它们。

这个站整体很轻，访客第一次打开首页要下载 774 到 803 KB，共 36 到 40 个请求。其中最大的单个文件是 Google Analytics 的统计脚本，172 KB，其次才是 three.js 的 145 KB。作品封面全部用体积很小的新图片格式 AVIF，一共 189 KB，字体只有一个 33 KB 的 woff2 文件。访客把首页滚到底时，总下载量是 1.1 MB。访客打开 Work 页要再多下载 0.8 MB，一个项目页是 1.2 到 2.3 MB，Experiments 页是 1.5 到 2.1 MB。服务器返回第一个字节要 98 到 112 毫秒，屏幕上第一次画出内容（FCP）在 840 到 864 毫秒，最大的那块内容画出来（LCP）在 840 毫秒，远低于 Google 建议的 2.5 秒。加载中东西跳位置的程度（CLS）是 0.0007，几乎为零。页面上只出现了一个 82 毫秒的长任务，也就是脚本连续占住浏览器、让它暂时顾不上响应点击的一段时间。服务器偶尔会慢，有一次第一个字节等了 2.9 秒，第一次画出内容被拖到 6.5 秒。

流体的画布铺满整个窗口，光标不动时每帧只向显卡发出 2 次绘制指令，负担很轻，光标快速划动时帧率仍然是每秒 60 帧。页面连续滚动时也是每秒 60 帧，最慢的一帧 18 毫秒，只比 60 帧下每帧约 16.7 毫秒的预算多一点。Work 页的球体和 Experiments 页的无限画布也都是 60 帧。

bleibtgleich'26 把无障碍最基础的几件事都做到了。页面声明了语言是英文，导航 nav、主体 main、页脚 footer 三个地标区域都标了，键盘焦点上有 1 像素的描边。这个站真正的问题，出在页面的结构上。首页的 31 个标题全是最高一级的 H1，因为每一行大字都单独做成了一个 H1，Work 页也有 15 个。读屏用户靠标题的层级来把握页面结构，在这里听到的却是三十个同一级的标题。49 张图里有 40 张的替代文字（alt）是空的，包括所有作品封面，读屏软件会把它们当作装饰跳过。页脚三个社交链接没有读屏软件能念出的名字。访客在系统里打开减少动态效果的设置后，页面只改变一件事，换页时的模糊淡出变成普通淡出，流体、球体、可以飞行的画布和面具翻转都照常运行。斜杠键、网格开关、W A S D 飞行，这些操作页面上一个字的提示都没有。访客在对话泡里输入的内容和光标坐标，会发到云平台 Railway 上的一台服务器，站上对此也没有任何说明。

四项评分里 Design 最高，易用性 Usability 最低，两者相差 0.58 分。页面上公开了五位评委的分数，每人给四项打分。其中两位四项全是 7，Eugene Sokolovski 给了 8、8、7、7，Joffrey Spitzer 给了 8、7、7、7，Ilya Kostin 给了 7、7、7、8，拿到 8 分最多的是 Design 那一项。开发奖是 Awwwards 单独给开发质量打的分，这个站得了 7.22。其中动画 Animations 8.00 分最高，Nik Roytman 在这一项给了 9。无障碍 Accessibility 6.40 分最低，代码结构 Markup 6.80 分，这两项的低分和前面说的三十个 H1、空的替代文字是对得上的。

这个站的署名有两个，代理公司 The First The Last 在前，Maksym Bleibtgleich 在后。站本身是他一个人的作品集，页眉上写着 Working w/ TFTL，TFTL 就是 The First The Last 的缩写。The First The Last 在 Awwwards 上有 25 个当日站和两个年度站。它自述有 30 多人，全部是自己的员工，不外包，并把自己列在 Awwwards 上全球获奖最多的 30 家工作室里。Maksym 自己在 Awwwards 的主页上有四个提交，bleibtgleich'25 拿过当日站，InstaGallery 和 Bleibtgleich 拿过荣誉提名。站上的获奖列表比 Awwwards 主页更全，'25 那一版还拿了 CSS Design Awards 的当日站、GSAP 的当日站，以及 Awwwards 的作品集荣誉和开发奖。这一版在 Awwwards 上的自述只有一行，the best ideas deserve execution。