跳至内容
NextClick

概念作品,Premium 配套

Sfoglia.

手工意大利面小馆,武吉达曼沙拉. 二十二个座位,墨与骨的配色,食物是整个网站上唯一饱和的东西。

打开线上版本
Sfoglia 首页的桌面版画面

当初设定的目标。

概念简报:让一家很小的餐厅显得理所当然。墨与骨的配色,完全没有强调色,统一美术方向下生成的摄影,而那道菜本身就是主角。

  • Next.js
  • Scroll-scrubbed film
  • Generated photography
  • Static rendering

真正的意大利面,落在真正的盘子上,由滚动驱动.

首屏是实拍影片,不是 3D 模型。一根根宽面落下、盘成一窝,随着滚动位置逐帧擦洗播放。影片以四帧一个关键帧的间隔编码,所以定位是精准落点而不是跳格;它的黑阶还对齐了页面本身的背景色,让整段影片完全看不出边界。

一家餐厅能从这里得到什么:一个让「订位」变成理所当然下一步的网站,一份对照真实本地行情定价的菜单,以及厨房不必打给任何人就能自己改的内容。

量出来的,不是讲出来的。

Largest Contentful Paint
48 ms
Cumulative Layout Shift
0
Median frame
8.3 ms
Dishes on the board
30

在正式构建版本上以 Chromium tracing 实测。重点不在这几个数字本身,而在于你的网站上线时,也会有属于它自己的数字。

WhatsApp 联络下一个作品: Greenhouse