Oryzo AI

Lusion 平时主要替品牌和代理商做三维互动网站，做的多是数字产品，还没有给一件实物产品做过官网。Edan Kwan 在工作室博客的幕后连载里写到，团队想试一试实物产品在网页上该怎么讲故事，可手上没有产品，于是有人从桌上拿起一块宜家的软木杯垫。选它正是因为它太普通，不带任何品牌，团队不想借名牌的光让作品显得体面，想证明的是能卖出这个，就能卖出任何东西。连载里还写到，这是工作室花了一年做的内部项目。网站之外还有一支模仿创业公司创始人的视频、一个发布在 GitHub 上的开源模型页面和一套社交媒体内容。

网站的开场先是一段加载画面，画面上用矢量绘图软件的样子画出杯垫的轮廓，两个同心圆上挂着橙色的控制柄。加载画面之后，首屏是一张从正上方俯拍的工作台，绿色的切割垫上放着杯垫、铅笔、美工刀和回形针。首屏左上角是巨大的 ORYZO 字样，左下角一块磨砂玻璃似的卡片写着 DESIGNED BY LUSION, THE AWARD-WINNING DESIGN STUDIO，右下角是那支创始人视频的缩略图，访客点开就能在页面上看。

整个站的骨架就是一张标准的产品页。团队在连载里列出的顺序是首屏、核心卖点、用法、规格、用户评价、型号对比和购买，网站从上到下也是这样排的，一共约六十四屏。不同的是，每一段都换上了 AI 时代的说法。核心卖点一段写的是 Powered by AI，旁边的小字注明这里的 AI 指的是 Adobe Illustrator。规格一段把保温说成热扩散模型，把圆度说成 RoPE（Roundness Optimization & Perimeter Engineering），还给出一条 37.9% 更圆的数据。

网站后半段的玩笑同样贴着真实的产品页来写。用户评价里有一条署名 Edan K.，身份是想当宇航员的人，另一条借的是漫画《海贼王》里的 Gol D. Roger。型号对比的三档叫 ORYZO、Pro 和 Pro Max，表格里的连接方式写着无，更新写着从不。页面最后还有一段学术论文的样子，说 Oryzo-1 是一个开源的杯垫模型，附带论文、模型文件和一段引用格式。

团队给这个站定了四条原则，画面要真实，产品始终在中间，过渡不能有断点，还要好笑。连载里写到，高端产品页和追求奇观的实验站不一样，所以团队收起了夸张的变形和满屏乱飞的物体，让杯垫始终留在画面中心。整页因此是一个连续的世界，从工作台到黑暗的展台、从照片墙到显微镜，场景换了很多次，镜头却几乎没有中断。玩笑的位置也按这个节奏安排，大部分时候页面认真地讲规格，只在几处让访客亲手参与玩笑。访客可以用光标拨动那只手的手指，请杯垫穿上比基尼，在杯垫底面写一句加密信息，或者让一只水熊虫从显微镜里跳出来。最后一屏写着我们用一个不存在的产品吸引了你的注意，下面就是 Lusion 官网的按钮和商务联系邮箱。

Oryzo 的设计规矩是把版面做得尽量安静，把注意力留给三维画面和那些调侃 AI 的玩笑。团队在连载里写到，页面上已经有渲染图、照片、手绘和满屏的道具，设计不能再抢注意力，所以字体和颜色都尽量少用。整页几乎都铺着一种接近黑色的深棕（#100904），文字是带暖意的奶油色（#ffedd7）。强调色是一种偏红的橙（#dc5000），主要用在 ORYZO-1 这样的小标签、评价里被标出的关键词和选中的按钮上。第四种颜色是灰绿的橄榄色（#445231），用在环保一段第一张数据卡片上，加载画面的底色也是一种相近的绿。深棕和奶油让整个站像一间灯光很暗的展厅，所以橙色每次出现，访客的视线都会被拉到一个关键词或者一个能按的按钮上。

Oryzo 页面上九成以上的文字都用同一款无衬线字（笔画末端不带装饰的字体）Halyard Display，标题和正文只靠字号和字重分出层次。正文和小标题用 400 和 500 两档，sustainability、Runs on the edge 这类占满一屏的大字才用到 600。在 1920 像素宽的屏幕上，常用的字号依次是 164、68、45、32、24 和 16 像素，最大的标题是正文的大约七倍。这套字号会同时看屏幕的宽度和高度，取两者里更紧的那一边来缩放，所以在又宽又矮的笔记本屏幕上，标题也不会大到挤出画面。版面底下是一套十六栏的网格，在 1920 像素宽的屏幕上，每栏 90 像素，栏距 24 像素，左右各留 60 像素的边距。

团队只在两处有意打破了这套规矩。一处是照片墙最后那张杂志封面，RISE、We Are So Cooked! 和刊号都换成了衬线字（笔画末端带小装饰的字体）Literata，排成一本老派时装杂志的样子。团队在连载里写到，这是全站少数让界面本身也做得醒目的地方，因为那一段的画面本来就需要这样的装饰。另一处是 ORYZO-1 那段假论文，引用格式的代码块换成了等宽字 DM Mono，像是从学术网站上抄下来的。两处例外都在模仿另一种媒介，所以它们和全站的安静并不冲突。

Oryzo 界面上的部件都做得很小，样子也统一。右上角的四个导航链接平时是小号的大写字，光标移上去时字母会滚动换一遍，页面其余部分同时暗下去，只留导航亮着。按钮是两端圆头的长条，深色的用于一般操作，橙色的留给 Send 这类最主要的操作。照片墙一段的画面套在一个虚线取景框里，四边中点各有一道刻度，右上角一个小圆点，像相机的对焦框。首屏右上角还有一块竖着写 ORYZO-1 MODEL 的奶油色小条，它其实是整页的滚动条，访客点它会直接跳到页面末尾的 ORYZO-1 一段，往下滚动后它缩成屏幕右边一根细细的滑块。

三维画面的美术方向是暖光下的真实材质。杯垫的软木表面有清晰的颗粒和起伏，背后的深棕色空间在左下角透出一团橙色的光晕。中段的工作台是一张实木桌，上面有洞洞板、绿色键盘、游戏手柄和一杯带盖的咖啡，桌面和洞洞板上落着一片斑驳的光影。连载里写到，团队放弃了更抽象、更像典型获奖站的第一版方案，因为它看起来没有生气，宁可少一点极简，也要把产品放进一个可信的环境里。为了平衡这些科技感，网站上的插画都是团队在 Procreate 里手绘的，包括圆度一段模仿达芬奇解剖手稿的橙色草图和咖啡杯上的宇航员图案，没有一张用 AI 生成。

到了手机上，Oryzo 保留了每一个三维场景，只把文字排成一栏。顶部的四个链接收成一个写着 MENU 的圆头按钮，首屏的大字 ORYZO 和介绍文字排在杯垫上方。手机上的首屏工作台没有铅笔、美工刀和回形针这些道具，只剩切割垫和杯垫。在平板上，因为屏幕宽度超过 767 像素，网站用的是桌面的版面，只是下载给手机准备的那一套资源。

Oryzo 几乎所有的动作都跟着滚动位置走。访客滚到哪里，画面就停在哪里，往回滚就倒着放一遍，极少有滚到某处后自己播完的动画。标题的出场也是这样，小标签的每个词从下方升起，大标题的字母一个接一个从模糊变清楚，说明文字一行行往上推。访客在半路停下，字就停在半模糊的样子。滚动本身也被网站接管了，滚轮每格滚动 100 像素，页面先快后慢地追上去。页面大约四分之一秒走完九成，0.4 秒左右停稳，所以整页滚起来顺滑，却不会滑过头。

开场把加载画面和首屏接成了同一个动作。加载画面上的两个圆环先带一点回弹地放大到位，奶油色随后沿着圆环按加载进度填满，旁边几道虚线圆还在慢慢转。加载完成后，这张线稿图慢慢淡去，俯拍的工作台从一片模糊里变清楚，真实的杯垫恰好出现在刚才圆环的位置，看起来就像那张设计图变成了实物。紧接着，铅笔、美工刀和回形针从画面外飞进来，各自比前一个晚一点出发，在大约一秒内先快后慢地落在桌上。在桌面版上，光标扫过这些道具时会把它们推开一点，铅笔和美工刀还会左右晃几下，然后停在新的位置。

访客往下滚动后，首屏的工作台微微后退并变模糊，杯垫从桌面升起，进入一个漆黑的空间，首屏的 ORYZO 大字也缩成左上角的小标志。杯垫在黑暗里翻转，先露出侧面，再正对访客，ISN'T JUST A COASTER 几个字跟着淡入。接着 Powered by AI 的字母一个个从模糊里浮出来，一只六根手指的手从屏幕下方升起，用指尖托住杯垫。手的每一个关节都跟着滚动位置一帧一帧地动，访客往回滚，手就慢慢放下去。这只手出现时，屏幕四边亮起一圈粉、橙、黄、青四种颜色的光，光从屏幕右边滚动条所在的位置先亮，再沿着四边铺开，模仿的是苹果手机上 AI 功能启动时的彩虹边框。

那只手还会回应光标。访客把光标移到手的上方，再慢慢往下移，弯着的手指会按顺序一根根伸开，光标越往下，伸开的手指越多。光标离开画面中间的区域，手指就弯回去。每根手指都带着一点弹性追上目标，会稍稍超过一点再回来，像真的手指一样有分量。在手机上，网站改用手机的倾斜来控制手指，访客把手机歪向一边，手指就跟着伸开。

再往下，杯垫被放进一个虚线取景框里，旁边出现 SO PORTABLE 一行小字。一个印满 ORYZO 字样的橙色包装袋随即裹住杯垫，一个巨大的 wearable 从右边滑进来。访客继续滚动，包装袋从上方被撕开，碎片向两边翻卷出去，屏幕上的大字变成 it's wearable，杯垫正好挡在两个字母之间。大字随后发出一圈白光，杯垫落进一张照片里，变成一个人别在夹克上的 AI 胸针。胸针旁边浮出一块青色的全息小界面，提醒这个人今天只喝了三杯咖啡。

照片接着排成一条横向的长条，访客每往下滚动一段，长条就往左滑过一格，两边的小缩略图跟着移动。长条一共八格，开头是夹克上的胸针，结尾是一本杂志的封面。中间几格里有一段短视频，一个练瑜伽的人把头整个转过一圈，画面下方标着专业人士表演、请勿模仿。其余几格里，杯垫搭在别人肩上、挡在一只眼睛前面、咬在一个人嘴里。有一格是红底的杯垫照片，照片下方有一条对话，写着嘿 @oryzo，可以穿上比基尼吗。访客点右边的 Send，对话条就滑下去，照片从模糊变清楚，杯垫上多了一套青绿色的比基尼，这是在调侃社交网站上让 AI 改图的风气。

杂志封面那一格把照片墙和后面的三维场景接了起来。封面上的咖啡杯就是后面那个三维场景里的同一只杯子，封面的文字退出以后，镜头直接推进封面，杂志变成了一整个立体的工作台。在这个工作台上，镜头沿着团队预先设计好的路线移动，访客滚动多少，镜头就前进多少。第一站讲杯垫能把杯子垫高，第二站整个画面换成热成像，热成像的颜色从屏幕左下角沿着一条斜线扫向右上角，咖啡杯显示成最亮的黄色。屏幕右边一根刻度从 CREATIVE T=10 排到 DETERMINISTIC T=0.1，这是在拿大模型的温度参数开玩笑。

第三站镜头转到桌子正上方，杯垫变成一张橙色线稿，四周的手绘草图各自慢慢浮现又淡去。光标划过时，草图会被拖出一道模糊的拖影。最后，线稿上的两个圆被拉成 ORYZO 字样里的两个 O，整个标志从构造线里长出来，和开场的加载画面用的是同一套画法。

Oryzo 页面中段还有两处可以亲手玩的地方。加密一段里，访客在输入框写一句话，这句话就印在杯垫的底面上。访客按下按钮，杯垫在大约 0.8 秒里翻过来，字就藏到了下面，每次落下的朝向都是随机的。防滑一段里，镜头贴近杯垫边缘，画面褪成黑白，一个小显微镜窗口显示着软木的放大纹理。访客可以按住这个窗口左右拖动，松开后它会带着弹性回到中间，窗口上的摩擦系数也在 0.80 到 0.93 之间跟着变。如果访客来回甩动它好几次，一只立体的水熊虫会带着回弹从窗口里蹦出来，屏幕上同时飘满小一号的水熊虫。

到了页面后半段，网站的动作更收敛。环保一段先是一片树皮的特写，树皮沿着中间裂开，露出后面的 sustainability 大字，背景随后从深棕翻成奶油色，上面晃着一片棕榈叶的影子。用户评价一段里，一只杯垫在列表中间慢慢转动。再往下，一条横向的卡片带随着竖向的滚动往左移动，卡片里的照片和标题以不同的速度移动，多出一层视差。在选型号一段，访客点 Pro 或 Pro Max，杯垫在大约半秒里叠成两层或三层。页脚的背景里飘着一串咖啡豆，它们沿着螺旋的路线慢慢流动，光标经过时会把附近的咖啡豆推开。

访客用滚轮从工作台一路滚过照片墙、显微镜和选型号，直到页脚，每一段都保持每秒 60 帧。打开网站后第一次滚过照片墙到工作台那一带时，页面有时会卡住将近一秒，再滚一遍就不会。

Oryzo 是一个用 Astro 搭的静态页面，所有三维画面都画在一块铺满屏幕的 WebGL 画布上，画布固定在页面后面，文字、按钮和照片墙仍然是普通的网页元素，叠在画布上面。画布由 Lusion 自己的一套引擎驱动，底层是一个 Lusion 改过的 three.js。引擎每一帧读出每个网页区块在屏幕上的位置，换算成这一段的进度，再交给对应的三维场景。全站只用一只杯垫模型，从首屏到选型号都是同一个物体。每一段只给它换上不同的环境光、灯光位置和材质，所以镜头换场景时，杯垫本身不会被替换，衔接处也不会跳一下。后期处理的参数同样按段保存，泛光、景深、暗角和色调各有一份，相邻两段之间按滚动进度混合。

滚动和镜头路线是这套连续感的核心。网站拦下了浏览器原生的滚轮事件，每格滚轮先把目标位置加上 100 像素，实际位置每帧按指数方式追近目标，系数 12 大约相当于 80 毫秒的时间常数。算出的位置再写回浏览器原生的滚动位置，所以网页元素的位置仍然靠原生滚动来算。镜头路线和杯垫、咖啡杯的动作都是团队在 Houdini 里做好的动画，导出成逐帧的位置、旋转和焦距。引擎按这一段的进度找到对应的两帧，位置做线性插值，旋转做球面插值，焦距换算成视角，所以访客的滚轮其实是在拖动一条在三维软件里剪好的镜头。文字的出场用 GSAP 的 SplitText 把标题拆成字母、把说明拆成行，但这些出场没有交给补间动画，程序每一帧按滚动进度算出每个字母的透明度和模糊程度，所以文字和镜头永远对得上。

首屏的工作台和中段的工作台用了两种完全不同的画法。首屏那张俯拍的桌子其实是平的，桌面和切割垫是一张从正上方渲染的图，铅笔、美工刀和回形针各是一张贴在平面上的图片。每张道具图里并排存了三份预先打好光的版本，第四条是一张高度图，道具被推动后来回晃动时，程序在这三份里取最近的两份混合，所以阴影和高光总是对的。每个道具还有自己的碰撞力、阻尼和回弹强度，阴影另外画成一张模糊的图，按固定的光照方向偏移。中段那张镜头会绕着走的实木桌则是一个真正的三维场景，桌上的小道具和桌面的反光用的是高斯泼溅（Gaussian Splatting，把场景记录成大量半透明椭圆点的技术），桌子和切割垫这类大块的面仍然用普通的模型和贴图。

团队在连载里讲了这套混合做法的来历。实时的物理材质渲染达不到团队要的画质，图片序列和视频又没法互动，所以团队在 Houdini 里从半球形分布的许多角度渲染场景，再用 Postshot 把渲染图训练成泼溅点。团队先试过把整张桌子都做成泼溅，用了约 90 万个点，木纹和切割垫上的细线仍然糊。后来团队只把道具和反光交给泼溅，点数降到桌面版约 7.7 万个、手机版约 4.5 万个，画面反而更好。团队还提到，直接沿着网站最终的镜头路线渲染训练图片，效果反而更差，因为缓慢移动的镜头会产生大量几乎一样的画面，覆盖不到需要的角度。桌子和切割垫的贴图是从正上方和正前方渲染、再在 Photoshop 里拼起来的，团队还用着色器扭曲了贴图的分布，让镜头最常停留的桌面中间一半分到大约九成的贴图细节。

泼溅的渲染器是 Lusion 自己写的。泼溅文件是一个不压缩的 zip，里面的几张 WebP 图片分别存着每个点的位置、旋转、大小、基础颜色和随视角变化的颜色，另有一个 JSON 存着解码用的码本。网站加载时自己解析这个 zip，把图片解码后用一次 GPU 渲染打包进一张整数贴图，再把每个点的中心位置读回内存。随视角变化的颜色在文件里占了大头，约 3.0 MB 的道具文件里，这部分就有约 2.1 MB。

泼溅点要按离镜头的远近排序才能正确叠加，这项工作交给了一个 Web Worker。Worker 里跑着一个用 Rust 编译成 WebAssembly 的排序程序，它按 24 位的深度值排序，排好的结果整块传回主线程，不复制数据。镜头的朝向和距离没有变化时，程序不会重新排序，所以镜头停下时这部分几乎没有开销。

其余几个招牌效果用的是同一个思路，把复杂的模拟和动画提前算好，存进贴图，再在着色器里读出来。六根手指的手把每一帧所有骨骼的位置和旋转存在一份动画文件里，程序按滚动进度在两帧之间插值，写进一张很小的数据贴图，再由顶点着色器完成蒙皮。光标控制的那几根手指在这之上叠加一个旋转，每根手指用一个二阶弹簧系统追赶目标，所以会稍稍超过再回来。包装袋撕开的过程是在 Houdini 里用 Vellum 布料模拟做的，两层不同硬度的材料先被吸紧，再在受力超过焊接约束的上限时断开。模拟结果烘焙成一张动画贴图，记录 1024 组点在 32 帧里的位置和朝向，滚动进度就是这段动画的播放头。水熊虫则是实时计算的，它的骨骼由一套简单的摆动系统驱动，再叠上随机的布朗运动，所以每次出现的姿势都不一样。

剩下的画面效果都放在后期处理里。网站关掉了浏览器自带的抗锯齿，场景渲染时同时输出颜色和每个像素的运动速度，再用时间性抗锯齿（TAA）把前几帧的结果按运动方向混合进来，不开 TAA 时改用 SMAA。之后依次叠上景深、彩虹边框、泛光、磨砂玻璃、光标拖影和最终的调色。首屏的磨砂卡片、加密一段的输入框和论文一段的引用格式背后都不是 CSS 的背景模糊，程序按这几个网页元素的位置，在 WebGL 里把对应的那块画面模糊、加色，再画在它们下面。热成像也是一个全屏的后期处理，它读出已经渲染好的画面，按亮度去一张热成像色带里查颜色，再用一条带柔边的斜线控制哪一部分换成热成像。杯垫底面上的加密文字用的是多通道有向距离场（MSDF）字体贴图，所以访客输入的任何文字都能清晰地印在三维表面上。

这套画面让下载量变得很大。桌面版打开首页要下载约 16.6 MB，其中 WebP 格式的照片和贴图约 6.5 MB，模型约 3.5 MB，两个泼溅文件约 3.5 MB，最大的单个文件就是那份约 3.0 MB 的道具泼溅。Rive 的播放程序本身有约 0.65 MB，却只用来播放环保一段两张卡片里的小动画。模型用的是 Lusion 自己的二进制格式，顶点数据按每个属性的取值范围量化成整数，加载时再还原。

手机拿到的是一套更轻的资源。程序按设备类型换成精简版的贴图和泼溅文件，道具泼溅降到约 1.6 MB，整页约 10.4 MB。首屏的道具和物理碰撞在手机上直接不加载，景深也换成了低画质。所有设备的渲染像素比都不超过 1.5，总像素数也不超过 2560×1440，所以高分辨率的手机不必多画那些看不出差别的像素。

加载画面在等的不只是文件。进度圆环的前九成对应文件下载，而且至少要走满一秒，最后一成对应着色器的编译。网站把全站要用到的材质排成一个列表，每帧交给浏览器异步编译一个，全部编完才进入首屏。首屏因此晚出现了一会儿，但访客往下滚动进入新场景时，不会因为临时编译着色器而卡一下。服务器约 0.05 秒返回第一个字节，加载画面在 0.52 到 0.74 秒出现，完整的首屏在打开后 3.5 到 4.5 秒出现，页面没有跳动。

Oryzo 的互动基本只照顾到用鼠标和触屏的访客。从页面顶部开始按 Tab，焦点会直接跳到页脚的 Lusion 链接，页面随之滚到最底，中段的按钮只有在那一段正好在屏幕上时才能用键盘走到，首屏视频的播放按钮走不到。打开的视频窗口不能用 Esc 键关掉，页面上的照片也几乎都没有替代文字，读屏软件的用户读不到照片墙和评价里的画面。网站不读减少动态效果的设置，打开它以后，镜头、包装袋和彩虹边框都照常运动。

Oryzo 先在 3 月 25 日拿到 FWA 的当日最佳，得了 90 分，随后成为 FWA 3 月的月度最佳。4 月 9 日，它拿到 CSS Design Awards 的当日最佳，后来也成了那里 4 月的月度最佳。4 月 13 日，它又拿到 Awwwards 的当日最佳和开发奖，最后成为 Awwwards 4 月的月度最佳。在 Awwwards 的四个分项里，创意 Creativity 最高，得了 8.35。一块杯垫被当成 AI 新品认真地介绍，镜头又几乎没有中断，这两点很可能是这一项高的原因。可用性 Usability 最低，得了 7.51，整页长达六十多屏，键盘又走不到大部分互动，可能拉低了这一项。

开发奖的五位评委给了 7.87 分。动画 Animations 和网页性能 WPO 最高，都是 8.60，无障碍 Accessibility 最低，为 7.00，和工程章里键盘走不到互动、照片缺少文字说明的问题对得上。FWA 把它归进设计与制作工作室、好玩可互动和 AI 三类。

Lusion 在 Awwwards 上拿过 14 次当日最佳和 14 次开发奖，工作室自己的官网还拿过 2023 年 Awwwards 和 FWA 的年度最佳。工作室在 Codrops 上的自我介绍里写到，Edan Kwan 来自香港，先学过音乐，后来自学设计和编程。Edan Kwan 做过几年自由职业，也在纽约的代理商工作过，之后才开了这家工作室。Oryzo 的设计、三维制作和开发都由 Lusion 自己完成。幕后连载由 Edan Kwan 主笔，三维一篇和 Paul Catoera 合写，设计一篇和 Andrii Ovsiannikov 合写。Edan Kwan 在连载里的身份是联合创始人、执行创意总监兼首席工程师，那支创始人视频的旁白也是 Edan Kwan 自己录的。