概念作品,Premium 配套
Greenhouse.
咖啡馆与餐厅,孟沙 Jalan Kemuja. 一个大部分是玻璃、种着两百来盆植物的房间,还有一面在十一点折叠收起的墙。
打开线上版本
当初设定的目标。
概念简报:照片是温暖的赤陶与木材,所以页面是冷的。量遍全部十三张照片,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 实测。重点不在这几个数字本身,而在于你的网站上线时,也会有属于它自己的数字。