Why Zero

Zero 在 2026 年 5 月底上线，它的官网把自己介绍成大学之外的另一条路。课程按真实的岗位倒推出来，学员在一个模拟的公司世界里跟着经理、教练和队友做项目，最后通过 Zero 的人才网络去找工作。官网上的创办故事写到，这个团队过去十年办过一个叫 TKS 的青少年教育项目，看到很多学员进了大学之后反而慢了下来。Why Zero 是这家公司的宣言页，只讲一件事，就是学位为什么已经不够用、Zero 为什么要存在。团队在 FWA 的说明里写到，他们希望访客感受到这个论点，而不只是读到它。

访客走过的是一条从 -100 BZ 数到 0 BZ 的时间轴。屏幕顶部的刻度把故事分成五幕，分别标着 -100 BZ、-75 BZ、-50 BZ、-25 BZ 和 0 BZ，加载画面里的数字也从 99 往下数，最后化成 zero 这个词。第一幕讲访客从小相信的承诺，字幕依次写着 You Believed、College would land You a JOB。第二幕先打出 But, 和 That's Bullsh*t，然后让一块块碎玻璃带着统计数字从真人的手前飘过，比如第一份工作找错方向的人里，有 73% 在十年后仍然困在原地。第三幕的字幕连成一句控诉，University sells Paper, but Companies want Someone who can do the Job，并以 and that's Why we had to Exist 收尾。第四幕打出 Introducing zero，接着依次讲真实的项目、工具和技能，最后进入第五幕的城市地图。

故事的节奏由每一幕分到的滚动长度和三种推进方式决定。讲承诺的第一幕最短，讲论点的第三幕和介绍产品的第四幕最长，第四幕的滚动距离大约是第一幕的两倍，所以访客在控诉和产品上停留得最久。幕与幕之间有三种连接方式。第一种是访客自己滚动，第二种是网站接管画面、自己播完一段过场，比如画完零之后的融冰和穿过隧道之后的升空，各用三秒左右。第三种是按住按钮，它只出现在两个转折点上，一次是从美梦跌进现实，另一次是从控诉转向 Zero 的产品。网站要求访客按住三秒才能打碎第一幕的草地，按住一秒半才能冲进隧道，所以故事的两次转向都由访客自己动手完成。每走完一幕，右上角的经验值就加 100，访客走到城市时正好是 500。

第五幕把控制权交给访客。城市是一张可以拖动和缩放的地图，四个发光的白点分别对应 Nike、OpenAI、Google 和 Spotify。访客点开一个白点，就会看到一张卡片，上面有一段讲解视频、一个岗位名称、一个模拟项目和要用到的工具，比如为 Nike 一双新跑鞋预测每周销量的数据科学家项目。每张卡片底下都有一个 Join Beta 按钮，屏幕底部那条一直跟着访客的黑色长条也是同一个入口，长条上的菜单还链接到 Zero 的主站和创始人写的一组公开信。访客留下邮箱、填完一张简短的资料表之后，网站会把一张写着访客名字和学校的证书折成一只纸折的小动物，分享卡片上写着 Your degree is finally useful。故事前半段把证书撕成纸条，结尾又把证书折成一样新东西，前后用的是同一个比喻。

Why Zero 的设计规矩是每一幕占一种底色，而字幕的排法和界面的样子在五幕里保持不变，所以底色一换，访客就知道故事翻到了下一页。进门的冰面是一层偏灰的薄荷绿，网站底层的渐变从深墨绿（#1c4839）过渡到几乎发白的薄荷色（#d4f6eb）。第一幕的天空是很淡的水蓝，草地上落着粉色的花瓣。第二幕整屏换成暗红色的幕布（约 #5f0a0e），第三幕沉到接近黑色的墨绿（约 #101511），隧道亮起时是一片浓绿（约 #094612），第四幕的云层几乎是纯白。变化最大的两次换色，一次从草地跳到红幕，一次从黑暗冲进白光，正好落在两次按住按钮的时刻上，颜色的断点和故事的转折对在了一起。

字幕是全站设计感最强的部分，每一句都把一个关键词写成大号的花体字，其余的连接词用细长的衬线字（笔画末端带小装饰的字体）挤在它的旁边。College、Paper 和 Exist 这类关键词都写成带长笔画的花体，would、land、who can do the 这类小词则缩在这些长笔画留出的空隙里。网站菜单和报名表里用的花体 Bethany Elingston 和衬线字 STK Bureau Serif，与字幕里的两种字形一致，字幕很可能就是用这两款字排的。这些字幕在网站上是一张张事先排好的图片，所以每一句的大小、字距和小词插进空隙的位置，都由设计师一句一句地决定，用网页上的普通文字很难排出这种效果。字幕的颜色跟着底色走，亮的几幕用深青绿色，暗的几幕用白色。

操作提示和按钮上的文字换成了另一套朴素的字体，和字幕的花体分得很开。操作提示用等宽的大写小字 PP Supply Mono，比如冰面中间的 DRAW A ZERO、底部的 SCROLL 和按钮旁边的 TAP HOLD，顶部刻度上的 -50 BZ 也是这款字。加载时左下角那个巨大的倒数数字用 Supply Sans 的粗体，经验值的数字用 Google Sans Flex，按钮上的 Join Beta 用 Inter。这样分工之后，花体只负责讲故事，等宽字只负责告诉访客怎么操作，访客一眼就能分清哪些是故事、哪些是指示。

网站界面上的按钮分成两类，两类都做得像实物。一类是磨砂玻璃似的圆形按钮，左上角的声音开关、地图上的方向键和缩放键都是这种样子。按钮的左上边缘有一道白色高光，右下边缘有一道暗边，里面还有一圈柔和的内发光，看起来像一颗凸起的玻璃。

第二类按钮集中在屏幕底部那条深色长条上，中间是写着 Join Beta 的胶囊，左边是 Zero 的绿色圆形图标，右边是菜单按钮。胶囊是深灰色的（#353133），上沿有一道一像素宽的亮线，四周还有一圈很淡的描边，看起来像一块微微倒了角的实体按键。访客点开菜单后，长条上方会升起一块磨砂面板，用衬线字列出 Home、Letters 和 Why Zero，菜单按钮也变成一个叉。光标移到其中一个链接上时，链接的字会向上滚动换一遍。访客点 Join Beta 后，胶囊会原地变成一个填写邮箱的长条，左边多出一个返回箭头。

两只手的对照是三维画面美术方向的核心。一只是半透明的荧光绿色手，表面有虹彩一样的光泽，颜色和 Zero 的绿色图标同属一个色系。另一只是写实的真人手，带着皮肤的纹理和柔和的自然光。第一幕里两只手从左上和右下伸向对方，背景是希腊柱子、池塘和从右上角照下来的光束，构图明显借自米开朗基罗的壁画《创造亚当》。后面几幕的道具都按真东西来做，碎玻璃的边缘折射出彩虹色，烧掉的是印着 Z 字徽章和 ZR 编号的百元美钞，撕碎的纸条上印着报纸文章和企业家的语录，最后的城市里能认出 Netflix、Nike、麦当劳和 Uber 的总部大楼。整个画面盖着一层细细的胶片颗粒，让渲染出来的三维画面更像一段拍出来的影片。

手机版同样有全部五幕和两次按压，网站只把界面和字幕重新排过。顶部的五个刻度换成一条细细的分段进度条，旁边跟着一个不断变小的数字，从 100 BZ 一路数到 0 BZ。字幕换成竖着排的另一组图片，统计数字的玻璃片也改成上下叠放。底部的长条变窄了，地图上的方向键和摇杆都去掉了，访客直接用手指拖动地图。最后的城市地图放进一个圆角的框里，画面放大到一列总部大楼刚好填满竖着的屏幕。

Why Zero 的页面本身一动不动，滚轮和手指推动的是网站自己记着的一个进度，画面上的所有东西都跟着这个进度走。访客每推一下滚轮，进度的目标就往前跳一段，画面则每一帧只追上剩下距离的一小部分，所以访客松开滚轮之后，画面还会顺着往前滑一会儿才停稳。两只手的动作、镜头的移动、玻璃和纸条的飘动都绑在这个进度上，访客往回滚，它们就倒着放回去。访客停下来的时候，两只手的手指会自己轻轻屈伸，等访客再滚动，这层小动作又悄悄退掉，所以画面不会因为访客停下来就冻住。

进门的融冰是整个站的第一个招牌动作。加载画面里，左下角的数字从 99 往下数，数字的边缘像冰一样碎开，最后变成 zero 这个词。随后绿手从屏幕下方升起，用食指在 DRAW A ZERO 几个字周围一圈一圈地画，示范访客要做的事。访客按住鼠标或手指开始画时，冰面会沿着笔迹融出一道深色的沟，沟的两边泛着一圈像电光一样发白的冰晶，绿手和一个白色的光点跟着笔尖走，拖动的声音也随着画的速度变响、变尖。网站判断这是不是一个零只看三件事：画的圈要转过大约 330 度，各处离圆心的距离要差不多，终点要回到起点附近。圈一合上，冰面就从这个圈的中心向外融开，三秒半之内变成一片白光，中间亮起一颗金色的四角星和 +100 XP，接着 You Believed 浮现出来。

每一句字幕出场时都像镜头在对焦。进度走到某一句字幕的范围时，这句字幕会先以模糊的样子出现，随后很快变清楚，越到后面变得越慢。整个过程大约四秒，不过大部分变化发生在开头，所以访客看到的第一眼已经差不多是清楚的。字幕离开时只用三分之一秒淡掉。字幕出不出现只看进度，访客往回滚时，它们会按同样的方式重新出现。

按住按钮是 Why Zero 的第二个招牌动作，它出现在第一幕和第三幕的末尾。进度走到这一幕的最后一小段时，屏幕中间会出现一个白色圆环，旁边写着 TAP HOLD，访客按住它，圆环就沿着一圈细线慢慢填满。第一幕要按住三秒，按的过程中草地先变得更浓、更饱和，绿手握成拳头，接着整个画面一点点褪成暗红再沉进黑色，背景音乐也从第一幕的音乐慢慢换成第二幕的。圆环填满的那一刻，黑色的画面像玻璃一样碎开，碎片向四周飞散，露出后面红色的幕布。团队在 Codrops 的文章里写到，碎开时颜色会在大约 200 毫秒内弹回原样，他们试过 400 毫秒，冲击力明显弱了。

按压的过程允许访客反悔。访客如果中途松手，圆环会在三分之一秒内退回，画面和音乐也恢复原样。不过访客在半秒内重新按下的话，圆环会从接近刚才的位置接着走，松手越久，退回得越多。网站还会拉长或缩短按压的音效，让它的长度正好等于这一次要按的时间。

第三幕末尾的按压换成了一次加速。and that's Why 和 we had to Exist 两句字幕留在屏幕两侧，中间是一层层零字形的绿色圆环。访客按住一秒半，镜头沿着圆环越推越近，中心的光越来越亮，最后整个屏幕被白光吞掉，Introducing 从白色里浮出来。之后网站自己接管三秒，镜头冲出白光，云朵从城市上方慢慢散开。

每一幕里还有一样跟着进度动的主角。第二幕的玻璃片带着统计数字从下往上漂过真人的手，同时慢慢翻转。第三幕里，一张张钞票从边缘开始烧起来，火线弯弯曲曲地往里推。火线前面有一道亮黄色的边，烧过的地方先变得焦黑，然后整块消失。一条从左往右推进的线把证书撕开，每撕下一条，那条纸就各自翻转着往下掉。第四幕里云层慢慢向两边散开，城市从云下面一点点露出来。

网站界面上的小动作都很短，而且先快后慢。访客打开菜单时，底部长条先往两边撑开，三个链接依次升起，每个比前一个晚出发大约五十毫秒，整组在三分之二秒左右到位。菜单关上只用三分之一秒，叉号转回成两条横线。访客点 Join Beta 时，胶囊上原来的字先淡出，大约十分之一秒之后邮箱输入框淡入，返回箭头同时从长条后面升起来。访客移动光标时，镜头会朝光标的方向轻轻偏一点，在手机上，镜头则跟着手机的倾斜偏转。

手机上的每个动作都换成了手指，访客用手指画零、用手指上下滑动推进进度、用手指按住按钮。手机上每一幕的滚动距离缩短到桌面的七成，整个故事三十多次滑动就能走完。

从草地到城市，台式机上的画面一直保持每秒 60 帧，五幕和两次按压里都没有持续的卡顿。画面只在画完零之后、穿过隧道之后和第四幕开头各停顿过一下，一闪而过。这几处都是新一幕刚开始的时候，很可能是网站正在把新一幕的素材交给显卡。

Why Zero 的工程核心是用一个数字驱动整个故事。网站不用浏览器自己的滚动，也不用 ScrollTrigger，页面的高度始终只有一屏。滚轮和触摸事件只改一个虚拟的滚动目标，每一帧的位置按 0.075 的系数向目标靠近，网站又把这个系数换算成和帧率无关的指数衰减，所以在刷新率更高的屏幕上，滑动的手感也一样。故事拆成九段，加载和画零算第一段，每一段只声明自己占多少滚动长度，再提供进入、按本段进度刷新画面、每帧更新和退场四个函数。

段与段之间的过场和按压也挂在同一个数字上。三段过场由网站自己播放，用先慢后快再变慢的 smoothstep 曲线在三秒左右走完，两次按压共用一套可配置的按住组件，各自挂上自己的画面和音乐。团队在 Codrops 的文章里写到，从任意一段开始调试时，网站会把前面每一段的生命周期都重新跑一遍，所以画面永远和访客自己一路滚过来时一样。网站还把访客走到的那一段存进当前标签页的会话存储，访客在半小时内刷新页面，会从那一段接着开始。

网站的画面由 three.js 在一块铺满屏幕的 WebGL2 画布上画出来，每一帧依次经过一串后期处理。团队列出的顺序是三维场景、程序生成的背景、未碎玻璃的折射、画零的霜和笔迹、景深、调色和胶片颗粒、字幕合成以及碎玻璃。景深的质量跟着画质档位走，玻璃、字幕和碎裂这三道处理在加载画面结束之后才创建，并在前一幕的空闲时间里预先编译好着色器，所以它们第一次出现时不会因为编译卡一下。整串处理里只有调色那一道做色调映射，按住按钮时画面变红也是在这一道里完成的，做法是按比例压低画面的绿色和蓝色，只把红色留下。字幕在色调映射之后才合成，所以白色和深青色的字不会被调色染脏。

画零的门由一个很短的手势判断和一道霜的着色器组成。手势判断只收集按住期间的笔迹点，点数满二十个后，网站算出这些点的中心，再检查三件事：笔迹绕中心转过的总角度超过 5.76 弧度，各点到中心距离的标准差不超过平均半径的 35%，终点离起点不超过一个平均半径。通过之后，笔迹的中心就成了融冰的起点。霜的效果用一对来回交换的渲染目标来做。每一帧沿横、竖和两条对角线四个方向各扩散一次，每次取相邻像素里最亮的值，所以融开的形状是一个八边形。扩散的步长再按冰面贴图的亮度调整，边缘就长出了冰晶一样的锯齿。

两只手和镜头的动作都是在 Blender 里做好的动画，滚动只是它们的播放头。网站加载带骨骼动画的手部模型和一个只装着镜头动画的模型文件，把每一段动画的时间设成总时长乘以当前进度，所以镜头路线完全照着三维软件里的设计走。网站把真人手的光照烘进了贴图。团队在文章里写到，实时打光太贵，也很难和原画对上，所以他们为每个关键帧准备一张光照贴图，再用两个贴图槽交叉淡化。混合之前，网站先预乘透明度，避免手的边缘出现一圈黑边。绿手用的是材质捕捉（matcap）贴图，再加一张法线贴图和一张遮罩，所以它看起来有光泽，却不需要场景里有任何灯光。访客停下滚动时，网站给每根手指的骨骼加一点正弦形的摆动，动效章里手指自己屈伸的效果就是这样来的。

每一个高潮时刻都配了一段专门的着色器。烧钞票用噪声加距离场决定每个点被烧到的先后，火线扫过之前先亮起一道高动态范围的余烬边，之后变成焦黑，最后整块丢弃。分形噪声是这段着色器里最贵的部分，所以离火线还远的像素会尽早跳过。撕证书时，每个顶点记着自己属于第几条纸。撕裂线从左往右推进，每条纸按自己的随机数下坠和翻转，光照用的法线直接从驱动波动的函数里算出来，所以不用再下载一张法线贴图。

隧道和字幕用的着色器更简单。隧道是把 ZERO 标志的截面拉伸出来的，一道亮光按世界坐标的 Z 值沿着隧道往前跑，所以重复拼接的隧道段之间看不出接缝。字幕的对焦用七个采样点组成的六边形模糊，模糊半径跟着出场进度缩小。团队还写到，几段着色器必须写明 highp 精度，因为不少手机显卡把 mediump 当成真正的 16 位浮点数，在那些手机上，证书的纸条会全部动成一个样子。

故事里的字幕全部来自一张图集。网站把三十多句字幕排在一张 KTX2 压缩贴图里，每一句记着自己在图集里的位置、宽高比、锚点和出现、消失时的进度。锚点决定字幕贴在屏幕的哪一边，宽度则按屏幕短边计算，台式机有一个最小的基准尺寸，所以在 1366 和 1920 宽的屏幕上，字幕的像素大小是一样的。手机按另一组更小的基准计算，字幕再缩小到八成五，贴在下方的字幕还会给底部长条留出位置。团队在文章里写到，字幕原来分散在四张图集里，后来才合成一张。

资源的准备占了四个月开发时间里的大部分。团队在文章里写到，原始素材是 Blender 的制作场景，带着 8K 贴图和烘好的动画，总共超过 1 GB，第一个月主要在为每一样素材挑格式。模型用 DRACO 压缩，贴图用 KTX2 的 ETC1S 编码，两种解码器都放在自己的服务器上，因为有一次第三方 CDN 变慢，所有压缩素材都解码失败了。团队还在内部的后台里做了一个压缩预览工具，把压缩前后的图并排比较，每张贴图单独调压缩强度。五十多张单独的图片合进了大约十二张图集，比如所有手部贴图挤在一张四乘四的图集里，渐变背景则改成几行着色器代码。

素材按幕分组，访客每进入一幕，网站就在后台加载下一幕的素材，第五幕的城市地图单独一组，访客还在第一幕时它就开始下载。为了不在滚动中途卡顿，网站在空闲时间里把贴图逐张交给显卡，大图集切成 256 像素见方的小块，每帧只传一块，换幕之前再把队列清空。

这套做法的结果是，访客在能画零之前下载约 6.3 MB，走完整个故事一共约 10 MB，和团队说的不到 10 MB 大致相符，四张公司卡片的视频全部点开还要再加约 1.8 MB。最大的单个文件是城市地图的贴图，约 3 MB，其次是手部的图集，约 0.9 MB。网站在 HTML 里先写好一个和画布上的倒数数字同字体、同位置的 99，所以浏览器在约 0.2 到 0.3 秒就画出了第一屏，等 WebGL 启动后，画布上的真数字正好盖住它。可以画零的冰面在约 4.5 秒后准备好。

网站还会根据实际帧率自己调整画质，它把最近 60 帧的平均耗时和两个门槛相比，超过 22 毫秒就降一档，低于 12 毫秒就升一档，每次调整之后要等 180 帧才会再判断。最高档的像素比上限是 2，中档是 1.5，最低档是 1，最低档同时关掉景深、减少硬币环的分段、降低字幕的清晰度。玻璃碎开的那一刻，网站还会把像素比临时乘以 0.8。在 2 倍像素比的台式机上，画布从 3840 像素宽降到 3072 像素宽，碎完再恢复，团队在文章里说这样能把这一刻的开销藏进动作里。手机拿到的素材基本相同，只是第二幕的背景视频、云层图集和金色星星的视频换成了小一号的版本，景深的模糊也少做一轮。

声音交给 Howler.js，每一幕有自己的背景音乐，换幕时前后两段音乐交叉淡化。访客第一次按下鼠标或手指，也就是开始画零的那一刻，网站才解锁浏览器的音频，所以进门的手势同时也是打开声音的手势。访客打开报名表或公司卡片时，网站把所有音乐送进一个低通滤波器，在四分之一秒内滤掉高音，听起来像隔着一堵墙，点击声和转场时嗖的一声走另一条不受影响的通道。团队写到，玻璃碎裂的声音按画面真正画出第一帧的时刻播放，不按计时器，否则在慢的设备上，声音会比画面先到。

报名之后的奖励也是在浏览器里实时生成的。网站先在一块 2D 画布上把访客的名字和学校写进一张证书图片，再把它当作贴图套在一只纸折动物的模型上。动物一共十种，网站按名字算出的哈希值选出其中一种，模型里带着一段从平纸折成动物的动画。分享卡片上写着 Founding member 和编号，访客可以把它导出成一段视频。网站用 html2canvas 截下卡片，再把折纸动画逐帧画出来，交给浏览器的 WebCodecs 视频编码器和 mp4-muxer 拼成 MP4，整段视频都在访客自己的浏览器里生成。

Why Zero 只适合用鼠标或触屏、看得见画面的访客。故事的字幕全部是画布里的图片，页面上没有标题，也没有可以读的正文，读屏软件读到的只有几个按钮。在画零的门前，键盘访客按 Tab 时，焦点只停在顶部五个看不见的刻度按钮上。访客按回车可以直接跳到某一幕、绕过画零的门，但 DRAW A ZERO 的字样会留在屏幕上。之后方向键、空格和翻页键都推不动故事，两次按压也只认鼠标和手指。网站只在一处读取减少动态效果的设置，用它停掉声音按钮上的波形动画，融冰、碎玻璃和镜头的运动都照常播放。

Why Zero 最早拿到的是 FWA 的当日最佳，时间是 7 月 17 日，得分 86，随后它成为 FWA 7 月的月度最佳。8 月 11 日，它拿到 CSS Design Awards 的当日最佳，同时拿了那里的界面设计、体验设计和创新三项公众奖。9 月 7 日，它又拿到 Awwwards 的当日最佳和开发奖，最后成为 Awwwards 9 月的月度最佳。

在 Awwwards 的四个分项里，创意 Creativity 最高，得了 8.16。团队自己写到之前没见过画零开门这种做法，这种开门方式和按住打碎的转场，可能是这一项高的原因。可用性 Usability 最低，得了 7.46。网站不用浏览器的滚动，转折处必须按住按钮，键盘又推不动故事，这几点可能拉低了这一项。

Awwwards 的开发奖评委给了它 7.26 分。动画 Animations 最高，为 8.40，语义 Semantics 和无障碍 Accessibility 最低，都是 6.60，和工程章里字幕全是图片、页面没有可读结构的问题对得上。FWA 把它归进教育、实验和推广三类。

表里的战绩是截至 2026 年 10 月 24 日的累计数。这个站由两方合作完成。Zero 一方由 Atul Khola 带着团队拿出概念和设计方向，交给 BUNQ LABS 的原始材料是图片和视频，没有交互说明，所以每一道门怎么操作，都由 BUNQ LABS 从头设计。在 BUNQ LABS 一方，Sindhur Dutta 带着 Shuprobho、Yashas 等人做了网站的开发、三维管线、着色器和性能优化。

BUNQ LABS 是靠一个原型拿下这个项目的。团队在 Codrops 的文章里写到，他们没有做提案演示，而是花 48 小时先做出了一个能用的画零原型。之后团队又用四个月做完整个站，初版代码有不少由 AI 生成，再逐一改写和打磨。BUNQ LABS 在官网上说，品牌、界面、动效和实时网页都由同一个小团队设计和开发，每年只接几个项目，Sindhur Dutta 在 FWA 的另外一次当日最佳来自工作室自己的官网。