Boc.Studio

Boc.Studio 由 Jordi Canals 和 Oriol Bada 两人主持，做品牌识别、创意指导、二维动效、AI 制作和三维动画，客户里有 Audi、Skoda、Hays 和 Yaba。品牌工作室的官网通常先讲自己再放作品，这个站把顺序倒过来，整站只有一页作品列表，工作室的介绍收在页眉正中一个叫 INFO 的按钮后面。

身份交给开场来讲。一支 18 秒的循环影片铺满屏幕，里面是他们做过的片子，一条橙红色带子横在画面正中，带子上循环着字标、一句 Creative brand studio 加 Create, refresh and boost 的口号，还有 41.4120° N, 2.1580° E 这组经纬度和 Barcelona 这个地名。叫什么、做什么、在哪里，一条带子说完。带子是活的，光标扫过会被拨弯，然后弹回去。点一下或者滚一下，带子上的字缩成一个字标滑到左上角，整条带子升到顶收窄成页眉，影片退场，作品列表露出来。这段开场每次进站都放一遍。

作品列表是九行胶片。每一行属于一个项目，一串图片首尾相接向左匀速走，从 9 张到 31 张不等，横图 420 乘 236 像素，竖图 190 乘 236，下面一行小字写项目名、一句副标和 View project。鼠标停上去，这一行长高两成，其中一到六格图片换成无声循环的短片。这一页一共 2.8 屏，内容不靠往下滚，靠横着走。

每个项目有自己的案例页。以 CE Europa 为例，这是巴塞罗那格拉西亚区一家百年足球俱乐部的品牌刷新。页面分两栏，左边固定一块侧栏，标题下面是 Context、Insight、Idea、Application、Impact 五个章节，右边一路往下是 20 屏的图片和影片。章节跟着滚动自己翻页，滚到哪一段，对应的章节就展开，前一段折起来。Context 讲 1928 年十家俱乐部创立西甲，CE Europa 是其中之一，一个世纪后足球成了产业，这家俱乐部还留在原来的邮编里。Application 说到他们给俱乐部做了一个生成图案的工具，每一场比赛都能生成一张不一样的图。

页眉右上角挂着一只巴塞罗那时间的钟，旁边写着 Online 或 Offline，早上九点半到下午六点之间是 Online。整只钟是一个按钮，悬停时弹出 Say hola!，点下去是给 hola@boc.studio 写信。右下角没有 cookie 弹窗，只有一行滚动的小字，说这个站没有需要你同意的东西，只看哪些页面被访问过，不看是谁在访问。

版面只守一条规矩，作品占满右边，其余一切退到左边和顶上。侧栏 391 像素宽，只放 Work 一个 28 像素的标题和 All 加 Filter 两个 30 像素的开关，其余全空着。右边从 391 像素起到屏幕右缘，九行胶片每行 236 像素高，行距 15 像素，图片之间也留 15 像素的缝。整页没有一句自我介绍，最大的字是 30 像素。

全站只用一款字，PP Mori，两个字重，400 和 600。正文 15 和 16 像素，标题 28 和 30，页眉和侧栏的标签是 13 像素的 600 字重大写，字距放宽到 0.04em。INFO 面板里的介绍段落用 31 像素，客户和服务清单用 17 像素。

颜色只有三档。底色是接近黑的深蓝灰 rgb(24, 29, 33)，图片说明用两档灰，rgb(173, 173, 173) 和 rgb(138, 132, 132)，白字 rgb(243, 243, 243) 留给项目名和标题。橙红 rgb(255, 68, 33) 是品牌色，作品页上成片的橙红只有页眉那一条，38 像素高，页眉上的字是黑的。橙红铺满整屏的地方有三处，开场的带子、INFO 面板和 404 页面。

INFO 面板是这套颜色的另一面。点页眉正中的 INFO，一块 98% 不透明、带 8 像素模糊的橙红玻璃从上方压下来盖住整页。面板分四栏，联系方式、About、客户和服务，About 那段 31 像素的字里 creating、refreshing、boosting 三个词是白的，后面各带一个圆圈加号。面板底部横着一个 200 多像素高的 Boc.Studio 字标，颜色比底色深一档，像印在玻璃上。面板开着的时候滚轮仍然能推动下面的作品列表，透过玻璃能隐约看见胶片在动。

案例页换了一副面孔。侧栏里项目标题 28 像素，副标同样大小换成灰色，下面三个 13 像素的大写标签 SPORT、REFRESH、2026 交代类型、任务和年份。右边的图两种宽度，1,499 像素通栏和 746 像素的半栏并排，图与图之间 8 像素。CE Europa 的案例里有一张截图值得单独说，那是他们给俱乐部做的生成工具 Escapulapp，深蓝画布上是白色的 V 形条纹，右边一列滑块控制密度、大小和对比，下面是俱乐部的六个颜色和 1:1、4:5、16:9、9:16 四种输出比例。品牌不是一套静态的标志，而是一个俱乐部自己能反复使用的工具，这一张图把这句话说清楚了。

评委给 Design 7.4，四个维度里第二高，最高的是 Content 7.56。这个站的视觉语汇是借来的，深底、单一无衬线、灰阶说明文字，是作品集站的通行做法。它自己加的是那条带子、胶片行和橙红玻璃，Creativity 7.29 比 Design 低一点，和这个判断是一致的。

最见功夫的是开场那条带子。它不是 CSS 画的，是一块 1,920 乘 174 像素的 WebGL 画布盖在带子上，画布里跑着一个弹簧网格，横向 260 格，每格记一个位移。光标经过时，以光标为中心、半径为网格 14% 的一片格子被推开，每移动一像素 9 个单位的推力，格子之间以 0.3 的系数互相拉扯，每帧衰减到 92%，弹性 0.13，最多能把带子拉开 130 像素。每一帧把这张位移表写进一张数据纹理，片元着色器读出每个像素该往哪偏，再去带子的贴图上取色，偏出边界的像素直接丢掉，所以带子的边缘也跟着弯。代码里留着四套预设，shipped、bouncy、fabric、dust，还有一个在网址后面加 ?distort 就能打开的调试面板。拖动全程 60 帧。

带子变页眉的交接分三步。滚轮或点击之后先锁住滚动，一秒之内带子上的文字收成一个字标滑到左边 15 像素处，接着带子用 0.7 秒从屏幕中部升到顶，高度从 62 像素收到 38 像素，最后开场层被移除，作品列表淡入。整个过程 1.8 秒左右。

胶片行是纯 CSS 的跑马灯，一个 keyframes 从 0 走到 -50%，轨道内容复制了两份接在一起。每一行的时长按自己的长度算出来，长的 154 秒，短的 43 秒，所以九行的速度全部是 69 像素每秒。鼠标停上去，行高用 0.4 秒放大到 1.2 倍，一到六格图片换成 Mux 上 480p 的无声短片，跑马灯不停。页面滚动交给 Lenis，lerp 0.1。

案例页的侧栏章节跟着滚动走，Context 在 0 到 1,000 像素，Insight 从 1,500 开始，Idea 从 3,500，Application 从 6,000 一直到 17,000，Impact 从 17,500。点章节名也能直接展开。滚到 9,500 像素时左下角浮出一块橙红的 GET IN TOUCH 卡片，写着你的品牌是不是有点过时了，附 EMAIL 和 WHATSAPP 两个按钮。页面里的品牌影片 73 秒，悬停时一个 Play video 的标签跟着光标走，点一下带声音播放。

404 页面上 1,210 像素的 404 三个数字压在橙红底上，一块铺满屏幕的 WebGL 画布用同一套弹簧把数字扭变形，光标划过哪里，哪里的笔画就被拖走。下面一行滚动的字写着，探索也是我们工作的一部分，但你迷路了，Take me back home。

站跑在 Next.js 上，Turbopack 打包，Tailwind 写样式，内容来自 Sanity，视频走 Mux，部署在 Vercel。脚本清单里有 Lenis、GSAP 和 framer-motion。

第一次打开下载 4.0 MB，307 个请求，其中 2.5 MB 是那支 webm 格式的开场影片，脚本 328 KB 分成 20 个文件，字体 73 KB，作品列表的图片 0.8 到 0.9 MB。图片由 Sanity 按需生成，请求的是 2,560 宽的 webp，实际回来的是 AVIF，每张 20 到 45 KB。首字节 250 到 375 毫秒，首次内容绘制 780 到 844 毫秒，最大内容绘制落在第一行的图片上，880 到 1,108 毫秒，布局位移 0.0001。作品页连续滚动 59 到 60 帧，没有一帧超过 32 毫秒。

案例页是另一个量级。CE Europa 这一页滚完要 40 MB，其中 38 MB 是 Mux 的 HLS 分片，168 个请求，图片只有 1.9 MB。页面上最多同时挂着 5 个播放器，打开时只挂 2 个，其余滚到附近才生成。品牌影片设成 preload metadata，要点击才播，其余短片自动无声循环。连续滚动平均 58 帧，p95 帧耗时 35 毫秒，最差一帧 69 毫秒，慢的位置就在影片和播放器所在的前三分之一。

可访问性这一块没有漏项。页面声明了英文，有 header、main、aside 地标和跳到内容的链接。胶片行里 427 个链接看起来重复，真正的只有 204 个，每个都用 aria-label 写明 Open case study 加项目名，复制出来的那一份标了 aria-hidden 并从 Tab 顺序里去掉。焦点环是 2 像素的橙红实线。INFO 面板按 Escape 关闭。开场层用键盘关不掉，但 Tab 能穿过它落到下面的 WORK 链接上，回车就进去了。减弱动画的设置管到跑马灯、箭头和 404 的滚动字。

Content 最高，Usability 最低，差 0.72 分。公开的 19 条评委打分里，最低一位四项全给 6，最高一位给了 9.4、9.4、9.6 和 9，另有一位给到 8.8。Usability 被两位评委拉低，两人都给了 5，同时把 Design 给到 7。开场要点一下才能进、作品全靠横向的跑马灯，评委在这一项上分歧最大。

开发奖 7.30。WPO 7.6 最高，Animations 和 Accessibility 各 7.4，Semantics 和 Markup 各 7.0。五位开发评委里 Johannes Auffermann 给了 8.7，Markup 那一项给了满分 10，Balerein 给 6.45。

Awwwards 上的署名只到工作室一级，档案国家是西班牙，这是他们提交的第一个站，一次拿到当日站、开发奖和荣誉提名。站方在奖项页上的自述是 structure first, delight throughout，一个结构直接、靠动效和细小交互活起来的作品集。INFO 面板里把 Needless Studio 和 Social Coherence 列为更大的生态圈，两位主理人各自有 LinkedIn 链接。这个站没有在 FWA 拿奖。