Butter

Butter 这款视频编辑器在浏览器里运行，它主打的说法是自己可以像积木一样被扩展，用户能在时间轴上直接使用和改造别人做好的效果块。官网要把这个想法卖给做营销内容的创意团队，所以它没有走软件官网常见的功能清单路线，而是把首页排成一条从口号到证据的长卷。首屏只有一句 Engineered for Creativity、一句副标题 Butter, the first video editor you can build on 和一枚 Get Started 按钮，悬在标题上方的钥匙链是首屏唯一的装饰。

访客进门要先等一屏灰色的过场，屏幕中央一行小字写着 It's a whole new timeline.，大约三秒后过场淡出，导航和标题依次浮现，钥匙链最后才被画出来。访客往下滚，第二屏先排一行客户标志，Airbnb、Netflix、Canva、Sony Music、SpaceX 都在里面。标志下面是一句占三行的大字，Butter is the first video editor where creatives can build and remix custom design tools right on timeline。这句话里嵌着五个小方块，像表情符号一样夹在词与词之间，其中四个是正在动的短视频，每个方块里是一个做好的效果。

首页再往下用六段内容轮流讲产品的每一面。一块黑色的效果库面板列出 Inflate、Glow、Focus、Halftone 四个文字效果，让访客在旁边的标题上试用。一段视频演示效果块上的转盘和滑杆，一段更宽的视频演示整个编辑界面。四张卡片 Import、Edit、Enhance、Ship 概括从导入到导出的流程。一个写着 Create in 3 ways 的手风琴列出 Remix、Describe、Code 三种做法，Describe 那一项演示的是输入一句话生成三维素材，Code 那一项演示的是在编辑器里写代码做效果块。

模板轮播是首页上离购买最近的一段。十二个竖版广告模板排成一条自动往左走的带子，护肤、饮料、软件、运动装备都有，访客点任何一个都会进到模板详情页，那里的 Create 按钮直接进编辑器。首页一共大约十七屏，放了四十九段短视频，六十七个链接里有三十五个指向应用本身的登录、注册、效果库和模板页。定价另有一页，方案从免费到每月 59 美元，再往上是企业定制。

Butter 的页面本身几乎没有颜色，颜色全部留给了它展示的东西。全页的底是一种接近白的浅灰，页脚和模板一段换成深一点的灰，文字是接近黑的深灰，整页找不到一个用了饱和色的文字或色块。产品界面的截图和视频全是黑底面板，效果演示、模板视频和钥匙链才是彩色的。这样一来，紫色的气球字、黄绿色的光、粉色的圆牌和橙色的登山扣在灰白的页面上格外显眼。

全站几乎只用一款字，一款叫 DieGrotesk 的无衬线体，而且只用一个字重。层级全靠尺寸拉开，首屏标题 119 像素，整句大字 67 像素，段落标题 48 像素，正文 16 到 18 像素。所有标题都是正常大小写的句子，没有一处全大写。第二款字 ABCDiatype 只出现在 14 像素的小标签上，比如页脚各栏的栏目名和段落上方的眉题。

版面是产品官网常见的居中加左右分栏。首屏、整句大字和模板一段居中，讲功能的段落把文字放在一侧、演示放在另一侧，黑色的界面面板带 11 像素的圆角。导航压成一枚白色药丸浮在左上角，里面是字标和五个链接，右上角另一枚药丸放登录和 Try for free。

这个站用到的图像分成产品和成片两类。一类是产品本身，深色界面里的时间轴、素材面板和效果卡片。另一类是效果和客户的成片，竖版广告里有护肤品、汽水、跑步装备和软件公司的宣传。钥匙链上的五件挂件是这个站上少有的只为了好看而做的东西。嵌着银色哥特体 G 的黑色方牌、粉色圆牌、镀铬钥匙、橙色登山扣和一枚绿色手写体 Butter 吊牌，看起来像一套品牌周边。

页脚是整个站上最放松、最像玩具的一屏。一枚占满页面宽度的黑色手写体 Butter 字标躺在浅灰底上，字的下方拖着一层从粉紫过渡到青色的彩虹阴影，像是给自己用了一个效果块。

钥匙链是首页上唯一一处由物理模拟驱动的动态。登山扣、钥匙、三块吊牌和二十七节链环各是一个刚体，由物理引擎 Rapier 连成一串，鼠标在这一屏里移动时相当于一只手在推它们。光标从旁边扫过，挂件先晃开一截再摆回来，摆动会持续一秒多，三四秒后才完全停住。这只手只推不抓，按住拖动和单纯移动没有区别，滚动页面也不会带动它。访客滚过首屏，这块画布就整个卸掉，往回滚才重新出现。

开场的三秒是这个站唯一一段让访客等的时间。灰色的过场屏停留两秒半，用半秒淡出，导航和标题各用半秒浮现，钥匙链在过场结束半秒后才开始画。标题的浮现是逐词的，每个词从下方 28 像素处升上来，同时由透明变实，相邻两个词相差不到 0.1 秒。页面上的每一个标题都用这一套进场，触发条件是它滚进视口。

滚轮在这个站上交给平滑滚动库 Lenis 处理，每格推进 600 像素，页面用大约一秒减速滑到位。整页连续滚下来平均 56 帧，最慢的一段在页面中部，两段 2048 像素宽的产品演示视频先后进入视口时掉到 44 到 52 帧。

效果库那块面板是首页上最值得试的交互。鼠标停在四张卡片中的任何一张上，左边标题里的效果就换成那张卡片的效果，光标旁边同时浮出一枚写着 Add butter 的黑色小标签。Inflate 把 blocks 的六个字母换成鼓起来的紫色气球字，左右两个词让开位置。Glow 给这个词加上一圈黄绿色的光晕。Focus 把整句话虚掉，只留几个词清晰，像相机对焦。Halftone 把整句话变成红、橙、绿三色的网点。四个效果都是预先做好的图和样式，不是现场渲染出来的。

模板轮播自己以每秒约 100 像素往左走，十二个模板复制成两份接成环。访客按住拖动时带子一比一跟手，松手后再滑一小段停下。它也是全页最吃力的一屏，页面停在这里时只有 30 到 35 帧，二十四段视频每一段都带着圆角和一层滤镜，带子每移动一步都要把它们重新合成一遍，把视频藏掉帧率立刻回到 60。Create in 3 ways 那个手风琴每次只展开一项，左边的演示媒体跟着换。

导航药丸右端的三个点按下去，药丸展开成一块浅灰面板，列出四个入口和社交链接。这块面板只认那一个按钮，按 Escape 或点面板外面都关不掉。打开系统的减少动态效果设置之后，过场屏和逐词进场被取消，钥匙链照常摆动，视频照常自动播放，模板轮播照常滚动。

这个站用 Next.js 搭在内容后台 Prismic 上，三维部分用 React Three Fiber 和它的配套库 drei，物理用 Rapier，滚动用 Lenis，视频全部托管在 Cloudinary。

第一次打开首页要下载 5.2 MB，其中脚本占 3.7 MB。脚本里大约 1.4 MB 不是站点自己的代码，而是 Google Tag Manager、Meta 像素、Bing、Twitter、Clarity、customer.io 和 cookie 弹窗组件。钥匙链的四个模型合计 834 KB，另加 87 KB 的 Draco 解码器和一张 116 KB 的环境照片。物理引擎那个包压缩后 785 KB，是单个最大的文件。整页看完再加约 10 MB，全是视频，二十五段共 9.7 MB，最大的一段 1.4 MB。

首屏的文字来得很快，慢的地方在别处。服务器 130 毫秒返回首字节，首次内容绘制（FCP）0.4 秒，远好于 Google 建议的 1.8 秒。最大内容绘制（LCP）量到的也是这句标题，同样 0.4 秒，对照的是 2.5 秒的建议值，布局位移几乎为零。主线程真正吃紧的时候在三秒过场之后，三维场景初始化时有两个分别 500 和 845 毫秒的长任务，页面有约两秒不响应，过场屏正好把这段时间遮住了。

钥匙链每一帧的渲染开销在显卡上并不高。场景一共 22 个网格，把二十七节链环算成实例后每帧约 2.9 万个三角形。这些三角形每帧画两遍，一遍画进粉色圆牌所需的透射缓冲，一遍上屏，合计 44 次绘制。场景没有阴影，光来自一盏平行光和一张 1024 乘 512 像素的城市照片环境贴图。站点自带的性能面板显示每帧 GPU 用 3.4 毫秒、CPU 用 13.5 毫秒。这块面板本身是没删掉的调试工具，左上角一颗直径 10 像素、几乎透明的青色圆点就是它的开关，另一个调试用的控制面板库也还留在脚本包里。

cookie 弹窗写的是测量和营销用途需要访客同意，请求却不等同意。页面打开两秒内，Meta、Twitter、Bing、Google Ads 的像素和 Clarity 的会话记录都已经发出第一条数据，访客还没碰弹窗时浏览器里已经有七个第三方 cookie。访客点 Reject all 之后这些 cookie 仍在，LinkedIn 的追踪还会再加两个。

键盘和读屏软件需要的基本项这个站给得齐。页面有跳到正文的链接、四个地标、一个一级标题，七十七个可点的控件都有名字，内容图有替代文字，装饰用的字母图留空，键盘焦点是一圈 1 像素的深灰描边。无障碍上的问题集中在那块导航上。访客用 Tab 键往下走时，第九到第十六步会落进那块没打开的下拉面板。面板是透明的，也不响应鼠标，键盘用户会在看不见的八个链接上停留八次。面板打开之后，键盘上也没有任何一个键能把它关掉。四十九段视频没有控件也没有描述，它们都是装饰。样式表里没有任何减少动态效果的规则，这个设置只被脚本用来跳过过场和进场。

四个分项里内容（Content）7.69 最高，设计（Design）7.38 最低。十九位评委的总分从 6.4 到 8.8，多数落在 7 到 8 之间。内容分高对得上这个站的做法，它把一款不好解释的产品讲成了一页能上手试的演示。设计分是四项里最低的，这套视觉语言并不新，浅灰底、黑色界面面板、居中大字和药丸导航都是软件产品官网用熟的一套，Butter 做得干净，但认得出来处。开发奖 7.22 分里动画 8.2 最高、无障碍 6.6 最低，和键盘会落进隐形菜单那件事对得上。

ToyFight 是 Awwwards 的常客，十八次当日站在工作室里排得很前。它在 FWA 的四次获奖集中在 2016 到 2019 年，之后的作品都投给了 Awwwards。Butter 这个站在 Awwwards 上只署了 ToyFight 一个名字，没有列出个人。