Lusion v3

FWA 上的说明写的是，这是 Lusion 作品集的第三版，收着工作室最新的作品、实验和思考过程。作品集的任务是让潜在客户相信这家工作室，所以网站本身就是最大的一件样品，首页上几乎每一段都在用三维画面演示工作室能做什么。

Lusion v3 的首页从上到下分成几段，开场是那堆十字积木，接着是一句 Bold Ideas, Brought to Life 和一段介绍工作室做法的话，再往下是工作室的作品集锦影片和十几件精选作品。作品之后的一段写着 Where Creative Ideas Become Immersive Experiences，配着一块平板电脑，屏幕里是一位漂在地球上空的宇航员。镜头随后钻进这块屏幕，宇航员飞过一连串隧道，落到结尾的 Let's work together，下面是工作室在布里斯托的地址、社交账号和订阅框。这段宇航员的旅程占了首页四分之三的长度，约 45 屏。

这个顺序像是按说服一位潜在客户的步骤排的。访客先亲手玩一下积木，看到工作室能做出好玩的实时三维，然后才读到工作室怎么做事的那段话。作品集锦影片把各类项目快速过一遍，精选作品再让访客挑感兴趣的点进去。最长、最用力的那段宇航员隧道放在最后，落点正好是 Let's work together 和联系方式，所以访客在看到联系方式之前，已经亲眼看过、亲手玩过工作室的手艺。页面在结尾也没有让访客离开，访客继续往下滚动，网站就直接换到关于页，只要访客还在滚动，就一直留在这个站里。

Lusion v3 首页的标语和作品在获奖之后都更新过。在 FWA 获奖时的截图上，Lusion v3 的标语写的是 We build epic realtime interactive experience to blow people's minds，现在换成了 We create 3D visual storytelling and interactive web experiences that help brands stand out，精选作品里也有 2024 年的项目，整体的版式和开场的十字积木都还是获奖时的样子。

Lusion v3 的版面只用三种颜色：带一点紫的灰白底（#F0F1FA），黑色的文字，和一种饱和的电光蓝（#1A2FFB）。Awwwards 给这个站列出的配色是其中的蓝和灰白，色值和这里一致。蓝色几乎都出现在会动或者能点的地方，横穿页面的弧线、按钮的悬停状态和手机上的菜单都是这个蓝，所以访客很快就会把蓝色和能互动的部件联系在一起。页面四角和分栏线的交点上还画着细小的十字标记，像排版时用的辅助线，等于把版面背后的网格露了出来。到了宇航员那几段，底色才换成全黑。

版面背后是一套 12 栏的网格，栏距是屏幕宽度的 2%，左右页边距是屏幕宽度的 5%，最少 40 像素。标题、栏距和边距都按屏幕宽度的比例来定，所以从笔记本到大桌面屏，整个版面只是等比例放大缩小，比例和留白完全不变。首页第一行标题在 1920 像素宽的屏幕上是 48 像素，到了 1366 像素宽的屏幕上缩成 34 像素，和屏幕宽度缩小的比例正好相同。卡片、三维窗口和菜单都用同一个 20 像素的圆角，整个站因此显得是同一套部件拼起来的。

Lusion v3 的首页只用一款字体 Aeonik，这是一款无衬线字体，也就是笔画末端不带小脚的字，而且只用了常规和中等两种字重。层级几乎全靠字号拉开，Bold Ideas, Brought to Life 这样的大标题用常规粗细，字号大到两行几乎占满屏幕的宽度，项目类型、按钮和导航则用同一款字的大写小字。版面上没有比中等更粗的字，大字也因此显得轻，和下面厚重的三维画面形成对比。

Lusion 把三维画面当成一件放在页面上的物件来设计。开场的积木装在一个接近黑色的圆角盒子里，盒子嵌在浅色的页面中间，看起来像一块屏幕，浅底和深盒的反差让访客的视线一进来就落在积木上。积木像是塑料玩具，一堆里只有六块是强调色，其余是白色和接近黑色的深灰。强调色每次打开网站时随机挑一种，蓝色是其中之一，所以访客第一眼看到的积木不一定和版面的蓝色一致。白色的积木又分成哑光和亮面两种，所以画面虽然只有三种颜色，积木之间仍然分得出质感。结尾的 Let's work together 一屏则完全换了一种语气，宇航员四周飘着药丸、蘑菇、香蕉、嘴唇这些卡通贴纸和一颗颗钻石，是全站最热闹的画面。

Lusion v3 页面上的按钮和卡片有一套统一的状态，页头右上角是三个胶囊形的按钮，灰色圆钮是声音开关，没有声音时图标是一条直线，开始发声后变成一条波形，深色的 LET'S TALK 和浅色的 MENU 排在它旁边。光标移上去时，声音圆钮整个变成蓝色，LET'S TALK 也变蓝，里面的小圆点换成一个箭头。MENU 则变成纯白，两个小圆点转成竖排，所以三个按钮的悬停都遵守同一条规矩，按钮变亮或者变蓝，再换掉一个小图标。MENU 打开后，右侧叠出三张圆角卡片，按钮上的字同时换成 CLOSE。第一张卡片是首页、关于、作品和联系四个入口，当前页面后面有一个小圆点，第二张是订阅框，第三张是黑色的 LABS 入口。

作品卡片和播放器沿用同一套克制的做法。作品卡片两张一排，图片上不压任何文字，项目类型用大写小字写在图片下面，项目名用大字写在最下面。访客点开作品集锦影片后，影片铺满屏幕播放，播放器的进度条和静音按钮都是工作室自己设计的。

到了手机上，网站按同一套规矩把版面重新排了一遍。整个首页变成一栏，三维盒子拉成一个竖长的圆角块，栏距加宽到屏幕宽度的 4%，圆角缩小到 10 像素，页边距固定为 25 像素。页头只剩标志和一个圆形的菜单按钮，LET'S TALK 和声音开关都拿掉了，LET'S TALK 改放进菜单里。手机上的菜单铺满整个屏幕，底色就是那种电光蓝，上面叠着白色的卡片，订阅框也省掉了。桌面上靠悬停才出现的部件，在手机上一直显示，作品名字前面的箭头和集锦影片上下的 PLAY REEL 字带都是这样。平板在网站眼里也算移动设备，拿到的是手机那一套交互，但页头仍然保留 LET'S TALK。

Lusion v3 的动画几乎都是由网站自己的程序一帧一帧算出来的，很少交给浏览器自带的过渡，所以同一种手感能贯穿全站。网站最常用的一条节奏曲线起步很慢，中段突然加速，收尾又拖得很长。标题、按钮和作品名字的出场都用这条曲线，看起来就像有人先轻轻推了它们一下，它们再稳稳地停住。

访客打开首页、加载画面结束之后，开场按顺序展开。首页的标题按词逐个从下方升上来，每个词起始时向一侧歪 15 度左右，升到位时转正。相邻两个词只错开约 0.05 秒，每个词用 1 秒走完，所以三行标题是一个词接一个词立起来的。与此同时，镜头一边向积木推近，一边收窄视角，画面因此放大得很快。镜头大约 3 秒后才停稳，停之前还会稍微冲过头再退回来。三维画面下方那一排小十字随后逐个转半圈并放大出现，SCROLL TO EXPLORE 几个词也跟着一个接一个淡入。

开场之后，这堆十字积木一直在翻滚。一股看不见的力把积木吸向画面中心，积木彼此碰撞、弹开，又被吸回来。积木还按编号分成两组，各朝相反的方向绕着一条斜轴打转，所以整堆积木从来不会停下来。积木的速度每秒只保留两成，所以推开之后很快就慢下来，动起来显得有分量。访客的光标就像一根从镜头伸进画面的棍子，会把碰到的积木拨到一边，光标移得越快，积木就被甩得越远。

访客点一下画面，每块积木的运动方向都会反过来，再加上一股随机的力，整堆积木先向四周炸开，再被慢慢吸回中心。积木的强调色同时换成下一种，五种颜色依次是蓝、黄绿、红、紫和琥珀色，每次打开网站时第一种颜色是随机的。光标在三维画面上移动时，身后还会留下一道像烟一样的拖尾，拖尾经过的地方画面被扭曲，边缘分出红、绿、蓝三色的彩边，一两秒内才慢慢散去。

Lusion v3 的滚动也是网站自己做的，访客转一下滚轮，页面每一帧只走完剩下距离的一部分，所以越接近终点越慢。连转五格滚轮时，页面走 500 像素，前一半时间就走完了九成多，约 0.9 秒后完全停稳。访客用触控板或手指拖动时，松手后页面还会带着惯性滑一段。页面滚动的时候，屏幕右边会出现一条细细的进度条，访客停下半秒后它就淡出，版面上分隔用的小十字也会在滚动时转成斜叉。

作品集锦那一段把一张小卡片变成了一段影片。访客往下滚动时，左下角那张蓝色的小预览卡逐渐放大，最后变成几乎铺满版心的影片，中间压着 PLAY 和 REEL 两个大字和一颗播放按钮。光标移到播放按钮上时，影片上下两排小十字从左到右一个接一个往下掉出去，每个约 0.45 秒，前后只错开几十毫秒，所以看起来像一道波浪。空出来的位置随即滑进两条写着 PLAY REEL 和三个播放箭头的字带，上面一条往左走，下面一条往右走，一直循环。播放按钮同时变成蓝色，并在 0.2 秒内放大一成。

精选作品的卡片同样会回应光标，光标移到一张卡片上时，项目名字前面会滑进一个箭头，图片则朝光标的方向轻轻错开一点，带出一点前后层次。图片跟着光标走的时候带着一点延迟，停下时还会略微冲过头再回来，像挂在一根软弹簧上。

Lusion v3 首页最后的宇航员隧道是全站最长的一段动画，这一段从那块平板电脑开始，镜头钻进屏幕之后，黑暗里只剩宇航员和一行 STEP INTO A NEW WORLD AND LET YOUR IMAGINATION RUN WILD。宇航员接着飞进一条由金属框架组成的隧道，框架上的灯光从青色、红色换到绿色，隧道随后变成一片粉红色的发光网格，再变成一条蓝白两色的拱门长廊。这条长廊装在一块屏幕里，宇航员朝访客走过来，屏幕的玻璃碎成几百片，宇航员穿过碎玻璃落到地上。卡通贴纸随后一个接一个在宇航员四周弹出来，最后出现 Let's work together!。

这段隧道的推进方式和前面不同，整段动画都挂在滚动位置上，访客往回滚动，碎玻璃会重新拼回屏幕，宇航员也会倒着飞回去。访客一进入隧道，页面却开始自己往前走，速度约每秒两屏半。前进的方向跟着访客最后一次滚动的方向，所以访客往上滚动一下，隧道就倒着飞。访客按住鼠标不放时，自动前进会停下，隧道里的动画放慢到原来的三成左右，背景音乐也变得发闷。访客松开鼠标之后，页面先用约一秒重新加速，再在 Let's work together 那一屏前慢慢减速停住。手机上也是这样，手指按住屏幕不放，隧道就几乎停下来，松开后接着往前飞。

声音也跟着这些阶段变化，访客第一次点击页面后，网站才开始发声，按钮和作品卡片在光标经过时会响一下，隧道的每个阶段各换一段背景音乐，玻璃碎裂时还有一声单独的碎响。手机上没有这些声音，网站在手机上一个声音文件都不下载。

Lusion v3 的画面在首页前大半段基本保持每秒 60 帧，滚到后段的隧道一带降到每秒 57 到 58 帧，偶尔有一帧卡住约 0.1 到 0.2 秒，网站也没有给想少看动画的访客留余地。访客在系统里打开减少动态效果的设置之后，这些动画全部照常播放，网站没有为这个设置做任何处理。

Lusion v3 用 Astro 生成页面，所有效果都在一个约 1.25 MB 的脚本里，里面打包了 three.js r158 和工作室自己的一整套框架。首页只有一块铺满屏幕的 WebGL2 画布，固定在 DOM 后面，各段的三维场景、作品图和集锦影片都画在这块画布上。排版仍然交给 DOM 和 CSS，每一帧，脚本读取对应 DOM 元素的位置和尺寸，在画布上同样的位置画一块平面，再用着色器给它加景深、错位和扭曲。首页那个圆角的三维窗口也是这样做的。画布本身铺满屏幕，上面再画一层和页面底色一样、中间挖出圆角矩形的遮罩，露出来的正好是 DOM 里那个盒子的位置，镜头的中心和视角也跟着盒子的位置和长宽比调整。

这套做法能成立，靠的是网站自己接管了滚动。浏览器的原生滚动被关掉，整页内容放在一个约 5.6 万像素高的容器里，滚轮、拖动、方向键和 PageUp、PageDown 都交给网站自己的滚动模块，它每一帧用 translate3d 移动这个容器。页面在滚轮滚动时，位置每一帧按 1 - exp(-12 * dt) 的比例逼近目标，这个写法和帧率无关，所以快慢不同的电脑上手感一样。拖动时，模块取松手前 0.1 秒的速度，再按摩擦系数衰减。DOM 和 WebGL 读的是同一个滚动值，所以画布上的平面和 DOM 里的文字永远不会错开。

Lusion v3 首页的 22 块十字积木没有用物理引擎，网站用的是一段约 2.6 KB 的手写模拟。碰撞时，模拟把每块积木当成一个球，所有球都受一个指向中心的力，两两之间按 0.8 的弹性系数和摩擦相互弹开，速度每秒乘以 0.2。奇数和偶数编号的球各加一个绕斜轴、方向相反的切向速度，这就是积木一直翻滚的原因。模拟把光标换算成一条从相机穿出的射线，离射线太近的球会沿垂直方向推开，并叠加光标自己的移动速度。模拟用位置和速度的叉积推出旋转，所以积木滚动的方向和它被推的方向一致。访客点击时，模拟把每个球的速度取反，再加一个随机冲量，强调色也换成下一种。

积木的光照没有用灯光和阴影贴图。每块积木的光泽来自一张 HDR 的 matcap 贴图，存成 EXR 格式，哑光和亮面两种积木只差一个粗糙度参数。阴影和环境光遮蔽是在片元着色器里直接算出来的。每一帧，脚本把其余 21 块积木的位置和旋转按距离排好传进着色器，着色器把每块积木近似成三根互相垂直的圆柱，着色器对它们逐个求遮挡、软阴影和反射的交点。积木之间那些柔和的阴影和互相映出的颜色就是这样来的，画面上不需要任何一张阴影贴图。代码里还留着一套半透明积木的做法，先把已经画好的画面模糊成四级，再让积木按厚度去取，做出磨砂玻璃的效果，现在的积木里没有用上。

Lusion v3 页面上的动画都由脚本每一帧计算，没有写成 CSS 过渡。标题先用 SplitType 拆成词，每个词的位移和旋转由经过的时间代入自定义缓动 cubic-bezier(0.35, 0, 0, 1) 得出，动效章说的那条起步慢、收尾长的曲线就是它。需要跟着光标或目标走的部件，比如作品卡片的焦点、缩放和宇航员的动作，用的是一个 SecondOrderDynamics 类。这个类把运动当成一个二阶系统，用频率、阻尼和初始响应三个参数控制手感，作品卡片的焦点设成 1 Hz、阻尼 0.6，所以会略微冲过头再回来。每张作品图都配了一张深度图，着色器按深度和焦点位置做景深和视差错位，卡片因此有了前后层次。

网站的画面在送上屏幕之前还要过一串后期处理，第一道是 SMAA，网站为此关掉了 WebGL 自带的抗锯齿。SMAA 之后依次排着泛光、光标拖尾造成的扭曲和一道调整暗角、饱和度的处理，每一道都按当前场景的设定开关，泛光的强弱也由每个场景自己定。光标拖尾是一个四分之一分辨率的速度场，光标移动时，脚本把速度写进缓冲，两张缓冲来回交替，每帧衰减一点。扭曲那一道再按这个速度场错开像素，并把红、绿、蓝三个颜色分开。为了控制开销，网站把像素比限制在 1.5 以内，总像素不超过 2560×1440，代码里还带着 AMD 的 FSR 放大，默认没有打开。开场时，每一帧要在离屏缓冲之间来回画二三十次，到了隧道里接近六十次，这也是隧道一带降到每秒 57 到 58 帧的原因。

网站把隧道的 45 屏切成九个有名字的阶段，比如黑色隧道、白色隧道和碎框。中间七个阶段按权重分掉可用的滚动距离，黑色隧道占 12，白色隧道占 2，碎框占 1.5，其余占 1 到 5。每个阶段都有自己从 0 到 1 的进度，镜头、材质和音乐都读这些进度，所以整段可以随时倒放。隧道的自动前进加在滚动模块上，没有输入时，每秒朝上一次滚动的方向加 2.5 个视口高度。访客按住鼠标时，一个冻结系数逐渐升到 1，把这个速度压到 0，同时让隧道的动画时间按 0.3 倍走。

隧道的框架和粒子都是实例化绘制的，框架贴着带凹凸细节的金属贴图。宇航员的动画事先烘焙成贴图，着色器每一帧按时间读出位置和朝向，材质用基础色、法线和 ARM 贴图，再叠一张 matcap 和环境贴图。碎玻璃一共 946 片，每片在每一帧的位置和朝向都事先模拟好，存成两张浮点贴图。贴图的宽是碎片数，高是帧数，滚动进度决定读哪两帧，再在中间插值。碎片按屏幕上 DOM 框的大小摆好，并透过自己折射后面已经画好的页面。隧道里另有一道运动模糊，它用深度和上一帧的相机矩阵算出每个像素的移动方向，飞行时的拖影就来自这一道。

音乐也是由这些进度驱动的，每段背景音乐都接了一个低通滤波器，隧道的阶段决定播哪一段、滤波开多大，按住鼠标时冻结系数把滤波频率压低，音乐就变闷了。按钮的悬停声每种准备了几个版本轮流播放，听起来不会一模一样。

这些资源在打开首页时就一起下载。首次打开约 11.8 MB，结尾隧道要用的模型和贴图也在其中。最大的一类是约 5.2 MB 的 webp 贴图，宇航员的法线和基础色贴图每张都有三四百 KB。模型存成工作室自定义的二进制格式 .buf，一共约 2 MB。声音是 16 个 ogg 文件，约 1.3 MB，只在支持 ogg 的桌面浏览器上加载，访客第一次按下鼠标后才创建音频。

网站在加载时先判断设备，再决定下载什么、画多细。设备类型按浏览器的 UA 判断，手机和平板都算移动设备，页面的根元素会带上 is-mobile 的 class。移动设备拿到的是精简过的积木模型和 matcap、精简过的隧道网格模型和一段手机版的集锦影片，声音文件一个都不下载。前面说的像素比上限在手机上作用最大，像素比为 3 的手机只按一半的分辨率渲染，要画的像素少了四分之三。在手机上打开首页并往下滑几屏，一共下载约 8.8 MB。版面另外按宽度切换，812 像素以下变成单栏，网格、圆角和页边距在这里换一套值，所以宽屏的平板仍然是桌面的版面，只是交互换成了触控那一套。

这么多资源并没有让访客久等，服务器在 0.03 到 0.09 秒内开始返回页面，加载画面在 0.2 到 0.32 秒出现，是一块黑底和一个不断跳动的数字，开场的积木在 4.5 到 6.5 秒之间完整出现。加载期间页面最长卡住约 0.1 秒，画面几乎不跳动。

Lusion v3 对键盘和读屏软件的照顾很有限。方向键和 PageUp、PageDown 能滚动页面，但访客按 Tab 键时，焦点没有任何可见的样子，还会直接跳到几屏以下的作品链接上，页面却停在原地。37 张作品图片和两个按钮在读屏软件里都没有名字。

Lusion v3 同时是 Awwwards 和 FWA 2023 年的年度最佳，Awwwards 同一年的年度开发奖也给了它。FWA 给它的当日最佳打了 89 分，归入动画、个人作品集和推广三个类别。

这个站在 Awwwards 的创意 Creativity 拿到 8.65 分，是四项里最高的，能推、能点的积木和穿过隧道的结尾很可能是这一项高的原因。可用性 Usability 最低，为 7.95 分，键盘焦点看不见，隧道又会自己往前走，这些都可能拉低了这一项。开发奖的五位评委给出 8.41 分，动画 Animations 拿到满分 10 分，网页性能 WPO 也有 9.00 分，响应式 Responsive 是 8.40 分，和手机上那套精简资源、重排的菜单和版面对得上。无障碍 Accessibility 最低，为 7.40 分，和工程章里键盘焦点看不见、图片没有名字正好对应。

Lusion 的战绩也算到写报告时为止，它在 Awwwards 上拿过 14 次当日最佳，表里那 1 次年度最佳就是这个站，在 FWA 上一共获奖 25 次。