Steven.com

Steven Bartlett 在 2017 年买了一支麦克风，做起了播客 The Diary of a CEO，后来又办了 FlightStory、FlightFund 和用 AI 做播客托管的 FlightCast 几家公司。据 2025 年 11 月初的报道，Steven.com 是统管这几家公司的控股公司，它当时宣布完成一轮八位数的融资，估值 4.25 亿美元。Bartlett 在公司的新闻稿里说，自己最终的目标是做出创作者经济里的迪士尼。到 2026 年 2 月，steven.com 这个域名上还只有一行标语，现在这个网站在 3 月初上线。

OFF+BRAND. 在 Codrops 的工作室专访里说，客户自称创作者经济的操作系统，这是一个全新的类别，网站必须让人几乎立刻看懂。团队一开始对这个类别的解释都不够直观，于是只留下最要紧的四块业务。团队本来可以给每块业务各做一个页面，但这家公司的卖点正是每块业务都连在一起，所以团队决定把网站做成一个让人去探索、而不是去阅读的地方。首页中间那个可以操作的三维装置因此直接做成了导航，它的四圈就是四块业务的入口。团队把它叫作浑天仪（古代用来演示天体运行的一组嵌套圆环），客户那边的 Georgia Gibson 很喜欢这个设计，还带着一位木匠朋友做的木头模型来开会。

这个站要同时说服几种人。OFF+BRAND. 在官网的案例页里写道，Steven.com 不是一个个人品牌网站，而是这套生态的大门，访客里既有想签约的创作者和投资人，也有粉丝和创业者。专访里还说，这些访客整天都在上网，网站一旦显得慢或者做得太重，团队就留不住他们。

访客打开网站，先看到一个白色的加载画面，进度数字和一道红色笔触一起走到 100。随后画面变成深色，首页只有一屏，正中是环仪，左下角是一句标语和 About Us 按钮。环仪有四圈业务，分别是 Creator Media、Creator Communities、Creator Products 和 Creator Technology。光标停在哪一圈上，中间的玻璃球里就换成那块业务的现场照片，点下去就进入那个房间。

四个房间的页面都按同一个顺序排。最上面是一屏三维房间和业务名，往下是一句表态的大字，比如媒体房间写着 The new media empires will start with a person，再往下是一组照片和一张名单，名单的每一行都链接到旗下真实的公司或活动。媒体房间里有 20 位创作者，社群房间有 4 个活动，产品房间有 8 个品牌，技术房间有 5 个工具。每个房间的页面最后都写着 NEXT 和下一个房间的名字，四个房间首尾相接，访客一路往下读，就会把整个生态走一圈。

网站的菜单里另有三个去处。About Us 打开一块白色的宣言面板，写着这家公司的使命，结尾是 Steven Bartlett 的手写签名。Join Us 页面把访客按身份分成创作者、创业者、企业、想加入团队的人和求职者五种，各给一个入口，这是网站最终要把访客带去的地方。Press & News 页面集中了公司的新闻报道，这一页的样式和首页页脚上的入口是获奖之后才改的。

网站最主要的一条视觉规矩，是把画面压在一块近黑的底色（#121212）上，只把三维装置和房间打亮，文字和按钮都缩成小字退到四边。首页正中是一个打磨过的金属环仪，环仪中间嵌着一颗玻璃球，黑、白、灰之外几乎没有别的颜色。房间则换了一种画法，人物和道具都用白色的手绘线勾在黑暗里，只有墙上屏幕里的照片保留了真实的颜色。OFF+BRAND. 在案例页里说，手绘插画的温度和精确的版面放在一起，是为了表达这家公司的核心主张，在一个越来越依赖 AI 和自动化的世界里，最有价值的仍然是人。网站上的创作者和活动都用真实的照片展示，房间里的人物和道具则全是画出来的。

颜色只用在四块业务上。媒体是红色 #ff5541，社群是绿色 #51b75a，产品是蓝色 #5595ff，技术是黄色 #ffdd4b。每种颜色只出现在属于那块业务的几个小地方：标题下面的手写笔触、表态大字里的关键词、房间左下角的圆形标记、菜单里那一项的笔触，以及照片墙里光标停住的那张照片上的色块。整个网站的其余部分只有黑、白和几级灰，所以访客一看到颜色，就知道自己在哪个房间。

字体分成两种角色。标题用窄长的大写字 Field Gothic，这是一款笔画末端不带装饰的无衬线字体。房间名在 1920 宽的屏幕上约 110 像素，行距压到字号的 0.73 倍，两行字几乎贴在一起，像一块印上去的标签。正文、按钮和表态大字用 Host Grotesk，表态大字用的是细字重，导航用约 14 像素的小号大写字，字距放宽到 0.05 em。标题、正文、导航和按钮的字号以及页面的边距，都按屏幕宽度从 320 到 1920 像素连续缩放，比如房间名从 50 像素渐变到 110 像素，所以版面在不同宽度之间没有突然的跳变。

手绘的元素是这套设计的另一半。每个房间名下面有一道一笔画成的笔触，颜色随房间换。首页环仪上的箭头和细线微微发抖，像是用手描上去的。About Us 面板的结尾是 Steven Bartlett 本人的手写签名。

这个网站的界面部件都做得很克制。页头左边是写着 STEVEN●COM 的标志，中间是一个时钟，轮流显示洛杉矶、伦敦和纽约三地的当地时间，右边是 MENU。菜单打开时，一块白色面板从右边滑进来，盖住屏幕的四成多，背后的场景变暗变糊。菜单项用灰色的大写标题字排成一列，当前所在的房间变成黑字，并带上这个房间颜色的笔触，光标停在另一项上时，那一项也会变黑并带上自己的颜色。按钮是两端圆头的细边胶囊，照片墙的照片平时是原色，光标停上去时盖上一层房间颜色，中间出现一排社交平台的图标。

右下角的开关可以把整个网站切到浅色。切换以后，页面变白，三维场景也换成另一套。环仪变成银白色，房间的底色变成白色，人物改用灰色的线来画。浅色模式下的技术房间里，一个灰色的人形站在一个由细线和黄色光环组成的球里，四周飘着几块显示软件界面的屏幕。

到了手机上，首页的标语移到屏幕顶部居中，下面多了一个 Our Ecosystem 链接，环仪放大到占满屏幕宽度。手机没有悬停，所以屏幕底部多了一个白色胶囊按钮，写着当前选中的业务，两边各有一个左右箭头。访客点箭头，胶囊里的名字和环仪上亮起的那一圈一起换，玻璃球里也换成那块业务的照片，点胶囊本身才进入房间。房间第一屏的右下角多了一个铅笔按钮，点下以后进入网站所说的 Sketch Mode，页面停止滚动，访客可以专心看房间。

加载画面的动作跟着真实的下载进度走。白底上的红色笔触从左往右画出来，画到哪里，下面的两位数进度就走到哪里，笔触前进得很平滑，不会因为一个大文件下完就突然跳一大段。进度到 100 以后，红色和灰色两道笔触继续往前跑，像笔尖从纸上划了出去。写着 STEVEN●COM 的标志随即移到正中，进度数字向上滚动着移出，标语则一个词一个词地向上滚动着出现。最后一团白光收拢成首页的深色场景，环仪从光里显出来。

网站的首页在没人操作时也不是完全静止的。玻璃球里的人像一直在换，几位创作者轮流出现，每人都是一小段会动的影像。环仪的两层圆环会随着光标的位置轻轻偏转，环上的箭头和细线也在微微抖动。

光标移到某一圈上时，网站先等 0.2 秒，确认访客真的停下了，才开始回应，光标只是划过时环仪不会乱闪。这次回应由几层动作同时组成。访客选中的那一圈留在原位、保持全亮，另外三圈在约 0.4 秒里往下沉一点，亮度降到三分之一。背景同时压暗，一盏灯打在选中的那一圈上，环上的箭头和细线淡出。中间的玻璃球用大约 1 秒放大到原来的两倍，那块业务的现场照片从球心向外铺开。光标离开以后，这些动作按原路退回。

访客点下去以后，镜头在约 2 秒里推进玻璃球。前半段两层圆环各转半圈，一边转一边化进一片放射状的模糊，画面边缘出现彩虹色的色散，在过程中途最强，然后慢慢退去。镜头推进的同时，玻璃球后面的房间也在往前推，所以访客感到自己是一路穿过玻璃球走进了房间。从房间回到首页（比如在菜单里点 About Us）时，同一段过程倒着播放，镜头带着彩虹色的拖影退出房间，退回环仪前面。

房间之间的切换换了一种方式。访客在页面最后点 NEXT 时，房间名的字母先拆开淡出，名单一行行淡去，画面随后变黑。下一个房间再从模糊里清晰起来，镜头往前推一点又退回原位，整段约 2 秒。

进入房间以后，画面一直在动。房间里的人物在做各自的动作，白色的线条每隔一小会儿就整体跳动一下，好像这一帧被重新画过一遍，有手绘动画的感觉。在桌面上，光标划过房间时，身后会拖出一条像铅笔画的白色细线，光标停下后不到半秒，这条线就消失了。镜头也会跟着光标的位置轻轻偏移。

访客往下滚动时，第一屏的房间名淡出，表态大字一个字母一个字母地亮起来。每个字母从十分之一的亮度亮到全亮，前后字母依次错开。亮起的进度完全挂在滚动位置上，访客停下，亮到一半的字就停在那里，访客往回滚动，字母会重新暗下去。大字下方的分隔线同时从左往右长出来，旁边的小标题和说明文字也跟着滚动逐渐变亮。

网站界面上的小动作都做得很快。右上角的 MENU 变成 CLOSE 时，每个字母都有上下两层，旧的字母向上滚动着离开，新的字母从下面滚动上来。字母之间错开约 0.035 秒，每个字母的切换约用 0.5 秒。菜单项的字母也是一个一个出现的。深浅色的切换在不到 0.3 秒里就完成了。

整个三维部分画在页面后面的一块 WebGL2 画布上，用的是 three.js，网页的文字和按钮仍由 Webflow 生成，叠在画布上面。首页的环仪和每个房间各是一个独立的场景，各自先画进一张离屏贴图，再由一个合成着色器决定这一帧显示哪一张、两张怎样混合。合成之后还有最后一道全屏处理，负责扭曲、桶形变形、色差、泛光、暗角和光标的铅笔线。所以前面说的穿过玻璃球和房间之间的切换，都是用 GSAP 时间线同时改变几个场景的镜头和这几道处理的参数做出来的。

以进入房间为例，它的时间线长 3 秒，按 1.5 倍速播放。环仪场景的镜头从 6.5 推到 1.75，两层圆环各转 180 度，放射模糊从 0 加到 25。色差强度从 3.5 升到 50 再回到 3.5，房间场景的镜头同时从 8 推到 3。房间场景只在要用的时候才创建，离开时就销毁。站点自带的调试面板显示，媒体房间每一帧要经过 12 道渲染，画约 9 万个三角形，发出约 50 次绘制调用。

环仪的悬停靠射线检测完成。每一圈旁边都有一块看不见的检测用网格，光标每移动一次，网站就从镜头向光标的方向发一条射线，看它碰到哪一块网格，再对应到那一圈的业务。悬停状态变化后，网站等 200 毫秒，再用 GSAP 推动背景色、灯光强度、几圈的位置和透明度，以及玻璃球的大小。访客点下去时，网站只把目标网址交给负责换页的 taxi.js。WebGL 一侧监听换页事件，再按从哪一页来、到哪一页去，在穿过玻璃球、房间之间切换和直接打开房间这三种过渡里选一种。手机上的胶囊按钮也是改写同一个悬停状态，所以环仪在手机上的反应和桌面一样。

中间的玻璃球是在 three.js 自带的物理材质上改写着色器做成的。它不往球里放任何三维物体，而是用球面每一点的法线方向去读一张平面贴图，平面的图因此像透过鱼眼镜头一样弯曲，再叠上一层玻璃高光和边缘变暗。球里的人像来自一张 4096 像素见方的序列帧贴图，贴图上按 16 行 16 列排着 256 帧，是五位创作者各一小段视频，着色器按每秒 24 帧换格，一圈约 11 秒。悬停时出现的现场照片是另一张贴图，着色器用从球心向外扩散的遮罩把它铺开。这样做不需要在页面里播放视频，人像和照片都只是贴图上的不同位置。

房间里的手绘效果完全是实时算出来的，模型本身没有画任何线。网站先用一个只输出法线方向的材质把房间画进一张离屏贴图，法线颜色突变的地方就是物体的轮廓和转折。线条着色器在这张贴图上做两次 Sobel 边缘检测，一次用正常的粗细，一次只用三分之一的粗细，并按噪声把采样位置挪开一点。两条线叠在一起，就像铅笔描了两遍。阴影部分用一张排线贴图来画，着色器先按法线和一个固定的光照方向算出明暗，再拿明暗和排线贴图比较，暗的地方留下排线。排线贴图的取样位置按时间每隔一段跳到一个新的位置，顶点也按同样的节奏被噪声推动，所以线条看起来每隔一会儿就被重画一遍。浅色模式只是把这道着色器的输出反相，就得到白底灰线的房间。

房间里的照片同样来自每个房间一张 4096 像素见方的图集，一个房间约 24 张，用实例化的平面一次画出，相邻的照片饱和度减半，墙后再围一圈印着照片的圆柱形背景。光标的铅笔线是一条跟着光标坐标更新的线条网格，先画进一张贴图，在最后一道全屏处理里乘上铅笔纹理，再按噪声逐渐显现和消失。这条线只在屏幕宽于 768 像素时打开，手机和平板要进入 Sketch Mode 才会打开。标题下的笔触和 About Us 里的签名是 Rive 做的动画，每个房间不需要各做一个文件，网站用 Rive 的数据绑定把颜色的名字和一个开始绘制的开关传进同一个动画。

这套做法的代价主要在下载上。OFF+BRAND. 在专访里说，网站必须加载得快、回应得快，这个站的取舍是让访客在打开时一次等完，之后每一步都立刻回应。访客不管打开的是首页还是哪个房间，加载画面都要等全部四个房间和环仪的素材下载完才放行。首页第一次打开要下载约 13.2 MB，其中 KTX2 贴图约 10.5 MB。最大的是四个房间的照片图集，每张 1.2 到 2.2 MB，其次是 1.4 MB 的人像序列帧，深色和浅色两套环仪缩略图也都一起下载。直接打开一个房间页约 14.4 MB，多出来的是照片墙的照片和 Rive 文件。手机和平板下载的文件和桌面完全一样。加载画面上的数字一直在走，首页要大约 10 秒才完整出现。

网站在运行时的负担上做了控制。画布滚出屏幕后就停止渲染，像素比在宽于 768 像素的屏幕上封顶为 1.5，在更窄的屏幕上封顶为 2。

主要的导航只能用鼠标或手指操作。在桌面首页上，键盘的焦点只能停在字标、深浅色开关、菜单按钮和 About Us 四个地方，环仪上的四个房间不在焦点顺序里，键盘用户只能打开菜单才能进入房间，About Us 和深浅色开关获得焦点时也看不出焦点框。网站几乎不理会减少动态效果的系统设置，只有时钟的数字和手机上的轮播会改成直接切换，穿过玻璃球的过渡和滚动里的动画都照常播放。

四个 Awwwards 分项里创意 Creativity 最高（8.17 分），可用性 Usability 最低（7.28 分），开发奖的分项里网页性能 WPO 最高（8.0 分），无障碍 Accessibility 最低（6.6 分）。

两个平台上的署名都只有 OFF+BRAND. 一家。这家公司的案例页列出的服务包括品牌、Webflow 开发、网页设计、WebGL、三维、Rive 和动效。