Léo Parpeix - Portfolio 2026

作品集通常是一面墙，上面挂着一张张图。这一份是一间屋子，你是走进去的。

网站打开的第一屏不是一张海报，是一间三维渲染的雕塑工作室：奶油色的灰泥墙、三扇拱形窗、人字拼的木地板、一架靠着的木梯、几个摆着几何小样的台子。正中间的台子上立着一朵有脸的石膏雏菊，而右边墙上挂着同一朵花的设计图。

成品和它的图纸放在同一个房间里，这一个画面就把整个站要说的话说完了。旁边只有一行字：Driven by detail. Obsessed with seamless motion.

往下每一段换一个房间。图书室是暖色木书架、粉彩色的书脊、斜靠的梯子和几幅剪纸风格的画。89 张压缩纹理和 6 个三维模型撑起这些场景。

最特别的一步是，好玩的地方它直接告诉你在哪。页面中段有一只三维黄蜂在飞，下面配一行小字：点一下喂蜜蜂。同样的做法还用在鼠标上：你一动鼠标，一个黄色小胶囊跟着出现，写着点一下开声音。

这个站不把彩蛋藏起来等你发现，它直接告诉你点哪里。对作品集来说这是个聪明的取舍：藏起来的彩蛋大部分访客永远发现不了，明说出来反而真的有人去点。

把彩蛋明说出来，换来的是访客愿意多停一会儿。丢掉的东西也有两样。一是打开这个站要先下载 31 MB，其中 25 MB 是纹理，这间屋子布置得非常实。二是这套布置把注意力引向房间本身，而不是房间里陈列的作品，二十多个项目最后被压成一张表格和一排缩略图。

柔光、哑光石膏、浅景深、素木头，这一路画风近几年做三维产品图的人都在用，不是他发明的。真正原创的是那朵花。把一个有表情的手工小摆件做成自己的标志，然后在整个站里反复用。

颜色用得极少，而且这里的黑其实不是黑。全站只有三种文字颜色：纯黑用在 631 个地方，一种极深的墨绿用在 592 个，米白 94 个。那种墨绿深到几乎看不出是绿，站上的大字差不多全用它。

所有三维场景里的暖色调都是渲染出来的，不是 CSS 里的颜色，所以 CSS 这一边看起来近乎素净。这是个值得记的分工：画面归画面，界面归界面，两边不互相借色。

鲜艳颜色用得非常省。全站只有四个地方是亮的：那只黄蜂、跟着鼠标的黄胶囊、项目条上那个写着"拖"的黄标签，以及页脚 JOURNEY 里字母 U 的空腔中嵌的一个橙点。黄色只留给"这里可以动手"这件事，别的地方一概不用。

字体只有两款。一款专做大字，只写了 247 个字符，却占了 519 万平方像素，字号从 19 跨到 216px。另一款做正文，写了 9,712 个字符，占 344 万平方像素。也就是 2.5% 的字数占了画面六成的面积，整页的分量几乎全压在少数几个巨大的词上。

圆角基本是零：1,103 个直角元素，只有 4 个带一点小圆角。

图像上有三样东西在轮流出场。三维渲染的室内场景做每一段的背景。项目缩略图和视频有二十多段，横着排成可以拖的条带。剩下的是那朵花和那只蜂，它们不属于任何场景，直接浮在版面上。

内容上最见功夫的是 Archives 那张表。它把作品集常见的"大图配标题"换成了一张表格：每个项目一行，列出年份、拿过几个奖、团队几个人、在哪家公司做的，以及他本人具体负责什么。比如 Dioriviera 那一行写的是五人团队，在 ImmersiveGarden 做的，他的角色是艺术总监兼界面、三维和交互设计。

一份用来找工作的作品集，主动交代"我是五个人里的一个"，这在这类站里很少见。别人用大图撑场面，他用信息量撑场面。把话说实了，看的人反而更容易判断他到底能做什么。

排版上有一处硬伤。Passionnate 这个词拼错了，正确写法是 Passionate，而它是一个 216px 的标题。一份以"注重细节"开场的作品集，在全站最大的字号上出现拼写错误。

往下滚的时候，动的不是页面，是一台在房间里往前走的摄影机。

画面这一层是两块 three.js 画布，其中一块的实际渲染尺寸是 3840×1890，而显示出来只有 1920×945，正好是两倍。这不是高分屏造成的，是主动选择的两倍超采样。代价是像素着色的工作量变成四倍，换来的是三维边缘一点锯齿都没有。

全站没有第二个地方这么费显卡，这也解释了动效那一项为什么打得这么高。想让三维画面看起来干净的人可以记住这个取舍：超采样比任何后期抗锯齿都直接，但 GPU 开销是实打实的四倍。

平滑滚动用的是 Lenis。两个帧率数要分开看：停着不动是 60.1 fps，一帧不掉。一边滚一边测是 58.9 fps，把页面切成十二段，前三段是 60、55、49，后面九段全是 60。掉帧集中在从三维首屏过渡到内容区的那一段，过去之后一路稳到底。

页面稳定性很好，访客坐着不动的时候页面完全不抖，而且版面和最大的那块内容几乎同时出现。在一个 31 MB 的三维站上做到这个，说明他们是先把结构画出来再上资产的。

声音是四个音轨，默认音量 0.7，要点一下才会开。站上是有提示的，只是提示很容易被漏掉。它做在跟着鼠标的那个黄胶囊上，鼠标不动，胶囊就缩成零，什么都看不见。不习惯动鼠标的人会以为完全没有预告。

招牌小动作是那只蜂，它跟着页面飘，可以点，点了有反馈。

减弱动画这个偏好，它一点都没做。样式表里没有对应规则，代码里也没有判断。开不开这个设置，页面跑的动画数量一模一样。

Vite 构建的单页应用，一个主文件。两块 three.js 画布，音频用 Howler，滚动用 Lenis。

打开一次下载 31.8 MB，大头是 89 张压缩纹理共 25.5 MB。文件名直白得可以当场景清单看：树的前后两层各占 1.7 MB 和 1.6 MB，地板 1.5 MB，地面 1.4 MB，石头 1.25 MB。几何模型是 6 个文件共 2.3 MB，最大那个叫 scene_v15.glb，版本号写在文件名里，说明这个场景迭代到第十五版。剩下是图片 2 MB、音频 785 KB、解码器 327 KB、脚本 435 KB、字体 109 KB。

用 KTX2 这种压缩纹理格式是对的：它在显存里保持压缩状态，25 MB 的下载量不会像普通 PNG 那样在显卡上膨胀好几倍。代价是第一次进来必须把它们全部下完，而且没有做任何分批加载。这是个明确的取舍，想做三维站的人可以照着算：纹理格式决定显存占用，加载策略决定首次进入的等待时间，两件事要分开考虑。

首屏速度反而不错，版面三百到六百毫秒就出来了，因为三维资产是页面加载完之后才由代码去取的。

无障碍是这个站最弱的一块。做对的只有两条：页面标了语言，24 张图全部写了空 alt，一张都没漏。

其余基本是空的。整页只有一个 <main> 地标，页眉、导航、页脚、区块这些标记一个都没有，也没有任何元素说明自己是什么角色。没有跳到主内容的链接。全站唯一的 H1 是页眉那个 18.67px 的小字标，而版面上最大的那些字，包括 216px 的 INTERACTIVE DESIGNER 和那个拼错的 Passionnate，全都是 H2。

好几处一句话被拆成连续的几个标题，比如"让我们一起"、"创造一段"、"难忘的旅程"是三个独立标题。视觉上是一句话换三行，读屏器会当成三个标题分别念出来。

焦点框完全没有。用键盘浏览的时候，焦点走到哪里都看不出来，而且第一次按 Tab 落到的是那个声音按钮，它既没有名字也没有文字。所以只用键盘的人一进来就卡住，既不知道自己停在哪，也不知道按下去会发生什么。

四项里只有 Creativity 上了 8，Usability 最低。五位评委的总分是 7.00、7.20、7.00、7.40、7.40，挤得很紧，没有一张明显偏低的，设计这几位评委的看法相当一致。

开发奖那边的高低差大得多，而且评委的打分说得很直白：动画 8.40 明显高出一截，语义和无障碍并列最低，都是 7.00。最能说明问题的是乌克兰那位评委的单张评分，他给动画打了 10 分满分，给语义、无障碍、性能都打了 6 分。

这张评分卡和站点的实际情况几乎逐条对得上。动效这边，页面不抖，滚动 58.9 fps。语义这边，全站只有一个地标，也没有任何角色标记。

这是 Parpeix 的第一次 SOTD，之前是五次提名。他在 Awwwards 主页上写明自己在 Locomotive 任职，同时直接挂着一句"我在找一份好公司的自由职业工作"。

这份作品集有很明确的商业目的，而页面上每一个决定都在为它服务，包括那张主动交代团队规模的表。对找工作的人来说，诚实比夸大更有说服力。