概念作品,Premium 配套
Beyond Constructions.
设计与施工,独立式住宅,Bukit Jelutong. 一个以工程本身作为主视觉的建筑商网站:从一片空地到亮起灯火,三十五秒。
打开线上版本
当初设定的目标。
概念简报:手上有一块地的人,真正怕的并不是房子盖得难看,而是承包商中途走人,以及交屋日期一再往后挪。所以这个页面要讲的是我们会把它盖完,并且把工期里那七个没有东西可拍的月份,放在和有东西可拍的部分同样大的篇幅上。页面写的成绩是 63 个案子里有 58 个准时,不是满分,因为满分没有人会信。
- Next.js
- GSAP ScrollTrigger
- Lenis
- Canvas image sequence
- Generated time-lapse film
- Static rendering
滚动推进工程,而读数是施工进度表.
主视觉播放的是同一块地上盖起同一栋房子的缩时影片,滚动会接手并推动它。有意思的是滚动真正带动的是什么。影片没有办法被清晰地拖动:每一帧滚动都会写入一个新的时间点,而解码器必须从前一个关键帧把那一帧重新算出来,所以清晰版本在拖动时每秒能呈现的画面是零。因此滚动拖动的是画在画布上的 212 张静态图片,静态图片根本不需要寻址;一旦停止滚动,清晰的影片只寻址一次就淡回来。移动时你看到的是 1600px、每秒七十帧,停下来的那一刻则是完整的 2560px。上面还叠着一个施工周数,从 W00 数到 W62,所以真正被动画化的是工期,而不是几何形状。
建筑商或承包商能从这里得到的是:一份工程从开工到完工的证据,而不是任何人都拍得出来的完工房屋相册;一张会依访客自家地块尺寸重画的平面图;一个直接给出每平方英尺真实价格区间、而不是叫人打电话来问的造价页面;以及一则抵达 WhatsApp 时就已经把地块情况写清楚的询问。
量出来的,不是讲出来的。
- Largest Contentful Paint
- 92 ms
- Cumulative Layout Shift
- 0
- Frames while scrubbing
- 70 / second
- Anti-patterns found
- 0
在正式构建版本上以 Chromium tracing 实测。重点不在这几个数字本身,而在于你的网站上线时,也会有属于它自己的数字。