Hobro Digital

第一屏是整个官网最值钱的位置，同行几乎都拿它来放作品。这一家拿它放了一分钟不作解释的画面，赌的是被人记住。

影片 57 秒，循环，静音自动播。除了洗衣店和越野车，剩下几个画面是一段暗红色的流体、一台正在打印白色多面体的 3D 打印机、一组渲染出来的静物、一间黄昏的客厅。八个画面之间没有任何关系，而这正是它要的效果。

画面换了八次，HOBRO DIGITAL 那行白色大字和底下的 FULL-CYCLE DIGITAL AGENCY, EST. 2023, CANADA 一次都没动过。第一屏唯一稳定的东西是这家公司的名字。

这一步换来的是辨识度：渐变、三维摆件、终端风格、WebGL 展示柜，这些标配它一个都没用，一屏之内就跟对手分开了。在一个所有人都长得差不多的品类里，这是最便宜也最有效的差异化手段。

丢掉的是清楚。第一屏说不清自己是谁，八个画面读不出这家公司做什么，你得往下滚才知道。

真正把话说明白的是紧接着的第二段。页面到这里切成黑底，白字写着：我们做高端的数字体验，用设计手艺、能落地的技术和策略思考，把品牌的故事讲出来。后面补上总部在卡尔加里，团队分散在北美和欧洲，最后落下四个词，VISION. CLARITY. FLOW. EXECUTION.

第三段才切回白底，是一张四栏的服务清单，从 logo 设计一路排到产品分析，二十个条目一条不漏地摊开。

真正的内容藏得更深。14 个案例，点开每一个都是一篇完整的项目介绍，有叙述有标签，但滚动的时候只给你看一张缩略图和一行小字。这个站把最能说服人的东西放在了要主动点击才到得了的第二层，而评委如果只滚不点，看到的是一个漂亮但内容单薄的站。

这是做作品集类站点最容易踩的坑：你以为访客会点进去，实际上大部分人只会滚一遍。

暗调静物微距加巨大的无衬线字加细线清单，这是杂志和时装画册的成熟做法搬上网页，不是这里发明的。做得很到位，所以 Design 那一项拿了四项里最高分。评委见过这套语言，所以 Creativity 拿了四项里最低分。这两件事其实是同一个原因。

首屏那行 HOBRO DIGITAL 不是排出来的字，是 12 个单独的 SVG 字母文件，左右两半装进两个容器分别做动画。白色字母压在影片上，画面换了八次，字一次都没让位。

文字压在图上不是偶尔为之，是全站的做法。整页数下来有 24 处大字跟图片或视频重叠九成以上，包括 100px 的字压在视频上，还有 240px 的字一个个压上去。

层级几乎全靠字号，不靠字重。全站 401 处文字里，有 335 处用的是同一个字重，占 84%，剩下的三个字重加起来才 66 处。一个字重铺满全站，靠字号从 12px 跳到 290px 来分层级。

这是个很值得学的做法：字重变化多了容易显得杂，而字号跨度拉到二十倍，层级自然就清楚了。宣言那一段是这个手法的极致：满宽的巨大标题，接一段居中的中号文字，再接左下角 12px 的小字，三段字一段比一段小，像从喊话降到耳语。

四款字分工很严，严在字号上。正文那款写了 12,572 个字符，等宽那款只写了 2,952 个，而且等宽的字号被锁死在 12 到 16px，全站从不放大。小字永远是小字，不会跑去当标题。展示字体只出现九次，每次都是 240px。斜体也不是装饰而是规矩：一句话里要强调的那个词切成斜体，全站至少七处，从 45px 的分类计数到 290px 的单词。

颜色上最极端的一处是品牌绿。那个绿全站只用在一个地方，6×6px 的自定义鼠标圆点。定了一个品牌色然后几乎不用，这是相当大的克制。

画面来自四个地方：首屏那段影片、暗调室内静物微距、预先渲染好的三维场景、客户案例的产品图。宣言那一段开场是夕阳草地上一颗切开的石球，240px 的斜体字压在上面。四类画面靠同一套排版和同一套用色规矩串在一起，所以看起来像一种语言而不是四种。

整页九个区块、20 屏，一条分隔线都不用就分得清楚。底色整体是白的，只有两段自己刷成黑底：开头那段自述，和后面的 CORE VISION。

细节做得很密。OUR CORE IDENTITY 里的那个 O 是一张单独的 SVG 图，不是字体里的字母。副标题排成一行比一行往右缩的阶梯。24 个团队成员用等宽数字从 1 编到 24。每个案例缩略图的四角各挂一组小弧线，围成一个角框。

要动手的地方只有一个，点开案例。光滚是发现不了它的。

点一下案例缩略图，展开一个全屏黑底的项目介绍：左边是标题加两段项目叙述，下面挂着 8 到 11 个等宽字的专业标签，右边一整张案例图可以单独滚动，底下一个被弧线框住的巨大"聊聊"按钮。这一层打开的时候页面滚动会停掉，关上再恢复。14 个案例每个都有一篇。

滚动这一层从不抢你的滚轮。147 条滚动触发器全部既不钉住也不跟随进度，20 屏一路推到底。手感是故意调重的：滚一下之后位移从 87 像素一路递减到 22，三十帧之后还在动，接近半秒才停稳。

配上那种大尺度的排版，读起来确实有分量，只是你想精确停在某一屏的时候要多等半秒。这是个取舍，不是错误，但做长页面的时候要想清楚访客是来读的还是来找东西的。

团队那一栏是可以拖的横向滑块，拖 800 像素松手之后惯性还会再带 40 像素，撞到边界停住。这是全站唯一一处要用手拖的地方。

鼠标指针是个 6×6 像素的品牌绿圆点，跟随带阻尼，落后指针大约 3 像素，移到按钮上变成一圈描边圆环。文字靠逐字动画入场，标志从两个字母变形成完整的名字。

问题出在重头戏的位置。从头滚到尾全程都舒服，但没有一个让人记住的瞬间，真正的重头戏全压在点开之后的那一层里，而评委得先点进去才看得到。

纯 DOM 和 CSS，一点 canvas 和 WebGL 都没有。用的是 GSAP 加七个付费插件，再加 Lenis 和一个 Lottie 播放器，动画最多的时候有 467 个同时在跑。有一处冗余：ScrollSmoother 这个插件被加载了但根本没启用，实际驱动滚动的是 Lenis。

整页 191 个请求，下载 15.8 MB，其中视频四十个共 9.9 MB，图片七十四张共 4.2 MB，脚本 489 KB，字体 197 KB。最重的单个文件是首屏那段影片，5.1 MB。

页面上写了 60 个视频标签，实际只加载了 18 个，其余的一直没开始下载。也就是说那 9.9 MB 已经是省过之后的数字了。这个做法值得学，大量视频的站点应该让浏览器只加载看得见的那些。

速度这一块只有一半的数字是稳的。同一个页面打开三次，首屏出现的时间分别是 212 毫秒、344 毫秒和 1,088 毫秒，差了将近五倍，所以单说一个数没有意义。稳的是最大内容出现的时间和页面抖动量，几次打开几乎一样，最大内容都落在首屏那段视频上。

帧率也是两个方向相反的数。一边滚一边测，全程 60 fps，20 屏没有一处卡。但停在案例那一段会掉到 30 fps，因为那里同时有 4 到 6 个视频在解码，其中一部分还在屏幕外，而首屏那个 5.1 MB 的视频滚出去老远仍然在播。把它们暂停之后立刻回到 60。

这一条是做视频密集站点最该注意的：滚动流畅不等于停下来也流畅，而访客停下来细看的时候，恰恰是最需要流畅的时候。

无障碍整体不错但有几个洞。页面标了语言，四类地标齐全，210 张图的替代文字一张都没漏，这些都做对了。问题在 71 个控件里有 8 个没名字，没有跳到主内容的链接，还有四处用了正数的 tab 顺序。最说不过去的一条是，针对减弱动画偏好只写了 1 条规则，而这个站最多的时候跑着 467 个动画。

这个站在两个平台都拿了奖，相隔 18 天。

两套分数的刻度不同，不能互相换算，只能看每一套里各项之间的高低。Awwwards 那边有 19 位评委打分，Design 7.46 是四项最高，Creativity 7.04 是四项最低。总分从 6.3 到 9.2，中位数 7.0，其中 9.2 那一票明显偏高，其余 18 票都在 6.3 到 8.0 之间。

这个高低关系就是全站的结论：手艺到位，想法不新。

FWA 那边没有分项，但有 Awwwards 没有的东西，团队自己写的创作说明。他们把获奖归给设计、动效和技术三者的结合。前两项画面上有证据，第三项没有。整个站一点 WebGL 都没有，技术在这里是实现质量，不是看得见的主张。

两个互不相干的评委体系隔 18 天各选中同一个作品，这件事本身就说明完成度很高。

FWA 的署名只到公司一级，但站点自己的团队页把 24 个人连职务全列了出来：创始人、艺术总监、前端负责人、动效与三维设计师，另外还有五名前端、两名后端、四名项目经理、三名测试。

这份名单能读出三件事。这是他们自己的官网，没有客户预算和客户内容的约束，钱可以全砸在执行上。他们是 FWA 新人，第一次投就中，评委看的是完成度，不是名气。而前端六个人对三维一个人这个配比，跟"全站零 WebGL、147 条 DOM 触发器"其实是同一件事的两面。团队构成决定了技术选型，反过来也一样。