The Tuscan Journey Begins

Pasticcino 是 Weekend Max Mara 的一款圆鼓鼓的手袋，它有一个叫 World Tour 的系列，每一站都到一个地方去找面料和配件。时尚媒体 The Impression 报道说，这一站是第五站，以意大利为主题，名字叫 Italian Roots，为这款手袋的十周年而做，2026 年 5 月上市。这一站的面料来自佛罗伦萨的丝织基金会 Fondazione Arte della Seta Lisio（1906 年创立），扣上的大理石圆珠来自 1961 年创立的石材工坊 Budri，网站把这两处和托斯卡纳小城 San Miniato 的皮具工坊排成了旅途上的三站。MONOGRID 选的路是让访客在每一站替工匠做一道工序，手袋本身要到最后一站才完整地出现。

访客打开网站后，先坐进一节画出来的火车包厢。画面正中压着一张橄榄绿的车票，写着 THE TUSCAN JOURNEY BEGINS，底下一行小字是 Explore every chapter and receive a special gift，承诺访客走完每一章就能领一份礼物。访客点击车票下的 Start now 以后，窗上的布帘卷了起来，托斯卡纳的山丘从窗外掠过。与此同时，四行字逐行出现，告诉访客这趟旅程一共三站。这段引子大约十几秒，可以跳过，引子之后网站弹出一张标题为 BECOME A WEEKENDER! 的登记表，请访客留下姓名和邮箱来领礼物。第一次出现时，这张表可以用底下一行 SKIP 跳过。

第一章 The Archive of Textiles 讲的是面料从哪里来。访客点击章节标题页上的 EXPLORE 以后，镜头推到一只木架前，架上挂着天鹅绒面料，访客用左右箭头一块一块往下翻，一共六块。每一块都配一张说明卡，写着面料的名字和它的纹样取自哪里，比如哥特式的彩色玻璃窗和佛罗伦萨兑换商行会的金币。左边墙上一直露着一张纸的边角，访客点它上面的加号，会拉出一张写满字的纸页，讲 Weekend Max Mara 团队怎样到基金会的档案里挑纹样，纸页里还有几张可以点着换的老照片。第二章也有同样的一张纸页，讲 Budri 的石材，所以访客想多读的时候有地方读，不想读的时候，主线不会被一大段文字挡住。

三章的节奏是一步比一步更费力，也一步比一步更接近成品。第一章只要求访客看和翻，访客翻过第一块面料以后，下一章的按钮就出现了。第二章 The Marble Quarry 只有一个动作，屏幕中间出现一枚写着 HOLD DOWN TO CARVE 的圆章，意思是按住来凿刻。访客按住不放，一块方形的大理石就在凿子下面慢慢变圆，按满三秒才凿成，随后标题 the boules 出现。

第三章 Crafting in San Miniato 把三个不同的动作排成了三步，分别是用剪刀剪下纸样、用胶笔把金属扣框粘上、再把圆珠装到扣上。做完这三步，画面正中出现一只完整的 Pasticcino 手袋和标题 the Pasticcino Bag，这一刻就是整趟旅程的高潮，因为前两章讲的面料和圆珠，正是这只手袋上的两样材料。

旅程的结尾把访客送回了火车上。访客点击 Unlock the gift 以后，窗外的风景从山丘换成了佛罗伦萨的老城，三句话请访客去看这个系列，并邀请他们去佛罗伦萨。随后登记表再一次出现，这一次表上没有跳过的按钮。提交表单之后，访客会进入一个名为 Buchette 的礼物页，网站用和章节一样的方式一只一只展示这一季的六只手袋，每一只都链接到 Weekend Max Mara 官网的商品页。也就是说，开场车票上的那句承诺一路领着访客走完三章，最后落在登记和购买上。

这条路线只能从头走。网站给每一章都分了独立的网址，但访客没有走完前面的章节就直接打开某一章的网址时，网站会把他们送回开场，刷新页面也会从头开始。右上角的菜单把三章画成三块叠在一起的招牌，还没走到的一章会别上一张写着 locked chapter 的纸条，意思是这一章还没有解锁。

这个网站的视觉规矩是，屏幕上的每一样东西都要像一件画出来或者印出来的实物。场景是带着厚重笔触的油画，画面四周是一圈撕开的毛边，像一幅边缘被撕坏的油画。界面同样是实物，车票有一截带齿孔的票根，说明卡像博物馆的展签，纸页有白边和细框，菜单、声音和字幕的按钮做成了一块块椭圆形的木片。所以整个网站很少出现边缘干净的图标，连 Start now 这样的按钮也做成了边缘不齐的纸片，品牌的标志只是左上角一枚白色线条画的手袋。

这套实物感靠一组很克制的颜色撑起来。车票和登记表用的是一种橄榄绿 #465016，它是整个界面的主色，文字大多是两种接近白色的米色 #DFDDCB 和 #D9CDAD，深一些的绿 #23280B 用来压在字下面做投影。每一章另有一种自己的颜色，第一章是酒红 #764B41，第二章是深棕 #594D40，第三章是近乎黑色的墨绿 #2F2E25，它们主要用在章节标题页上被斜带压住的两个角。其余的颜色全部来自油画本身，界面色退在边角，画面因此始终是屏幕上最亮、最丰富的部分。

字体只有两个家族。章名、栏目标题和按钮都用一款加宽的粗体无衬线字（笔画末端没有装饰的字体）Nimbus Sans Extended Bold，全部大写，字距收得很紧，正文、字幕和说明卡用常规宽度的 Nimbus Sans，分常规和粗体两种。拟声词和每章完成时的大标题则换成常规宽度的粗体，全部小写，字距收得更紧，读起来更像手写的感叹，和章名的大写字形成对照。这个网站的字号是跟着屏幕的高度定的，二级标题是屏幕高度的 5%，正文是 2%，所以不管窗口多宽，每一屏的标题、按钮和画面都按同一个比例装进一屏里。标题和正文的投影都是一道不带模糊的硬边，像印刷时稍微错开的一层墨，和油画的质感放在一起不显得突兀。

章节标题页是这套规矩最集中的一页。三个章名都用那款加宽的粗体排成两到四行，每个词各自转一个小角度，从负 6 度到正 4 度不等，所以一个章名看起来像几张手工剪下来、没有贴正的字。画面的左上角和右下角各斜插着一条宽带，宽带上印着这一章的纹样，第一章是从面料上取来的鱼鳞纹，第二章是粉白相间的斜条纹，第三章是黑白相间的长方块。宽带把画面的两个角压成了酒红、深棕或墨绿，品牌的联合标志就嵌在左上角那一块里。

互动的部件同样是画出来的道具，每一种都有清楚的状态。需要访客按住或拖到某处的地方，网站放一枚带花边的深棕色圆章，圆章上下沿着弧线写着 HOLD DOWN TO CARVE 或 DRAG HERE，中间是一个小图标。第三章要拖动的剪刀和圆珠就是画面里的那把剪刀和那颗圆珠的图片，访客抓起它们时，光标也换成了抓握的手。屏幕右下角一直放着一张米色的小卡片，跟着旁白一句一句显示字幕，卡片下面是一块椭圆木片，上面有字幕、暂停和重播三个按钮。

到了手机上，这套规矩大多保留了下来，但构图换成了竖的。开场的车票竖了过来，Start now 落到屏幕下方，提示打开声音的那行字挪到了屏幕顶端。油画按画面中心裁成竖条，标题拆成更多行，第二章的圆章放在拇指够得着的下半屏。登记表从左右两栏改成一栏，访客要往下滑才能看到底下的同意选项。

开场的几个动作都在模仿纸片落下和撕开。加载画面上，一个立体的 loading 字样从左往右显露出来，两条彩色方块组成的带子从两边滑进来。加载完成后，整块加载画面向上抽走，用时约 0.6 秒，先慢后快再慢。随后车票从屏幕上方掉下来，起初斜着 6 度、比原来小一点，0.85 秒后落正，落定之前车票下的按钮不能点。光标停在 Start now 上时，票根会沿着齿孔翘起约 9 度，像有人要把它撕下来。访客点下去以后，车票先往左下轻轻一沉，再在 0.65 秒里越来越快地斜着掉出屏幕，背后那张纸紧跟着它一起落下，整个过程里没有一样东西是淡出的。

进入章节以后，访客不靠滚动推进，每一次点击、按住或拖动都会让画面播一小段。画面静止的时候是一幅油画，访客移动光标，画面会跟着微微错动，而且越远的部分挪得越多，于是一幅平面的画看起来有了前后。画面上那层油画布的纹理大约每秒跳换两次位置，四周的毛边每秒换一到两次形状，所以画面即使静止，也像定格动画那样一直在轻微地颤动。访客在系统里打开减少动态效果的设置以后，车票、标题和按钮的动画会停掉或者直接跳到终点，但油画随光标错动和纹理颤动的效果不受影响。

章节之间的转场和标题页都有自己的节奏。从一章换到下一章时，新的画面以一条弧线为前沿推进来，大约一秒推满，起步慢、中段很快、最后慢慢收住，弧线也越推越平。标题页出现时，两条斜带在一秒里从画面外滑进来，先快后慢，带上的纹样同时沿着带子往前走。访客停在标题页上四秒以后，章名的每个词开始各自缓慢地漂移、转动，每个词的硬投影比词本身晚半秒才跟上去，看起来像投影在追字。

第一章的面料按一格一格的方式切换。访客点一下右箭头，镜头沿着木架移到下一块面料，用时约一秒半，速度均匀。访客点左箭头，网站则把同一段倒着放回去，两个方向分别配着布料卷起和放下的声音。左边那张纸平时斜着 4 度露出一角，拉出来时用一秒滑到画面中间，这时它斜着 2 度、缩小到八成五，访客在纸页里往下滚动，纸页会慢慢放正、放大到原来的大小。纸页里的老照片叠成一摞，访客点一下，两张照片先向两边张开，再交换前后，落回原位。

第二章的凿刻是整个网站里最直接的一个动作，因为画面完全跟着访客的手走。访客按住圆章，画面就一帧一帧往前走，镜头推近那块方石，凿子落下，石屑飞起，方石逐渐变圆。凿刻的声音同时响起，方石下方出现一条进度条，按满三秒，圆珠就凿成了。访客中途松手，画面会以同样的速度倒回去，方石重新变方，并且响起一声失败的音效，所以访客很快就明白这是一件要坚持做完的事。凿成以后，标题 the boules 的每个字母依次跳起又落下，像一道波浪从左往右走过。

第三章把拖动做成了三种手感。第一步，访客把剪刀拖到纸样中间的圆章上松开，剪刀缩小消失，画面播出剪下纸样的那一段，屏幕上同时弹出三个斜着的 zac，模仿剪刀的声音。如果访客没有拖到圆章上就松手，剪刀会像被橡皮筋拉着一样弹回原处。这一章的拟声词出现时都带着一点回弹，几个词依次弹出，每个比前一个晚约 0.2 秒。

后两步换成了另外两种手感。第二步是一条沿着扣框边缘弯曲的虚线，访客拖着上面的小把手走完全程，金属扣框就扣到包口上，屏幕上弹出两个 clack。如果访客中途松手，把手会在半秒内滑回起点。第三步，访客把圆珠拖到扣上，屏幕上出现 gently 和 in place 两组字，最后才是完整的手袋。在手机上，这些动作都改成用手指完成，按住和拖动的规则和桌面版一样。

声音跟着这些动作走。每一章有自己的背景音乐，音量压得很低，每一个动作都有对应的音效，第一章和第二章还有英语或意大利语的旁白，字幕默认打开。访客点击 Start now 之后声音默认就是开着的，左下角的音符木片可以把它关掉，网站会记住这个选择。

按住凿刻时，画面每一帧都要换一张视频帧，章节转场时，两章的画面要在同一帧里混在一起，这两种时候画面仍然保持在每秒 60 帧。静止和移动光标时也是每秒 60 帧。

这个网站的每一个场景其实都只是一张平面的画，没有一个三维模型。MONOGRID 用 three.js 的 WebGPU 渲染器在屏幕上铺了一块全屏的四边形，每一章换的只是这块四边形的材质，不支持 WebGPU 的浏览器由 three.js 自动退回 WebGL 2。场景静止时，材质读两张 1920 见方的 KTX2 压缩贴图，一张是油画本身，一张是深度图（近处暗、远处亮）。片元着色器按深度图的亮度乘以光标的位置去偏移读取油画的坐标，所以越远的部分偏得越多，画面就有了视差。各章的偏移强度不同，火车包厢只有 0.004，面料室最大，是 0.025。深度图里能看出规整的平台和木架轮廓，这说明场景先在三维软件里搭好、渲染出深度，再画成油画，网站上运行的只是两张图。

一动起来，画面就换成了视频。每一章都配一段每秒 15 帧、每一帧都是关键帧的 MP4，网站把它整段下载成 Blob，放进一个藏在页面角落、只有一个像素大的 video 元素里。除了火车上那段引子，网站从不让这些视频自己播放。需要画面动的时候，GSAP 把一个时间值从当前帧补间到目标帧，每次更新都把 video 的 currentTime 设到最近的一帧，requestVideoFrameCallback 一拿到这一帧，就包成 VideoFrame 交给 three.js 的 VideoFrameTexture，材质用 0.04 秒从静止的油画切到这一帧。因为每一帧都是关键帧，跳到任何一帧都不用从前一个关键帧解码过来，所以第一章的箭头可以把一段倒着放，第二章松手时画面可以一帧一帧往回走。这样做的后果是文件很大，第一章那段视频就有 9.7 MB。

每一章的视频按帧号切成几段，访客的每一种操作只是在挑播哪几帧。开场一段在访客点 EXPLORE 后播一次，第一章和第三章的其余每一段对应访客的一次操作。第二章则直接把按住的进度换算成帧号，按住时进度每秒增加三分之一，松手时每秒减少三分之一。第一章的视频末尾其实还有一小段，但六块面料只需要走五步，这一段永远播不到。

油画的质感有一半是后期处理加上去的。每一帧要过两趟渲染，第一趟把那块四边形画进一张半精度的浮点纹理，第二趟做后期处理再输出到屏幕。后期处理先用柔光混合叠上一层油画布的笔触，这层笔触由一张凹凸贴图和一张法线贴图按固定的光照方向算出明暗，纵向在屏幕上重复 2.7 次，横向按屏幕比例重复得更多，并且每秒约两次随机挪一下位置。随后是一圈画笔边框，四种撕边形状装在一张 2×2 的图集里，约每秒换一种，边框的颜色按章节在 0.9 秒里渐变过去。开发者在着色器旁的注释里写明，这样按固定步长跳动时间是为了做出定格动画的感觉。渲染管线里还准备了色差、泛光和胶片颗粒三种效果，但上线的版本把它们都关掉了。

章节转场同样在着色器里完成，界面上的其余动作则交给普通的网页元素。网站用 Vue Router 给每一章一个路由。换路由时，同一块四边形的材质会同时读新旧两章的画面，按一条抛物线形状的前沿把新画面推进来。前沿的弯曲程度和推进的进度由 GSAP 用同一条自定义缓动在一秒里一起推到终点，所以弧线越推越平。界面上的车票、字幕卡、纸页和拟声词都是普通的网页元素，叠在画面上面，动画交给 GSAP，文字的逐行显露用 GSAP 的 SplitText，声音交给 Howler.js。拖剪刀和圆珠时，网站只判断松手的那一刻手指或光标是否落在圆章的范围里，胶笔那一步则用 SVG 路径的 getPointAtLength 让把手沿着虚线走。

资源按章分批加载，下一章的贴图和视频在访客还停在这一章的时候就开始下载。开场只等火车包厢的两张贴图、油画布笔触的两张贴图和边框图集，加载画面至少停留两秒。之后网站用 requestIdleCallback 在浏览器空闲时按顺序预取下一章的贴图和视频，所以访客还在看车票时，第一章那段 9.7 MB 的视频已经下载完了。桌面上一次打开开场页，总下载量约 15.4 MB，其中两段视频占了 11.7 MB。首次绘制大约在 0.6 到 0.7 秒，完整的油画大约三秒后出现，页面没有发生跳动。

手机拿到的是更小的视频，贴图则和桌面一样。屏幕宽度不超过 767 像素的设备，或者宽度不超过 1024 像素、物理像素宽度又不超过 1536 的设备，都会改用手机版视频，网速慢（2G、3G 或带宽低于 1.5 Mbps）的设备也一样。所以手机开场只下载约 7.0 MB，第一章的视频从 9.7 MB 降到 3.1 MB。访客在设备上打开了省流量设置时，网站完全不预取。贴图在所有设备上都是同一套 KTX2，在桌面显卡上直接转成 BC7 格式。

这件作品还要放进品牌自己的网站里。页面上装着 Max Mara 的 Tealium 标签管理（指向的是 qa 测试配置）、谷歌的标签代码和 iubenda 的同意弹窗。网站被嵌进别的页面时，会把访客的滚动手势转交给外层页面，可见这个网站是准备嵌进 Max Mara 自己的页面里使用的。

只用键盘的访客走不过第二章。第二章的圆章不能获得焦点，凿刻这一关也没有跳过的按钮，菜单里的第三章在凿完之前一直锁着，所以键盘用户会停在采石场。第三章里，键盘焦点可以落在剪刀和圆珠的圆章上，按回车就能完成那一步，但胶笔那一步的滑块不能用键盘操作，只能用跳过的按钮跳过。字幕卡没有标成会被读屏软件朗读的区域，看不见屏幕的访客读不到旁白的文字。

这个网站先在 FWA 拿到 85 分的当日最佳，FWA 把它归进时尚、好玩可操作、音乐与声音三类，团队在 FWA 上的说明写的是这趟旅程把用户变成数字工匠。两个月后它又拿到 Awwwards 的当日最佳，四个分项里创意 Creativity 最高，7.71 分，可用性 Usability 最低，7.06 分。创意分高大概来自那几个亲手做的步骤，可用性分低则可能和开场前挡着的登记表、不能单独打开的章节网址有关。Awwwards 的前端开发评委另给了 6.67 分，没有达到开发奖的 7 分。六个分项里动画 Animations 最高，7.80 分，这和那几段跟着访客的手走的视频相符。代码规范 Markup 最低，6.00 分。

这个网站只署了工作室一级，没有公开个人分工。MONOGRID 是两个平台上的常客，这一次讲的托斯卡纳工艺，正发生在工作室自己所在的地区。网站的隐私说明写明，数据的控制方是 Max Mara Fashion Group，所以这是一件给客户做的作品，而参评用的网址挂在 MONOGRID 自己的域名下面。表中的战绩是截至 2026 年 10 月 24 日的累计数。