Sleep Well Creative

Victor Costa 在网站里写了一封短信，说明这个站不是一件产品，而是一次个人的实验和一项创意研究。这封信想提醒做设计和开发的人，创造力来自休息，不来自咖啡和熬夜。网站页脚写着，它是 Webflow 和 Contra 合办的社区挑战赛的参赛作品。这场挑战赛在 2025 年 10 月 22 日到 11 月 3 日之间收稿，题目只要求用 Webflow 设计并搭建一个出色的网站，所以讲什么内容由参赛者自己决定。Victor Costa 在 Contra 上的项目说明里写到，这个主意来自太多凌晨三点还在调试代码的夜晚，并写到自己想让这些信息读起来像一段旅程，而不是一堂课。

访客在打开网站后先看到一个奶油色的加载画面，中间是一个画着月亮的椭圆形标志，加载完成后它下面的 Loading 会换成 Enter Site。访客点下这几个字之后，故事才开始。正文分成六个编号的章节，依次讲睡眠是大脑的维护时间、心跳的节奏、一天的作息、运动和休息的平衡、屏幕的蓝光和睡眠的几个阶段。章节之间穿插着铺满整屏的三维场景，每个场景演出一个具体的坏习惯，比如药片、咖啡和睡前刷手机。全站约一千零五十个英文单词，在台式机上大约要滚动五十三屏。

章节和场景的排法让每一个论点都配上一幅画面。每一章先在一块深蓝或奶油色的版面上用大标题和两小段文字讲道理，紧接着的三维场景再把这个道理演一遍。讲完睡眠是大脑的维护时间之后，是一条药片迎面飞来的隧道，讲完心跳之后是一个站在斑点房间里的女人，讲完运动之后是一长串咖啡罐。故事最长的一段留给了解决办法。How to redesign for a better sleep 这一段在台式机上占了整页约三成的长度，一条白线在星空里慢慢画出来，沿途依次出现六条建议，从睡前固定的仪式、调暗灯光到睡前留出放空的时间，每条建议配一小段循环播放的影片。这一段之后，底色亮成浅蓝，标题是 Now it's time to apply，最后的页脚里是一本慢慢打开的书。页脚上写着 Learn creative animation 的按钮和顶部正中的月亮标志，都链接到 Victor Costa 自己的教学品牌 VW Lab 开设的网页动画课程。页脚还写着这个体验的动画出自 VW Lab，课程页面上也放着这个站的链接，所以这个站同时是这门课程的作品示例。

故事之外，网站还安排了一场寻找提示的小游戏。屏幕左下角写着 Insights 和六个小点。六处场景或图示是可以点击的，比如隧道中央的标签和那只画着二十四小时的钟。访客点一下，画面就蒙上一层半透明的蓝色，一句话随着人声一个字母一个字母地出现，比如 Rest is not escape, it's preparation，左下角对应的小点也会亮起。右上角的 THE NOTE 打开的是前面那封信，信的旁边是 Victor Costa 对着镜头讲话的一段影片。

全站的视觉规矩是两种主色交替出现，像一本主要用两种油墨印刷的书。讲道理的章节用深海军蓝（#010D6E）或奶油色（#FEF1D0）做底，奶油色上的字是群青色（#0042AF），深蓝上的字是奶油色。底色在每一次换话题时翻转一次，所以访客不用读标题也能感觉到故事翻到了下一页。整页只有讲如何开始实践的那一段换成浅蓝色（#4589F7），它是全站最亮的一块底色。黄色主要出现在三维画面里，比如台灯照出的光和夜空里的星点。所有画面上还盖着一层不透明度一成的纸张纹理，网页的文字和三维场景都在这层纹理下面，所以连三维场景也带着印刷品的颗粒感。

这个站最特别的决定，是把三维场景做成平面插画的样子。场景里的物体没有真实的光影，表面是手绘的图案，比如沙丘上一团团带着柔和起伏的黑白斑块、女人外套上的白色小点，以及墙上密密麻麻的蓝点。物体边缘都有一圈细线，像插画里的勾线，线的颜色按物体换成奶油色、白色或深蓝。场景的配色和网页的两种主色一致，所以一个三维场景出现在两段文字之间时，看起来像书里的一张整页插图。

台灯那一幕是这套美术方向最完整的一张画面。一盏灯罩上印着黑白斑块的台灯放在一摞书上，灯下照出一片锯齿边的明黄色光，背后是布满蓝色小点的深色墙面和一个个镶着奶油色月牙边的黑色圆球，地面又是黑白斑块。这里的黄色只出现在灯光上，深色墙面和黑色圆球把它衬得更亮，所以这一幕讲的关灯这件事，画面已经先说出来了。

字体分成两种角色。标题、引语和开场的大字用 PP Editorial New 的细体，这是一款笔画末端带小装饰的衬线字体，开场的 SLEEP WELL CREATIVE 把字距拉到字号的一半以上，读起来很慢，像一本书的封面。正文和标签用无衬线的 Neue Montreal，小标签用它的中等字重，全部大写，比如章节里的 THE SECRET IS RHYTHM。全站的大部分文字是 Neue Montreal 的正文，衬线字只负责少数需要被慢慢读的句子。在 1920 像素宽的屏幕上，章节标题约 87 像素，正文 24 像素，标题约是正文的三倍半。引语和段首的大字在 40 到 50 像素之间，小标签约 19 像素。整套版面按屏幕宽度等比缩放，所以在不同宽度的台式机屏幕上，标题和正文的比例都不变，整页像一张会跟着窗口放大缩小的画稿。

章节里的图示都用细线画成，和三维场景分开承担不同的任务。每一章开头有一个带编号的小圆环，从 01 编到 06，标题旁边配一张群青色细线画的图，比如一条心电图线、一个钟摆、一圈叠起来的圆盘和四个小圆组成的睡眠周期。讲作息的那一章把二十四个词排成一个大椭圆，每个词代表一天里的一个小时，前八个都是 SLEEP，后面是 WORK、EAT、EXERCISE、STUDY 和 REST，所以这一圈字本身就是一张作息表。光标移到其中一个词上，这个词会换成它代表的钟点，比如 03:00。

网站界面上的部件很少，而且都留在屏幕的四个边上。顶部正中是月亮标志，右上角是 THE NOTE 和一个画着四个小点的圆形按钮，右下角是一条表示声音的波浪线，访客关掉声音后它会变成一条直线。左下角的六个小点记录访客已经找到的提示。网站自己画的光标平时是一个小圆点，移到可以点开提示的地方时，它会变成写着 Play insight 的胶囊。

手机上保留了全部章节和全部三维场景，网站只把版面改成单列。每一个三维场景都重新取景，竖着放进窄屏里，开场的女人仍然站在沙丘中间。章节里左右两栏的文字改成上下排列，标题和正文按比例缩小。THE NOTE 打开的信在手机上改成影片在上、信在下。网站自己画的光标在手机和平板上不出现，提示和按钮都改为直接点按。

开场是这个站的第一个招牌动作。访客点下 Enter Site 后，奶油色的加载画面先放大一点并淡出，用时不到一秒。接着一片片深蓝色的形状从画面中心向四周长出来，边缘像墨水洇开一样凹凸不平，大约三分之一秒之后，带着斑点图案的真实场景从同样的位置跟着长出来，把深蓝色的形状一块块替换掉。整个场景在长出来的同时转过大约四分之一圈，并且慢慢变大，大部分变化发生在开头的两三秒，之后越来越慢，大约八秒后才完全停稳。标题在点击后约三秒半开始出现，一道斜着的边扫过三个词，每个词比前一个稍晚出发。标志、THE NOTE 和底部的提示在四到六秒之间淡入。

文字的出场全站用同一套慢节奏。一段标题滚动到屏幕下方约五分之一处时，它的字母从左往右一个接一个淡入。每个字母用两秒左右，后一个比前一个晚出发五十分之一秒，所以一百多个字母的标题要四秒多才写完，看起来像有人正在把它写出来。正文段落则由一道斜着的边擦开，大约三秒。讲睡眠时长的那一章里，08h00 这几个数字像里程表一样往上滚动，停在最终的读数上，旁边的圆环从中心弹出来。图示里的细线会先画出来，之后有一段更亮的线段沿着它一遍遍跑过去，心电图线上就像有一次心跳在不停地往前传。这些循环只在章节停留在屏幕上时播放，访客离开后就暂停。

三维场景的动作有两种挂法。第一种跟着滚动位置一帧一帧走，访客往下滚动时，场景从画面下方升上来，同时轻轻转动、放大。访客停下，场景也停下，访客往回滚动，场景就倒着放。第二种是访客第一次滚到某一幕时自己播完一段，比如女人和台灯这两幕，场景会像开场那样从中心长出来，女人那一幕用八秒左右，台灯那一幕约六秒。场景里还有一些不停的小循环，比如隧道里的药片每隔一秒半从远处飞出一颗，咖啡罐像传送带一样不断地向左移动，钟摆左右来回摆。

握着手机的那一段把好几步动作排进了同一段滚动里。这一段一开始，手机屏幕放大到铺满整个画面，访客继续滚动，它慢慢缩小、退远并转过来，变成一只手握着的手机。接着，写着 Z 的贴纸、一个禁止标志和一颗印着 Z 的橙色小球从手机屏幕里一个接一个地弹出来，后一样比前一样稍晚出发，先快后慢地落到自己的位置。最后，一块边缘凹凸不平的群青色从屏幕下方往上涨满整个画面，把访客带进讲蓝光的那一章。这一整段都跟着滚动位置走，访客停下，那些贴纸和小球就停在半空，访客往回滚动，它们又会缩小并退回去。

光标对三维场景的影响很轻，也很慢。每一幕场景都会朝光标的方向轻轻偏转，偏转要用三秒左右才追上光标，所以画面像浮在水上一样慢慢晃。咖啡罐那一幕多了一个更直接的回应，光标扫过哪一罐，那一罐就向上跳起来，在空中翻转一整圈后再落回队伍里。网站自己画的光标也会追着鼠标走，大约一秒才追上，鼠标移动得越快，光标就沿着移动的方向拉得越长。

声音跟着提示和那封信变化。访客第一次点下 Enter Site 时，一段安静的背景音乐开始循环播放。访客点开一个提示后，背景音乐的音量降到三成，速度放慢到一半，人声开始念那句话。屏幕上的字母随着人声一个个出现，最后一个字母正好在人声念完时出现。之后不到一秒，整层蓝色淡出，音乐也恢复原来的音量和速度。打开 THE NOTE 时音乐降得更低，同样放慢一半，信和影片由一道斜着的边擦开，约三秒。访客切换到别的标签页或窗口时，音乐会暂停，标签上的标题会换成 Did you fall asleep?。

滚动的手感在台式机和触屏上不一样。在台式机上，访客松开滚轮之后，页面还会顺着惯性滑一秒多。在手机和平板上，网站用的是浏览器自己的滚动，松开手指后不会再多滑一段，三维场景也不会跟着光标偏转。在台式机上从开场滚到页脚，滚动全程保持每秒 60 帧，整页最多同时有两段影片在播放，咖啡罐和台灯这两幕画面最复杂，也没有掉帧。

整个站是一个 Webflow 页面加一块固定在屏幕上的透明 WebGL2 画布。文字、版面和所有细线图示都是 Webflow 里的普通网页元素，画布铺满整个屏幕，压在文字后面，背景透明，所以章节的奶油色和深蓝色就是三维场景的底色。three.js 只用一个场景和一台镜头，八个场景各是这个场景里的一组物体，每一帧直接渲染一次，没有任何后期处理。Victor Costa 在 Contra 上的进度帖里写过下一步要做着色器、后期处理和场景交互，上线的版本保留了着色器和交互，后期处理没有用上，那层纸张颗粒是盖在最上面的一层网页图片，用明度混合叠在所有内容上面。代码沿用了常见的 three.js 项目结构，窗口尺寸、时钟、资源加载和场景世界各是一个模块。网址末尾加上 #debug 时，页面会打开 Tweakpane 调试面板，面板上列着每个场景的位置、旋转、大小和显隐开关。

每一组三维物体都挂在一段网页章节上。网站给每一段章节建一个打开 scrub 的 ScrollTrigger，再把滚动进度直接设成一条暂停的 GSAP 时间线的进度。时间线里写着这组物体的位移、旋转和缩放，书本那一幕连骨骼动画的播放位置也写在里面，所以翻开书的动作完全由滚动推着走。一段章节离开屏幕后，对应的那组物体会被隐藏，每帧的更新也直接跳过。台式机上的平滑滚动交给 Lenis，用默认的追赶系数，由 GSAP 的计时器驱动，Lenis 每滚动一次就通知 ScrollTrigger 更新。建议那一段的白线来自代码里存好的一组点，网站把它们连成平滑的曲线，再做成一根很细的管子。管子的着色器丢掉进度之后的部分，所以白线会随着滚动一点点画出来，整组物体同时向左移动，让线头一直留在画面里。

开场的生长效果来自一段注入到标准材质里的着色器。网站在 three.js 编译材质之前改写着色器代码，算出每个像素在世界坐标里离模型包围盒中心有多远，再除以包围盒对角线的一半，减去一层平滑的数值噪声，结果大于当前进度的像素就直接丢弃。开场的进度从 -0.8 走到 0.8，场景就从中心向外长出来，噪声让边缘变得凹凸不平。开场、女人和台灯这三幕各准备了两份模型。一份是原样的模型，另一份把所有材质换成不受光照影响的纯深蓝色，往镜头后方挪了一点，并且比原样的模型早一点开始生长，所以访客先看到深蓝色的墨迹，再看到真正的场景。生长结束后，深蓝色的那份会从场景里移除。台灯那一幕的第二份模型用的是奶油色。

插画感主要靠描边、平光和画好的贴图这三样东西做出来。描边用的是外壳法，模型在 Blender 里多带一层稍大一点、法线朝里的外壳，网站只画它朝向镜头的那一面，所以只有物体轮廓外面露出一圈细边。外壳的材质用自发光决定颜色，不受光照影响。场景里三分之一以上的网格是这样的外壳，其余材质都是双面渲染。

网站把光照压到最平，让贴图负责立体感。场景里只有一盏强度为一的环境光和一张环境贴图。这张环境贴图是一张阳光下小巷的照片，网站把它重复贴在立方体的六个面上，强度调到十五。渲染器不做色调映射，也没有阴影，所以模型得到的是来自四面八方的均匀亮光。物体上的起伏和高光都已经画在贴图里，沙丘上每一团斑块的立体感就是这样来的。台灯下的那片黄光则是一块平面，着色器用阶跃函数画出边缘锐利的锯齿，开发者在注释里写明了这是为了插画的效果。

三维素材的体积控制得很好。十二个模型都用 Draco 压缩，加起来约 2.3 MB，贴图是 WebP，大多不超过 1232 乘 928 像素，网站等这十二个模型和环境贴图全部下载完成才建立场景。浏览器在 0.7 到 0.8 秒画出加载画面，Enter Site 在 1.7 到 2.1 秒之间可以点击。

影片的体积却远远超出三维素材。访客点下 Enter Site 之前，网站已经下载了约 25.5 MB，其中约 22 MB 是影片。建议那一段的六段循环影片都是 720 像素见方、约五秒长的 WebM 文件，在页面上只显示成两百多像素见方的小图，最大的一段约 6.9 MB。六段影片在页面打开时就被完整下载，开始播放时又各自下载了一遍，所以访客走完全站一共要下载约 44.6 MB，影片约占九成。网站给所有设备的都是同一套模型、贴图和影片，手机和平板只是不开 Lenis 和自定义光标，画布的像素比最高为 2。

运行时的开销分布得比较均匀。画面最复杂的是咖啡罐那一幕，六十四个罐子都是同一个模型的复制品。每个罐子单独绘制，没有用实例化，每帧要画一百多次，画面仍然稳定在每秒 60 帧。three.js 在每一幕第一次出现时才编译这一幕的材质，加载时页面卡住过几次，最长的一次在半秒到 0.8 秒之间，之后滚动的过程中没有再卡。

这个站只适合用鼠标或手指浏览、看得见画面、听得见声音的访客。六个提示、THE NOTE 和声音开关都是不能获得焦点的普通元素，键盘访客按 Tab 时，焦点只会落在没有名字的标志和页脚的几个链接上，不过方向键、空格和翻页键都能正常滚动页面。页面没有声明语言，章节标题也不是标题元素，读屏软件只能读到 SLEEP、WELL、CREATIVE 三个一级标题和大段正文。网站没有读取减少动态效果的设置，开场的生长、文字的出场和平滑滚动都照常播放。

Sleep Well Creative 先在 2025 年 11 月拿到 Webflow 和 Contra 社区挑战赛的第三名，奖金一万美元。2026 年 1 月 28 日，它拿到 Awwwards 的当日最佳，得分 8.03，同时拿到开发奖和 Awwwards 为无代码工具做的网站设立的 No-code Honors。2 月 7 日，它又拿到 FWA 的当日最佳，得分 88，FWA 把它归进动画、教育和实验三类。

创意 Creativity 是 Awwwards 四个分项里最高的一项，得了 8.35。把三维场景画成插画书的做法和藏在页面里的六个有声提示，可能是这一项高的原因。可用性 Usability 最低，得了 7.80，台式机上五十多屏的长度和只能用鼠标或手指点开的提示，可能拉低了这一项。开发奖的评委给了 7.42 分，其中动画 Animations 最高，为 9.00。无障碍 Accessibility 最低，为 6.40，和工程章里键盘与读屏软件的问题对得上。

表里的战绩是截至 2026 年 10 月 25 日的累计数。网站里那封信的署名写着设计、开发和三维素材都由 Victor Work 完成，所以这个站的版面、动效、三维模型和代码都出自同一个人。Victor Costa 在 Contra 上的身份写着创意设计师、开发者和技术教育者，还经营前面提到的教学品牌 VW Lab。VW Lab 的那门网页动效课程为期六周，从概念和 Figma 设计讲到用 Blender 做素材、在 Webflow 里搭页面，再到 GSAP、着色器和 WebGL 的自定义代码，其中 Webflow、GSAP、着色器和 WebGL 都是这个站用到的技术。FWA 上的七次当日最佳从 2020 年开始，Awwwards 上的当日最佳已有十七次，这个站是最新的一次。