La Revoltosa

La Revoltosa 是马德里的一个汽水牌子，站上的历史页写着，1953 年，三个做汽水的人 Manuel、Félix 和 Bonifacio 受够了各自单打独斗对抗大厂，合伙造了它。它的名字取自一出萨苏埃拉的女主角 Mari-Pepa，那个不肯闭嘴、到处惹事的姑娘，萨苏埃拉是西班牙一种说白和唱段交替的轻歌剧。1955 年它成了合作社，1964 年改成特许经营，铺到了全国，七十年代上了电台和电视，1998 年并入有百年历史的家族企业 Refrescos del Atlántico。现在它卖九种饮料，气泡水、虹吸苏打、柠檬、橙、青柠柠檬、可乐、两种零糖可乐和汤力水。

网站把这段历史压成了首屏上的一句话，七十年在同样的杯子里，同样的吧台上，有些东西不会过时，因为它们从来不是时尚。网站往后所有的文案都由那个纹身风格的角色来说。产品页上每一瓶饮料都有自己的性格，虹吸苏打的台词是瞄准开火。柠檬说自己是舌尖上的一根小针，我天生是酸的，但我自己挑什么时候变甜。橙的台词是会传染的好心情，可乐的台词是我到哪儿哪儿就热闹。汤力水的台词是苦但有风度，夜行动物的优雅。联系表单的标题则是什么风把你吹来了。

画这个角色的是插画师 GL6RIA，用的是纹身店墙上那种样稿的画法，粗线条，只有一种颜色。首页上她占了整整两屏，先是全身，再放大到只剩墨镜和吸管。到了历史页，她换成一条长着女人脸的鳄鱼和一个跳舞的姑娘，产品页上每一瓶旁边都有她的另一个姿势。这个站的照片只在三个地方出现，一是她手里举着的一部手机，屏幕里滚过四张酒吧里的合照，二是一段品牌短片，三是三张产品卡。

La Revoltosa 的官网在首页之外，内容也铺得很开。九种饮料各有一页，历史页按年代分成四章，还有一页叫 Revoltosos 的动态，里面有活动、新闻和一排周边商品，帆布袋十欧，T 恤十五欧，玻璃瓶和玩具卡车已经售罄。新闻里有一条是这个角色自己写的，我们闹了个大动静，拿了 Awwwards 的当日站。

这个站的首页只用两种颜色，正红 rgb(254, 62, 41) 和米白 rgb(244, 242, 234)。前十四屏是红底上的米白字和米白线条，到了产品卡那一段翻成米白底红字，联系表单也是米白底，页脚再翻回红色。产品页放开了两色的限制，每种饮料占一屏，各有一种底色，虹吸苏打是灰蓝，柠檬是鹅黄，橙是橙色，青柠柠檬是草绿，可乐是深红，汤力水是金黄。瓶子的三维模型立在中间，她的插画换成同一种颜色的浅色调，放在右边。

这个站用了三款字，每一款只管一件事。Teko 是一款压得很窄的无衬线字，全部用大写，所有标题都用它，从菜单里的 96 像素，到横向自动滚动的跑马灯文字条里的 400 像素。首页能看到的六百个字符里，它只占两百个，却占了几乎全部的面积。Vulf Mono 是一款粗壮的等宽衬线字，每个字母一样宽，只出现在每个标题的第二行，比如 IBÉRICA、BUENO、MI VIDA、AL LORO，还有那句 384 像素的 MUUUUCHO gas。GT America 的加宽版管 12 到 20 像素的小字，导航、按钮和正文都用它。标题里的连接词 EN、QUE、UNA、MUY、MÁS 缩到一半高，抬到字行的上沿，像老海报上的排法。

这个站的版面几乎每一屏都是居中的大字加一件东西。首屏是两行字和一只瓶子，宣言那一屏是四行字和瓶子，插画那两屏只有她，手机那一屏是四行字、一部手机和她的手。产品卡是三张 545 乘 727 像素的大卡，圆角半径 80 像素，每张一种底色、一瓶饮料，左下角一行小字写着名字。页脚是斜着排的品牌标志，比屏幕还宽，只露出 La Revoltosa 的下半截，右下角有一个圈起来的 R。

菜单打开后是一整屏米白，四行 Teko 红字居中，右上角的菜单按钮变成一个红色的叉。光标停在哪一行，那一行就换成 Vulf Mono 的粗衬线，其余三行变淡，不透明度降到三成。站上的按钮是细线描边的药丸形，里面是大写的小字，右下角一直挂着一行 12 像素的 SCROLL。全站没有自己做的鼠标光标，泡泡也不跟着鼠标走，只跟着滚动走。页面底部还有一条 cookie 横幅，白底黑字，带接受、拒绝和自定义三个按钮，这是全站唯一一块黑色。

访客进站先看到六到十秒的开场动画，长短取决于加载快慢。开场动画先是一屏纯红，两秒后角落里冒出几颗泡泡，接着 LA BURBUJA IBÉRICA 的字母从四面八方飞进来，拼成两行，玻璃瓶从顶上落下来，斜着停在字上，透过瓶身看，后面的字母被折弯了。在瓶子落定之前，访客没法滚动这个页面。

Waka 把 La Revoltosa 的整个首页做成了一段长镜头。画面固定在屏幕上，滚动条走过一万三千像素，画面里的东西一件接一件地换。字往上走，瓶子转身离开，宣言进来，她的插画从远处推到眼前，手机举起来，里面的四张照片一张压着一张滑开，短片铺满一屏，然后是 ESO SÍ, QUE SEA CON GAS，接着是 MUUUUCHO gas 那一屏，三百多颗泡泡同时炸开，瓶子最后一次穿过画面。

泡泡是这个站的气，滚动每走 300 像素，页面就放出一颗，不滚的时候每 0.8 秒也放一颗。每颗泡泡从屏幕底部升到顶部，一边升一边带点晃动的变形，大小从 25 像素到 115 像素不等，程序预先备好 400 颗，轮流拿出来用。访客滚得快的时候，标题里的字母会各自上下错开，像杯子里的气泡在顶着字。光标停在三张产品卡的照片上时，后面会以四成的不透明度浮出她的插画，照片同时放大百分之五。A TODO, GAS 那条跑马灯以每秒一百五十像素的速度自己走，滚动的时候走得更快。

页脚的标志斜着从下面升上来，泡泡在它上面往上飘，红色块的上沿是一道波浪线。访客点开菜单，一整屏米白就盖过来，四行字停在中间。访客点其中一项，页面就整页跳转，中间没有过渡动画。短片那一屏用的是站点自己做的播放器，中间一个圆形的播放键，左下角两枚播放和静音的小按钮，进度条可以拖。产品页的瓶子是三维模型，每滚一屏换一瓶。瓶子下面有一对图标，能把整页切换成一个照片网格，九瓶排成三列，页面的长度从一万两千像素缩到六千。

这个站建在 WordPress 7.1.2 上，主题是 Waka 自己写的。所有交互都装在一个 app.js 里，未压缩时 1.1 MB，压缩后传输 292 KB，里面打包了 three.js r182、动画库 GSAP 3.14 和它的滚动插件 ScrollTrigger、平滑滚动库 Lenis 1.3.17，以及轮播库 Swiper。首屏那两行大字是三维文字，做法是先把 Teko 和 Vulf Mono 转成记录每个字母轮廓的 JSON 字形文件，两份共 526 KB，再用这些轮廓生成立体的字。瓶子是一个低多边形模型，用 Google 的 Draco 格式压缩过。玻璃材质的透射率是 0.99，几乎完全透光，折射率 1.2，厚度 0.6，配一张 512 像素的 HDR 环境贴图提供反光，再加一张法线贴图在表面做出细小的划痕。这个站最后用电影行业常用的 ACES 色调映射把亮度压到屏幕能显示的范围，曝光设在 1.2。

访客首次打开首页要下载 4.1 MB，共 56 个请求。最大的几样是瓶子的 477 KB 纹理、380 KB 的 Vulf Mono 字形文件、346 KB 的 reCAPTCHA，也就是 Google 的人机验证，还有 337 KB 的 HDR 贴图、三张 300 KB 上下的照片和 292 KB 的脚本。三款网页字体是 TTF 和 OTF 原样上传的，没有转成更小的网页字体格式，一共 513 KB。Google 的标签管理和统计脚本一进站就加载，加上 reCAPTCHA 一共 645 KB。访客把整页滚到底时，总下载量是 4.9 MB。产品页另有一块画布，装着塑料瓶和虹吸瓶两个模型，访客进去要再下载 3.7 到 4.0 MB。

服务器要 518 到 602 毫秒才返回第一个字节，屏幕上第一次画出内容是在 828 到 856 毫秒。页面上最大的那块内容就是那两行大字，画出来的时间也落在这个区间，远在 Google 建议的 2.5 秒以内，整页加载完则要 2.4 到 3.1 秒。加载中东西跳位置的程度，也就是布局位移，是 0.06 到 0.07，在 Google 建议的 0.1 以内，来自菜单链接和开场那一屏。开场阶段有一次 454 到 765 毫秒的长任务，这段时间里主线程被占满，页面不响应操作。画布静止时，显卡每帧要执行 49 次绘制调用，画六万九千个三角形，画布滚出屏幕之后就停止渲染。整页滚动保持每秒 60 帧，这时每帧大约有 16.7 毫秒，最慢的一帧用了 39 毫秒，相当于在那一下卡了一两帧。

页面声明了西班牙语，标了导航 nav 和主体 main 两个地标区域，读屏用户可以直接跳过去。首页没有一级标题 H1，五个二级标题 H2 里有三个是产品卡上的饮料名，内页各有一个 H1。21 张图里有 17 张的替代文字是空的。72 个可交互的控件里有 25 个没有读屏软件能读出的名字，包括 logo 链接、菜单按钮和表单的输入框。这个站把焦点框设成了 0 像素，键盘用户走到任何一个按钮上，屏幕上都看不出焦点在哪。系统里减少动态效果的设置，只对表单的加载图标起作用，开场动画和泡泡照旧。首页有 262 个元素标着 aria-hidden，读屏软件会跳过它们，这些元素是为了做动画而拆成单个字母的标题。

La Revoltosa 的 Awwwards 站点评分以 Creativity 7.81 最高，Usability 7.09 最低，Design 是 7.53，Content 是 7.48。开发奖的五个分项里 Animations 7.80 最高，Accessibility 6.40 最低，Semantics 是 7.40，WPO 是 6.60，Markup 也是 6.60。四个月后，FWA 给了它 82 分，DAYS 一栏是 8。

Waka 在 Awwwards 上介绍自己是马德里的创意品牌工作室，说他们爱品牌，爱好设计，爱用户体验，爱数据，爱挑战。它的主页上有 11 件作品和 8 个荣誉提名，这个站是他们的第一个当日站，也是第一个 FWA。FWA 案例页上的介绍提到，三维渲染用的是 Three.js，插画是 GL6RIA 画的纹身风格，动效用的是 GSAP，网站页脚的落款则是 Design by waka。