Prometheus Fuels

Prometheus Fuels 在 2019 年被创业孵化器 Y Combinator 选中，2020 年又拿到了宝马的 1250 万美元投资。它要让普通访客相信两件不容易相信的事：燃料可以从空气里来，而且这种燃料加进油箱以后，和从地下开采出来的燃料用起来一模一样。网站没有给访客一页技术说明，而是把整套流程放进一趟开车的路上。每一句文案都只有三四行大写的短句，配着一个镜头，访客读到的始终是一段画面加一句话。

网站的首页把三章连成了一条长路，在电脑上一共要滚动 85 屏。第 1 章 FUEL FROM THE AIR 占 28 屏，讲燃料是怎么来的。跑车先在沙漠里飞驰，画面再切到一片摆满白色燃料工坊的太阳能田，镜头钻进工坊进气口的风扇，看见里面被电能激发、正在合成燃料的分子，最后一辆写着 PROMETHEUS 的油罐车把燃料送到加油站。第 2 章 THE ROAD TO NEW POWER 占 23 屏，讲燃料拿去做什么：跑车开上公路，访客坐进一辆大货车的驾驶室，看一架客机起飞，再路过一家酿酒厂、一家户外用品店和一处营地。第 3 章 THE NEED FOR SPEED 占 34 屏，讲公司怎么把工坊造得又快又多，这一章是获奖之后才加上的。

三章的节奏由每一段占的屏数决定。第 1 章里最长的两段是开场的跑车（10 屏）和分子（9 屏），它们正好是访客要按住空格的地方，网站在这里放慢，留出时间让访客动手。第 2 章的十段大多只有 2 屏，镜头一个接一个地换，像一组快速剪辑，告诉访客这种燃料能用在多少地方。第 2 章在夜里的营地结束，一枚火箭从远处升空，文案说新的清洁能源也许是我们最近的目的地，但旅程才刚开始。

按住空格的三处都在第 1 章，每一处都落在故事里最需要访客相信的那句话上。第一处在跑车段，文案说要去下一个地方，我们需要一种新的燃料，访客按住空格，车就加速。第二处在分子段，访客按住空格，分子就被电能激发、聚到一起。第三处在加油站，文案说加满油箱的那一刻，你就开进了一个新的时代，访客按住空格，油箱就一格一格地满起来。网站把论证里的三个关键步骤交给访客亲手完成，第 2、3 章则只靠滚动推进。

除了首页，网站的菜单里还有五个页面。MISSION 是公司的使命宣言，用一张拼贴照片开头，后面是几屏长文。TECHNOLOGY 用一段循环的背景视频介绍技术，并提供一部完整的技术影片。NEWS 是新闻列表，PARTNERS 是合作伙伴的标志墙，CONNECT 是一页铺满橙红色的订阅表单，标题是 JOIN THE ENERGY REVOLUTION，网站最后就把访客带到这里留下邮箱。隐私政策页在这个地址上一直停在加载画面，打不开。

这份报告测的是一份至今仍在运行的副本。原来的域名 prometheusfuels.com 现在会跳转到公司的新官网，获奖的这一版还挂在 Firebase 托管服务的默认地址 prometheus-fuels.web.app 上，服务器记录的更新日期是 2023 年 5 月。Awwwards 在 2021 年 5 月存下的录屏里，第 1 章的镜头和文案和现在一致，第 2 章在 2021 年 4 月的网站存档里已经存在。第 3 章和 PARTNERS 页面是之后加的，新闻列表也来自一个至今仍在更新的内容库，所以列表里能看到 2025 年的新闻。

这个站的整个世界都按一张旧旅行海报来画。每一块表面只从几种平涂的颜色里取色，明暗只分两三级，交界处是一圈细碎的颗粒，像丝网印刷的边缘。天空是一张张手绘和照片拼起来的画，里面挂着巨大的红色行星和月亮。燃料工坊、风扇和油罐车都是白色的低多边形方块，表面印着红色的标志。全场只有那辆野马跑车做出了真实的金属和玻璃反光，但它表面也盖着同一层颗粒，所以仍然像是印在同一张海报上。这套画法把一套抽象的化学流程变成了读者一眼看得懂的插画，又让跑车始终是画面里最显眼的主角。

网站的界面主要用四种颜色。米色（#FDF0E1）用在章节标题、大部分文案和一圈围住整个窗口的细边框上，这圈边框在每个页面上都有，让整个站像一张装了框的海报。橙红（#E74833）是公司标志、按住空格的提示和菜单里当前页面的颜色。近黑（#161616）是加载画面、菜单和各个子页面的底色。青绿（#66B4AD）留给仪表和需要强调的一行字，比如加油站那段的 THE ERA OF NET ZERO EMISSIONS。场景自己的颜色另成一套，白天是土红的沙漠和带灰的天蓝，到第 2 章结尾换成深蓝的夜空和一团橙色的篝火。

界面上的字体也只有两种。章节标题、菜单和各个子页面的大标题用 Mars Condensed，这是字体公司 Production Type 发行、由 Alaric Garnier 设计的一款又高又窄的大写字体，FUEL FROM THE AIR 这样的标题只用两三行就能占满半个屏幕。故事文案用 Futura LT 的粗体，全部大写，三四个词一行，章节标题的字号大约是它的七倍。文案总是放在画面的左侧或右侧，避开跑车和画面中心，所以访客读字的时候不会挡住镜头。

从加油站开始，画面右下角多了一组像汽车仪表一样的读数。它由两根分成十几格的竖条组成，每根竖条旁边各有一个数字。左边一根是燃料，标着 GAS、DIESEL、JET FUEL 这类燃料名和 ZERO NET CARBON。右边一根是二氧化碳，上端标着 POLLUTED PAST，下端标着 NET ZERO FUTURE。第 2 章里带仪表的几段各换一种名字，从柴油、航空燃油一直换到烈酒和商品，货车那段还加上了出发地洛杉矶港和目的地芝加哥。网站用这组细线和小字把论证变成了数据，访客像看车上的仪表一样读到，用了这种燃料，排放就落到了零。

访客点开右上角的三条横线，会看到一个铺满近黑色的菜单。左边是用 Mars Condensed 排得很大的六个页面名，当前页面是橙红色，其余是米色，光标停在某一项上，那一项就变成灰色。右边竖排着三张圆角卡片，分别通往三章，每张卡片上是这一章的一张画面。三张卡片平时分别被染成橙黄、青绿和橄榄绿的单色，光标停上去，卡片就露出原来的彩色画面，边框也随之消失。MISSION、NEWS 和 PARTNERS 的正文部分沿用菜单的近黑底色和颗粒，CONNECT 则整页换成了橙红色。

到了手机上，三章同样是 85 屏，只是每一屏换成了手机屏幕的高度。网站为竖屏重新摆了镜头，开场的跑车离镜头更近，只露出车尾，FUEL FROM THE AIR 的标题放大到几乎占满屏幕的宽度，简介和 MISSION 按钮移到了屏幕下方。按住空格的提示在手机上换成了 TAP AND HOLD TO，意思是用手指按住屏幕。

访客打开网站，先看到近黑的底色上一个被细圆环围住的红色小标志。加载完成后，盖在上面的深色一层从右上角开始沿斜线撕开，撕开的边缘很粗糙，边缘里还闪过几个放大的标志形状，跑车的画面从后面露出来。整个撕开的过程大约一秒，开始快，结尾慢，最后几片深色碎屑留在左下角才消失。

进入首页以后，画面上的一切都跟着滚动位置走。镜头的路线、跑车和机器的动作都事先做成了一条时间线，访客滚动多少，时间线就往前走多少，滚轮停下画面就停，往回滚动画面就倒着放。在电脑上，页面不会一下子跳到滚轮的位置，每一帧只追上剩下距离的一小部分，大约半秒多才完全停稳，所以滚动带着一点顺滑的拖尾。每一句文案只在一小段滚动范围里出现，出现时从一片噪点里溶出来，随着访客滚动慢慢往上漂，离开时再溶回噪点，溶进和溶出的方向相反。开场的章节标题则在第一段滚过两三成时淡掉，把画面留给跑车。

一段场景接下一段场景时，网站没有用淡入淡出。下一段场景从画面底部沿着一条笔直的斜边升上来，斜边跟着滚动一点点往上推，大约滚动一屏的距离就把上一段完全盖住，两边的画面在交界附近都会稍微变暗，让那条斜边更清楚。章与章之间用的也是同一种切法，所以三章连成了一条没有停顿的路。

按住空格是这个站最主要的互动。访客在跑车段按住空格，速度在大约两秒半里升到最大，开始升得快，后面越来越慢，松开以后再用一秒半慢慢落回去。镜头本身并没有往前开，网站是让整个世界的时钟走快了，地面的纹理、沙尘、云和车轮都转得快了三四倍。与此同时，画面边缘出现一点红蓝错开的重影，整体变亮、四周变暗，发动机的声音也在三秒里渐渐响起来。访客一按住，屏幕下方的提示就淡掉了。

不过，只有在访客点击过一次页面以后，空格才会交给这个互动使用，否则浏览器会照常把页面往下翻一屏，访客就直接离开了这一段。手机上用手指按住屏幕，速度的变化和电脑上一样。

分子段和加油站段用的是同一个按住的动作。在分子段，满屏的白色、灰色和红色小球在访客按住时聚成一团团发光的簇，周围闪着电火花，松开以后又散开。即使访客不按，滚到这一段的一半左右，分子也会自己聚起来，按住只是让它更早发生。

在加油站，访客按住空格，加油机上的数字从 0.0 加仑往上跳到 16.0 加仑，右下角的燃料竖条一格一格地填满，二氧化碳的竖条则从 314 磅一路降到 0。松开以后，两个数字都回到原样，油箱又变空了，所以访客每一次按住，都能把这一刻重新经历一遍。

子页面的大标题用的是和文案相同的溶出动作。访客从菜单点进 MISSION 以后，新页面接替菜单出现，橙红色的 MISSION 几个字母先是残缺的碎片，大约一秒内补齐成完整的字。

访客从首页顶部一路连续滚动到底部，帧率始终稳定在每秒 60 帧，没有一段卡顿。画面里的颗粒却有意每秒只换 12 次，比画面本身慢得多，所以颗粒像手工印刷一样一跳一跳地闪动，场景和镜头仍然是顺滑的。

Active Theory 用自己的引擎 Hydra 做了这个站。整个网站只有一块铺满窗口的 WebGL2 画布，关掉了浏览器自带的抗锯齿，改用一趟 FXAA 后期处理来平滑边缘。在显卡等级高的电脑上，引擎按 1.5 倍像素比渲染，即使屏幕本身是 1 倍，画布也会画成 2880×1417 再缩到窗口里，边缘因此更干净。画面上所有的字，包括章节标题、文案、仪表和菜单，都画在画布里，用的是 Mars Condensed 和 Futura LT 做成的 MSDF 字形图集（一张 PNG 加一份 JSON），所以字能跟着噪点溶出、溶进。每一行画在画布里的字，引擎都在网页里另放一份看不见的文字，每个画布里的按钮也对应一个看不见的链接，读屏软件和搜索引擎读到的就是这一层。

整条故事由一份按段排好的页面配置驱动，每一段写着用哪个场景、占几屏、哪几行文案在这一段的哪个区间出现、按住空格的区间和仪表的种类。文案本身不写在代码里，而是从放在 Google Cloud Storage 上的一份 JSON 内容库读进来，编辑改字不会动到时间安排。页面的总高度就是各段屏数之和乘以窗口高度，在 1920×945 的窗口里是 85 × 945 = 80325 像素，原生滚动条只用来提供滚动位置。每一段的进度从它的顶边进入屏幕底部时开始计算，到这一段结束时走满，这个进度直接拨动这一段事先烘好的时间线，镜头和物体的动画都在时间线里，第 3 章的几段改用 Theatre.js 导出的动画。每一段场景都先画进自己的渲染目标，再由一个全屏着色器把当前段和下一段合在一起，沿一条斜线把两张画切开，并把两边稍微压暗，前面那条斜边就是这样做出来的。在显卡较弱的设备上，交接时引擎每一帧只更新两段里的一段，轮流画。

海报一样的画法来自一个自己写的着色器，大部分建筑和机器用的都是它。每一张贴图的三个颜色通道都被当成遮罩来用。红通道存的是事先烘好的明暗，绿通道和蓝通道各标出一块区域，着色器再从这个材质设定的三种颜色里取色填进去，所以美术只要换三个色值，就能给一整座加油站换颜色。明暗也不是平滑过渡的，着色器在明暗值上加一层屏幕空间的噪点再取阈值，交界处就变成一圈颗粒，噪点的时间每秒只更新 12 次，于是颗粒一跳一跳地闪。分子用的是同一个思路，把主光、补光和轮廓光各自取阈值，画成三级明暗。跑车用的是真正的 PBR 材质，再叠上同样每秒 12 次的噪点，让它和插画一样的环境放在一起时不显得突兀。

按住空格的效果全部挂在一个从 0 到 1 的速度值上。按下时这个值在 2.5 秒里按先快后慢的曲线升到 1，松开时在 1.5 秒里落回 0。云、路面和水面的着色器把自己的时钟乘以（1 + 3 × 速度），沙尘、跑车和车轮乘以（1 + 2 × 速度），世界就转快了。最后合成画面的着色器读同一个值，把画面放大 1%，在边缘加上红蓝错开，并整体提亮 15%。

同一个速度值也直接驱动画面上的读数。仪表在互动时直接显示这个值，燃料竖条等于速度，二氧化碳竖条等于 1 减速度，加油机上的数字就是速度乘以 16。分子段取速度和滚动进度里较大的一个，所以滚过一半时分子也会自己聚起来。电脑上监听的是空格键，手机上监听的是手指按下和抬起，发动机声音是全站唯一的两段音频。

这套做法要访客下载很多文件。首页打开以后，八个后台线程会把三章用到的资源全部预先下载下来，在电脑上一共约 93.5 MB。其中最大的一块是 171 张 KTX 压缩贴图，约 37.7 MB，其余是约 28.4 MB 的 JPEG 图、约 10.1 MB 的 JSON 模型数据、约 9.4 MB 的 PNG 图和约 7.1 MB 的视频，连 TECHNOLOGY 页面的背景视频都在首页就下载了。压缩贴图按显卡支持的格式挑选，电脑拿 DXT，手机拿 ASTC 或 PVRTC，以加油站那张贴图为例，ASTC 版本只有 DXT 版本的四分之一大小。引擎还按显卡等级调整像素比，最弱的设备把帧率限制在每秒 30 帧，并减少天上的鸟群，手机和 Safari 上则关掉了页面的平滑跟随，直接用原生滚动。屏幕上大约 1.1 秒就出现了加载画面，跑车的首屏大约 4.5 秒完整出现，加载时画面不会跳动，但启动阶段页面会被卡住几次，最长的一次约 0.3 到 0.4 秒。

读屏软件能读到每一行文案，因为引擎把画布里的字都复制到了网页里。键盘用户却只能用 Tab 键在左上角的标志和右上角的菜单按钮之间来回，首页的 MISSION 按钮和按住空格的提示都不在焦点顺序里，方向键、翻页键和 End 键倒是能照常推动整条故事。网站没有读取系统的减少动态效果设置，打开它以后，溶出的文字、切换的斜边和转快的世界都照常运行。

Prometheus Fuels 是 2021 年 Awwwards 和 FWA 两边的年度最佳。FWA 先在 2021 年 4 月 17 日把当日最佳给了它，打了 88 分，归入商业与企业、教育和推广三个类别，Awwwards 在 5 月 4 日给了它当日最佳，两个平台又分别把 4 月和 5 月的月度最佳给了它。

这个站在 Awwwards 的创意 Creativity 拿到 8.94 分，是四项里最高的，海报一样的画法和三处按住空格的互动很可能是这一项高的原因。可用性 Usability 最低，为 7.77 分，键盘只能走到两个按钮、空格要先点一下页面才归互动使用，都可能拉低了这一项。开发奖的五位评委给出 7.61 分，其中动画 Animations 最高，为 9.00 分，标记 Markup 最低，为 6.80 分。标记一项低，和网站把内容全部绘制成图像、网页里只留一层看不见的文字对得上。

Active Theory 的战绩算到写报告时为止，它在 Awwwards 上拿过 59 次当日最佳和 3 次年度最佳，在 FWA 上一共获奖 149 次，也是 FWA 名人堂的成员。工作室在官网上介绍自己是一支在公司内部完成全部制作的团队，靠自己的一套网页工具做项目。FWA 的署名里还列着客户 Prometheus Fuels 自己。