跳至内容
NextClick

概念作品,Premium 配套

Greenhouse.

咖啡馆与餐厅,孟沙 Jalan Kemuja. 一个大部分是玻璃、种着两百来盆植物的房间,还有一面在十一点折叠收起的墙。

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

当初设定的目标。

概念简报:照片是温暖的赤陶与木材,所以页面是冷的。量遍全部十三张照片,37.8% 的像素是温暖的灰泥,而叶子是偏灰的橄榄绿,不是翠绿。照着这些去呼应,只会得到每一份「温暖手作」需求最后都会落到的米色配黄铜表面,所以界面是那片玻璃,而照片是透过它进来的光。

  • Next.js
  • GSAP ScrollTrigger
  • Lenis
  • Three.js canopy
  • WebGL light shafts
  • Static rendering

滚动把西墙折叠收起,敞向露台.

这个房间真正会做的一件事,就是打开。它的西侧不是一扇窗,而是一整排折叠的钢与玻璃门,所以一个固定住的区块把它一叶一叶地折走。每一叶都是同一张照片的一个竖切片,所以合上的墙是一张连续的图像;它们交替铰接,转 82 度,各自移动大约自身宽度乘以序号的距离,正因如此它们才会在门框边堆成一叠,而不是留下一排间距均匀的窄条。每一叶在摆动到一半时有一道反光掠过表面,转开时也随之变暗,因为一块已经侧对着你的玻璃本来就是暗的。没有这层变暗,翻开的门叶和它们身后的露台会停在同一个色调上,看起来像一幅拼贴,而不是一面正在打开的墙。

一家咖啡馆或餐厅能从这里得到什么:一份读得快也改得快的菜单,一张会按访客自己的时钟标出「今天」的营业时间表,一个回答了人们真正会发讯息来问的那些问题的私人用餐页面,以及一则抵达 WhatsApp 时已经写好的预订。

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

Largest Contentful Paint
72 ms
Cumulative Layout Shift
0
Median frame
9.3 ms
Anti-patterns found
0

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

WhatsApp 联络下一个作品: The Coat Room