See What Eye See: Eye Condition Simulator

开场是一个吓人的笑话，负责把你骗进门。门一关上，笑话就退场了，后面全是正经话。

进门第一眼，是一只长着头发和手脚的巨大眼球，坐在昏暗客厅的扶手椅里，旁边一行粉色笔刷字：EYE'VE SEEN SOME S#*T。往下点一层，气氛立刻变了，页面换成一本正经的说明文，底下还有一行小字提醒你这只是大概的感受，每个人的症状不一样。再点进具体某一种眼疾，第一句是粉色斜体的免责声明，然后才是医生口径的解释。

这两种语气切得很干脆。玩笑负责把人拉进来，人一进来它就退场，后面讲病情的部分一句玩笑都不掺。

真正聪明的一步在滑块的方向上。八个眼疾页面，打开的时候滑块都停在最坏的那一年：复视停在第 3 年，管状视野停在第 20 年，一个例外都没有。你得自己往上拖，才能看到眼睛健康时是什么样。

这类视力模拟器一般是从清晰的画面开始，让你看着它一点点坏下去，你始终站在旁边看别人失明。这个站把顺序倒过来，先把你的视力拿走，再让你自己换回来。

同一条人行道，同一个黄昏。一张模糊、重影、蒙着一层网点，另一张清楚到能看见房檐的纹路和树上的叶子。你要出的那点力气，就是这两张图之间的距离。

这个开场也有风险，两处。头一个是那句脏话和那只眼球，对正在失明的人不一定好笑，在健康科普里这一步是有风险的。更实际的问题是，页面打开就是模糊的，但没有任何提示告诉你这是故意的，第一次来的人很可能以为是网页没加载完。

眼球角色来自皮克斯那类拟人短片，笔刷字来自街头海报和恐怖片海报，两样都不是新发明的。真正原创的东西不在画面上，而是那个决定本身：把滑块的起点设在最坏的那一年。

两个字体的分工是一条死规矩，不是大致倾向。全站只用两款字：笔刷体写了 224 个字，正文体写了 4,174 个。关键在字号上，笔刷体从来不小于 68px，正文体从来不大于 32px，两边完全不重叠。

结果就是，5% 的字数占了将近四分之一的画面。所有带情绪的话是手写的，所有给信息的话是机器排的，中间没有过渡地带。这种做法的好处很直接：读者不用看内容就知道这句话是要打动他还是要告诉他事情。

颜色也一样省着用。全站文字只有五种颜色，近黑色用在 746 个地方，米白 68 个，粉色 19 个，橘黄 5 个。第五种是深红，只出现在 8 个地方，全都是那几个标着可能要赶紧就医的病因标签。

一个颜色只干一件事，而且是最要紧的那件。这在信息设计上是很聪明的一手：紧急不紧急，看标签是不是填了深红就知道，不用去读后面那句补充说明。

圆形在这个站里到处都是，但没有一个是用 CSS 画的。全站真正做成圆角的元素只有 8 个，都是那种 68px 高的按钮，而直角元素有 434 个。那些圆和弧全在 SVG 和 Rive 动画里：虹膜形状的标志、八个眼疾的圆图标、滑块轨道上的刻点、深色区块切进米色背景的那道大弧线、页脚前面扇形排开的资源卡片。

也就是说，页面的布局是方的，画面的语言是圆的，两者分属不同的技术层。想做这种效果的人要注意，圆的部分是当成图形资产来做的，不是当成布局来做的。

三种图各管一件事。眼球角色只在开头和结尾出现，负责情绪。照片级的实景只在模拟器里出现，负责举证，而且每种眼疾配一个不同的日常场景：人行道、厨房、咖啡馆、超市货架。第三类是一条斜着横穿米色背景的 35mm 胶片，每一格都是同一条黄昏公路，重影一格比一格重，格子上贴着 AT 8 MONTHS、AT 1 YEAR、AT 16 MONTHS 的白色标签。

时间这件事，这个站讲了两遍。右边的滑块竖着讲一遍，这条胶片横着又讲一遍，两个方向正好垂直。

最见功夫的一处在页脚。标题写着 DON'T TURN YOUR BACK ON THEM，别不把它们当回事，而画面里那只眼球真的背对着你坐在椅子上。标题和图是同一个笑话，两边都不多余。

真正要动手的地方在右边那条竖滑块上，跟滚动一点关系都没有。

它拖起来是连续的，松手停在哪就是哪，但上面的年数是跳着变的整数。轨道上固定画了 17 个刻点，可是复视只有 0 到 3 四档，管状视野有 0 到 20 二十一档。

刻点跟档位对不上，所以它只是装饰。这是这个控件唯一一处误导人的地方，做类似控件时值得避开。

滚一下轮子，Lenis 让画面每一帧移动 71、62、54、45、40、34、29 像素，一帧比一帧少一点，比例稳定在 0.87 左右，换算过来 lerp 大约是 0.13，要四十帧才停稳。尾巴偏长，读长段落的时候会有点拖。

画面的畸变本身也在动。重影不是固定偏移，它一直在慢慢漂，跟页面上那段解释对得上：第二个影像会横着、竖着或者斜着一起动。

轮到减弱动画这个偏好，它只做了一半。系统里开了 prefers-reduced-motion: reduce 之后，页面上那一条 CSS 动画确实停了，但四个画布照样在跑，帧率还是 60，畸变和重影一帧都没停。

开头那一页明明写着包含扭曲和运动，而真正扭曲和运动的那一层，不受这个开关控制。对晕动症敏感的人打开这个设置，得到的保护基本是零。

页面用 Nuxt 做服务端渲染，Vue 写组件。画面这一层的做法是：整个站共用一块固定的 three.js 画布，DOM 在它上面滚。所以眼疾页面的顶部区域里既没有图片也没有画布，画面是那块共享的底板画出来的。

场景的做法是一张照片配一张深度图。页脚那组是 2160×1590 的 JPEG 配一张 1080×795 的深度图，深度图负责做视差。开头那只眼球的瞳孔会跟着你的鼠标转，用的是同一套机制。想做这种效果的人可以记一下这个配比：深度图只要照片的一半分辨率就够用。

八个眼疾图标不是图片，是 Rive 动画，跑在 121×121 的小画布上。这解释了资产里最大的那个文件：Rive 的运行时 700 KB，而且是从 unpkg 这个公共 CDN 拉的。

打开一个眼疾页面总共要下载 2 MB，那个 700 KB 的运行时就占了三分之一，换来的只是几个小图标。第二大的是 Adobe Fonts 的三个字体文件共 467 KB，其中一个 363 KB。另外还有一张光晕图直接引自 assets.codepen.io，一个正式的公共健康项目，在生产环境挂着 CodePen 上的图，这不合适。

速度没问题。首屏出现在 800 到 900 毫秒之间，滚动全程 60 fps，把八屏内容从头滚到尾没有一处掉帧。

无障碍这一块，基础做得比大多数站都好。页面标了语言，16 个可以用键盘选中的元素全都有名字，Tab 顺序合理，信息面板的展开状态是正确标记的，连滚动提示都做成了能选中的按钮，焦点框也保留了浏览器默认的样子。

正因为别的都做对了，漏掉的那一个才特别扎眼。那条控制年数的滑块，本身是一组 SVG 图形，没有告诉浏览器它是个控件，也不能用键盘选中。全站 16 个可选中元素，没有一个在它里面。

只用键盘的人打不开这个站的核心功能。用读屏器的人也一样，因为那组图形没有名字。一个讲视力障碍的站，把唯一的主功能做成了这些人用不了的样子。

其余的问题相比之下都小：14 张图里 12 张没写 alt，没有跳到主内容的链接，眼疾页面的标题层级从 H2 开始、缺一个 H1。

还有一处纯粹的浪费。开头给了两条路，一条标着包含扭曲和运动，另一条写着不要声音，说是同样的体验。选了不要声音，那个 1.9 MB 的背景音乐照样下载，占这一步全部流量的 99.8%。明确说了不要声音的人，还是把整首曲子下载了一遍。

团队在 FWA 的项目页上这样介绍自己的作品：用 three.js 和 GSAP 做的浏览器眼疾模拟器，拖动滑块可以体验中心视野缺失、管状视野和复视。

这句话漏掉了最关键的一点。让人记住的不是能拖，是拖之前你已经看不清了。他们把它说成一个演示工具，但它做的事更狠：先把视力拿走，再让你自己换回来。

Built Kindly 和 David Lubofsky 其实是同一个人。两个 FWA 主页填的电话号码一样，工作室的联系邮箱就是他本人的名字。所以这是一间小工作室的第一座 FWA，他们请了一位拿过四十座的人来做最难的部分。Lubofsky 自己的介绍里写着，他专做疾病科普平台和互动阅读，这个项目正好在他的主场上。

署名里没有设计师，没有 CGI 美术，没有文案，也没有医学顾问。而这个站最花钱的地方恰恰是那套照片级的三维画面和那批医生口径的文字。三个名字撑不起页面上的工作量，中间显然有人没被写进去。

Awwwards 那边没有这个站，站点自己也没挂任何获奖徽章，对外的链接只有美国国立眼科研究所、临床试验数据库和几个眼科协会。它压根没打算被当成作品集看。