概念作品,Premium 配套
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 实测。重点不在这几个数字本身,而在于你的网站上线时,也会有属于它自己的数字。