Immersive Garden

Immersive Garden 由艺术总监 Dilshan Arukatti 创办，网站的奖项一章写着，工作室从 2014 年起给全球品牌和代理商做获奖的数字体验。团队在 2025 年 3 月发表于 Awwwards 的案例文章里说，新版官网是全部项目的展示柜，访客可以读到每个项目的完整案例，还可以打开 Backstage（幕后）部分，看团队用了哪些工具、画过哪些草图、遇到过哪些难题。文章还写道，团队要在极简和有氛围之间找到平衡，花在删东西上的时间比加东西还多。浮雕也出自这个想法，团队说它给网站加了一层可以触摸的手工质感，也表明了工作室对自然形态的偏爱。

工作室官网常见的做法是一页项目缩略图，这个网站却把首页做成了一面很长的墙。访客打开网站后先看到一个浅灰色的画面，左边是工作室的标志和一句 Innovative digital experiences studio，右边的数字从 0 数到 100，大约九秒后，石膏墙在这些字下面淡入。访客往下滚动，先看到一句很大的宣言，再看到一段讲工作方法的 Our approach，然后是 18 个精选项目，从路易威登的 VIA 到卡地亚的三次活动。每个项目是一段视频或一张图，配一段一句话的介绍，视频和介绍在墙上左右错开摆放，第三个项目之后还插着一句讲使命的 Our mission。整个首页大约 53 屏长，最后一屏是黑底上的一个 See all projects 链接，把访客带到完整的项目列表。

53 屏的长度意味着访客要滚很久才能看完，网站为此加了一个快速滚动模式。访客连续用力往下滚动时，页面会拉远成一份目录，项目名一个接一个排在屏幕中间，旁边只留下小小的缩略图。访客停手之后，页面又落回停住的那个项目。同一条长页面因此有两种看法，访客可以一个项目一个项目慢慢看，也可以很快翻到想看的那一个。

这个网站在首页之外还有四类页面。右上角的 Menu 打开一面黑色的大理石浮雕墙，墙上列着 The Studio、Our approach、Services、Awards、Clients 五个入口和一个 Contact us。每个入口通向一章介绍工作室的页面，六章依次编号为 I 到 VI，访客滚到一章的末尾会直接进入下一章，第六章之后又回到第一章。项目列表页列出了大约 60 个项目，访客点击空白处可以按项目类型筛选。每个项目页有标题、一个打开原网站的 Launch website 链接和右侧的 See backstage 入口。

联系工作室的路放在每一页的最后。访客在首页和项目列表滚动到底时，都会看到一块黑色的结尾画面，上面写着工作室的邮箱 inquiries@immersive-g.com，旁边有订阅通讯的 Newsletter 按钮。介绍工作室的第六章 Contact us 写着一句 Interaction begins with dialogue，下面是合作和求职两个邮箱，以及工作室在巴黎的地址。

这个网站的首页最主要的规矩，是只用一面灰白的石膏墙做底。项目视频和文字都贴在这面墙上，墙上除了作品只有浮雕，而且浮雕只出现在访客刚经过的地方。墙面本身因此一直很安静，整页的颜色几乎全部来自项目视频，访客的眼睛自然落在作品上。这条规矩有两处例外，菜单和介绍工作室的六章把底色反过来，换成黑色，项目列表和项目页则换成一张干净的浅色页面，不再有墙。

这个网站界面的配色只有两种，浅灰是 #E8E8E8，文字是接近纯黑的 #030303，石膏墙在画面上显示成略深一点的中灰。全站的文字几乎都用一款衬线字体（笔画末端带小装饰的字体）PS Times，来自字体公司 Parker Studio，而且只用一种字重，从开场那行字、宣言、项目介绍到菜单里的链接都是它。另一款无衬线字 Helvetica Neue 只出现在屏幕四角的小标签上，例如 Menu、See all projects、Scroll down 和声音开关。在 1920 像素宽的屏幕上，项目介绍约 48 像素，开头那句宣言约 74 像素，角落的标签只有 14 像素。大段的文字因此读起来像墙上的题字，标签则退到一边。字号以 1440 像素宽的版面为基准，随屏幕宽度等比缩放，屏幕超过约 1915 像素宽后不再变大。行距收得很紧，大多是字号的 1.1 倍。

版面用的是 12 栏的网格，栏距 16 像素，内容最宽 2088 像素。每个项目的视频横跨几栏、从哪一栏开始，都按项目单独设定，所以视频有的靠左，有的靠右，有的居中，介绍文字则摆在视频的另一侧。项目之间留着大片空墙，浮雕就在这些空墙上出现，整页读起来像一面随意挂着作品的展墙。

浮雕的样子决定了这面墙的气质。墙里藏着六组浮雕，分别以鸟、鹿、蜻蜓、青蛙、孔雀和松鼠为主角，周围缠着花朵、藤蔓和叶子，团队说它们用 ZBrush、Houdini 和 Blender 做成。浮雕和墙一样是纯白的石膏，光从左上方斜着照下来，在花瓣和羽毛下面投出柔和的阴影，表面还带着石膏粗糙的纹理。菜单把同一种浮雕换成了黑色大理石，花叶的轮廓上带着大理石的白色细纹。介绍工作室的六章没有浮雕，每一章的中央立着一个巨大的白色罗马数字，周围插着真实的花和干枝，数字下方的水面映出倒影，暗处还飘着几只萤火虫。

光标是一个小黑点，需要提示时，黑点旁边会出现一行小字。访客第一次点击页面之前，小字写着 Click to enable sound（点击开启声音），光标停在项目视频上时写着 Discover，在菜单的链接上写着 Click to explore，在项目列表的空白处写着 Click to filter。访客把光标移到菜单里的 The Studio 上时，这个链接会换成一句说明 Innovative Design Studio。右下角的声音开关在关闭时写着 Off，打开后变成一个圆圈。项目页把标题放在正中，上方是 Back，标题下是带下划线的 Launch website，右侧是 See backstage。

到了手机上，同一面墙和同一套浮雕照样保留。开场那行字和宣言折成好几行，项目介绍缩到约 28 像素，视频几乎横跨整个屏幕，介绍文字排在视频下面，角落里的 Menu、See all projects 和声音开关位置不变。

开场的加载画面本身就是首页的第一屏。浅灰色的空白画面停留约一秒后，标志和 Innovative digital experiences studio 几个词依次淡入，右边的数字随下载进度数到 100。下载完成后，石膏墙用将近两秒的时间在这些字下面淡入，镜头同时做一次缓慢的变焦，先快后慢地停住。右边的数字随后换成 Scroll down，四角的标签也随之出现。

浮雕跟着光标走。光标划过墙面时，沿途的浮雕从墙里鼓起来，离光标越近鼓得越高，光标移动得越快，浮雕也鼓得越高。光标离开后，这一道浮雕从尾部开始沉回墙面，大约一秒内就退平，光标停住不动的地方则一直保持隆起。访客不碰鼠标时，墙面也不会完全静止。网站每隔一到三秒会自己画一到三笔，每一笔不到一秒，路线带着轻微的抖动，像一只看不见的手在墙上随手划过，墙上就时不时浮起一片新的浮雕。访客往下滚动时，石膏墙移动的速度只有页面的四分之一，作品和文字因此像是挂在墙前面，和墙之间隔着一点距离。

光标移到一段项目视频上时，视频会略微放大一点，然后保持很慢的起伏，画面还会随光标的移动轻轻荡开。光标旁的 Discover 由几个字母组成，跟着光标一起移动。访客点击视频后，首页在不到半秒内淡出，项目页的大标题随后一点点长出来。标题的笔画先从很细变粗，字形同时从一处开始、边缘毛糙地逐渐显现，大约两秒基本到位。

快速模式是首页上最大的一次变化。访客持续快速滚动一小段时间后，整页在一秒半内拉远：项目介绍缩小一半并在半秒内淡出，视频缩成小缩略图，项目名放大成一列居中的标题，正在经过的那个是黑色，其余是浅灰。墙面同时整片浮起浮雕，而且这些浮雕随着滚动不断流动，画面也比平时更亮、对比更强。访客停手大约两秒后，页面在一秒多的时间里先快后慢地恢复原样，停在刚才经过的那个项目上。这个模式只在桌面上出现。

打开菜单的过渡同样从墙面开始。光标移到 Menu 上时，右上角已经渗进一小团墨迹。访客点击之后，墨迹带着毛糙的边缘在大约两秒内铺满整个屏幕，下面露出黑色的大理石墙，菜单里的链接随后淡入。关闭菜单后，画面先暗下来，再回到首页。访客打开声音之后，首页、项目页和菜单各有一段自己的背景音，打开菜单、进入某一章时各有一段过渡音效，光标停在 Menu、菜单链接和 See all projects 上时也会响起一个短音。

手机上没有光标，手指接过了光标的工作。手指滑动和点按的地方，浮雕同样会鼓起来再沉回去，那只看不见的手也照常在墙上作画。快速模式在手机和平板上不会出现，访客怎么快速滑动，页面都保持原来的版面。

浮雕墙是一个真正的三维模型，而且一直完整地放在场景里，网站只是在没人经过的地方把它压扁了。顶点着色器把每个顶点的深度乘上一个 5% 到 100% 之间的系数，这个系数来自一张 256 × 256 的 flowmap 贴图，它记录了光标最近经过哪里。flowmap 用两张渲染目标来回交替更新，每一帧先把上一帧的值乘以 0.953（按帧间隔换算，帧率变化时衰减速度不变），再在光标所在的位置盖上一个新的印。这个印的中间最强，向外逐渐减弱，半径约为屏幕高度的五分之一。印上还叠了一张噪声贴图，所以浮起的边缘是斑驳的。顶点着色器先算出每个顶点在屏幕上的位置，再到 flowmap 的同一位置取值。页面滚动时，flowmap 跟着往上挪，划过的痕迹就像留在墙上一样随墙移动。光标本身也做了缓动，记录的位置每一帧只追上真实光标剩下距离的四成，前面说的那道浮雕因此带着一点拖尾。

浮雕的明暗不是实时计算的，模型里也没有存法线，每个顶点只带位置和贴图坐标。团队把每一组浮雕在六种鼓起程度下的光照预先烘焙成六张灰度图，再把它们分别塞进两张 2048 × 2048 的 WebP 贴图的红、绿、蓝三个通道里，团队在案例文章里提到的通道打包，说的就是这种做法。片元着色器拿到和顶点着色器同一个鼓起程度，每隔 0.2 换一档，在相邻两档之间平滑过渡，所以浮雕越鼓，花瓣下的阴影越长、越深。最平的那一档在着色器里被一个固定的灰度代替，压扁的浮雕就和墙面颜色一致，看不出来。取完光照之后，再乘上石膏纹理，叠一层从上到下的淡淡渐变。

那只看不见的手是 flowmap 的第二个印。它的位置由一条 GSAP 时间线驱动，每一轮随机画一到三笔，每笔 0.7 到 1 秒，画完后停一到三秒再开始下一轮。每一笔的横向和纵向分开补间，缓动用的是带随机抖动的 RoughEase。这个印的强度是光标的三倍，而且只增加鼓起程度，不带移动方向。

这个网站首页的快速模式由一个小小的状态机控制。页面每一次平滑滚动都会把滚动速度减去一个门槛值，再按比例累加进一个 0 到 1 之间的进度，进度到 0.99 时进入快速模式，掉到 0.75 以下时退出。所以访客要持续快滚一阵才会触发它，偶尔滚快一下不会。进入时，一条一秒半的 GSAP 时间线同时推动网页文字的缩放和淡出、视频平面的视差、项目标题的显现和 2.5 倍放大，以及浮雕的一个开关。这个开关打开后，鼓起程度改由一张随滚动流动的噪声贴图提供，画面加亮、加对比，镜头拉远到原来的 0.6 倍。

整个网站的画面都画在一块铺满屏幕的 WebGL 画布上，由 three.js 绘制。首页、菜单和每个内页各是一个视图，先各自画进渲染目标，再由一道合成着色器把上一个视图和下一个视图混在一起。打开菜单时的墨迹就是这道着色器里的一张噪声遮罩，从右上角向外扩开，下面露出已经画好的大理石墙。项目视频也画在这块画布上，每段视频是一个贴着视频纹理的平面，跟着网页里一个空的占位元素摆放，所以视频的位置仍然由前面说的 12 栏网格决定。网页里另有一组尺寸为零、访客看不到的项目链接，它们随服务器渲染的 HTML 一起送出，搜索引擎因此仍能读到每个项目。

大号的标题用 PS Times 的 MSDF 字体图集画在画布里，粗细、淡入和遮罩是三条各长六秒的补间，各用一条开头极快、后面很长一段几乎不动的自定义贝塞尔曲线，所以前面说的项目标题大约两秒就基本到位。整张画面最后再过一道泛光和一道 FXAA 抗锯齿。

这套做法让访客等得比较久。服务器响应很快，开场那行字在 0.2 到 0.3 秒内就出现了，但加载画面要等首批资源全部下载完才退场，大约九秒。桌面上不滚动就要下载约 26 MB，其中三维模型约 13 MB，最大的是首页的浮雕模型 5.7 MB 和结尾那块黑色画面用的模型 3.6 MB。菜单那面大理石墙的模型和两张最大的法线贴图也在这一批里，网站在开场时就把菜单要用的东西一起备好了。访客之后往下滚动时，项目视频从团队在 Node.js 上搭的 Strapi 内容库里陆续加载，文件存放在 DigitalOcean Spaces 上，看完整个首页还要再下载约 50 MB。团队在案例文章里说，项目素材在服务器上统一转成 KTX 压缩纹理，三维模型的导出用 gltf-transform 和一套自写的 JavaScript 和 Blender 脚本自动完成。下载的文件也是这样，模型用 Draco 压缩，菜单墙的法线贴图是 KTX2 格式。

访客用不同的设备打开这个网站时，拿到的资源也不一样。网站用 detect-gpu 给显卡分档，手机、平板和性能较弱的显卡拿到精简版的浮雕模型，从 18 块网格、约 62 万个顶点减到 6 块网格、约 33 万个顶点，大小 4.6 MB，菜单墙也换成更小一档的贴图。画布的像素比最高为 2，最弱的一档只用 1。

这个网站只能用鼠标、触控板或手指来浏览。首页的滚动由平滑滚动库 Lenis 在一个容器里接管，方向键、空格、Page Down 和 End 都推不动它。Tab 键只能停在 Menu 和两个 See all projects 链接上，停到结尾那个链接时，页面会直接跳到最底部，所以键盘走不到首页上的任何一个项目。首页网页里的 39 张图片都没有替代文字（给图片写的文字说明）。系统打开减少动态效果之后，浮雕、快速模式和页面过渡照常播放。

Awwwards 的四个分项里 Creativity 最高，Usability 最低，开发奖的分项里动画 Animations 最高（8.8），无障碍 Accessibility 最低（6.6）。这个网站还拿到了 2025 年 Webby 奖网站类的最佳视觉设计（美学）奖，Webby 是一个评选优秀网络作品的国际奖项。

这是工作室给自己做的网站，两个平台都只署了工作室的名字。网站介绍团队的那一章列出了成员的分工，从艺术总监、动态设计师、三维艺术家、创意开发者到策略、制片和客户总监，但没有写这个网站具体由谁负责哪一块。