The Renaissance Edition

Shopify 每隔几个月发布一期 Editions，把这段时间上线的产品更新集中介绍一遍。Winter '26 这一期在 2025 年 12 月 10 日上线，收录了 150 多项更新，主题是 AI。Shopify 的产品副总裁 Vanessa Lee 在同一天发表的文章里，把这一期叫作 The RenAIssance Edition，并写到团队选文艺复兴做主题，是因为它象征进步、勇气和新的开始。Shopify Design 在加拿大注册平面设计师协会（RGD）企业内部设计奖的参赛说明里写到，这个站要把一份更新日志做成一座可以滚动浏览的画廊，每一幅画对应一组更新，把商家塑造成手握 AI 工具的文艺复兴大师。

访客打开网站后，先看到一段黑底的开场，几秒之后第一幅画出现在整个屏幕上。两个穿着文艺复兴长袍和白色运动鞋的人从左右两边飞向画面中间，左边的人举着一只粉色的咖啡杯，右边的人提着两个粉色的购物袋，下方飘着一块画着粉色花体字的滑板。两人伸出的手指几乎碰在一起，构图借自米开朗基罗的壁画《创造亚当》。画面中间有一个用细线画出的方框，像画册的扉页，框里写着这一期的名字、一句 A new world of commerce. 150+ product updates.，以及十二个章节的目录，每一章后面标着罗马数字 I 到 XII。

十二章按 Shopify 的产品线划分，从 AI 助手 Sidekick 开始，经过零售、营销和结账，到给开发者的 Developer 结束。每一章的顺序都一样。章首是一幅铺满屏幕的画，压着一个巨大的章名和一句概括，接着画面换成纸张颜色的页面，先用视频和产品演示动画介绍几项主打更新，最后用两栏小字列出其余的小更新。各章的长短差别很大，Sidekick、Retail 和 Developer 三章各占九屏多，Checkout 和 Shipping 只有两屏多，整页在台式机上大约六十屏。左边一直固定着十二章的目录，访客随时可以点一章直接跳过去。

画册里还藏着三处要访客自己去找的彩蛋。结账一章的画里，人物头上的粉色毛线帽可以点开，点开后网站会弹出这顶帽子的购买面板，价格是 14.52 美元。Shopify Design 在参赛说明里写到，这个价格取自达芬奇的出生年份 1452。运货一章的天空里飘着一把发光的金钥匙，访客点它，浏览器会打开一个小窗口，透过这个窗口能看到这幅画的另一层样子。网站不存在的页面上站着一匹独角兽，标题是罗马数字 CDIV，也就是 404，下面一句写着 This page doesn't exist, unless you believe it does.。团队在参赛说明里说，这些藏起来的细节是给愿意多逛一会儿的访客的奖励。

The Renaissance Edition 的设计规矩是把每一章分成两种材质，章首是一幅深色、浓重的油画，更新内容则印在暖白色的纸上。纸的颜色是带一点黄的暖白（#F7F7EE），文字是接近黑色、略带橄榄绿的墨色（#292919），中间几级灰也都偏橄榄色（#DCDCD0、#909083、#5C5C4E），所以纸面看起来像一本旧画册的内页，和前面的油画放在一起也不显得冷。画和纸的交界处是一道撕开的纸边，纸边参差不齐，还泛着一圈白光。十二幅章首画的构图各不相同，网站也为每一章单独定了章名和概括的位置。Sidekick 的章名压在画面上方，Operations 的章名横在画面下部的桌面上，Shipping 的章名正好压在猎豹的身上。

十二幅画里，文艺复兴的人物都拿着今天的商品和电子产品。Sidekick 一章是一个戴紫色眼罩、对着笔记本电脑的年轻人，Agentic 一章是一位坐在书房里、神情像蒙娜丽莎的女子，Shipping 一章是一只驮着橙色快递包裹的猎豹，Checkout 一章的红发女子戴着粉色毛线帽，手里捏着一张粉色的银行卡。首屏和结账一章里，最鲜艳的亮粉色都落在这些现代道具上，所以访客一眼就能看出哪一样东西是从今天放进画里的。Shopify Design 在参赛说明里写到，每一幅画的底稿由 AI 生成，再由人工画师调整景深、光线和人物的动作。最后一章 Developer 换了一种画法，画面是一张泛黄纸上的铅笔素描，像达芬奇的笔记本，章名也从白字换成了深色的墨字。

字体分成三种角色，正好对应一本画册里的三种文字。章名用无衬线字（笔画末端没有装饰的字体）NeueMontreal 的粗体，在 1920 宽的屏幕上字号约 220 像素，行距收到字号的九成，字距也收紧了 3%，像海报一样压在油画上。每章的概括和每项更新的标题用衬线字（笔画末端带小装饰的字体）HWCigars，打开了连字和小型大写字母，读起来像书里的正文。概括的第一个字母换成花体 ImperialScript，并且挂在文字左边线的外面，像手抄本里描金的首字母，标志里 Ren(ai)ssance 中间的 ai 也用这款花体。导航、按钮和说明小字用 14 像素的 Inter，章名大约是它的十六倍。

画册的感觉还来自一些反复出现的小细节。目录里每一章后面都跟着一个罗马数字，当前所在的那一章会多出一条点线，从章名一直连到它的数字，就像书的目录页。罗马数字还用在别处，毛线帽购买面板里的数量 1 也写成了 I。光标移到另一章上时，那一章的点线也会画出来。在纸面上，其余章名变成浅灰色，只有当前一章保持深色。开场画面、视频播放器的背景和手机上的目录页，都铺着同一组细线画成的圆、对角线和十字准线，看起来像达芬奇在纸上打的构图稿。

到了手机上，网站把同一套规矩重新排了一遍。左边的目录收进右上角的菜单按钮，点开以后是一整屏深色的目录页，十二个章名用大字排成一列，罗马数字排在右边。每一幅画都换成竖着裁的版本，首屏只留下左边那个人和滑板，结账一章则推近到女子的脸和毛线帽。更新的卡片改成一列，上下叠着排。

The Renaissance Edition 的开场先画一张构图稿，再把第一幅画烧出来。打开网站后，黑色的屏幕上先出现一个小小的书名，接着几条细线慢慢画开，两个大圆、几条对角线和几个十字准线围着书名。书名一开始只有 The、花体的 ai 和 Edition，Ren 和 ssance 随后才补上。大约四秒时，构图稿在半秒内淡掉，屏幕中间随即烧开一个洞。洞的边缘参差不齐，泛着白色和橙色的光，像正在燃烧的纸，画就从这个越烧越大的洞里露出来。

洞烧开时，镜头离人物很近，两个人从两边飞进画面，镜头随后往后拉开，目录里的十二个章名也一行接一行地淡入。整段开场大约在七秒内完成，前面快，后面慢慢停稳。

开场之后，画面就交给了滚动条。每一章的镜头和人物都跟着访客滚动的距离走，访客往回滚，画面就倒着放回去。画面每一帧只追上剩下距离的一半，所以访客停下滚轮之后，画面还会顺着往前滑一小下才停住。首屏里两个飞着的人会随着滚动慢慢分开，滑板也转了一个角度。光标移动时，镜头会朝光标的方向偏大约三度，前景的人物和后面的风景移动得不一样多，画面就显出了纵深。台式机上从首屏一路滚动到底，画面一直保持每秒 60 帧，只偶尔停顿一下。

访客第一次往下滚动时，首屏的扉页会折进左边的目录。方框的细线和副标题在半秒左右淡掉，书名往左上角滑过去并缩小到原来的四分之三，十二个章名一边往左滑、一边往下移到左下角，每一行比上一行晚出发一帧。整组动作在零点六秒内到位，开头的几帧走得很慢，中间猛地一冲，最后长长地减速停下。这一组动作只看访客有没有离开顶部，一旦触发就会自己播完，回到顶部时再按原路倒着播回扉页。

换章是这个站的招牌动效。访客滚过一章的末尾时，下一幅画从屏幕下方往上漫上来，前沿大致是一条横线，在中间略微弯起。前沿一路抖动，像沾湿的笔刷刷过纸面，边上还亮着一道光。旧画被前沿扫到的地方会先褪成一张发光的铅笔素描，新画也先以线稿出现，再慢慢长出颜色。整个过程正好占一屏的滚动距离，访客滚得快它就走得快，停下来它也停在半路。首屏换到第一章用的是另一种方式，新画从首屏画面的中心向外烧开成一个圆，这个圆还会微微偏向光标所在的位置。

这些换章不会因为减少动态效果的设置而停下。访客在系统里打开这个设置之后，网站只停掉产品视频和界面演示动画，油画跟着滚动的移动和换章时的素描效果照常播放，对画面晃动敏感的访客仍然会看到整屏的变化。

纸面也是用同一种前沿铺上来的。Sidekick 一章的章名出现之后，纸面从屏幕底部往上推，撕开的纸边泛着光，大约用一屏半的距离盖住整个画面，之后的更新列表都印在这张纸上。下一章开始换画时，纸面会跟着新画一起退出画面。

并不是每一章都用纸来托住文字。Agentic 和 Marketing 两章把油画压暗，暗到只剩一些发光的轮廓线，产品卡片就直接浮在这幅暗下来的画上。Online 一章在结尾把整个画面压成黑底，上面只剩一些淡淡的轮廓线，然后才换到下一章。

Retail 一章是全站镜头走得最远的一章。镜头在一座穹顶大厅里往前走，一边是挂满滑板的墙，一边是大理石的柜台。Shopify 新出的收银主机悬在柜台上方，跟着镜头慢慢翻转，最后镜头抬头看向穹顶，圆形的天窗外飞着白鸽。整段走动分在九屏多的滚动里，产品介绍的文字随着镜头的推进依次出现。

画里有几样东西可以直接去碰。光标移到结账一章的毛线帽上时，帽子的轮廓会被一圈白线勾出来。访客点下去，不到五分之一秒，整幅油画就变成白纸上的淡淡铅笔线，只有那顶帽子保留着原来的颜色。购买面板同时从右边出现，访客按 Esc 就能回到原来的画面。Operations 一章的人物中间放着一个金色的地球仪，外面罩着一层会扫过亮线的半透明光罩。地球仪平时自己慢慢转，访客可以用光标拖着它转，松手后它还会顺着惯性转一会儿，再回到原来的慢转。

运货一章的金钥匙在光标靠近时会原地转一整圈，约用零点六秒，开头和结尾都慢。访客点它，浏览器会在光标的位置打开一个四比三的小窗口。窗口里看不到网页上的任何文字，只剩下这幅画本身。猎豹背上的锁扣亮成一个钥匙孔，那把钥匙变得很大，浮在窗口前面，几道白色的光带绕着它飞。访客点一下钥匙把它拿起来，再拖着这个窗口在屏幕上移动，就像拿着一块放大镜在画上找东西。钥匙对准钥匙孔之后再点一下放下，主页面上就会下起一阵金币雨，两秒后小窗口里的画也换成一层涂鸦。

目录、视频和手机上的操作都比较直接。访客点目录里的一章，页面会在大约一秒内滚到那一章，前五分之一秒就走完了七成的距离，剩下的时间慢慢停稳。产品视频从纸面上的预览图里展开，播放器的背景是铺着构图稿细线的纸，按 Esc 关掉后，页面停在原来的位置。在手机上，访客用手指滑动推进画面，从右上角的菜单跳章。

The Renaissance Edition 用一块铺满屏幕的 WebGL 画布画出所有的油画，十二章各是一个按需加载的 three.js 场景，每个场景的动作都由一份 Theatre.js 的时间线驱动。网站本身是 Shopify 的 Hydrogen 应用，三维部分用 React Three Fiber 写，画布固定在网页内容的后面，网页的文字、卡片和视频压在画布上方。每一章的场景是一个单独的代码块，网站只挂载当前一章和它前后各一章，光标停在目录里的某一章上时，那一章的场景也会提前挂载三秒。团队在 RGD 的参赛说明里写到，Theatre.js 让设计师可以直接控制页面上的动作。网站的做法是，设计师在 Theatre.js 的编辑器里为每一章的镜头、画面的每一层和后期效果打关键帧。这些关键帧导出成一份 JSON 状态文件放进内容管理后台，网站加载时再按章读进来。

网站用一条换算公式把滚动和时间线连起来。网站记着每一章的高度和它在屏幕上的进度，时间线的位置等于进度乘以（章节高度加一屏）再除以一屏，所以时间线上的一个单位正好对应滚动一屏，设计师按屏数来安排每个动作。在台式机上，时间线每一帧只追上目标的一半，这就是动效章里那一小段滑动的来源。首屏额外加了一个偏移量，它在五秒内从负一走到零，曲线是三次方的缓出，所以首屏时间线的第一个单位会自己播完，播完以后才交给滚动。访客如果从某一章的链接进来，或者打开页面时已经不在顶部，这段自动播放就会跳过。

每一幅油画都是用几层贴着画的模型拼起来的。背景只是一块平面，贴着一张画好的风景。前景的人物和道具都是按画剪出来的形状，贴图用透明度裁出边缘。手、眼睛和购物袋装着骨骼，可以在时间线上弯曲手指、转动眼睛。首屏的两个人物是低多边形的立体身体，身上贴的是同一张画好的贴图集，脸则是单独的平面画片。

这些带画的材质都不受光照影响，直接显示贴图上的颜色，所以人物转动、镜头偏移的时候，笔触和光影始终保持画家画好的样子。金钥匙和地球仪这类金属道具则换成接受光照的金属材质，反射着场景里的环境光。

Retail 一章的大厅用了另一种做法。整座大厅是画在一张贴图上的全景画，网站把它贴在一个圆柱的内壁上，穹顶另有一张圆形的天顶画，外面再套一个更大的圆柱，贴着拱门外的风景。镜头的路线是在 Blender 里做好的动画，和模型一起导出，网站只把滚动换算成这段动画的播放位置。这样做只用两张 2048 像素见方的贴图，就造出了一座可以在里面走动的大厅。

画里会动的人物还用了第三种素材。网站把一段短视频事先拆成每秒 30 帧的图片序列，加载时逐帧跳到视频的每个时间点，把画面存成一张张位图，播放时只把当前那一帧画到一块画布上，再当作贴图交给三维模型。设计师在时间线上拖动的是帧的进度，所以人物的动作也完全跟着滚动走，回滚时一帧不差地倒放，也不会因为解码视频而卡顿。

每一层画还能单独出现和消失。网站在材质的着色器里注入了一段代码，用三维噪声和到场景中心的距离算出每个像素被烧掉的先后，没轮到的像素直接丢弃。正在烧的那一圈边缘亮到原来的八倍，所以人物和道具会从中心往外一块块烧开或烧没。

所有的过渡都在同一道后期处理里完成。网站先把当前一章的场景画进一张半浮点的离屏纹理，换章的那一屏里，再把下一章的场景画进第二张纹理，然后用一个全屏着色器把两张画合起来。着色器按纵向坐标、一张噪声纹理和一张泥浆质感的法线贴图算出一条抖动的阈值线，进度越过阈值的像素显示新画，没越过的显示旧画。阈值线附近的像素会用硬件导数 fwidth 求出亮度的变化，变化大的地方变亮，其余变暗，画面就变成了发光的线稿。越靠近前沿，线稿越明显，前沿本身再乘上几倍的亮度。

同一个着色器里还有另外三道效果，分别是抗锯齿 SMAA、纸面的那道前沿和结账时把场景变成铅笔素描的 Sobel 描边，合成之后再接一道只在亮处起作用的辉光。纸面完全盖住画面的时候，网站会跳过场景的渲染，所以在长长的更新列表里，显卡几乎不用干活。

网站会按设备的显卡给自己定一个画质档位。它用 detect-gpu 查出显卡的跑分档，分成高、中、低三档。三档的像素比都不超过 2，并且按档位压低像素比，让画布最长的一边分别不超过 3840、1920 和 1280 像素，最低仍保持 1 倍。低档每秒只画 30 帧。网站还会一直统计实际帧率，高档或中档的平均值掉到 45 帧以下，就自动降一档。

手机和跑分为零的显卡走另一条路，每一章只显示一张事先渲染好的整幅画，手机拿到的是竖着裁的版本。素描换章、纸面和压暗照样保留，三维的人物、视差和逐层烧开都省掉了，手机也不用下载任何模型。Safari 被当作低性能的浏览器，画里用到的 webm 视频素材在 Safari 上也换成静态图。

金钥匙的小窗口是全站工程上最特别的一处。网站用 window.open 打开一个四比三的弹出窗口，再用 canvas.captureStream 把主页面的 WebGL 画布录成每秒 60 帧的视频流，通过本机的 WebRTC 连接以 5 Mbps 的码率传给小窗口。两个窗口用 BroadcastChannel 交换连接信息，主页面还在每一帧发出自己的屏幕坐标、画布的位置、滚动位置和当前章节。小窗口是一个独立的 three.js 应用，它用两个窗口的屏幕坐标算出主画布落在自己身后的位置，把收到的视频贴在正好对齐的平面上，所以移动窗口就像移动一块放大镜。

窗口里只让亮处发出紫光的黑光效果、点阵扫描和涂鸦，都是这块视频平面上的着色器。钥匙对准钥匙孔之后，小窗口发消息回主页面，主页面再开始下金币雨。小窗口失去焦点十秒就会自己关掉，在 Firefox 和手机上，钥匙则不会出现。

纸面上的产品演示和油画是两套东西，其中十多段界面演示是 Rive 动画，动画里的图片单独下载，手机和台式机各用一套，动画只在滚进屏幕时才播放。主打更新的视频放在 Shopify 自己的视频服务上，1366 宽的笔记本拿到的是 720p 的版本，1920 宽的屏幕拿到的是 1080p。

第一次打开时，网站自己的文件约 2.4 MB，浏览器在 0.4 到 1.4 秒之间画出第一屏，快慢主要看服务器的响应。不过第一幅画要等开场的构图稿播完，在三秒多到五秒半之间才出现。

访客从头滚动到尾，一共要下载约 33 MB，其中约 17 MB 是五段 1080p 的产品视频。访客往回滚动时，这几段视频会被整段重新下载，KTX2 压缩的场景贴图则直接从浏览器缓存里取回。每一段 Rive 演示都会自己去请求同一个约 400 KB 的 Inter 字体文件，好在浏览器只真正下载一次。

键盘访客可以走完这个站。访客按 Tab 时，焦点会依次经过顶部的导航、目录里的十二章和纸面上的链接，页面会跟着焦点滚动。目录里的链接有清楚的蓝色焦点框，从目录跳到某一章后，焦点会落在那一章的开头。画里的人物和道具都是装饰，读屏软件读到的是网页上的章名、概括和更新列表，内容一样不少。不过毛线帽和金钥匙只能用鼠标点到，减少动态效果的设置也拦不住动效章里讲的换章效果。

The Renaissance Edition 先在 2 月 5 日拿到 FWA 的当日最佳，得分 86，2 月 9 日又拿到 Awwwards 的当日最佳和开发奖。2 月 17 日，它拿到 CSS Design Awards 的当日最佳，同时拿了那里的界面设计、体验设计和创新三项公众奖。最后它同时成为 Awwwards 和 FWA 两边 2026 年 2 月的月度最佳。FWA 把它归进商业、推广和资源社区三类。

在 Awwwards 的四个分项里，创意 Creativity 最高，得了 8.24。这个站把文艺复兴的油画和今天的商品放进同一幅画，又让每一章从素描里画出来，这可能是这一项高的原因。可用性 Usability 最低，得了 7.51，整页大约六十屏，主要内容又压在不断变化的油画上，可能拉低了这一项。开发奖评委给了 8.05 分，其中动画 Animations 最高，为 9.40，无障碍 Accessibility 最低，为 7.00。无障碍的低分和前面讲到的情况对得上，减少动态效果只停掉了视频，藏起来的互动也只能用鼠标点到。

表里的战绩是截至 2026 年 10 月 25 日的累计数。这个站是 Shopify 的内部团队自己做的，参赛 RGD 时署名也是 Shopify Design。Shopify Design 的账号上还有几期 Editions 的网站，Summer '24 那一期拿过 Awwwards 的当日最佳和开发奖，上一期 Winter '25 的 The Boring Edition 拿过荣誉提名，Anton Kolisnyk 和 nikki-stephens 两位署名者也参与了那一期。Damien Mortini 曾和 David Ronai 一起办了六年的 Christmas Experiments，Codrops 对 2026 年首届 Three.js 大会的报道写到，Damien Mortini 在 Shopify 用 Three.js 做互动展示、惊喜和好玩的体验。