illoca

Tracing Paper 是一款给建筑师用的 AI 设计工具，建筑师可以用草图、红笔批注和一句话描述去生成能继续修改的平面图和三维模型。illoca 在 2026 年 5 月 6 日宣布完成 1300 万美元的种子轮融资，由 Bessemer Venture Partners 领投，同时推出了这款产品。两位创办人中，Chin-Yi Cheng 来自 Google DeepMind 和 Autodesk 的 AI 实验室，Chiaowei Yu 曾带领 Tesla 的建筑信息模型团队。Unseen Studio 同时做了 illoca 的品牌、网站和动效，工作室在自己的项目页上写道，整套品牌都从纸出发，来自叠在一起的图纸、描图纸的透明感和铅笔留下的痕迹。所以网站介绍功能时，主画面用的不是软件界面，而是一张建筑师的书桌，五项功能被演成一个人从画草图到看见整栋楼的过程，软件的录屏只放在按钮打开的说明里。

访客的路径就是这个过程。首屏之后，五项功能按建筑设计本来的先后排开。第一项 Augmented Sketch 把草图描成平面图，第二项 Adaptive Massing 把平面推成楼的体量，第三项 Prompted Plans 用一句话生成办公室布局。第四项 Agentic Refinement 让建筑师用红笔圈出要改的地方，由系统去修改这些地方，第五项 Instant Facades 换外墙的方案。每一项都有编号、一句手写的口号（Intents, Translated!、Ideas, Shaped! 这类）、一句说明和一个 Watch the demo 按钮。按钮打开一张说明纸，纸上列出两三步用法，放着一段十几秒的产品录屏，最下面的 Open demo project 按钮会把访客带进 illoca 真实应用里的示例项目。

整页大约四十屏长，其中故事占了三十三屏左右。最长的一段在第一项和第二项之间，从 Augmented Sketch 的文字出现到 Adaptive Massing 的文字出现，中间隔了约八屏。访客在这里先亲手在纸上看到草图变成平面图，再看着平面图被擦淡、楼从纸上一层层升起。这两步是这个产品最核心的用法，网站把最多的滚动留给了它们，大概是有意的安排。之后相邻两项功能的文字之间各隔四到七屏。

镜头在各项功能上停留的方式也不一样。中间三项的文字出现时，镜头会完全停住一会儿，等访客读完才接着走。第一项时镜头只是走得很慢，最后一项时则一直在动。

故事讲完，页面换成一段海军蓝的结尾。一封公开信从信封里抽出来，开头是 To those who shape the world，信里说设计本来就是从草图、批注和对话开始的，Tracing Paper 是为这种工作方式做的。信之后是定价、常见问题和页脚。导航里的 Try for free 按钮从头到尾都在，定价的三档按钮分别通往注册页、一个候补名单表单和联系邮箱。

统领全站的是一张方格纸。页面的底色是米色 #EADFC9，上面铺着每格 16 像素的细线方格，竖线 #D3C9B5 比横线 #E3D9C3 略深，像建筑师用的绘图纸。三维画面开在这张纸上的一个窗口里，窗口的四条边都按方格来算位置。首屏时，窗口离左右两侧各两格，顶边在从上往下数第二十八格，正好落在标题下方。讲功能时，窗口从一侧让出三十八格的宽度给文字栏。因此文字、窗口和底纹始终对在同一套格子上，网页的部分和三维的部分看起来像画在同一张纸上。

窗口里的三维场景只用两种颜色。被光照到的面是暖灰的米色 #C2BBB0，背光和落在阴影里的部分是钴蓝 #0248B6，两种颜色之间是一条硬分界，没有渐变的过渡。阴影的边缘被打散成细碎的颗粒，像喷漆喷出来的边，物体表面上还压着一层纸张的颗粒，轮廓再描一圈黑色细线。这几样东西合起来，让一个实时渲染的三维场景看起来像一张双色印刷的插画，也和建筑图纸常见的蓝色对上了。楼体和树是两处明显的例外。楼用的是浅一些的钢蓝（#ABBBCB，阴影 #5D85AC），所以楼从桌面的深蓝里分得出来，树则用了一种灰绿色。

字体按四种角色分工。大标题用 F37 Analog，首屏的标题在 1920 像素宽的屏幕上是 148 像素，大约是正文的七倍，功能标题约 100 像素。说明文字和问答用 Graphik，正文 20 像素。导航、按钮这些操作用的字用等宽的 Geist Mono，读起来像软件界面。还有一款手写字 Architect Pro，用在功能的口号、左上角的坐标读数、CLOSE 和邮箱上，像建筑师在图纸边上写的批注。标题和正文的字号都随屏幕宽度等比缩放，1366 像素宽的笔记本上，首屏标题约 105 像素。

网站页面顶部和两角的小部件像绘图软件的界面。导航是居中的一张白色卡片，左边是 illoca 的标志，由四块小方砖组成（横线、三角、圆、四分之一圆），右边是海军蓝 #283F7D 的 Try for free 按钮，按钮左侧嵌着一块橙色 #EC633D 的小方块图标。光标悬停时，导航链接变成蓝色并出现一条点状下划线，Try for free 整块变成更亮的蓝色，橙色方块变成深蓝，里面的图标也换了一个形状。左上角那组手写的坐标会实时显示光标所在的像素位置，就像绘图软件角落里的坐标栏，右上角则是手写的联系邮箱。

网站页面中间的部件则像桌上的纸和文件夹。Watch the demo 按钮是白底，左边一块红色箭头方块，按钮打开的说明纸是一张米白的纸片，停下来时还歪着大约一度，像随手放在桌上的一页。定价放在一个带 PRICING 标签的牛皮纸文件夹里，三张卡片分别是白色、橙色和蓝色，问答放在另一个文件夹里。公开信一段换成海军蓝底，标志的四块方砖在这里变成四个立体的方块，浮在信封周围。

同一套版面在手机和平板上改成了上下排。导航卡片只留下 illoca 的名字、Try for free 按钮和一个 Menu 按钮，首屏标题居中排成三行，窗口占满竖着的屏幕。每一项功能的文字移到窗口下方，居中排列，说明纸改成贴着屏幕底部，盖住下方约三分之二，仍然从侧面转进来。屏幕窄于 1024 像素时，镜头换用另一段专门为竖屏做的动画，所以建筑师和楼在窄屏里仍然在画面中间。

几乎所有动作都用同一条缓动。团队自己定义了一条起步很快、落定很长的曲线，作为全站的默认缓动，默认时长 0.8 秒。开场时窗口的打开和导航的悬停，用的是另一条两头慢、中间快的曲线。文字的出场也统一成一种做法，标题、口号和说明都拆成单个字母或单词，一个接一个淡入，相邻两个只差几十分之一秒。大标题还分成两层出场，先出现一层浅灰的底稿，过零点几秒再出现深色的字，像先打草稿再上墨。

开场时，页面中央先是标志的四块方砖在反复变形。大约两秒半后，纸的正中开出一个小口子，四边同时往外退，用 1.8 秒开成首屏的窗口，镜头也同时往前推近书桌。标题的浅灰底稿在窗口开始打开后 0.3 秒开始逐个字母出现，深色的字在 0.7 秒开始，每个字母比前一个晚 0.04 秒，左右两处手写字和它们的下划线、箭头随后画出来。到 1.6 秒，网站才放开滚动。

开场之后，画面上的一切都跟着滚动位置一帧一帧走，滚轮停下画面就停，往回滚动就倒着放。平滑滚动让页面每一帧只追上剩下距离的一小部分，所以松开滚轮后，镜头还会顺着惯性滑一段才停稳。从第一屏滚到页脚，画面一直保持每秒 60 帧。

镜头、窗口和文字栏在滚动里轮流动。往下滚动时，窗口先往上长到导航下方，标题往上移走，镜头从建筑师身后推到桌面。每到一项功能，窗口就收向一侧，文字栏从屏幕外斜着转进来，起点倾斜四十五度，转到底时正好摆正，镜头也在这时停住或者放慢。等访客读完再往下滚动，窗口重新张开，镜头接着走。桌上的楼也挂在同一条滚动的时间线上，楼层一层一层从纸上升起，然后楼顶被切开，家具出现，外墙换样，每一步都是滚到那里才发生。

整个站的招牌互动在描图纸上。讲到 Augmented Sketch 时，光标移到纸上，光标周围一圈的铅笔草图会变成干净的平面图，露出底下的方格，树也从铅笔圈变成深色的实心圆。这一圈的边缘不整齐，像晕开的墨，而且它不是紧贴着光标，每一帧只追上光标的一部分距离，所以移动光标时它会稍慢一拍地跟过去。光标离开纸面，这一圈就在 0.75 秒里扩大到整张纸，光标回来时再用 0.5 秒缩回去。继续往下滚动，这一圈会自己长大，直到整张纸都换成平面图。之后一道毛边的分界扫过纸面，把纸上的图淡去一半，楼也在这时开始从纸上升起。手机和平板上没有这个互动，那里的纸面只跟着滚动变化。

其余几个动作同样跟着滚动走。在 Prompted Plans 一段，楼前的提示框会随着滚动一个字母一个字母地打出 Create an office layout，打完之后，办公桌椅出现在切开的楼层里，颜色从和楼一样的灰蓝变成品牌的钴蓝。在进入 Agentic Refinement 之前，桌上另一张图纸上的红笔批注也随着滚动一笔一笔画出来，往回滚动时就一笔一笔消失。

点击和悬停的回应都比较短。Watch the demo 打开的说明纸从左下方转进来，起点歪着二十度，0.8 秒后转到只差一度，停在那里不摆正，关掉时用 0.6 秒先慢后快地甩出屏幕。导航链接悬停时，一个蓝色的同样的词从左边滑进来，原来的词往上卷走，点状下划线从右边滑进来，三样东西都在 0.4 秒里完成。

结尾的公开信用了两个不同的动作。故事讲完时，公开信这一段从屏幕底部往上盖住书桌，盖住的边缘是一条斜线，越接近盖满越平，像一张纸从下面推上来。信封周围的四个方块平时轻轻上下浮动，光标扫过其中一个，它会被往光标移动的方向推开并翻转一下，然后像挂在弹簧上一样晃回原位，大约三秒停稳。

整个故事画在一块全屏的 three.js WebGL 画布上，网页上看到的窗口其实不是画布的边。画布始终铺满屏幕、固定在网页后面，窗口是四块米色的网页面板用 clip-path 从四边盖住画布留出来的，GSAP 同时补间这四块面板的裁切值，就能让窗口开合、偏向一侧。窗口变化时画布本身的大小不变，所以不需要重新设置渲染尺寸，四块面板又画着和页面一样的方格，所以网页和画面之间看不出接缝。

这块画布画得清晰，靠的是比屏幕多画一些像素。渲染的像素比被限制在 1.5 到 2 之间，普通密度的屏幕上也按 1.5 倍画再缩小，再加上浏览器自带的多重采样抗锯齿，细描边和图纸上的线条因此不会出现锯齿。站点的框架里还建好了一个合成器和 FXAA、色差、桶形畸变、暗角、噪点这些后期处理，但每一帧都是直接把场景画到屏幕上，没有经过合成器，所以画面的质感全部来自材质本身。

双色印刷的样子来自一套自己写的卡通着色器，书桌场景里的人物、家具、纸张和楼都用它。着色器先算表面朝向和光线的夹角，过了一个很低的阈值（0.1，过渡宽度也只有 0.1）就从阴影色直接跳到底色，所以明暗之间是一条硬线。场景里有两盏方向光投 PCF 阴影，阴影的软边被乘上一张 Voronoi 噪声图做成的喷雾遮罩，于是阴影边缘碎成颗粒，最后再用叠加混合压上一层纸纹噪声。物体的轮廓线是用 EdgesGeometry 生成的线段，全局统一黑色、粗细 0.6。每个物体的底色和阴影色都是着色器里的参数，团队在 Theatre.js 的编辑器里逐个调好再存下来，色调映射是关掉的，屏幕上的颜色就是调色时定下的颜色。

三维画面里的一切动画都排在 Theatre.js 的一条时间线上。镜头的路线是预先做好的动画，跟着模型一起存在 glb 文件里，电脑和窄屏各有一段。Theatre.js 里有一条轨道把这段镜头动画的进度当成一个从 0 到 1 的数，在 27.5 秒长的序列上打了十二个关键帧，人物的动画、各层楼的升起、外墙的显隐、着色器的参数和两盏灯的位置，也都打在同一条序列上。Theatre.js 的编辑器界面只在开发环境加上 ?gui 参数时才加载，线上只加载它的播放核心和打包进脚本的动画数据。

把这条时间线和网页的滚动对齐，靠的是一个很简单的拆法。网站把镜头轨道上每相邻两个关键帧之间的那一段，各包成一个暂停的 GSAP 补间，再让网页上每一段内容的 ScrollTrigger 把自己的滚动进度交给对应的那一个补间。网页上一段内容有多长，就决定了镜头那一段走多慢，所以改了排版，镜头也不会和文字错位。比如镜头从第一项走到第二项的那一段，在时间线上只有约 2.3 秒，却分到了约 5,600 像素的滚动，是第一项功能前面那一段的两倍长，楼从纸上升起主要就发生在这一段里。屏幕窄于 1024 像素时，网站换用窄屏的那段镜头动画，它在 Theatre.js 里有自己的一组关键帧，时间也稍有不同。滚动本身交给 Lenis，lerp 设成 0.06，页面每一帧只追上剩余距离的 6%，惯性因此很长。

纸面上的几个效果各有省事的做法。描图纸的着色器同时读三张图，分别是铅笔草图、干净的平面图和方格。网站用射线检测算出光标落在纸上的哪一点，着色器以这一点为圆心画一个圈，用 Perlin 噪声把圈的边打乱，圈里显示平面图。红笔批注没有用视频，而是用了 49 张 JPEG 帧。网站按滚动进度挑出一帧，画进一块 2D 画布，再把这块画布当作贴图更新到纸上，所以往回滚动时也能准确地停在任何一帧。

结尾的两个场景也用了省事的做法。公开信的转场把信的场景先渲染到一张离屏的渲染目标里，贴在主镜头正前方的一块平面上，用一条斜线的遮罩把它从下往上露出来。转场一结束，网站就停掉书桌的场景并关闭阴影贴图，后面几屏只画信和页脚两个很小的场景。信封周围的方块用简单的阻尼弹簧，位置和旋转各有一组，光标第一次碰到方块时给它一个沿光标方向的冲量。

这套做法要先下载约 8.4 MB。最大的是三维模型，约 5 MB，其中那栋会升起的楼占了 3.7 MB，书桌场景约 1.3 MB。模型用 DRACO 压缩，解码器由网站自己托管。贴图用 KTX2 格式（Basis Universal 压缩），一共约 1 MB，转码器另有约 230 KB。其余主要是约 0.65 MB 的脚本，和约 1 MB 的 JPEG 图片，包括红笔批注的帧和定价、页脚用的图。

手机、平板和电脑下载的是同一套资源，窄屏上换的只是镜头动画和版面。网站会读显卡的型号，遇到英特尔的入门级集成显卡，就把阴影贴图从 2048 降到 512。这套资源里另有两处用不上的部分。首页向 Google Fonts 请求了六个字族的样式，真正用到的只有 Geist Mono，好在浏览器不会去下载没用上的字体文件。开发时用的轨道控制器、变换控制器和模型拖放，和场景的基础代码打包在同一个约 76 KB 的脚本里，线上访客也会把它们一起下载下来。

网页本身打开得很快，屏幕上 0.4 到 0.5 秒就出现了东西，布局几乎没有跳动。但访客要等大约 4.5 到 5 秒才看到完整的首屏，因为标志的加载动画要放完，窗口才开始打开。加载过程中页面一共卡住约 1.2 秒，最长的一次接近半秒。

键盘可以走完整个站，每个链接和按钮都有看得见的焦点框，PageDown 和空格能推动整个故事，按 Tab 时页面会跟着滚到下一项功能的按钮。说明纸打开后，焦点被锁在纸里，按 Esc 可以关掉，关掉后焦点回到原来的按钮。读屏软件能读到功能的标题和说明，以及后面的公开信、定价和问答，但镜头里发生的事全部在画布里，没有文字描述。网站也不读系统的减少动态效果设置，开了这个设置，镜头和逐字母的动画仍然照常播放。

illoca 最早的奖是 8 月 13 日的 FWA 当日最佳，得分 86，FWA 把它归进建筑与设计、推广和 AI 三类。9 月 4 日，它拿到 Awwwards 的当日最佳，总分 7.44，同一天还拿了开发奖。在 Awwwards 的四个分项里，创意 Creativity 最高，为 7.70，把产品功能演成书桌上一个不切换的镜头、让访客在描图纸上亲手看到草图变成平面图，可能是这一项高的原因。设计 Design 最低，为 7.33，五项功能用的是同一种文字栏加窗口的版面，故事之后的定价和问答也是比较常规的排法，这可能拉低了这一项。

开发奖评委给了 7.55 分，其中动画 Animations 最高，为 8.40，语义 Semantics 最低，为 6.80。这和工程章里的情况对得上，网站的镜头和过渡做得很完整，但故事全在三维画面里，页面上能读到的结构很少。响应式 Responsive Design 得了 7.60，窄屏上换了竖屏的镜头动画和上下排的版面，说明纸改成贴着屏幕底部，这一项的分数和手机上的表现相符。

Unseen Studio 是两个平台上的常客，表中的数字截至 2026 年 10 月 24 日。两个平台的署名都只有 Unseen Studio 一家，没有列出个人。Unseen Studio 在布里斯托和伦敦都有办公室，工作室在 Codrops 的专访里说，十四年前由三个朋友创办，现在做品牌、数字和动效三类工作。这个项目的品牌识别、网站和动效都由 Unseen Studio 完成，客户是 illoca，项目页上写的时间是 2026 年 5 月，也就是 illoca 宣布融资和推出产品的那个月。品牌和网站出自同一个团队，所以纸、描图纸和铅笔这套说法能从标志一直延续到网站的导航、按钮、说明纸和文件夹。