Maxima Therapy

网站的 Our Story 页面这样讲机构的来历，很多家庭觉得自己迷失在冰冷、机械、不把人当回事的体系里，所以他们建了一个更温暖的地方，让儿童、青少年、成人和老人在人生的每个阶段都被看见、被理解。神经多样性指的是自闭症、多动症这类大脑运作方式和多数人不同的情况，这家机构在页面上说，它不把神经多样性当成要修好的毛病，而是当成要理解、支持和庆祝的东西。KOKI-KIKO 的联合创办人 Kim Levan 在 Communication Arts 的采访里说，这个站的目标是摆脱治疗行业常见的那种冷静、临床的口吻，做出一种有生气、敏感、有人味的东西。Kim Levan 还说，神经多样性本身不是线性的、整齐划一的，所以团队一直在质疑常规的结构和层级，把导航做成温和的探索，不逼访客走一条固定的路。开发者 Nicolas Garnier 在 Codrops 的制作文章里把任务概括为一个插画很多、互动很多、好玩的网站。

这家机构的费用由加州的区域中心支付，区域中心是加州政府出资、为发育障碍人士安排服务的机构。它的常见问题页写着，目前只开设了 0 到 3 岁的项目，其他项目还在筹备。网站却按完整的一生来组织内容，开场那句话的后半段写的是，从出生到晚年都支持人们的差异。首页的转盘因此分成四格，依次是 0 到 3 岁的早期干预、3 到 18 岁的适应技能训练、18 到 65 岁的就业发展和 65 岁以上的居住支持，每一格对应一个项目页。访客转动转盘时，地址栏也换成那个项目的网址，所以转盘既是首页的主画面，也是这几个项目页之间的导航。

每个项目页按同一个顺序往下排。最上面是转盘，往下是一叠四张写着服务内容的卡片，再往下是一句关于独立和成长的信念，一个由三个词轮流出现的大字区，一张配了插画贴纸的照片，以及一段讲这个年龄段的大标题和说明。页面接着用三步讲清怎么开始，先请区域中心的服务协调员转介，再一起制定计划，最后在家里和社区里一起成长，旁边是 Get started 按钮。页面最后一屏写着 Next stop 和下一个项目的名字，访客点击后，页面回到顶部，转盘转到下一格。四个项目首尾相接，访客一路读下去，就会从婴儿走到老年，再回到起点。

项目之外还有八个页面，每个页面都有自己的底色和一个可以玩的小东西。Our Story 讲机构的来历，Careers 招治疗师和助理，Shop 卖托特包、杯子和印着 different angle 的帽子，收入用来资助项目。FAQ 回答资格和费用的问题，Contact 是一张联系表单，Blog 是获奖之后才加上的，写给家长和治疗师。Service Areas 页面画了一张加州地图，地图上的 21 块区域对应加州各个区域中心的服务范围，已经覆盖的 8 块是黄色，访客把光标移上去会看到区域名，点击后会弹出一张写着服务说明的卡片。

平涂的剪纸式插画加上一种饱和的主色，撑起了这个网站的每一个页面，插画里几乎没有渐变，人物、山丘、积木和云都是边缘干净的色块。每个项目有一套自己的颜色，早期干预是黄色 #FDCB40 配浅黄 #FFF2B7，适应技能训练是绿色 #00B351 配浅绿 #A7EB98，就业发展是粉色 #F780D4 配浅紫 #F5CBFF，居住支持是青色 #2CD1D0 配浅青 #B9ECEA，每一套还带一个深色。有两种颜色在四个项目里都不变，红色 #FD4401 用在标题板、菜单文字和开场的标题上，蓝色 #2668FD 用在按钮、大字和开场的背景上。访客从一个项目转到下一个项目时，整页的底色跟着换，所以颜色本身就告诉访客现在在哪个人生阶段，红和蓝则把四个世界连成同一个品牌。

字体分成三种角色。标题用 Robuck Rounded，这是一款窄长、笔画末端圆润的大写展示字体，行距压到字号的 80%，几行字几乎贴在一起，在 1920 像素宽的屏幕上，最大的标题约 286 像素高。正文、按钮和卡片用 ABC Diatype Rounded Plus，这是一款同样带圆角的无衬线字体，字重 500 和 700，字距收紧到负 0.02 em。大字区用的是同一家族里最粗的 ABC Diatype Rounded 900，每个字母约 767 像素高，并且按设计好的角度和位置散开，像一把撒在地上的积木。网站的尺寸几乎都用 rem 写，而 rem 的大小按屏幕宽度换算。宽屏相当于把 1512 像素宽的设计稿等比放大，矮而宽的笔记本屏幕按 1728 像素宽换算，平板按 500 像素宽换算，手机按 375 像素宽换算，所以版面在同一类屏幕上不会突然跳变，只是整体变大变小。

倾斜是这套设计的第二条规矩，它把 different angle 这个词做成了看得见的形状。项目页顶部的背景是两块从两侧斜向中间的浅色坡面，中间留出一个 V 形的山谷。服务卡片各自带着不同的小角度，菜单面板歪着压在页面上，开场标题的最后一个词 ANGLE 也被推斜了，连地图上弹出的说明卡片都转了一点。照片也没有方方正正地放着，而是被斜线切开，上面贴着插画里的大象、树和蓝色的小怪物，让真实的照片和插画世界连在一起。

这个网站的界面部件都做成圆润的胶囊和圆形。页头右边是一条白色的胶囊导航，放着 Programs、About 和 Service Areas，旁边是红色的 Donate 胶囊和一个圆形的邮件按钮。光标移到 Programs 上时，一块带大圆角的白色面板从上方落下，歪着压在页面上，四个项目名用红色的窄长大写字排成一列，每一项后面跟着一个蓝色的年龄标签。光标停在哪一项，旁边就弹出一张那个项目的照片，背后的页面同时被盖上一层半透明的项目颜色。页面里的按钮是蓝色或黄色的胶囊，光标移上去时，胶囊会胀成一个圆。网站还换掉了系统光标，平时是一个自绘的箭头，转盘上换成一只张开的手，按住时换成抓紧的样子。

到了手机上，页头只剩写着 maxima 的标志、Donate 按钮和一个汉堡菜单按钮。转盘里的插画占满屏幕上半部分，两个箭头按钮挪到插画下方居中并排，标题板变成一整块红色面板，里面多了一句介绍这个项目的话。菜单打开后是一张从上方落下的白色斜卡片，上面是四个项目名，下面是其他页面的链接。

这个站几乎所有动作都共用一种手感，就是回弹。按钮放大、贴纸出现、字母弹出、转盘停下，都会先冲过头一点，再弹回原位，像一个被拨了一下的玩具。这种回弹让整个站显得有弹性、不拘谨，也呼应了它想摆脱临床感的初衷。

访客每次打开网站，先看到一段约 5 秒的开场。米色的底上，See life from a different angle 几个词一个接一个落下来，每个词比前一个晚 0.1 秒，词里的字母从横躺着转正，花约 1.8 秒带着回弹站好。标题上方的两个小人标志接着一笔一笔画出来，下面升起一行小字。大约 2.5 秒时，最后一个词 ANGLE 被推斜，正好在字面上换了一个角度。约 3.3 秒后，画面底部中央裂开一个 V 形的口子，口子越开越大，蓝色的底上一块黄色的方块一边旋转一边放大，透过口子能看到后面的转盘还在旋转，转盘最后停在早期干预这一格，这时整段开场才淡出。

转盘的转动由访客自己控制。访客点右箭头时，整幅插画先朝转动的方向歪大约 3 度，像是被推了一下，约 0.25 秒后地址换成下一个项目，转盘再转过整整 90 度，冲过头约 6 度后弹回，大约 2 秒后完全停稳。访客也可以按住插画左右拖动，画面跟着手最多歪 5 度，松手时歪过一半就转到下一格，没过一半就弹回原位。访客停在转盘这一屏时，如果 10 秒不碰任何东西，转盘会自己转到下一格，只转这一次。转盘下面的页面内容随项目一起换掉，但不会再播放开场，项目名从侧面滑进标题板。

每一格插画里还藏着一个小互动，早期干预里的蓝色山丘会用眼睛追着光标，适应技能训练里的气球拴在一根会晃的绳子上，就业发展里拿望远镜的人会随着光标的高低微微抬头低头，居住支持里光标划过海面时，海面会泛起一圈慢慢变平的波纹。

再往下，服务卡片会随着访客的滚动一张接一张地被揭开。随着滚动，最上面的卡片向上滑走，同时朝一侧转开，露出下面的下一张。卡片跟着滚动走，但总是慢半拍，滚轮停下后它还会再晃一下才停住，手感像一张被橡皮筋拽着的纸。

大字区每 3 秒换一个词，适应技能训练页依次是 learn、play 和 talk。旧词的字母一个个缩小消失，新词的字母依次放大弹出，每个字母比前一个晚 0.1 秒。访客滚动页面时，各个字母移动的速度不一样，像几层叠在一起的纸。光标靠近某个字母时，那个字母会被光标轻轻吸过去，光标离开后再慢慢弹回。大字区下面的那个大标题也可以玩。标题上本来贴着一叠书、一支铅笔和一本翻开的书，访客每点击一次标题，就有一张贴纸挪到点击的位置并重新弹出来，三张轮流。

网站菜单和按钮的动作同样夸张。Programs 菜单的白色面板以右下角为轴，从竖着的位置像一扇门一样甩下来，甩过头一点再回到微微倾斜的位置，整个过程约 1.8 秒，关闭时约 1 秒甩回去。光标在菜单项之间移动时，预览照片从移动的方向弹进来，每张照片带着不同的角度。项目之外的页面互相跳转时，网站会再用一次开场里的那道幕布，画面中央裂开 V 形的口子，彩色的幕布从口子里铺满屏幕，页面在幕布后面换掉，幕布再淡出。Careers 页的标题里，SUPPORTS 这个词用两根绳子吊在页面顶上，光标快速划过它时，它会被推着荡开，像一块挂着的招牌那样来回摆好几秒才慢慢停下。

在手机上，点击箭头和左右滑动插画都能转动转盘。按钮的放大和胶囊胀成圆形，在手机上改由手指按下和抬起触发，而跟着光标的那些小互动，比如山丘的眼睛和被吸过去的字母，在手机上没有对应的做法。

整个站是一个用 React Router 做静态生成的网站，内容存在 Sanity 内容管理系统里，部署在 Cloudflare Pages 上。转盘的关键在于路由的层级。Nicolas Garnier 在 Codrops 上写道，转盘放在项目页共用的布局里，位置在显示页面内容的 Outlet 之上，所以转到下一个项目时，路由和下面的页面数据都换了，转盘本身却不需要重新渲染。转盘是一个直径约 3215 像素的圆，桌面上只露出它顶部的一块，四个项目是同一个外层容器里四个各转了 90 度的 div。转到第几个项目，外层容器就转到负 90 度乘以那个序号，用 GSAP 的 elastic.out(0.8, 0.7) 转 2 秒，同时调用 navigate 换到对应的项目网址。转盘不在顶部的三格里，Lottie 动画都暂停，也不响应鼠标，转到顶部的那一格才开始播放、接受互动，这样同时放着四大幅插画也不会拖慢页面。

开场的幕布画在一块铺满屏幕的 2D 画布上，它的妙处在于最后一帧和项目页的背景几乎完全重合。画布先铺满蓝色，再画一块按项目主色填充、从 90 度转正并放大到屏幕长边 1.1 倍的方块，然后画两块绕屏幕底部中点向两侧张开、按项目浅色填充的扇形，早期干预的浅色是浅黄，最后用另一块画布上的黑色扇形，以 destination-out 的方式从这块画布上挖掉一部分。

开场的时间顺序就由这几层决定。开场前 3.3 秒，黑色扇形是合拢的，整块画布都被挖空，访客看到的是画布下面那层写着标题的米色面板。黑色扇形张开到 90 度的过程中，画布一点点露出来，方块最终铺满整屏，浅色扇形停在 58 度，在手机上停在 50 度。项目页顶部的背景用另一块画布画了同样的两块坡面，角度也是 58 度，宽屏上是 55 度，颜色就是那个项目的浅色，所以幕布淡出时，画面几乎没有变化，只是插画和标题板出现在原来的位置上。每个页面的幕布颜色来自一张颜色表，项目页之间和首页与项目页之间的跳转会跳过幕布，交给转盘处理。

卡片和字母那种慢半拍的手感，来自一种很简单的组合。ScrollTrigger 把滚动换算成 0 到 1 的进度，但网站不直接把进度写进位置，而是在每次进度更新时用 gsap.to 把元素推向新位置，缓动用 elastic.out(1, 0.5)，时长 1 秒。新的目标不断到来，旧的回弹还没结束，元素就像被弹簧拖着追滚动。每张卡片只在滚动范围里属于自己的那一段里动，第几张卡片就从全程的第几份开始，跨 1.5 份的距离，所以前一张还没走完，后一张已经开始动。平滑滚动用的是 Lenis，它和 GSAP 共用同一个计时器，滚轮一下大约 1.1 秒滑到位。大字的视差也是同一类写法，每个字母的位移等于 20 乘以滚动进度再乘以它自己的权重，权重不同，字母就以不同的速度移动。

几个可以玩的小东西各用了一种轻量的做法。Careers 页的 SUPPORTS 用的是 Matter.js 物理引擎，这个词在引擎里是一个矩形刚体，两根绳子各由 8 节细长的刚体连成链，绳子画在 2D 画布上，SVG 文字每一帧按刚体的位置和角度摆放，光标进入时，网站按光标的横向速度给它施加一个水平方向的力。适应技能训练里的气球用的是同一套绳子，只是把重力反过来，让气球往上飘。

另外两个小互动直接改动画面上的形状。早期干预里那个孩子的蓝底青点裤子，是把 Lottie 动画画到一块看不见的画布上，再用 destination-in 当作遮罩，盖住一片用代码画出来的圆点图案，图案只随滚动以四分之一的速度移动，所以孩子在动，布料上的点却像固定在另一层上。居住支持的海面是一条由 50 个点组成的 SVG 路径，光标越过海面时，网站以光标的横坐标为中心，按光标的纵向速度算出波高，用 3 秒把一道正弦形的波纹向两侧推开。Garnier 在文章里说，这套波纹的控制点是用 Claude Code 生成的，AI 还帮他们把一些 SVG 遮罩改成了裁切路径来提高性能，但它偶尔会改坏数据读取的写法，甚至凭空加出不存在的图形，所以团队只把它用在范围很小的任务上。全站一共用了约 70 个 Lottie 动画文件。

这些插画和动效的代价主要在下载上，但并不重。首页第一次打开要下载约 2.7 MB 的站点文件，统计脚本另有约 0.35 MB。图片约 1.3 MB，首页一打开就会下载插画的底图和场景图，最大的一张约 260 KB。字体是第二大的一项，两款可变字体分别是 325 KB 和 263 KB。52 个脚本合计约 0.9 MB，大字区所在的那个约 114 KB 的分包里，还打进了整个 Tweakpane 调试面板库，但站点代码从来没有创建过面板。手机、平板和桌面下载的文件完全一样。浏览器在 0.4 到 0.5 秒内就画出了第一帧，但每次整页打开都要先看完约 5 秒的开场，访客才能操作转盘。

主要的互动只能用鼠标或手指完成。访客按 Tab 键时，焦点会先进入两个收起来的菜单面板，在十来个看不见的链接上停留，因为面板并不会随焦点打开。转盘的两个箭头可以用键盘操作，但服务卡片、大字和贴纸都没有键盘入口，焦点框也只是浏览器默认的样式。网站不理会减少动态效果的系统设置，开场、转盘、卡片和菜单的动画照常播放，只有博客页会关掉视差。

四个 Awwwards 分项里创意 Creativity 最高（8.12 分），可用性 Usability 最低（7.38 分），开发奖的分项里动画 Animations 和响应式 Responsive 最高（各 8.2 分），无障碍 Accessibility 最低（7.4 分）。

Nicolas Garnier 在 Codrops 文章末尾列出了分工，KOKI-KIKO 是代理商，Kim Levan 负责策略和项目管理，Louis Paquet 负责艺术指导和设计，Anthony Morell 负责品牌和插画，Garnier 负责技术和开发。Anthony Morell 没有出现在 Awwwards 的署名里，但网站上那套剪纸式的人物和场景出自 Anthony Morell。