USAvionix

一个卖飞行器的公司通常会给你一页参数表加几张渲染图。这一支把参数表拆开，铺成一次完整的任务。

首屏是飞机在一片山谷上空巡航，左上角三行标题写着用自主智能守护天空，右下角一段说明和一个向下的箭头。地形是实时渲染的，不是视频。

往下滚，画面顶端出现一条刻度，中间标着当前这一节的名字。菜单里能看到全部十节：SPECS、SWARM、MISSION、SYNC、DETECTION、PHALANX AI、SYS ANALYSIS、INT ALERTS、COORDINATION、RESPONSE。这条刻度是这 71 屏里唯一的位置指示。

进入 DETECTION 那一节的时候，画面右下角开始刷一串遥测数据：SCAN MODE: ACTIVE、COORD: [37.4419°N / 119.8772°W]、ALT 1,240M | SPEED 74 KM/H，最后一行是 32 CAR / 4 TRUCK / 1 PERSON / 2 UAV。

这一串数字是这个站说服人的方式。它没有写这架飞机识别能力强，而是把一个具体场景下识别到的东西逐项列出来，让读者自己得出结论。同样的手法也用在别处。COORDINATION 那一节的画面是一张线框地形图，两块区域被勾出来，一块标着 SERVICES ON SITE 是青色，一块标着 SENSITIVE AREA 是琥珀色，角落写着 2 DRONES ASSIGNED TO TARGET AREA 和 2 WILDFIRES + 1 ROADBLOCK DETECTED。

值得注意的是这个站给自己选的场景。产品本身是可以军用的，但页面上举的例子是山火蔓延、电力设施受损、大面积搜索，招聘那一栏写的是加入一支在造有益的自主无人机的工程师团队。整站没有出现一次武器相关的词。

最后一节结束之后，飞机降落。页脚是它停在地上的样子，起落架放下，背后压着一行巨大的 USAvionix 描边字。71 屏的滚动在这里闭环，开头起飞，结尾落地。

这个站只用了两款字，而且都是免费的 Geist 和 Geist Mono。

分工按信息类型切得很死。Geist Mono 写了 2,458 个字符，全部落在 11 到 13px，承担所有遥测数据、章节标签、坐标和状态行。Geist 写了 1,266 个字符，从 17px 到 76px，承担全部三个标题和几段说明文字。

等宽字的字符数是无衬线的两倍，渲染面积却只有它的四成。也就是说这个站上绝大多数文字是小号等宽的机器读数，真正给人读的句子非常少。这和它想扮演的东西一致，读者不是在看一个网站，是在看一块仪表屏。

颜色也是仪表的逻辑。白色用在 1,238 个元素上，黑色 281 个，剩下三个颜色各有各的岗位。青色 #7AEBFF 标已确认和已保障，琥珀色 #FFCB71 标需要注意，红色 #FF6666 标已探测到的威胁。整站没有品牌色，只有状态色。

这个分法可以直接拿去用在任何需要表达状态的界面上，而且它比自选一套配色稳得多，因为青、琥珀、红这一组在座舱和调度台上用了几十年，读者不用学就知道哪个是要紧的。

1,628 个元素里只有 60 个带圆角，主要在按钮和卡片上。菜单是一块从右边推进来的黑色面板，列出 Delta、Phalanx AI、SARA、Athena 四个产品，底下是招聘和合作两栏。面板打开的时候背后的场景冻在原地，html 上加了 lenis-stopped。

最见功夫的是它把两种完全不同的渲染方式接在了同一条滚动线上，接口处看不出来。

大部分行程是实时三维。页面加载了四个 glTF 模型，terrain.glb 2.05 MB、delta-pbr.glb 898 KB、city-terrain.glb 343 KB、loading-delta.glb 92 KB，全部走 Draco 压缩，另配一个 87 KB 的 draco_decoder.wasm。环境光来自一张 146 KB 的 env.exr。页面上有三块 WebGL2 画布，两块 1905×945，一块 1378×994，都按显示尺寸渲染，没有超采样。

降落那一段换了做法。它不是渲染出来的，是 96 张 AVIF 图片顺着滚动播的，路径写着 /assets/images/landing-sequence/，从 0001 到 0096，每张约 38 KB，一共 2.82 MB。

这个分工背后的判断很清楚。实时渲染适合相机要跟着滚动自由移动的段落，因为你不知道访客会停在哪一帧。降落是一个固定机位的镜头，每一帧长什么样都是定死的，那就没有理由让显卡每次重算——预渲染成序列图反而能做到实时渲染做不到的光影质量，而且开销从 GPU 转到了解码，稳定得多。

换个人做要注意的是权衡在哪一边。这 96 帧 2.82 MB，和整套三维模型 3.59 MB 是同一个量级，换来的只是最后几屏。序列图的成本随时长线性涨，三维模型的成本是一次性的。镜头固定、时长短，序列图划算。镜头自由或者段落长，就得反过来。

驱动这一切的东西比想象的简单。打包文件里 three 出现 243 次、lenis 25 次、ShaderMaterial 23 次、InstancedMesh 20 次，而 GSAP 和 ScrollTrigger 一次都没有。71 屏的滚动叙事没有用任何动画库，滚动位置直接换算成相机参数和序列帧号。

正因如此帧率才这么平。整页没有 section，没有会随滚动重新布局的元素，三个钉住的层分别是 56px 的导航条、一层 945px 的 sticky 舞台和一层 945px 的固定序列图。浏览器在这 71 屏里要做的只是把一个数字交给渲染循环，不需要重排任何东西。实测平均 60 fps，p95 帧耗时 18 毫秒，卡顿帧 0.1%，12 段分段帧率全部是 60。

减弱动画这一项完全没有覆盖。样式表里查不到一条 prefers-reduced-motion 规则，把系统偏好打开之后页面高度、画布数量、动画行为全都不变。一个 71 屏全靠移动镜头推进的站，对前庭敏感的访客来说没有任何退路。

一次冷访问下来是 9.23 MB，174 个文件。三维模型 3.59 MB，降落序列的 AVIF 2.82 MB，其余贴图 1.66 MB，脚本 759 KB，环境贴图 146 KB，wasm 87 KB，字体只有 52 KB。

第三方一共 99 KB，来自 gstatic，除此之外一个都没有。没有 Google Tag Manager，没有像素，没有会话录制，没有任何分析脚本。在一个 9 MB 的站上，这份清单干净得反常。

服务器 259 毫秒回了第一个字节，512 毫秒画出首屏，load 事件 577 毫秒，累计布局偏移 0。

真正的问题在可交互之前那一段。最大内容绘制落在 10,860 毫秒，将近 11 秒。加载过程里有 9 个长任务，最长的一个 3,782 毫秒——主线程连着将近四秒不响应点击，也不响应键盘。这是 Draco 解 2 MB 地形模型加上建场景的开销，和上面那个 512 毫秒的首次绘制是两回事。画面很早就有东西，能用要等很久。

要缓解的话，标准做法是把解码放进 worker，或者把地形拆成按需加载的分块，先只解首屏那一段用得上的。这个站两样都没做。

WPO 还是拿了 7.60，算是不低。评委大概是按滚动起来的表现打的，那一段确实无可挑剔。

无障碍这边的数字乍看很漂亮，细看不是。整页只有 9 个可聚焦控件，9 张图片全部带 alt，没有正值 tabindex，声明了语言，nav 和 main 两个地标都在。

但页面上的链接只有一个，指向 notes.usavionix.com。导航里那些条目在菜单没打开的时候根本不在 DOM 里，点开菜单之后链接数才从 1 变成 8。对读屏器和爬虫来说，关着菜单的这一页几乎没有出口。同时页面上有 2 个按钮既没有文字也没有 aria-label，其中一个就是右上角那个汉堡按钮——也就是唯一能打开导航的那个控件。

标题结构同样单薄，整页只有 H1 一个、H2 两个，一共三个标题覆盖 71 屏、十个章节。语义分拿了 8.00，是开发奖六项里最高的，而无障碍 7.00 是最低的，两个分数之间的差距正好落在上面这几条上。

Creativity 8.00 是这四项里唯一上到 8 的，和最低的 Usability 7.03 差了将近一分。这个分差把这个站的位置说得很准：它赢在没人这么做过，输在一页 71 屏、十个章节、一个位置指示，访客想回到某一节基本没办法。五位评委里西班牙的 Fernando Puente 给了 8.70，四项分别是 9、8、9、9，其余四位都在 7.0 到 7.6 之间，一个人把总分拉起来的痕迹很明显。

7.74 的开发奖比站点那边高出 0.33，六项里五项在 7.6 以上。动效 8.20 最高，对得上 71 屏不掉帧。语义 8.00 次之。无障碍 7.00 垫底，五位评委里有四位都给了 7，这一项的看法相当一致。

只有一个署名。basement studio 名下 21 件作品拿了 12 个 SOTD 和 20 个提名，profile 上的自述是做又酷又跑得动的东西，接坐班也接远程，没有公开报价。他们的列表里还夹着几件挂在 Studio Freight 名下的作品，说明两边有过人员交叉。

一间工作室独立完成一个满屏三维、71 屏叙事的产品站，而且没有外包任何一块，这在这份库里不多见。

这个站在 FWA 上没有记录。