Cyera AI Guardian

Cyera 卖的是数据安全，AI Guardian 管的是企业里各种 AI 工具和智能体碰到敏感数据时的风险，买家是公司的安全负责人。这类产品的官网通常是一页功能列表加一张演示预约表，这个微站换了一条路，把产品的三个支柱 Discover、Govern、Protect 排成一趟太空任务。团队在 FWA 上写的说明也是这个意思，访客驾驶飞船穿过三颗讲 AI 安全的星球，一路完成小游戏，同时了解 Cyera 的数据安全能力。整趟任务一步做完才进入下一步，从头到尾没有一屏需要滚动。

访客进门先看到一句三段式的标题 Know Your Data. Control Your AI. Secure the Unknown.，背景是飘着陨石和绿色晶体的紫色太空，中间浮着那艘带两扇窗的圆舱飞船。访客按下 Begin Your Mission 之后，屏幕上是几屏逐句浮现的字幕，从 AI launches your data into orbit. 讲到 With AI Guardian you can confidently navigate every part of this journey.，底部有一条进度线和一个 Skip 按钮。字幕放完，镜头推进飞船，画面变成驾驶舱里的三扇舷窗，正中那扇窗外就是一颗星球，左右两扇窗里露着另外两颗。

三颗星球走的是同一套五步流程，只是内容和小游戏不同。访客先看到一张问题卡，Discover 问的是 What AI is deployed in my environment?，然后飞船降到星球表面，屏幕提示 Find the data particle，让访客移动鼠标四处看。地面上立着三个带标签的物件，比如 Discover 上的 Rogue Agents、Shadow AI 和 Data Leakage，其中一个就是要找的数据粒子。光标停到它上面，飞船会升起来朝它打下一道光，点一下就弹出一张简报卡。卡上先写一条行业数据，再说产品能帮上什么忙，例如 Rogue Agents 那张写着 76% 的负责人认为自主智能体最难保护。简报卡上的 Begin 开始小游戏，旁边的 Skip Game 可以直接跳过。

在 Govern 和 Protect 两颗星球上，物件的标签和它打开的简报对不上。Govern 上标着 Agent Abuse 的物件打开的是一张叫 Identify Blind Spots 的简报，Protect 上标着 Identify Blind Spots 的物件打开的却是 Agent Abuse。两张简报的内容各自和所在星球的主题相符，看起来是两颗星球的物件标签被对调了。

三个小游戏各对应产品的一个支柱，玩法就是那个支柱的动作。Discover 的游戏要访客按住鼠标，沿着虚线提示从一颗白星拖到下一颗，把整组星连成一个闭合的图形。游戏一共三轮，每轮的星图都不同，绿色的数据块总在圈里，红色的碎块总在圈外。Govern 的游戏是一枚悬在沙漠上空的指南针，指针一直在转，访客要在它转进紫色区间时点击，赢满三次才算过关，而区间一轮比一轮窄。Protect 的游戏里，一根粉色水晶立在山坡上，陨石从四面飞来。访客移动光标，让一道弧形护盾绕着水晶转，把陨石挡在外面。

过关之后，数据粒子被一个半透明的罩子罩住，屏幕上出现 Discover Complete 这样的完成卡。完成卡之后是一页回顾，页面上并排三张卡片。第一张讲对应的产品能力，第二张是客户公司安全负责人的一段话，三颗星球分别引用了 Valvoline、AT&T 和 Cass Information Systems。第三张是一本留下邮箱才能领取的电子书，比如 AI Security for Dummies。回顾页底部的 Explore other terrains 把访客送回驾驶舱，并自动转到下一颗星球。三颗星球都走完，最后一屏写着 Mission complete! 和 Ready to see it live?，按钮是 Sign up for a demo。右上角的 Request a demo 在任何一屏都点得到。

这个站的三维画面全部画成了平涂插画的样子。星球的山、湖、沙丘都是大块的纯色面，每一块边缘描着一条细细的深色线，没有渐变的阴影，也没有写实的材质。整个画面上还压着一层均匀的纸张颗粒，所以即使镜头在三维空间里移动，看起来仍像在翻一本印刷的绘本。飞船、陨石和晶体同样只用几个平面和一条描边，都不追求照片感。

每颗星球有自己的一套颜色，而绿色在三颗星球上都只留给数据。起点的太空是深浅不一的紫色，Discover 是淡紫色天空下的青绿色山和紫色湖水，Govern 是蓝天下的红褐色沙漠，Protect 回到暗紫色。需要保护的数据在三颗星球上都画成一块发亮的黄绿色多面体。Discover 游戏里的干扰物则是红珊瑚色的碎块，访客不用读说明也能分出哪些该圈进来。

文字只用一款叫 Haffer 的无衬线字，全部是正常大小写的句子，没有全大写的标题。星球名 Discover、Govern 这样的大字压在舷窗和天空上，正文和按钮是十几像素的小字。简报卡、完成卡和回顾卡都是白底圆角卡片，像一张张浮在场景前面的纸，卡片顶部各有一张同样画风的小插图，简报卡上画的就是接下来那个游戏的画面。

驾驶舱是整个站的枢纽，也是版面最完整的一屏。三扇圆角舷窗排成一道弧，中间那扇正对访客，两侧的往后斜，舷窗下方一排仪表屏上画着网格和瞄准框。舷窗的形状同时是选择器的形状，哪颗星球在正中，哪颗就是当前选项。

界面上的按钮和提示全部用太空任务的口吻来写。开始叫 Begin Your Mission，回到选择页叫 Explore other terrains，最后一屏的次要按钮叫 Discover another planet，连找物件的提示都叫 Find the data particle。产品名 AI Guardian 和它的卖点只出现在字幕、简报卡和回顾卡里，游戏本身不出现任何产品术语。

镜头是 Cyera 这个微站最主要的动效，它推着访客从太空飞进驾驶舱，再降到星球表面。开场字幕放完，镜头一路推近飞船，飞船的轮廓放大到占满屏幕。随后画面收成一个圆角框，框再打开时，访客已经坐在驾驶舱里。降落到星球之后，镜头跟着光标转，光标往左移，视角就往左看，飞船也跟着光标在空中平移。光标停在正确的物件上，飞船升高，朝它投下一道锥形的光，地面上出现一个虚线圆圈，这道光就是在告诉访客找对了。

驾驶舱里选星球同样由光标驱动，不需要拖动。光标移到左右两扇舷窗上时，它会变成一枚带箭头的白色圆钮。访客点下去，三扇舷窗整体转动一格，把下一颗星球转到正中，转过最后一颗又回到第一颗。

三个游戏的手感各自贴着它要讲的那句话。连星游戏里，访客拖出去的线是一条跟着光标实时延长的白线，碰到下一颗星就钉住，一圈闭合之后星星熄灭，底部的圆圈打上一个勾。指南针游戏里，访客每点错一次，镜头和指南针都会抖一下，罩在表盘上的玻璃也多裂一层。失败次数多了，整面玻璃会碎成一块块拼图似的裂片。护盾游戏里，护盾只能在水晶的上半圈转动，陨石撞上护盾时迸出一团绿光，撞上水晶则在水晶表面留下一道裂纹。

文字和卡片的动效比镜头轻得多。字幕和标题逐词浮现，按钮和卡片用淡入加一点位移出场，节奏比镜头快，不会和镜头抢注意力。整套动效跑起来很稳，起点、开场字幕、驾驶舱和星球场景里，页面都维持在每秒 60 帧，最慢的一帧也不超过 25 毫秒。

这个站没有用 three.js 这类通用三维库，而是跑在 Active Theory 自己写的网页三维引擎 Hydra 上。整个场景画在一块 WebGL 画布上，卡片、按钮和字幕是普通的网页元素，叠在画布前面。站点另外加载了动画时间线工具 Theatre.js 的运行库，以及用来解压模型的 Draco 解码器。

第一次打开只下载 1.6 MB，走完三颗星球一共约 5.9 MB，其中站点自己的文件 5.3 MB。三颗星球加一艘飞船的全部三维几何是四十个小文件，传输时一共约 211 KB，最大的一个是飞船，也只有 23 KB。星球能这么轻，是因为每颗星球只由前景、中景、远景和云几层简单的网格叠成，平涂的画风本来就不需要写实的贴图。整个站最大的两个文件反而是两张图片。一张 2048 乘 1498 像素的纸张颗粒纹理 1.6 MB，一张把舷窗的各个区域分别存进不同颜色通道的遮罩图 1.5 MB。这些图片在后台线程里下载和解码，主线程因此不会被它们卡住。

打开页面后，服务器 27 到 70 毫秒就返回首字节，首次内容绘制（FCP）只要 80 到 128 毫秒，远快于 Google 建议的 1.8 秒，但这时画出来的只是加载页上的 Loading 字样。真正的太空场景要在一道光柱和几颗飘落的晶体之后，也就是打开后大约 3 到 4.5 秒才出现。从加载页到场景出现，页面没有发生任何布局位移。

画布画得多清楚，由引擎按显卡的强弱分档决定。引擎先判断显卡的等级，性能最好的一档按屏幕像素的 1.5 倍来画画布，再缩小显示到屏幕上，所以在普通的 1 倍屏上，物体的边缘也格外细腻。中等的显卡在 1 倍屏上画 1.25 倍，最弱的一档就按 1 倍画。每一帧只有 11 到 21 次绘制，顶点数在 5.4 万到 13.8 万之间，另有七次先画进屏幕外的缓冲，再合成成一张画面。

键盘用户也能走完这趟任务，只是一路上看不清自己选中了什么。页面给键盘准备了一个看不见的按钮，名字是 Activate data particle and open mission briefing，按回车就能跳过找物件的环节，直接让飞船打光、弹出简报。问题在于这颗按钮只有 1 乘 1 像素，按 Tab 落到它上面时焦点框也只有一个点大，而 Tab 键在起点和星球场景里都只在四五个元素之间循环，访客很难知道此刻选中的是什么。起点的 Begin Your Mission 按下回车能开始任务，但按钮淡出之后，它的焦点框还以一个空的黑框留在飞船上。游戏的状态有播报，Tap to stop、Failed 和 Success 都写在读屏软件会朗读的区域里。打开系统的减少动态效果设置之后，字幕照样逐词浮现，陨石照样漂浮，脚本和样式表里都没有针对这个设置的处理。

FWA 给这个站打了 84 分，由 27 张票算出，归在教育、好玩可玩和游戏三类下面。团队的说明把它定位成一个把网络安全教育变成趣味旅程的互动微站，访客驾驶飞船穿过 Discover、Govern、Protect 三颗星球，边玩小游戏边了解产品。这段说明和站上看到的完全对得上，三颗星球、三个小游戏、一艘飞船都在。

Active Theory 在 FWA 上一共拿过 149 次奖，其中 111 次是当日站，2016 年就进了 FWA 名人堂。FWA 上的署名只列了工作室，没有列个人。