跳至内容
NextClick

概念作品,Premium 配套

Beyond Constructions.

设计与施工,独立式住宅,Bukit Jelutong. 一个以工程本身作为主视觉的建筑商网站:从一片空地到亮起灯火,三十五秒。

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

当初设定的目标。

概念简报:手上有一块地的人,真正怕的并不是房子盖得难看,而是承包商中途走人,以及交屋日期一再往后挪。所以这个页面要讲的是我们会把它盖完,并且把工期里那七个没有东西可拍的月份,放在和有东西可拍的部分同样大的篇幅上。页面写的成绩是 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 实测。重点不在这几个数字本身,而在于你的网站上线时,也会有属于它自己的数字。

WhatsApp 联络下一个作品: Hone