Son Daven

blago 是乌克兰伊万诺-弗兰科夫斯克最大的住宅开发商，Forbes 报道它在 2024 年的全国排名里位列第二。Son Daven 是这家公司的第一个酒店项目，地点在小城 Yaremche，离乌克兰最大的滑雪场 Bukovel 约 35 公里。项目是两栋九层的楼，共 304 套 37 到 105 平方米的公寓，第一期计划在 2027 年底开业。公寓卖给私人投资者，业主再交给管理公司出租、领取分红，所以这个官网的真正任务是说服投资者买下一栋还没有建成的楼。负责品牌的 Grape 创始人 Yuriy Hladkyi 告诉 Forbes，Yaremche 的酒店大多便宜或者陈旧，而这个项目也是 blago 向外展示自己的机会，因为它过去主要建住宅。

The First The Last 在案例页上把任务写成了两件事，一是讲故事，二是拿到销售线索。团队要在叙事和转化之间找平衡，同时沿用 Grape 已经定好的品牌，再把它的视觉语言往外扩展。这个站的开头写着 Once upon a time, the Carpathians dreamed，也就是把喀尔巴阡山写成一个正在做梦的主角。Webflow 的展示页上，团队说这个故事建立在胡楚尔文化（当地山民的传统）和喀尔巴阡的自然之上。楼还只有效果图的时候，这个故事让网站有了一样比效果图更容易记住的内容。

访客第一次打开网站时，先看到一只走动的羊和一行字 I am a valley of peace, see you in the dreams。加载结束后，酒店的效果图铺满屏幕，上面并排写着最高 10% 的预期年回报和最高 30% 的增值空间。网站没有把数字藏到最后，它先用这两个数字告诉投资者这里有什么，然后才开始讲故事。

之后的内容约有 42 屏，顺序是先讲情感，再讲事实，最后讲钱。序言用一段山的独白开场，接着是项目概念和宣传短片，再是一张标着瀑布和集市的地图，地图旁边写着步行到各处要几分钟。八张优势卡片讲餐饮、水疗、瑜伽和儿童活动，然后是从 2026 到 2029 的施工时间线和六种户型。财务指标放在户型之后，这时访客已经知道自己买的是什么。财务之后还有一段夏天和冬天的切换，讲这座山城在两个季节各能做什么。开发商履历、画廊、新闻和九个常见问题排在最后，负责打消投资者最后的疑虑。

这条路上几乎每一章都留着一个 CONSULTATION 按钮，点开后的表单只问姓名和电话。首页之外，网站还有新闻列表、每月更新的施工进度报告和完整的乌克兰语版本，施工报告让一栋在建的楼有了可以追踪的进展。

Son Daven 的视觉规矩是把世界分成两层。一层是用竖线画的山、羊和飞鸟，这一层只有沙土色 #A89474 和深棕色 #2C2824 两种颜色，版面的底色和文字用的也是这两种。另一层是酒店的效果图和实景照片，它们保留完整的色彩。访客因此一眼就分得清哪里是传说，哪里是要买的那栋楼，彩色画面也总会先抓住视线。

竖线画面的美术规矩来自同一个算法。画面按网格分成小格，每一格只放一根竖线，影像越暗线越粗，所以山坡是一片粗线，天空是一片细线。羊和飞鸟的网格比远山更密，毛的层次因此还看得出来，边缘却保留着阶梯状的锯齿，看起来像织物或者老版画。团队在 Webflow 上把它称为 pixel-art WebGL 和 video patterns。全站还铺着一层极淡的颗粒，让两种纯色不至于显得太平。

字体用的是乌克兰字体厂 Kyiv Type Foundry 的 KTF Metro 一家两款。标题用 KTF Metro Roman，这是一款宽大的衬线字（笔画末端带小装饰的字体），字距收得很紧，行距也压到一倍字号以内，所以大标题像一块石刻。正文用 KTF Metro Blueline，这是一款扁宽的几何无衬线字，字距放开 8%。全站几乎所有文字都是大写，这和版画的气质一致，但小字号的长段落读起来比较吃力。字号以 1440 宽的版面为基准，标题从 144、96、72、56、40 依次递减。

版面用十二栏网格，栏距是 1440 版面上的 32 像素，页边距是 16 像素。网站把根字号设成屏幕宽度的 1%，所有尺寸都从这个数算出来，所以版面在不同宽度的电脑屏幕上等比例放大缩小，构图不变，像一张海报。界面部件保持克制，按钮是一颗深色的胶囊，关闭按钮写成方括号里的 X，左下角是一组会跳动的小竖条，用来开关声音。页头的文字颜色会跟着底下的章节在深浅之间切换。

到了手机上，同一套规矩重新排成一列。第一屏换成一张竖版效果图，八张优势卡片从横向长廊变成上下排列，并加了一个 SHOW MORE 按钮。页头只留菜单、标志和语言切换。竖线画面还在，但每个场景的图层变少了，夏天和冬天那一段的动画场景也被拿掉了。手机横过来时，网站会盖上一层提示，请访客转回竖屏。

全站的动效共用一套节奏。时长主要是 0.4、0.8 和 1.2 秒三档，出场用先快后慢的曲线，退场用先慢后快的曲线。大标题按词拆开，每个词从不同的高度放大出现，出场顺序是随机的，所以一行字像被风吹着聚拢。段落按行上升淡入，一组文字大约一秒内到位，行与行只错开一点点。

第一次访问时，加载画面是这套节奏的开场。深棕色屏幕上，一只竖线画成的羊原地走动，下方是横贯屏幕的大标志，角落里的百分比往上走。全部素材就绪后，标志飞到首屏的位置并缩小，背后的效果图同时从放大一半的状态慢慢落回原位，文字随后一词一词出现。这一段要等好几秒，不过羊和标志让这段时间有东西可看。同一次访问里再回到首页，网站会跳过这段动画。

首屏之后的四屏是全站最主要的滚动动作。访客往下滚动时，酒店效果图变成一段绕楼飞行的镜头，镜头从正面升到楼的上方。这段画面完全跟着滚动位置走，滚轮停下画面就停，往回滚就倒放。文字在前半段往上收走并缩小。到了最后三成，整个画面缩到原来的三成大小，退成一张嵌在沙土色页面里的照片，线条画的云和山从四周涌上来。访客就这样从真实的楼走进了版画世界，中间没有一次切换。

进入版画世界后，画面分两种方式在动。羊、树和云是循环播放的短片，它们自己一直在动，访客不操作也不会停。飞鸟用五秒匀速横穿整个页面，再隔五秒飞下一趟。另一种动作跟着滚动走，比如进入优势章节之前，画面中央的一个洞随滚动不断放大，访客像穿过山洞一样穿进下一章，洞里的人影和飞鸟也一起放大到原来的四倍左右。同时，WHY SON DAVEN CAPTIVATE 这行标题从一个点放大到正常大小。

八张优势卡片是页面上最长的一段停留。滚动在这里变成横向移动，卡片依次从右边进来。每张卡片都带着一个随机的倾斜角度和上下位置，从屏幕右侧走到左侧时，倾斜方向会慢慢翻转，所以每次打开网站排出来的样子都不一样。访客点击一张卡片，一块深棕色的说明面板从卡片顶部往下展开，再点一次就收回去。

夏天和冬天那一段是全站最明确的动手环节。屏幕中间有一条弧线，两端各有一个小图标，旁边写着 HOLD AND MOVE。访客按住圆形手柄沿弧线拖动，手柄会贴着弧线走，松手后自动滑到较近的一端。拖过中点之后，画面用 1.2 秒从夏天的山换成冬天的山，文字也一词一词换掉。访客也可以直接点击两端的图标。

点击的回应大多沿用一种翻转的手感。咨询窗口从小到大、绕着横轴翻下来，关闭时继续往下翻走。六种户型的切换里，旧卡片旋转着从左边飞走，新卡片从右边转正。地图上的七个标记在光标靠近时放大，离光标越近放得越大。按钮和导航的文字悬停时也换成随机错开的小动画，这些悬停动作只在电脑上有，手机上只保留点击。

网站的页面之间用一片参差的竖条切换。访客点击一篇新闻后，240 个小格从屏幕右侧往左依次展开，大约 0.7 秒盖满屏幕，边缘形成一排尖尖的竖条，看起来和首页的竖线是同一种东西。新页面就绪后，这些小格再用半秒收回去。整个过程约 2.5 秒，比一般的切换慢，但它把网站的主题带到了每一次跳转里。

首页的结尾把动作收回到羊身上。页脚从放大一倍的状态随滚动缩回原位，几只羊叠成一座塔立在中间。网站的声音默认关闭，访客点击左下角的小竖条后，一段循环的环境音用不到一秒淡入，竖条也开始跳动。

Son Daven 建在 Webflow 上，招牌的竖线画面却完全是团队自己写的。它没有用 three.js，每个场景是一块原生 WebGL 画布，画布里只有一个铺满的四边形和一个片元着色器。着色器把一个图层的区域分成网格（默认 100 列 100 行），在每一格的中心读一次影像的颜色，算出亮度，再决定这一格里的竖线有多宽。

线宽的取值从格宽的 -2% 到 102%，所以最亮的格子一根线也没有，最暗的格子连成一片实色。每个像素只判断自己离格子中线够不够近，够近就画前景色，否则画背景色。画布关掉了抗锯齿，竖线的边缘因此非常硬，这正是版画质感的来源。前景色和背景色在启动时从 CSS 变量读取，所以画面和版面永远是同样的两种颜色。

这个着色器还顺手解决了抠像的问题。素材是黑底的彩色短片，羊和飞鸟都已经被抠出来放在纯黑背景上。着色器发现格子中心或者周围 5 乘 5 个纹素里有接近纯黑的颜色，就直接丢弃这个格子，所以黑底变成了透明，不需要带透明通道的视频格式，普通的 H.264 就够了。周围一圈也参与判断，这样主体边缘不会留下半亮半暗的杂边。

一个场景就是一张图层清单。每一层写着素材地址和一组参数，包括它在画布上的位置和大小（用百分比表示）、网格密度、黑场和白场。渲染循环每一帧按顺序把每一层画一遍，一层一次绘制调用，再用透明混合叠起来。首页最复杂的一个场景有六层，包括两张山和干草的静态图，以及树、羊、云、飞鸟四段视频。

动画也不碰画布本身，GSAP 只修改这些参数对象里的数字，飞鸟横穿就是把 x 从负值补间到 100%，下一帧的着色器自然读到新值。网站里 15 块画布共用这一套代码。

黑场和白场是这套系统里最巧妙的参数。把黑场设得比白场高，画面就反相，于是同一段素材在深色章节里变成亮线。把两个值推到一端，整层就变成全黑或全白，配合把前景或背景的不透明度设成 0，这一层就消失了。夏天和冬天的切换正是这样做的。网站用 1.2 秒把一层的色阶推到尽头，再把另一层拉回来，画面里的线因此一根根变细，直到消失。洞口放大的那一段同样是用 ScrollTrigger 把位置、大小和色阶一起绑到滚动上。

首屏绕楼飞行的镜头走的是另一条路。网站预先下载 120 张 1920×1080 的 WebP 序列帧，用一块 2D 画布按滚动进度绘制，GSAP 的 scrub 设为 0.25，给滚动和画面之间加了一点点阻尼。平滑滚动交给 Lenis，它由 GSAP 的时钟驱动，所以滚动、序列帧和场景参数走在同一个节拍上。页面切换交给 Barba，每次离开页面都会销毁全部场景和 ScrollTrigger，进入新页面再重新创建。

这两种做法的体积差得很远。120 张序列帧一共约 22 MB，占首次下载 34 MB 的三分之二。而全站 23 段线稿短片加起来只有 2.3 MB，六张静态图层只有 213 KB，整个版画世界只占约 2.5 MB。线稿能这么小，是因为一块 100 列的网格根本用不上高清细节，短片的长度也只有 1 到 12 秒，循环播放。

这些短片不放进页面结构，脚本在内存里创建 31 个视频元素，画布进入视口上下各 20% 的范围才开始播放和渲染，离开就暂停。纹理只在视频时间变化时才更新。滚动时最多有八段短片同时播放，主要集中在首屏之后和优势卡片这两段。

资源的等待集中在加载画面上。首次绘制只要 0.3 秒左右，但那时屏幕上是加载画面。网站要等 120 张序列帧、全部场景和字体都就绪才放行，访客第一次打开时，百分比约 4 秒走到 100%，之后还有三秒多的开场动画，大约 7.8 秒后才能滚动。页面加载时的跳动很轻。

不同设备下载的内容差别很大。屏幕宽度低于 992 像素时，序列帧一张也不下载，首屏换成一张静态图，部分图层和整个四季场景也被跳过。这样一次打开只要约 8.4 MB，只有电脑版的四分之一。画布的像素比封顶在 1.5，2 倍屏和 3 倍屏都不会把着色器的工作量翻倍。设备靠屏幕宽度判定，所以电脑上的窄窗口也会拿到这一版。

页面上有几处没校对到的文字。英文版户型卡片上的价格写着 0 UAH per m²，新闻标题和 404 页是乌克兰语，cookie 框的确认按钮也写着西里尔字母的 Ок。价格写成 0 之后，投资者在英文版上就看不到真实的单价。

键盘访客可以用 Tab 走到菜单、按钮和户型标签，焦点框也看得见，但四季切换的手柄不响应键盘。网站完全不读减少动态效果的设置，对晃动敏感的访客仍然要面对整页的动画。读屏软件的访客会遇到比较乱的标题层次，像 31min. 这样的数字也被标成了一级标题。

Son Daven 的四个分项里 Creativity 最高，Usability 最低，这和站点的特点对得上。竖线版画是一套自己发明的语言，评委很难在别处见过。而全大写的小字、42 屏的长度和较长的首次等待，都会让访客多花力气。开发评委给了 8.09 分。其中 Responsive 最高，为 8.4，手机版确实重新安排过版面和资源。Accessibility 最低，为 7.4，这和前面键盘和读屏软件的问题一致。

战绩是截至 2026 年 11 月 7 日的累计数。The First The Last 是 Awwwards 的常客，这次是一个给客户做的项目。网页控制台里留着一段署名，写明设计、开发和交付都由 Ivan Chopei 完成，Maks Stepenko 是制作人，所以这套着色器和版面出自同一个人。团队在 Webflow 上说这个站在 Instagram 上有超过 400 万次观看，这是团队自己报的数字。