Agrumea Farm

Agrumea Farm 想让访客像在店里拿起罐子看那样认识它的产品。这家农场从 1968 年种柑橘起家，2018 年转成有机农场之后开了自己的加工间，现在卖十种罐装食品，橙子果酱、草莓枸杞果酱、开心果酱、杏仁酱、西西里茄子酱、伊布莱红青酱、糖醋洋葱，都装在同一种带银盖的玻璃罐里。整个站围绕这十个罐子搭建，首页只有它们，别的页面讲它们从哪来、怎么做、怎么买。

进门的第一件事是一场水果雨。奶油色的屏幕上，22 个剪纸般的水果轮廓从顶上落下来，橙子、柠檬、草莓、无花果、茄子、黑莓、梨和番茄各自一种颜色。它们落到底部互相碰撞堆成一堆，屏幕中央一个百分比从 0 数到 100。数完之后一块橙色从下面升起盖住整屏，退去时十个罐子已经在屏幕上排好，2 秒左右的水果雨加上换场一共 4 秒。

开场之后的首页是一条横向的罐子队列。一块深酒红色的不规则色块占据屏幕下半，一圈橙色的文字 WE GROW, WE PRESERVE, WE SERVE 绕着它的上缘排成弧形，十个罐子沿着弧线排开，中间那个最大，两边的依次变小、变虚。访客推滚轮或者按住拖动，整条队列横着走，圈上的文字跟着转。鼠标放到罐子上，光标旁边出现一枚白色药丸写着 Discover the product，罐子微微放大，停留一下它就转一整圈。访客点下去，其他罐子淡出，这一个升到页面上方，产品页的大标题一个字母一个字母滚出来。

产品页往下走是一段产品说明、配料表、建议吃法、可选规格和保质期。再往下是一条可以拖动的照片带，最后一排 The other products 把其余罐子列出来。Pantry 页把十种产品按 Marmelade & Jams、Spreadable creams、Savoury 和 Mono Pack 四类摆开，每类一段介绍、一张生活照和一排罐子，页面右下角一组药丸按钮跟着滚动，随时能跳到某一类。Production 页讲柑橘和坚果的品种和上市月份，Experience 页卖三种农场体验，About 页讲三代人的故事，Contact 页只有地址、邮箱和 Instagram，购买要跳到外面的商店。

整个站只有四个颜色，奶油、酒红、橙和黄。奶油色是所有页面的底，酒红色是正文和首页的色块，橙色是每一个大标题、菜单的整屏底色和按钮，黄色只在 Experience 页的一段背景和几枚水果上出现。菜单打开时整屏翻成橙色，酒红色的巨字压在上面，鼠标扫过的那一行变成奶油色。页脚是酒红底奶油字，每一页都以它收尾。

两款字在这个站上分工明确。ivymode 是一款高对比的衬线字，只写标题，全部大写，每一页的页名排到 258 像素，About 页的 Vision 排到 493 像素。标题的字母是一个一个独立出现的。ivystyle-sans 是一款人文无衬线，写所有正文和标签，正文 32 像素，说明文字 14 到 16 像素，导航和小标题用大写加宽字距。两款字都从 Adobe Fonts 加载，文件合计 73 KB。

首页的构图是一张摆满罐子的台面。深酒红的色块像一块铺开的桌布，从屏幕左下延到右下，弧形的橙色文字贴着它的上缘。罐子立在色块前面，最大的那个在正中，两侧的罐子各自向内倾 16 度，越远越小越虚，最远的只剩正中那个的一半大。页面顶部是 AGRUMEA farm 的字标，右上角一枚写着 MENU 的药丸按钮，左上角 IT 和 EN 两个圆形语言开关，底部中间一行小字 SCROLL TO DISCOVER。

内页的排版像一本食品画册，每一页从一个占满屏幕宽度的橙色大标题开始，标题下面一张全宽照片，照片上压一句白色衬线字的引子。标题下面的段落居中排在窄栏里，段与段之间用一枚小菱形隔开。产品罐子总是成排出现，四罐或五罐并排立在奶油色底上，标签正对读者。Experience 页把三种体验做成三张白色卡片斜着叠在橙色底上，每张卡片一张照片、一个编号和一段说明。About 页在段落之间散落着几个放大的水果轮廓，和开场的那些是同一套。

照片全部是暖光下的食物和土地，橙子堆、开心果、番茄园、早餐桌上的果酱和面包。产品照分两种，罐子的正面照用在队列和列表里，生活照用在每一类的开头。六个页面翻下来，没有一张照片是冷调的。

开场的水果雨是一场真的物理模拟。22 个水果轮廓在页面顶部之外生成，按 3.35 倍的重力落下，落地时互相碰撞、翻滚、堆叠，堆到八成静止时开场结束。百分比在 1.7 秒内数到 100，随后橙色的幕布从下往上盖住屏幕再退去。访客每次打开首页都会看一遍，第二次也不例外。

首页的罐子队列由滚轮和拖动驱动。站点把滚轮的每一格换算成一段横向位移，队列用一条缓动曲线在 1 秒内走完，一格大约 700 像素。访客按住拖动，队列一比一跟手，松手后按拖动的速度再滑一段。队列每动一下，每个罐子的位置、大小、倾角和模糊度都重新算一遍，正中的罐子放大到 1.3 倍，边缘的缩到一半并加上 4 像素的模糊。圈上的文字也跟着转，滚一格转 8 度。

罐子上的标签是用三维渲染贴上去的。站点用 three.js 造了一个 128 段的车削圆柱，微微带 3 度的弧度，把 630 乘 1013 的标签图贴上去。材质的粗糙度是 0.72，一盏聚光灯从左上打过来，环境光补足暗部。整个站只开一个渲染器，它挨个渲染屏幕里的罐子，把结果拷进每个罐子自己的画布，屏幕外的罐子不渲染，位置没变的罐子也不重画。队列滑动时标签的贴图沿圆柱转动，罐子看起来在滚。鼠标进入一个罐子 260 毫秒后，它开始一次完整的自转，自转结束前不会再触发。

从罐子到产品页的换场用了 1.5 秒，罐子本身就是换场的主角。访客点下去，其他九个罐子淡掉，页面锁住滚动，被点的罐子升到产品页的位置，变成 576 乘 926 像素的主图。产品名的每个字母从下方滚入，两侧的分类和产地随后出现。这一段帧率 59 帧，最慢的一帧 47 毫秒。

产品页的主图罐子也用同一套渲染器贴标签。访客往下滚，罐子向左倾 14 度并缩小，跟着标题一起离开视口。产品页中段的照片带用抓手光标和一枚写着 Drag 的药丸提示拖动，也接受键盘左右键。菜单按钮上 MENU 和 CLOSE 两个词的字母上下滚动交替，菜单打开时四个大链接从左上到右下错开排列，鼠标扫过的那一行字从酒红变成奶油色。

内页由平滑滚动库 Lenis 接管，滚轮停下后页面顺着惯性再滑一小段。Pantry 页 13 屏从头滚到底稳在每秒 59 到 60 帧，没有一帧超过 32 毫秒。

这个站用 Nuxt 搭在 Prismic 的内容后台上，每个页面的文字和图片都从后台来。首页加载的脚本一共 546 KB，其中站点自己的代码 210 KB，three.js 112 KB，Google 的统计标签 173 KB。three.js 只为罐子上的标签服务，它的渲染画布从来不挂进页面，页面上看得见的画布全是普通的 2D 画布。

整个首页第一次打开只要下载 1.9 MB，其中图片 1.17 MB。这些图片是十个罐子各两张，一张罐身照片，一张标签平面图，每张 50 KB 上下，全部是 WebP。访客直接打开一个产品页要下载 1.17 MB。服务器返回第一个字节要 0.15 到 0.22 秒，首次内容绘制（FCP）在 0.22 到 0.29 秒之间，画出来的是开场的百分比。最大内容绘制（LCP）要到 3.5 秒，因为罐子被开场动画挡到那时才出现，Google 的建议是 2.5 秒以内。布局位移（CLS）是 0，加载中没有东西跳动。开场期间有一到两个超过 50 毫秒的长任务，最长 89 毫秒，是物理模拟在跑。

键盘用户和读屏软件用户需要的基本项这个站都给了。页面声明了语言，有页头、导航、主体和页脚四个地标，页面开头藏着一条跳到正文的链接，键盘焦点框是 2 像素的酒红色描边外加 5 像素的奶油色光环，落在任何底色上都看得见。首页的十个罐子都是链接，替代文字是产品名。产品页的照片带可以用键盘左右键翻，照片带下面有一行字提示访客可以这样做。操作系统里的减少动态效果设置，是给容易被屏幕上的运动弄得不舒服的人用的。这个站为它写了二十多条规则，开场、字母滚动和圈上文字的转动都缩成瞬时完成，罐子队列照常能推。

读屏软件的用户会在两处吃亏。Production 页 15 张图里 9 张的替代文字是空的，读屏软件会跳过整片柑橘园。首屏的 cookie 弹层来自第三方组件，里面 7 个开关没有可读的名字。购买要跳到另一个域名的商店，站内没有价格。

82 分是 The FWA 给 Agrumea Farm 的分数。团队在奖项页上写的一句话说这是一次沉浸式的旅程，把西西里的传统和 three.js、Nuxt、GSAP 与 Lenis 的平滑交互揉在一起。这句话里点到的四样东西在站上都能对上，three.js 贴的是罐子标签，Nuxt 是站的骨架，Lenis 管内页滚动，GSAP 管开场和换场。

Studio K95 在 FWA 上的档案写着他们做品牌识别、视觉和网站，办公室在卡塔尼亚。这是他们的第三个 FWA 当日站，前两个在 2020 年 11 月和 2025 年 11 月。他们自己的作品集站在 2026 年 8 月拿到了 Awwwards 的当日站，7.32 分，标签里同样是 three.js 和 Nuxt。